Docs/badge guide#263
Conversation
✅ Deploy Preview for industrial-experience ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Code Review
This pull request introduces the initial documentation structure and an ideation draft for the new Badge component, registering it in the sidebar. The review feedback highlights that several files still contain 'to be done' placeholders that need to be populated before merging, including integrating the draft content into the usage guide and defining the API properties. Additionally, the reviewer noted a couple of typos in the ideation draft and requested reordering the sidebar entry alphabetically to maintain consistency.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| to be done | ||
|
|
||
|  | ||
|
|
||
| 1. to be done | ||
| 2. to be done | ||
| 3. to be done |
| to be done | ||
|
|
||
| ## Further examples | ||
|
|
||
| to be done | ||
|
|
||
| ## API for Badge | ||
|
|
||
| ### Properties | ||
|
|
||
| to be done | ||
|
|
||
| ### Events | ||
|
|
||
| to be done | ||
|
|
||
| ### Slots | ||
|
|
||
| to be done |
| @@ -0,0 +1,5 @@ | |||
| --- | |||
| doc-type: "tabs" | |||
| description: 'to be done' | |||
| id: 'components/badge/index', | ||
| label: 'Badge', | ||
| items: [ | ||
| { | ||
| id: 'components/badge/guide', | ||
| label: 'Usage', | ||
| }, | ||
| { | ||
| id: 'components/badge/code', | ||
| label: 'Code', | ||
| }, | ||
| ], | ||
| }), |
|
|
||
| - **primary**: highlight new features, discoveries, or exploratory information | ||
| - **alarm**: show negative values, removals, or critical information e.g. when characters are removed from a line of code in Bitbucket, or when displaying critical counts. | ||
| - **critical**: ??? |
There was a problem hiding this comment.
TBD: in iX critical is not as bad as alarm, whereas in Element critical is worse than alarm/danger
destructive, e.g. something will explode
| - By default -10px for label, counter and status icon; -6px for dot | ||
| - Do not fully overlap the anchor icon. | ||
| - Do not place badge outside parent bounding box | ||
| - ▶️ Any recommendations?? |
There was a problem hiding this comment.
interesting when using rounded anchor elements like avatar
| - Labels are hug-width except max-width is applied | ||
| - **Overflow**: | ||
| - If a max-width is applied on label badges text gets truncated | ||
|
|
There was a problem hiding this comment.
ensure padding to avoid visual focus clipping
|
EIX-59 |
Added code, guide, index files and adapted sidebar.ts
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
3e36347 to
777251f
Compare
💡 What is the current behavior?
GitHub Issue Number: #
🆕 What is the new behavior?
Added the usage guide including code spec for badges
👨💻 Help & support