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

Add tertiary variant ton Button

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-07-04 15:58:26 +01:00
parent 62afbd3ad8
commit eac4a4c209
11 changed files with 93 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/thin-eggs-kneel.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/canon': patch
---
Add new tertiary variant to Button, ButtonIcon and ButtonLink in Canon.
canon-docs/public/theme-backstage.css
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/canon/css/styles.css
+28 -3
View File
@@ -9292,7 +9292,7 @@
padding: 0;
display: inline-flex;
&:disabled {
&[data-disabled="true"] {
cursor: not-allowed;
}
}
@@ -9315,7 +9315,7 @@
outline-offset: 2px;
}
&:disabled {
&[data-disabled="true"] {
background-color: var(--canon-bg-solid-disabled);
color: var(--canon-fg-solid-disabled);
}
@@ -9341,12 +9341,37 @@
transition: none;
}
&:disabled {
&[data-disabled="true"] {
box-shadow: inset 0 0 0 1px var(--canon-border-disabled);
color: var(--canon-fg-disabled);
}
}
.canon-Button[data-variant="tertiary"] {
color: var(--canon-fg-primary);
background-color: #0000;
&:hover {
background-color: var(--canon-bg-surface-1);
transition: background-color .2s;
}
&:active {
background-color: var(--canon-bg-surface-2);
}
&:focus-visible {
box-shadow: inset 0 0 0 2px var(--canon-ring);
outline: none;
transition: none;
}
&[data-disabled="true"] {
color: var(--canon-fg-disabled);
background-color: #0000;
}
}
.canon-Button[data-size="medium"] {
font-size: var(--canon-font-size-4);
padding: 0 var(--canon-space-3);
packages/canon/report.api.md
+6 -3
View File
@@ -175,7 +175,8 @@ export interface ButtonIconProps extends ButtonProps_2 {
variant?:
| 'primary'
| 'secondary'
| Partial<Record<Breakpoint_2, 'primary' | 'secondary'>>;
| 'tertiary'
| Partial<Record<Breakpoint_2, 'primary' | 'secondary' | 'tertiary'>>;
}
// @public (undocumented)
@@ -197,7 +198,8 @@ export interface ButtonLinkProps extends LinkProps_2 {
variant?:
| 'primary'
| 'secondary'
| Partial<Record<Breakpoint_2, 'primary' | 'secondary'>>;
| 'tertiary'
| Partial<Record<Breakpoint_2, 'primary' | 'secondary' | 'tertiary'>>;
}
// @public
@@ -214,7 +216,8 @@ export interface ButtonProps extends ButtonProps_2 {
variant?:
| 'primary'
| 'secondary'
| Partial<Record<Breakpoint_2, 'primary' | 'secondary'>>;
| 'tertiary'
| Partial<Record<Breakpoint_2, 'primary' | 'secondary' | 'tertiary'>>;
}
// @public (undocumented)
packages/canon/src/components/Button/Button.stories.tsx
+6
View File
@@ -63,6 +63,9 @@ export const Variants: Story = {
<Button iconStart={<Icon name="cloud" />} variant="secondary">
Button
</Button>
<Button iconStart={<Icon name="cloud" />} variant="tertiary">
Button
</Button>
</Flex>
),
};
@@ -126,6 +129,9 @@ export const Disabled: Story = {
<Button variant="secondary" isDisabled>
Secondary
</Button>
<Button variant="tertiary" isDisabled>
Tertiary
</Button>
</Flex>
),
};
packages/canon/src/components/Button/styles.css
+28 -3
View File
@@ -28,7 +28,7 @@
gap: var(--canon-space-1_5);
flex-shrink: 0;
&:disabled {
&[data-disabled='true'] {
cursor: not-allowed;
}
}
@@ -51,7 +51,7 @@
outline-offset: 2px;
}
&:disabled {
&[data-disabled='true'] {
background-color: var(--canon-bg-solid-disabled);
color: var(--canon-fg-solid-disabled);
}
@@ -77,12 +77,37 @@
box-shadow: inset 0 0 0 2px var(--canon-ring);
}
&:disabled {
&[data-disabled='true'] {
box-shadow: inset 0 0 0 1px var(--canon-border-disabled);
color: var(--canon-fg-disabled);
}
}
.canon-Button[data-variant='tertiary'] {
background-color: transparent;
color: var(--canon-fg-primary);
&:hover {
background-color: var(--canon-bg-surface-1);
transition: background-color 200ms ease;
}
&:active {
background-color: var(--canon-bg-surface-2);
}
&:focus-visible {
outline: none;
transition: none;
box-shadow: inset 0 0 0 2px var(--canon-ring);
}
&[data-disabled='true'] {
background-color: transparent;
color: var(--canon-fg-disabled);
}
}
.canon-Button[data-size='medium'] {
font-size: var(--canon-font-size-4);
padding: 0 var(--canon-space-3);
packages/canon/src/components/Button/types.ts
+2 -1
View File
@@ -28,7 +28,8 @@ export interface ButtonProps extends RAButtonProps {
variant?:
| 'primary'
| 'secondary'
| Partial<Record<Breakpoint, 'primary' | 'secondary'>>;
| 'tertiary'
| Partial<Record<Breakpoint, 'primary' | 'secondary' | 'tertiary'>>;
iconStart?: ReactElement;
iconEnd?: ReactElement;
children?: ReactNode;
packages/canon/src/components/ButtonIcon/ButtonIcon.stories.tsx
+2
View File
@@ -47,6 +47,7 @@ export const Variants: Story = {
<Flex align="center" gap="2">
<ButtonIcon icon={<Icon name="cloud" />} variant="primary" />
<ButtonIcon icon={<Icon name="cloud" />} variant="secondary" />
<ButtonIcon icon={<Icon name="cloud" />} variant="tertiary" />
</Flex>
),
};
@@ -65,6 +66,7 @@ export const Disabled: Story = {
<Flex direction="row" gap="2">
<ButtonIcon isDisabled icon={<Icon name="cloud" />} variant="primary" />
<ButtonIcon isDisabled icon={<Icon name="cloud" />} variant="secondary" />
<ButtonIcon isDisabled icon={<Icon name="cloud" />} variant="tertiary" />
</Flex>
),
};
packages/canon/src/components/ButtonIcon/types.ts
+2 -1
View File
@@ -28,6 +28,7 @@ export interface ButtonIconProps extends RAButtonProps {
variant?:
| 'primary'
| 'secondary'
| Partial<Record<Breakpoint, 'primary' | 'secondary'>>;
| 'tertiary'
| Partial<Record<Breakpoint, 'primary' | 'secondary' | 'tertiary'>>;
icon?: ReactElement;
}
packages/canon/src/components/ButtonLink/ButtonLink.stories.tsx
+11
View File
@@ -63,6 +63,14 @@ export const Variants: Story = {
>
Button
</ButtonLink>
<ButtonLink
iconStart={<Icon name="cloud" />}
variant="tertiary"
href="https://canon.backstage.io"
target="_blank"
>
Button
</ButtonLink>
</Flex>
),
};
@@ -126,6 +134,9 @@ export const Disabled: Story = {
<ButtonLink variant="secondary" isDisabled>
Secondary
</ButtonLink>
<ButtonLink variant="tertiary" isDisabled>
Tertiary
</ButtonLink>
</Flex>
),
};
packages/canon/src/components/ButtonLink/types.ts
+2 -1
View File
@@ -28,7 +28,8 @@ export interface ButtonLinkProps extends RALinkProps {
variant?:
| 'primary'
| 'secondary'
| Partial<Record<Breakpoint, 'primary' | 'secondary'>>;
| 'tertiary'
| Partial<Record<Breakpoint, 'primary' | 'secondary' | 'tertiary'>>;
iconStart?: ReactElement;
iconEnd?: ReactElement;
children?: ReactNode;