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

Merge pull request #30251 from backstage/canon-switch

Browse Source 
Canon - Add new Switch component
This commit is contained in:
Charles de Dreuille
2025-06-16 13:17:15 +02:00
committed by GitHub
parent 8263eacf34 81c79f5df1
commit af4e01082a
19 changed files with 2259 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/stupid-candles-hug.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/canon': patch
---
Add new Switch component in Canon.
canon-docs/src/content/components/switch.mdx
+41
View File
@@ -0,0 +1,41 @@
import { PropsTable } from '@/components/PropsTable';
import { Snippet } from '@/components/Snippet';
import { CodeBlock } from '@/components/CodeBlock';
import { SwitchSnippet } from '@/snippets/stories-snippets';
import { switchPropDefs, snippetUsage } from './switch.props';
import { ComponentInfos } from '@/components/ComponentInfos';
# Switch
A control that indicates whether a setting is on or off.
<Snippet
align="center"
py={4}
preview={<SwitchSnippet story="Default" />}
code={`<Switch />`}
/>
<ComponentInfos
component="switch"
usageCode={snippetUsage}
classNames={['canon-Switch', 'canon-SwitchIndicator']}
/>
## API reference
<PropsTable data={switchPropDefs} />
## Examples
### Disabled
A switch can be disabled using the `isDisabled` prop.
<Snippet
align="center"
py={4}
open
preview={<SwitchSnippet story="Disabled" />}
code={`<Switch isDisabled />`}
/>
canon-docs/src/content/components/switch.props.ts
+71
View File
@@ -0,0 +1,71 @@
import { classNamePropDefs, stylePropDefs } from '@/utils/propDefs';
import type { PropDef } from '@/utils/propDefs';
export const switchPropDefs: Record<string, PropDef> = {
autoFocus: {
type: 'boolean',
},
defaultSelected: {
type: 'boolean',
},
...classNamePropDefs,
isDisabled: {
type: 'boolean',
},
isReadOnly: {
type: 'boolean',
},
isSelected: {
type: 'boolean',
},
label: {
type: 'string',
},
name: {
type: 'string',
},
onChange: {
type: 'enum',
values: ['(isSelected: boolean) => void'],
},
onFocus: {
type: 'enum',
values: ['(e: FocusEvent<Target>) => void'],
},
onBlur: {
type: 'enum',
values: ['(e: FocusEvent<Target>) => void'],
},
onFocusChange: {
type: 'enum',
values: ['(isFocused: boolean) => void'],
},
onKeyDown: {
type: 'enum',
values: ['(e: KeyboardEvent) => void'],
},
onKeyUp: {
type: 'enum',
values: ['(e: KeyboardEvent) => void'],
},
onHoverStart: {
type: 'enum',
values: ['(e: HoverEvent) => void'],
},
onHoverEnd: {
type: 'enum',
values: ['(e: HoverEvent) => void'],
},
onHoverChange: {
type: 'enum',
values: ['(isHovered: boolean) => void'],
},
...stylePropDefs,
value: {
type: 'string',
},
};
export const snippetUsage = `import { Switch } from '@backstage/canon';
<Switch />`;
canon-docs/src/snippets/stories-snippets.tsx
+12
View File
@@ -18,6 +18,7 @@ import * as LinkStories from '../../../packages/canon/src/components/Link/Link.s
import * as AvatarStories from '../../../packages/canon/src/components/Avatar/Avatar.stories';
import * as CollapsibleStories from '../../../packages/canon/src/components/Collapsible/Collapsible.stories';
import * as TabsStories from '../../../packages/canon/src/components/Tabs/Tabs.stories';
import * as SwitchStories from '../../../packages/canon/src/components/Switch/Switch.stories';
export const BoxSnippet = ({ story }: { story: keyof typeof BoxStories }) => {
const stories = composeStories(BoxStories);
@@ -173,3 +174,14 @@ export const TabsSnippet = ({ story }: { story: keyof typeof TabsStories }) => {
return StoryComponent ? <StoryComponent /> : null;
};
export const SwitchSnippet = ({
story,
}: {
story: keyof typeof SwitchStories;
}) => {
const stories = composeStories(SwitchStories);
const StoryComponent = stories[story as keyof typeof stories];
return StoryComponent ? <StoryComponent /> : null;
};
canon-docs/src/utils/changelog.ts
+9 -1
View File
@@ -17,7 +17,8 @@ export type Component =
| 'link'
| 'tooltip'
| 'scrollarea'
| 'flex';
| 'flex'
| 'switch';
export type Version = `${number}.${number}.${number}`;
@@ -30,6 +31,13 @@ export interface ChangelogProps {
}
export const changelog: ChangelogProps[] = [
{
components: ['switch'],
version: '0.5.0',
description: '✨ Add new `Switch` component',
platform: 'portal',
prs: ['30251'],
},
{
components: ['tabs'],
version: '0.4.0',
canon-docs/src/utils/data.ts
+5
View File
@@ -116,6 +116,11 @@ export const components: Page[] = [
slug: 'select',
status: 'alpha',
},
{
title: 'Switch',
slug: 'switch',
status: 'alpha',
},
{
title: 'Table',
slug: 'table',
packages/canon/css/components.css
+58
View File
@@ -1332,3 +1332,61 @@
width: 100%;
overflow: hidden;
}
.canon-Switch {
align-items: center;
gap: var(--canon-space-3);
font-size: var(--canon-font-size-3);
color: var(--canon-fg-primary);
cursor: pointer;
display: flex;
position: relative;
&[data-pressed] .canon-SwitchIndicator {
&:before {
background: var(--canon-fg-solid);
}
}
&[data-selected] {
& .canon-SwitchIndicator {
background: var(--canon-bg-solid);
&:before {
background: var(--canon-fg-solid);
transform: translateX(100%);
}
}
&[data-pressed] {
& .indicator {
background: var(--canon-gray-3);
}
}
}
&[data-focus-visible] .canon-SwitchIndicator {
outline-offset: 2px;
outline: 2px solid;
}
}
.canon-SwitchIndicator {
background: var(--canon-gray-3);
border: 2px;
border-radius: 1.143rem;
width: 2rem;
height: 1.143rem;
transition: all .2s;
&:before {
content: "";
background: var(--canon-fg-solid);
border-radius: 16px;
width: .857rem;
height: .857rem;
margin: .143rem;
transition: all .2s;
display: block;
}
}
packages/canon/css/styles.css
+58
View File
@@ -10556,3 +10556,61 @@
width: 100%;
overflow: hidden;
}
.canon-Switch {
align-items: center;
gap: var(--canon-space-3);
font-size: var(--canon-font-size-3);
color: var(--canon-fg-primary);
cursor: pointer;
display: flex;
position: relative;
&[data-pressed] .canon-SwitchIndicator {
&:before {
background: var(--canon-fg-solid);
}
}
&[data-selected] {
& .canon-SwitchIndicator {
background: var(--canon-bg-solid);
&:before {
background: var(--canon-fg-solid);
transform: translateX(100%);
}
}
&[data-pressed] {
& .indicator {
background: var(--canon-gray-3);
}
}
}
&[data-focus-visible] .canon-SwitchIndicator {
outline-offset: 2px;
outline: 2px solid;
}
}
.canon-SwitchIndicator {
background: var(--canon-gray-3);
border: 2px;
border-radius: 1.143rem;
width: 2rem;
height: 1.143rem;
transition: all .2s;
&:before {
content: "";
background: var(--canon-fg-solid);
border-radius: 16px;
width: .857rem;
height: .857rem;
margin: .143rem;
transition: all .2s;
display: block;
}
}
packages/canon/css/switch.css
+57
View File
@@ -0,0 +1,57 @@
.canon-Switch {
align-items: center;
gap: var(--canon-space-3);
font-size: var(--canon-font-size-3);
color: var(--canon-fg-primary);
cursor: pointer;
display: flex;
position: relative;
&[data-pressed] .canon-SwitchIndicator {
&:before {
background: var(--canon-fg-solid);
}
}
&[data-selected] {
& .canon-SwitchIndicator {
background: var(--canon-bg-solid);
&:before {
background: var(--canon-fg-solid);
transform: translateX(100%);
}
}
&[data-pressed] {
& .indicator {
background: var(--canon-gray-3);
}
}
}
&[data-focus-visible] .canon-SwitchIndicator {
outline-offset: 2px;
outline: 2px solid;
}
}
.canon-SwitchIndicator {
background: var(--canon-gray-3);
border: 2px;
border-radius: 1.143rem;
width: 2rem;
height: 1.143rem;
transition: all .2s;
&:before {
content: "";
background: var(--canon-fg-solid);
border-radius: 16px;
width: .857rem;
height: .857rem;
margin: .143rem;
transition: all .2s;
display: block;
}
}
packages/canon/package.json
+2 -1
View File
@@ -44,7 +44,8 @@
"@base-ui-components/react": "1.0.0-alpha.7",
"@remixicon/react": "^4.6.0",
"@tanstack/react-table": "^8.21.3",
"clsx": "^2.1.1"
"clsx": "^2.1.1",
"react-aria-components": "^1.10.1"
},
"devDependencies": {
"@backstage/cli": "workspace:^",
packages/canon/report.api.md
+11
View File
@@ -22,6 +22,7 @@ import { ReactNode } from 'react';
import { RefAttributes } from 'react';
import type { RemixiconComponentType } from '@remixicon/react';
import { ScrollArea as ScrollArea_2 } from '@base-ui-components/react/scroll-area';
import type { SwitchProps as SwitchProps_2 } from 'react-aria-components';
import { Table as Table_2 } from '@tanstack/react-table';
import { Tabs as Tabs_2 } from '@base-ui-components/react/tabs';
import { TdHTMLAttributes } from 'react';
@@ -1159,6 +1160,16 @@ export type StylingPropDef = {
parseValue?: (value: string) => string | undefined;
};
// @public (undocumented)
export const Switch: ForwardRefExoticComponent<
SwitchProps & RefAttributes<HTMLLabelElement>
>;
// @public (undocumented)
export interface SwitchProps extends SwitchProps_2 {
label?: string;
}
// @public
export const Table: {
Root: ForwardRefExoticComponent<
packages/canon/src/components/Switch/Switch.stories.tsx
+39
View File
@@ -0,0 +1,39 @@
/*
* Copyright 2025 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import { Switch } from './Switch';
const meta = {
title: 'Components/Switch',
component: Switch,
} satisfies Meta<typeof Switch>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
label: 'Switch',
},
};
export const Disabled: Story = {
args: {
...Default.args,
isDisabled: true,
},
};
packages/canon/src/components/Switch/Switch.styles.css
+74
View File
@@ -0,0 +1,74 @@
/*
* Copyright 2025 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.canon-Switch {
display: flex;
/* This is needed so the HiddenInput is positioned correctly */
position: relative;
align-items: center;
gap: var(--canon-space-3);
font-size: var(--canon-font-size-3);
color: var(--canon-fg-primary);
cursor: pointer;
&[data-pressed] .canon-SwitchIndicator {
&:before {
background: var(--canon-fg-solid);
}
}
&[data-selected] {
.canon-SwitchIndicator {
background: var(--canon-bg-solid);
&:before {
background: var(--canon-fg-solid);
transform: translateX(100%);
}
}
&[data-pressed] {
.indicator {
background: var(--canon-gray-3);
}
}
}
&[data-focus-visible] .canon-SwitchIndicator {
outline: 2px solid;
outline-offset: 2px;
}
}
.canon-SwitchIndicator {
width: 2rem;
height: 1.143rem;
border: 2px;
background: var(--canon-gray-3);
border-radius: 1.143rem;
transition: all 200ms;
&:before {
content: '';
display: block;
margin: 0.143rem;
width: 0.857rem;
height: 0.857rem;
background: var(--canon-fg-solid);
border-radius: 16px;
transition: all 200ms;
}
}
packages/canon/src/components/Switch/Switch.tsx
+33
View File
@@ -0,0 +1,33 @@
/*
* Copyright 2025 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { forwardRef } from 'react';
import { Switch as AriaSwitch } from 'react-aria-components';
import type { SwitchProps } from './types';
/** @public */
export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
({ label, ...props }, ref) => {
return (
<AriaSwitch className="canon-Switch" ref={ref} {...props}>
<div className="canon-SwitchIndicator" />
{label}
</AriaSwitch>
);
},
);
Switch.displayName = 'Switch';
packages/canon/src/components/Switch/index.tsx
+18
View File
@@ -0,0 +1,18 @@
/*
* Copyright 2025 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './Switch';
export * from './types';
packages/canon/src/components/Switch/types.ts
+25
View File
@@ -0,0 +1,25 @@
/*
* Copyright 2025 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { SwitchProps as AriaSwitchProps } from 'react-aria-components';
/** @public */
export interface SwitchProps extends AriaSwitchProps {
/**
* The label of the switch
*/
label?: string;
}
packages/canon/src/css/components.css
+1
View File
@@ -40,3 +40,4 @@
@import '../components/Tooltip/Tooltip.styles.css';
@import '../components/ScrollArea/ScrollArea.styles.css';
@import '../components/Select/Select.styles.css';
@import '../components/Switch/Switch.styles.css';
packages/canon/src/index.ts
+1
View File
@@ -47,6 +47,7 @@ export * from './components/Menu';
export * from './components/ScrollArea';
export * from './components/Link';
export * from './components/Select';
export * from './components/Switch';
// Types
export * from './types';
yarn.lock
+1739 -102
View File
File diff suppressed because it is too large Load Diff