paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Fix disabled state on Button

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2026-01-12 18:52:52 +00:00
parent 9d75495644
commit 21c87cc1d6
5 changed files with 22 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/chilly-maps-heal.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/ui': patch
---
Fixes disabled state in primary and secondary buttons in Backstage UI.
.storybook/themes/spotify.css
+5 -6
View File
@@ -219,11 +219,12 @@
--bui-bg-solid: #1ed760;
--bui-bg-solid-hover: #3be477;
--bui-bg-solid-pressed: #1abc54;
--bui-bg-solid-disabled: var(--bui-gray-2);
--bui-bg-solid-disabled: #0f6c30;
--bui-fg-primary: var(--bui-black);
--bui-fg-secondary: var(--bui-gray-7);
--bui-fg-solid: var(--bui-black);
--bui-fg-solid-disabled: #62ab7c;
--bui-border: var(--bui-gray-3);
--bui-border-hover: rgba(0, 0, 0, 0.3);
@@ -246,14 +247,12 @@
[data-theme-mode='dark'][data-theme-name='spotify'] {
--bui-bg-surface-0: var(--bui-black);
--bui-bg-solid: #1ed760;
--bui-bg-solid-hover: #3be477;
--bui-bg-solid-pressed: #1abc54;
--bui-bg-solid-disabled: #0f6c30;
--bui-bg-tint: #242424;
--bui-bg-tint-hover: #202020;
--bui-bg-tint-pressed: #292929;
--bui-bg-tint-disabled: rgba(255, 255, 255, 0.8);
--bui-bg-danger: #3b1219;
--bui-bg-warning: #302008;
--bui-bg-success: #132d21;
@@ -264,7 +263,7 @@
--bui-fg-link-hover: var(--bui-white);
--bui-fg-disabled: var(--bui-gray-5);
--bui-fg-solid: var(--bui-black);
--bui-fg-solid-disabled: #083618;
--bui-fg-solid-disabled: #072f15;
--bui-fg-tint: var(--bui-white);
--bui-fg-tint-disabled: var(--bui-gray-5);
--bui-fg-danger: #e22b2b;
packages/ui/src/components/Button/Button.module.css
+8 -9
View File
@@ -71,23 +71,23 @@
color: var(--bui-fg-primary);
background-color: var(--bui-bg-neutral-on-surface-0);
&:hover {
&:hover:not([data-disabled='true']):not([data-loading='true']) {
background-color: var(--bui-bg-neutral-on-surface-0-hover);
transition: background-color 150ms ease;
}
&:active {
&:active:not([data-disabled='true']):not([data-loading='true']) {
background-color: var(--bui-bg-neutral-on-surface-0-pressed);
}
&[data-on-surface='1'] {
background-color: var(--bui-bg-neutral-on-surface-1);
&:hover {
&:hover:not([data-disabled='true']):not([data-loading='true']) {
background-color: var(--bui-bg-neutral-on-surface-1-hover);
}
&:active {
&:active:not([data-disabled='true']):not([data-loading='true']) {
background-color: var(--bui-bg-neutral-on-surface-1-pressed);
}
}
@@ -95,11 +95,11 @@
&[data-on-surface='2'] {
background-color: var(--bui-bg-neutral-on-surface-2);
&:hover {
&:hover:not([data-disabled='true']):not([data-loading='true']) {
background-color: var(--bui-bg-neutral-on-surface-2-hover);
}
&:active {
&:active:not([data-disabled='true']):not([data-loading='true']) {
background-color: var(--bui-bg-neutral-on-surface-2-pressed);
}
}
@@ -107,11 +107,11 @@
&[data-on-surface='3'] {
background-color: var(--bui-bg-neutral-on-surface-3);
&:hover {
&:hover:not([data-disabled='true']):not([data-loading='true']) {
background-color: var(--bui-bg-neutral-on-surface-3-hover);
}
&:active {
&:active:not([data-disabled='true']):not([data-loading='true']) {
background-color: var(--bui-bg-neutral-on-surface-3-pressed);
}
}
@@ -124,7 +124,6 @@
&[data-disabled='true'],
&[data-loading='true'] {
box-shadow: inset 0 0 0 1px var(--bui-border-disabled);
color: var(--bui-fg-disabled);
}
}
packages/ui/src/components/Button/Button.stories.tsx
-60
View File
@@ -212,66 +212,6 @@ export const Responsive = meta.story({
const variants = ['primary', 'secondary'] as const;
const sizes = ['small', 'medium'] as const;
export const Playground = meta.story({
args: {
children: 'Button',
},
render: () => (
<Flex direction="column">
{variants.map(variant => (
<Flex direction="column" key={variant}>
<Text>{variant}</Text>
{sizes.map(size => (
<Flex align="center" key={size}>
<Button variant={variant} size={size}>
Button
</Button>
<Button iconStart={<RiCloudLine />} variant={variant} size={size}>
Button
</Button>
<Button
iconEnd={<RiArrowRightSLine />}
variant={variant}
size={size}
>
Button
</Button>
<Button
iconStart={<RiCloudLine />}
iconEnd={<RiArrowRightSLine />}
style={{ width: '200px' }}
variant={variant}
size={size}
>
Button
</Button>
<Button variant={variant} size={size} isDisabled>
Button
</Button>
<Button
iconStart={<RiCloudLine />}
variant={variant}
size={size}
isDisabled
>
Button
</Button>
<Button
iconEnd={<RiArrowRightSLine />}
variant={variant}
size={size}
isDisabled
>
Button
</Button>
</Flex>
))}
</Flex>
))}
</Flex>
),
});
export const Loading = meta.story({
render: () => {
const [isLoading, setIsLoading] = useState(false);
packages/ui/src/css/tokens.css
+4 -4
View File
@@ -90,7 +90,7 @@
--bui-bg-solid: #1f5493;
--bui-bg-solid-hover: #163a66;
--bui-bg-solid-pressed: #0f2b4e;
--bui-bg-solid-disabled: #ebebeb;
--bui-bg-solid-disabled: #163a66;
/* Neutral background colors */
--bui-bg-neutral-on-surface-0: oklch(0% 0 0 / 6%);
@@ -125,7 +125,7 @@
--bui-fg-link-hover: #1f2d5c;
--bui-fg-disabled: #9e9e9e;
--bui-fg-solid: var(--bui-white);
--bui-fg-solid-disabled: #9c9c9c;
--bui-fg-solid-disabled: #98a8bc;
--bui-fg-tint: #1f5493;
--bui-fg-tint-disabled: var(--bui-gray-5);
--bui-fg-danger: #e22b2b;
@@ -171,7 +171,7 @@
--bui-bg-solid: #9cc9ff;
--bui-bg-solid-hover: #83b9fd;
--bui-bg-solid-pressed: #83b9fd;
--bui-bg-solid-disabled: #222222;
--bui-bg-solid-disabled: #1b3d68;
/* Neutral background colors */
--bui-bg-neutral-on-surface-0: oklch(100% 0 0 / 10%);
@@ -206,7 +206,7 @@
--bui-fg-link-hover: #7eb5f7;
--bui-fg-disabled: var(--bui-gray-7);
--bui-fg-solid: #101821;
--bui-fg-solid-disabled: var(--bui-gray-5);
--bui-fg-solid-disabled: #6191cc;
--bui-fg-tint: #9cc9ff;
--bui-fg-tint-disabled: var(--bui-gray-5);
--bui-fg-danger: #e22b2b;