diff --git a/.changeset/long-ends-shop.md b/.changeset/long-ends-shop.md new file mode 100644 index 0000000000..f57c3ccdbd --- /dev/null +++ b/.changeset/long-ends-shop.md @@ -0,0 +1,5 @@ +--- +'@backstage/canon': patch +--- + +Add new Tabs component to Canon diff --git a/canon-docs/src/app/(docs)/components/tabs/page.mdx b/canon-docs/src/app/(docs)/components/tabs/page.mdx new file mode 100644 index 0000000000..478608d718 --- /dev/null +++ b/canon-docs/src/app/(docs)/components/tabs/page.mdx @@ -0,0 +1,92 @@ +import { PropsTable } from '@/components/PropsTable'; +import { TabsSnippet } from '@/snippets/stories-snippets'; +import { Snippet } from '@/components/Snippet'; +import { Tabs } from '@/components/Tabs'; +import { CodeBlock } from '@/components/CodeBlock'; +import { + tabsRootPropDefs, + tabsListPropDefs, + tabsTabPropDefs, + tabsPanelPropDefs, +} from './props'; +import { BaseUI } from '@/components/HeadlessBanners/BaseUI'; + +# Tabs + +A component for toggling between related panels on the same page. + +} + code={` + + Tab 1 + Tab 2 + Tab 3 With long title + + Content for Tab 1 + Content for Tab 2 + Content for Tab 3 + `} +/> + + + + Usage + Theming + + + + + Tab 1 + Tab 2 + Tab 3 + + Content for Tab 1 + Content for Tab 2 + Content for Tab 3 + +`} + /> + + + We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with + your brand. For additional flexibility, you can use the provided class names for each element listed below. + - `canon-TabsRoot` + - `canon-TabsList` + - `canon-TabsTab` + - `canon-TabsPanel` + - `canon-TabsIndicator` + + + +## API reference + + + +### Tabs.Root + +Groups the tabs and the corresponding panels. Renders a `
` element. + + + +### Tabs.List + +Groups the individual tab buttons. Renders a `
` element. + + + +### Tabs.Tab + +An individual interactive tab button that toggles the corresponding panel. Renders a `