chore: revert tag style modify #589
Conversation
🦋 Changeset detectedLatest commit: c48b25e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughThe changes revert a previous modification by restoring the default rounded and bordered appearance for tags in the UI library. Updates span component logic, styles, documentation, and stories to reflect the new default of rounded tags with borders, and adjust related visual details such as tag height and background color. Changes
Sequence Diagram(s)sequenceDiagram
User -> MultiSelectComponent: Selects option(s)
MultiSelectComponent -> TagComponent: Renders tag with [round]=true, [border]=true
TagComponent -> Stylesheet: Applies rounded corners and border styles
TagComponent -> User: Displays rounded, bordered tag
Possibly related PRs
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/tag/tag.component.scss (1)
88-96: Avoid hard-coding height; stick to design tokensAll other size variants use
use-var(inline-height-*). Replacing theminiheight with a literal20pxbreaks token-driven theming and makes future global tweaks harder.- height: 20px; + // Reuse XS token until a dedicated mini token is introduced + height: use-var(inline-height-xs);
🧹 Nitpick comments (1)
src/select/multi-select/multi-select.component.html (1)
41-46: Redundant[round]attribute – default is alreadytrue
TagComponent’s default forroundwas flipped totrue, so this explicit binding is no-ops and slightly clutters the template. Keeping[border]="true"is fine because the default forborderis stillfalse.- [round]="true" + <!-- round is already true by default -->
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
.changeset/fair-dots-nail.md(1 hunks)src/select/multi-select/multi-select.component.html(1 hunks)src/tag/tag.component.scss(2 hunks)src/tag/tag.component.ts(1 hunks)stories/tag/basic.component.ts(1 hunks)stories/tag/basic.stories.ts(1 hunks)stories/tag/tag.mdx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - aui
- GitHub Check: Header rules - aui
- GitHub Check: Pages changed - aui
🔇 Additional comments (6)
.changeset/fair-dots-nail.md (1)
1-6: LGTM - Changeset properly documents the revert.The changeset file correctly documents the minor version bump and describes the nature of the change as a tag style revert.
stories/tag/tag.mdx (1)
52-52: LGTM - Documentation correctly reflects the new default.The documentation update accurately reflects the change in the default value of the
roundproperty fromfalsetotrue.stories/tag/basic.stories.ts (1)
30-30: LGTM - Story args updated to match component defaults.The story configuration correctly reflects the new default value of
round: true, ensuring the story demonstration aligns with the actual component behavior.stories/tag/basic.component.ts (1)
100-100: LGTM - Story component default updated for consistency.The story component's default value for
roundis now consistent with the main TagComponent, ensuring accurate demonstration of the component's behavior.src/tag/tag.component.ts (1)
48-48: Ensure consistentroundbehavior for all<aui-tag>usagesWith the default now set to
round = true, every<aui-tag>without an explicitroundinput will render as rounded:
Redundant explicit
true
Insrc/select/multi-select/multi-select.component.htmlyou have:<aui-tag *ngFor="let option of selectedOptions$ | async; trackBy: trackByValue" type="info" [round]="true">Since
rounddefaults totrue, you can remove this binding or keep it for clarity.Unintended rounding in tags-input
Insrc/input/tags-input/tags-input.component.html,<aui-tag>is used without anyroundbinding. It will now render as rounded, whereas prior to this revert it was square by default.
→ Verify whether tags-input should remain square. If so, add[round]="false"to those<aui-tag>s.Other template checks
No occurrences of[round]="false"were found in your HTML templates. Audit any other tag usages (e.g., in stories or custom components) to confirm they behave as intended.Please update or remove redundant bindings and add explicit
round="false"wherever square tags are required.src/tag/tag.component.scss (1)
134-141: Double-check newn-8background vsn-7border contrast
background-coloris now darker (n-8) while the border remainsn-7, making the border lighter than the fill. Ensure this visual change is intentional and still meets contrast/AA guidelines for the info tag.If the darker fill wasn’t deliberate, revert or adjust both values to preserve the previous light-on-dark hierarchy.
Summary by CodeRabbit
Style
Documentation
Chores