Skip to content

Docs/badge guide#263

Draft
kathrinschalber wants to merge 20 commits into
developmentfrom
docs/badge-guide
Draft

Docs/badge guide#263
kathrinschalber wants to merge 20 commits into
developmentfrom
docs/badge-guide

Conversation

@kathrinschalber

Copy link
Copy Markdown
Collaborator

💡 What is the current behavior?

GitHub Issue Number: #

🆕 What is the new behavior?

  • Added the usage guide including code spec for badges

👨‍💻 Help & support

@netlify

netlify Bot commented Jul 15, 2026

Copy link
Copy Markdown

Deploy Preview for industrial-experience ready!

Name Link
🔨 Latest commit 6785fa0
🔍 Latest deploy log https://app.netlify.com/projects/industrial-experience/deploys/6a63608d1e3ff80008bae501
😎 Deploy Preview https://deploy-preview-263--industrial-experience.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai

coderabbitai Bot commented Jul 15, 2026

Copy link
Copy Markdown

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 57661994-b596-4dd8-9dcd-a2e9f35a8f32

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/badge-guide

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread docs/components/badge/guide.md Outdated
Comment on lines +7 to +13
to be done

![Badge overview](to be done)

1. to be done
2. to be done
3. to be done

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The usage guide currently contains only 'to be done' placeholders. Please integrate the draft content from ideation.md into this file before merging.

Comment thread docs/components/badge/code.mdx Outdated
Comment on lines +9 to +27
to be done

## Further examples

to be done

## API for Badge

### Properties

to be done

### Events

to be done

### Slots

to be done

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The code specification file currently contains only 'to be done' placeholders. Please populate the API properties, events, slots, and basic examples before merging.

Comment thread docs/components/badge/ideation.md Outdated
Comment thread docs/components/badge/ideation.md Outdated
Comment thread docs/components/badge/index.mdx Outdated
@@ -0,0 +1,5 @@
---
doc-type: "tabs"
description: 'to be done'

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Please provide a meaningful description for the badge component instead of the 'to be done' placeholder.

Comment thread sidebars.ts
Comment on lines +1007 to +1019
id: 'components/badge/index',
label: 'Badge',
items: [
{
id: 'components/badge/guide',
label: 'Usage',
},
{
id: 'components/badge/code',
label: 'Code',
},
],
}),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

To maintain alphabetical order within the 'System feedback and status' category, please move the 'Badge' tab item to the top of the list, right before 'Empty state'.


- **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**: ???

@flxlst09 flxlst09 Jul 16, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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??

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ensure padding to avoid visual focus clipping

@flxlst09

Copy link
Copy Markdown
Collaborator

EIX-59

@flxlst09
flxlst09 changed the base branch from main to development July 20, 2026 13:13
@alexkaduk
alexkaduk changed the base branch from development to main July 21, 2026 05:57
@alexkaduk
alexkaduk changed the base branch from main to development July 21, 2026 05:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants