Skip to content

fix(components): warning Tag variant and token added #1719

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jul 21, 2025
Merged

fix(components): warning Tag variant and token added #1719

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ab2367b
fix(components): add Tag variant
Jul 17, 2025
06c0ee6
fix(components): changeset added
Jul 17, 2025
7e8dd53
fix(tokens): snapshot test updated to include new warning feedback co…
Jul 17, 2025
53f9f22
fix(components): merge remote-tracking branch 'origin/main'
Jul 18, 2025
b3402b9
fix(components): add Tag variant
Jul 17, 2025
88188a7
fix(components): changeset added
Jul 17, 2025
9a6ee90
fix(tokens): snapshot test updated to include new warning feedback co…
Jul 17, 2025
2e87776
Merge branch 'zuzze/fix/tag-warning-variant-and-token' of https://git…
Jul 18, 2025
85f0936
fix(components): use white bg only for multiple selection mode to avo…
Jul 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/stupid-cases-wink.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@launchpad-ui/components": minor
"@launchpad-ui/tokens": minor
---

Warning feedback tokens and Tag warning variant added
1 change: 1 addition & 0 deletions packages/components/src/TagGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const tagStyles = cva(styles.tag, {
federal: styles.federal,
new: styles.new,
info: styles.info,
warning: styles.warning,
},
},
defaultVariants: {
Expand Down
7 changes: 6 additions & 1 deletion packages/components/src/styles/TagGroup.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
color: var(--lp-color-text-interactive-disabled);
}

&[data-selection-mode] {
&[data-selection-mode='multiple'] {
background-color: var(--lp-color-bg-interactive-secondary-base);
border: 1px solid var(--lp-color-border-interactive-secondary-base);
}
Expand Down Expand Up @@ -71,6 +71,11 @@
background-color: var(--lp-color-bg-feedback-error);
}

.warning {
color: var(--lp-color-text-feedback-warning);
background-color: var(--lp-color-bg-feedback-warning);
}

.beta {
color: var(--lp-color-text-product-beta);
background-color: var(--lp-color-bg-product-beta);
Expand Down
1 change: 1 addition & 0 deletions packages/components/stories/TagGroup.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ export const Variants: Story = {
<TagList>
<Tag>Default</Tag>
<Tag variant="success">Success</Tag>
<Tag variant="warning">Warning</Tag>
<Tag variant="error">Error</Tag>
<Tag variant="beta">Beta</Tag>
<Tag variant="federal">Federal</Tag>
Expand Down
4 changes: 4 additions & 0 deletions packages/tokens/__tests__/__snapshots__/tokens.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ exports[`Tokens > builds dark tokens 1`] = `
--lp-color-bg-feedback-error: var(--lp-color-red-900);
--lp-color-bg-feedback-info: var(--lp-color-blue-900);
--lp-color-bg-feedback-success: var(--lp-color-green-900);
--lp-color-bg-feedback-warning: var(--lp-color-brand-orange-dark);
--lp-color-bg-interactive-primary-base: var(--lp-color-blue-600);
--lp-color-bg-interactive-primary-active: var(--lp-color-blue-600);
--lp-color-bg-interactive-primary-focus: var(--lp-color-blue-500);
Expand Down Expand Up @@ -56,6 +57,7 @@ exports[`Tokens > builds dark tokens 1`] = `
--lp-color-text-feedback-error: var(--lp-color-red-400);
--lp-color-text-feedback-success: var(--lp-color-green-400);
--lp-color-text-feedback-info: var(--lp-color-blue-400);
--lp-color-text-feedback-warning: var(--lp-color-brand-orange-light);
--lp-color-text-interactive-base: var(--lp-color-blue-400);
--lp-color-text-interactive-active: var(--lp-color-purple-400);
--lp-color-text-interactive-secondary: var(--lp-color-gray-400);
Expand Down Expand Up @@ -210,6 +212,7 @@ exports[`Tokens > builds default tokens 1`] = `
--lp-color-bg-feedback-error: var(--lp-color-red-50);
--lp-color-bg-feedback-info: var(--lp-color-blue-50);
--lp-color-bg-feedback-success: var(--lp-color-green-50);
--lp-color-bg-feedback-warning: var(--lp-color-brand-orange-light);
--lp-color-bg-interactive-primary-base: var(--lp-color-blue-500);
--lp-color-bg-interactive-primary-active: var(--lp-color-blue-500);
--lp-color-bg-interactive-primary-focus: var(--lp-color-blue-600);
Expand Down Expand Up @@ -254,6 +257,7 @@ exports[`Tokens > builds default tokens 1`] = `
--lp-color-text-feedback-error: var(--lp-color-red-600);
--lp-color-text-feedback-success: var(--lp-color-green-600);
--lp-color-text-feedback-info: var(--lp-color-blue-600);
--lp-color-text-feedback-warning: var(--lp-color-brand-orange-dark);
--lp-color-text-interactive-base: var(--lp-color-blue-600);
--lp-color-text-interactive-active: var(--lp-color-purple-700);
--lp-color-text-interactive-primary-base: var(--lp-color-white-950);
Expand Down
6 changes: 6 additions & 0 deletions packages/tokens/tokens/color-aliases.dark.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@
},
"success": {
"$value": "{color.green.900}"
},
"warning": {
"$value": "{color.brand.orange.dark}"
}
},
"interactive": {
Expand Down Expand Up @@ -175,6 +178,9 @@
},
"info": {
"$value": "{color.blue.400}"
},
"warning": {
"$value": "{color.brand.orange.light}"
}
},
"interactive": {
Expand Down
6 changes: 6 additions & 0 deletions packages/tokens/tokens/color-aliases.default.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
},
"success": {
"$value": "{color.green.50}"
},
"warning": {
"$value": "{color.brand.orange.light}"
}
},
"interactive": {
Expand Down Expand Up @@ -299,6 +302,9 @@
},
"info": {
"$value": "{color.blue.600}"
},
"warning": {
"$value": "{color.brand.orange.dark}"
}
},
"interactive": {
Expand Down
Loading