From ad3a6dc90c6275fca4b0fd786af7c834c14df492 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 21 Jul 2025 11:25:48 +0100 Subject: [PATCH] Move Theming + Changelog to the bottom Signed-off-by: Charles de Dreuille --- docs-ui/package.json | 1 - .../src/app/(playground)/playground/page.tsx | 87 ------------------- .../(playground)/playground/styles.module.css | 36 -------- docs-ui/src/app/layout.module.css | 7 +- .../components/ChangelogComponent/index.tsx | 29 ++++--- .../ComponentInfos/ComponentInfos.tsx | 68 --------------- .../src/components/ComponentInfos/index.ts | 1 - .../src/components/ComponentInfos/types.ts | 9 -- .../components/CustomTheme/styles.module.css | 1 + docs-ui/src/components/Frame/index.tsx | 32 ------- .../src/components/Sidebar/Sidebar.module.css | 4 +- docs-ui/src/components/Theming/index.tsx | 26 ++++++ .../src/components/Toolbar/Toolbar.module.css | 23 +++-- docs-ui/src/components/Toolbar/Toolbar.tsx | 14 +-- .../components/Toolbar/theme-name.module.css | 10 +-- .../src/components/Toolbar/theme.module.css | 14 ++- docs-ui/src/content/components/avatar.mdx | 22 ++--- docs-ui/src/content/components/box.mdx | 11 ++- .../src/content/components/button-icon.mdx | 15 ++-- .../src/content/components/button-link.mdx | 15 ++-- docs-ui/src/content/components/button.mdx | 7 +- docs-ui/src/content/components/card.mdx | 15 ++-- docs-ui/src/content/components/checkbox.mdx | 15 ++-- .../src/content/components/collapsible.mdx | 19 ++-- docs-ui/src/content/components/container.mdx | 15 ++-- docs-ui/src/content/components/flex.mdx | 15 ++-- docs-ui/src/content/components/grid.mdx | 15 ++-- docs-ui/src/content/components/heading.mdx | 15 ++-- docs-ui/src/content/components/icon.mdx | 15 ++-- docs-ui/src/content/components/link.mdx | 23 ++--- docs-ui/src/content/components/menu.mdx | 31 ++----- .../src/content/components/radio-group.mdx | 16 ++-- .../src/content/components/search-field.mdx | 28 +++--- docs-ui/src/content/components/select.mdx | 24 ++--- docs-ui/src/content/components/skeleton.mdx | 15 ++-- docs-ui/src/content/components/switch.mdx | 15 ++-- docs-ui/src/content/components/tabs.mdx | 21 ++--- docs-ui/src/content/components/text-field.mdx | 26 +++--- docs-ui/src/content/components/text.mdx | 15 ++-- docs-ui/src/content/components/tooltip.mdx | 15 ++-- docs-ui/src/css/globals.css | 4 +- docs-ui/yarn.lock | 12 --- 42 files changed, 295 insertions(+), 506 deletions(-) delete mode 100644 docs-ui/src/app/(playground)/playground/page.tsx delete mode 100644 docs-ui/src/app/(playground)/playground/styles.module.css delete mode 100644 docs-ui/src/components/ComponentInfos/ComponentInfos.tsx delete mode 100644 docs-ui/src/components/ComponentInfos/index.ts delete mode 100644 docs-ui/src/components/ComponentInfos/types.ts delete mode 100644 docs-ui/src/components/Frame/index.tsx create mode 100644 docs-ui/src/components/Theming/index.tsx diff --git a/docs-ui/package.json b/docs-ui/package.json index 8049edac8d..74c5d59075 100644 --- a/docs-ui/package.json +++ b/docs-ui/package.json @@ -32,7 +32,6 @@ "prop-types": "^15.8.1", "react": "19.1.0", "react-dom": "19.1.0", - "react-frame-component": "^5.2.7", "shiki": "^1.26.1", "storybook": "^8.6.8" }, diff --git a/docs-ui/src/app/(playground)/playground/page.tsx b/docs-ui/src/app/(playground)/playground/page.tsx deleted file mode 100644 index 424cf2a707..0000000000 --- a/docs-ui/src/app/(playground)/playground/page.tsx +++ /dev/null @@ -1,87 +0,0 @@ -'use client'; - -import { ReactNode } from 'react'; -import { Grid, Flex, Text } from '../../../../../packages/ui'; -import { screenSizes } from '@/utils/data'; -import { Frame } from '@/components/Frame'; -import { usePlayground } from '@/utils/playground-context'; -import { - ButtonSnippet, - CheckboxSnippet, - HeadingSnippet, - TextSnippet, -} from '@/snippets/stories-snippets'; - -import styles from './styles.module.css'; - -export default function PlaygroundPage() { - const { selectedScreenSizes } = usePlayground(); - - const filteredScreenSizes = screenSizes.filter(item => - selectedScreenSizes.includes(item.slug), - ); - - if (filteredScreenSizes.length === 0) { - return ( -
- -
- ); - } - - return ( -
- {filteredScreenSizes.map(screenSize => ( -
- - {screenSize.title} - {screenSize.width}px - -
- - - -
-
- ))} -
- ); -} - -const Content = () => { - const { selectedComponents } = usePlayground(); - - return ( - - {selectedComponents.find(c => c === 'button') && ( - } title="Button" /> - )} - {selectedComponents.find(c => c === 'checkbox') && ( - } - title="Checkbox" - /> - )} - {selectedComponents.find(c => c === 'heading') && ( - } title="Heading" /> - )} - {selectedComponents.find(c => c === 'text') && ( - } title="Text" /> - )} - - ); -}; - -const Line = ({ content, title }: { content: ReactNode; title: string }) => { - return ( - - - {title} - - {content} - - ); -}; diff --git a/docs-ui/src/app/(playground)/playground/styles.module.css b/docs-ui/src/app/(playground)/playground/styles.module.css deleted file mode 100644 index 026e8a1bd4..0000000000 --- a/docs-ui/src/app/(playground)/playground/styles.module.css +++ /dev/null @@ -1,36 +0,0 @@ -.container { - height: 100vh; - display: flex; - flex-direction: row; - gap: 24px; - overflow-x: scroll; -} - -.containerEmpty { - padding: 78px 40px; -} - -.breakpointContainer { - flex-shrink: 0; - margin-top: 40px; - height: calc(100vh - 86px); - display: flex; - flex-direction: column; - gap: 8px; - - &:first-child { - margin-left: 48px; - } - - &:last-child { - margin-right: 48px; - } -} - -.breakpointContent { - height: 100%; - border-radius: 4px; - border: 1px solid var(--border); - background-color: var(--bg); - padding: 16px; -} diff --git a/docs-ui/src/app/layout.module.css b/docs-ui/src/app/layout.module.css index 895067c300..e7d9281c38 100644 --- a/docs-ui/src/app/layout.module.css +++ b/docs-ui/src/app/layout.module.css @@ -1,14 +1,15 @@ .container { position: relative; z-index: 20; - width: 100%; + width: calc(100% - 64px); margin-inline: 0 16px; + margin-left: 32px; + margin-right: 32px; margin-top: 112px; margin-bottom: 48px; padding-inline: 40px; padding-block: 48px; - background-color: white; - width: calc(100% - 32px); + background-color: var(--panel); border-radius: 0.5rem; } diff --git a/docs-ui/src/components/ChangelogComponent/index.tsx b/docs-ui/src/components/ChangelogComponent/index.tsx index d70e39e342..f8832b0731 100644 --- a/docs-ui/src/components/ChangelogComponent/index.tsx +++ b/docs-ui/src/components/ChangelogComponent/index.tsx @@ -11,19 +11,22 @@ export const ChangelogComponent = ({ component }: { component: Component }) => { return ( { - const prs = - change.prs.length > 0 && - change.prs - .map( - pr => - `[#${pr}](https://github.com/backstage/backstage/pull/${pr})`, - ) - .join(', '); - return `- \`${change.version}\` - ${change.description} ${prs}`; - }) - .join('\n')}`} + source={` + ## Changelog + + ${componentChangelog + ?.map(change => { + const prs = + change.prs.length > 0 && + change.prs + .map( + pr => + `[#${pr}](https://github.com/backstage/backstage/pull/${pr})`, + ) + .join(', '); + return `- \`${change.version}\` - ${change.description} ${prs}`; + }) + .join('\n')}`} /> ); }; diff --git a/docs-ui/src/components/ComponentInfos/ComponentInfos.tsx b/docs-ui/src/components/ComponentInfos/ComponentInfos.tsx deleted file mode 100644 index a29b01cba0..0000000000 --- a/docs-ui/src/components/ComponentInfos/ComponentInfos.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { Tabs } from '@/components/Tabs'; -import { CodeBlock } from '@/components/CodeBlock'; -import type { ComponentInfosProps } from './types'; -import styles from '@/css/mdx.module.css'; -import Link from 'next/link'; -import { changelog } from '@/utils/changelog'; -import { MDXRemote } from 'next-mdx-remote-client/rsc'; -import { formattedMDXComponents } from '@/mdx-components'; - -export const ComponentInfos = ({ - usageCode, - component, - classNames, -}: ComponentInfosProps) => { - const componentChangelog = changelog.filter(c => - c.components.includes(component), - ); - - return ( - - - Usage - {classNames && classNames.length > 0 && Theming} - Changelog - - - - - {classNames && classNames.length > 0 && ( - -

- We recommend starting with our{' '} - - global tokens - {' '} - 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. -

- `- \`${className}\``) - .join('\n')}`} - /> - - )} - - { - const prs = - change.prs.length > 0 && - change.prs - .map( - pr => - `[#${pr}](https://github.com/backstage/backstage/pull/${pr})`, - ) - .join(', '); - return `- \`${change.version}\` - ${change.description} ${prs}`; - }) - .join('\n')}`} - /> - - - ); -}; diff --git a/docs-ui/src/components/ComponentInfos/index.ts b/docs-ui/src/components/ComponentInfos/index.ts deleted file mode 100644 index 04dbaeb1c6..0000000000 --- a/docs-ui/src/components/ComponentInfos/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { ComponentInfos } from './ComponentInfos'; diff --git a/docs-ui/src/components/ComponentInfos/types.ts b/docs-ui/src/components/ComponentInfos/types.ts deleted file mode 100644 index 8814ff479a..0000000000 --- a/docs-ui/src/components/ComponentInfos/types.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { Component } from '@/utils/changelog'; -import { ReactNode } from 'react'; - -export interface ComponentInfosProps { - usageCode?: string; - classNames?: string[]; - component: Component; - children: ReactNode; -} diff --git a/docs-ui/src/components/CustomTheme/styles.module.css b/docs-ui/src/components/CustomTheme/styles.module.css index 3f0a5eb14e..05604c48be 100644 --- a/docs-ui/src/components/CustomTheme/styles.module.css +++ b/docs-ui/src/components/CustomTheme/styles.module.css @@ -1,5 +1,6 @@ .container { position: fixed; + z-index: 100; bottom: 16px; right: 16px; width: 240px; diff --git a/docs-ui/src/components/Frame/index.tsx b/docs-ui/src/components/Frame/index.tsx deleted file mode 100644 index d6255401dd..0000000000 --- a/docs-ui/src/components/Frame/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -'use client'; - -import { useEffect, useState } from 'react'; -import ReactFrame from 'react-frame-component'; - -export const Frame = ({ children }: { children: React.ReactNode }) => { - const [show, setShow] = useState(false); - - useEffect(() => { - setShow(true); - }, []); - - if (!show) return null; - - return ( -
`} - mountTarget=".frame-root" - head={ - <> - - - - - } - > - {children} - - ); -}; diff --git a/docs-ui/src/components/Sidebar/Sidebar.module.css b/docs-ui/src/components/Sidebar/Sidebar.module.css index 3687869490..b658255b32 100644 --- a/docs-ui/src/components/Sidebar/Sidebar.module.css +++ b/docs-ui/src/components/Sidebar/Sidebar.module.css @@ -94,12 +94,12 @@ border-radius: 4px; &:hover { - background-color: white; + background-color: var(--action); } } .line.active { - background-color: white; + background-color: var(--action); } .line.active .lineTitle { diff --git a/docs-ui/src/components/Theming/index.tsx b/docs-ui/src/components/Theming/index.tsx new file mode 100644 index 0000000000..f015804756 --- /dev/null +++ b/docs-ui/src/components/Theming/index.tsx @@ -0,0 +1,26 @@ +import { MDXRemote } from 'next-mdx-remote-client/rsc'; +import { formattedMDXComponents } from '@/mdx-components'; +import { Component } from '@/utils/changelog'; +import { componentDefinitions } from '../../../../packages/ui/src/utils/componentDefinitions'; + +export function Theming({ component }: { component: Component }) { + const componentDefinition = componentDefinitions[component]; + + if (!componentDefinition) { + return null; + } + + const classNames = componentDefinition.classNames; + + // Convert classNames object values to array + const classNameArray = Object.values(classNames); + + return ( + `- \`${className}\``).join('\n')} + `} + /> + ); +} diff --git a/docs-ui/src/components/Toolbar/Toolbar.module.css b/docs-ui/src/components/Toolbar/Toolbar.module.css index d2803e1962..8142c5464e 100644 --- a/docs-ui/src/components/Toolbar/Toolbar.module.css +++ b/docs-ui/src/components/Toolbar/Toolbar.module.css @@ -2,8 +2,8 @@ position: fixed; display: flex; top: 0; - left: 332px; - right: 40px; + left: 32px; + right: 32px; height: 112px; z-index: 10; align-items: center; @@ -11,6 +11,13 @@ padding-left: 0.25rem; } +@media (min-width: 960px) { + .toolbar { + left: 332px; + right: 40px; + } +} + .left { display: flex; align-items: center; @@ -25,7 +32,13 @@ } .actions { - display: flex; - align-items: center; - gap: 1rem; + display: none; +} + +@media (min-width: 600px) { + .actions { + display: flex; + align-items: center; + gap: 1rem; + } } diff --git a/docs-ui/src/components/Toolbar/Toolbar.tsx b/docs-ui/src/components/Toolbar/Toolbar.tsx index e9c50fb269..952b48f5ac 100644 --- a/docs-ui/src/components/Toolbar/Toolbar.tsx +++ b/docs-ui/src/components/Toolbar/Toolbar.tsx @@ -3,20 +3,8 @@ import { ThemeSelector } from './theme'; import { ThemeNameSelector } from './theme-name'; import styles from './Toolbar.module.css'; -import { usePathname } from 'next/navigation'; -import { components, layoutComponents } from '@/utils/data'; -import { AnimatedName } from './AnimatedName'; export const Toolbar = () => { - const pathname = usePathname(); - const allComponents = [...layoutComponents, ...components]; - const isComponent = pathname.startsWith('/components'); - const componentSlug = pathname.replace('/components/', ''); - const findComponent = allComponents.find(c => c.slug === componentSlug); - - let name = 'UI'; - if (isComponent && findComponent) name = findComponent.title; - return (
@@ -29,7 +17,7 @@ export const Toolbar = () => { >
UI
diff --git a/docs-ui/src/components/Toolbar/theme-name.module.css b/docs-ui/src/components/Toolbar/theme-name.module.css index 02644e8ea0..58471b8fd7 100644 --- a/docs-ui/src/components/Toolbar/theme-name.module.css +++ b/docs-ui/src/components/Toolbar/theme-name.module.css @@ -4,20 +4,20 @@ align-items: center; justify-content: space-between; gap: 0.75rem; - height: 2rem; - padding-left: 0.875rem; - padding-right: 0.75rem; + height: 3rem; + padding-left: 1.25rem; + padding-right: 1rem; margin: 0; outline: 0; border: 1px solid var(--color-gray-200); - border-radius: 0.375rem; + border-radius: 3rem; font-family: inherit; font-size: 1rem; line-height: 1.5rem; color: var(--color-gray-900); cursor: pointer; user-select: none; - background-color: var(--surface-1); + background-color: var(--action); &:focus-visible { outline: 2px solid var(--color-blue); diff --git a/docs-ui/src/components/Toolbar/theme.module.css b/docs-ui/src/components/Toolbar/theme.module.css index a7895ad840..c5490a72d7 100644 --- a/docs-ui/src/components/Toolbar/theme.module.css +++ b/docs-ui/src/components/Toolbar/theme.module.css @@ -1,20 +1,17 @@ .tabs { border-radius: 0.375rem; width: 100%; - background-color: var(--surface-1); } .tabsTheme { width: 100px; border-radius: 0.375rem; - background-color: var(--surface-1); } .list { display: flex; position: relative; z-index: 0; - padding-inline: 0.25rem; gap: 0.25rem; } @@ -29,9 +26,10 @@ appearance: none; color: var(--secondary); user-select: none; - height: 2rem; flex: 1; cursor: pointer; + width: 3rem; + height: 3rem; &[data-selected] { color: var(--primary); @@ -55,7 +53,7 @@ position: absolute; inset: 0.25rem 0; border-radius: 0.25rem; - outline: 2px solid var(--panel); + outline: 2px solid var(--action); outline-offset: -1px; } } @@ -72,9 +70,9 @@ top: 50%; translate: var(--active-tab-left) -50%; width: var(--active-tab-width); - height: 1.5rem; - border-radius: 0.25rem; - background-color: var(--panel); + height: 3rem; + border-radius: 3rem; + background-color: var(--action); transition-property: translate, width; transition-duration: 200ms; transition-timing-function: ease-in-out; diff --git a/docs-ui/src/content/components/avatar.mdx b/docs-ui/src/content/components/avatar.mdx index 99b1da8264..be1fb070d1 100644 --- a/docs-ui/src/content/components/avatar.mdx +++ b/docs-ui/src/content/components/avatar.mdx @@ -8,8 +8,9 @@ import { snippetSizes, snippetFallback, } from './avatar.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; `} /> - +## Usage + + ## API reference @@ -65,3 +57,7 @@ If the image is not available, the avatar will show the initials of the name. preview={} code={snippetFallback} /> + + + + diff --git a/docs-ui/src/content/components/box.mdx b/docs-ui/src/content/components/box.mdx index 0c638ac95b..84fca48349 100644 --- a/docs-ui/src/content/components/box.mdx +++ b/docs-ui/src/content/components/box.mdx @@ -10,8 +10,9 @@ import { boxResponsiveSnippet, } from './box.props'; import { spacingPropDefs } from '@/utils/propDefs'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -56,3 +59,7 @@ A simple example of how to use the Box component. Here's a view when buttons are responsive. + + + + diff --git a/docs-ui/src/content/components/button-icon.mdx b/docs-ui/src/content/components/button-icon.mdx index 3583acd6a9..e1f27e0601 100644 --- a/docs-ui/src/content/components/button-icon.mdx +++ b/docs-ui/src/content/components/button-icon.mdx @@ -12,8 +12,9 @@ import { buttonIconResponsiveSnippet, buttonIconAsLinkSnippet, } from './button-icon.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -80,3 +79,7 @@ Here's a view when buttons are disabled. Here's a view when buttons are responsive. + + + + diff --git a/docs-ui/src/content/components/button-link.mdx b/docs-ui/src/content/components/button-link.mdx index d52c1aadb3..5ce538838d 100644 --- a/docs-ui/src/content/components/button-link.mdx +++ b/docs-ui/src/content/components/button-link.mdx @@ -11,8 +11,9 @@ import { buttonLinkDisabledSnippet, buttonLinkResponsiveSnippet, } from './button-link.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -91,3 +90,7 @@ Here's a view when buttons are disabled. Here's a view when buttons are responsive. + + + + diff --git a/docs-ui/src/content/components/button.mdx b/docs-ui/src/content/components/button.mdx index 8e39a485d3..a25115012b 100644 --- a/docs-ui/src/content/components/button.mdx +++ b/docs-ui/src/content/components/button.mdx @@ -14,6 +14,7 @@ import { } from './button.props'; import { ChangelogComponent } from '@/components/ChangelogComponent'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; -## Theming - -- `bui-Button` - -## Changelog + diff --git a/docs-ui/src/content/components/card.mdx b/docs-ui/src/content/components/card.mdx index e0e49a2cd4..06c3a5bc2e 100644 --- a/docs-ui/src/content/components/card.mdx +++ b/docs-ui/src/content/components/card.mdx @@ -12,8 +12,9 @@ import { cardLongBodySnippet, cardListRowSnippet, } from './card.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -84,3 +83,7 @@ Here's a view when card has a list. code={cardListRowSnippet} open /> + + + + diff --git a/docs-ui/src/content/components/checkbox.mdx b/docs-ui/src/content/components/checkbox.mdx index 82ece3942b..5770396ebb 100644 --- a/docs-ui/src/content/components/checkbox.mdx +++ b/docs-ui/src/content/components/checkbox.mdx @@ -8,8 +8,9 @@ import { checkboxDefaultSnippet, checkboxVariantsSnippet, } from './checkbox.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -46,3 +45,7 @@ Here's a view when checkboxes have different variants. preview={} code={checkboxVariantsSnippet} /> + + + + diff --git a/docs-ui/src/content/components/collapsible.mdx b/docs-ui/src/content/components/collapsible.mdx index 199232545e..948da323fe 100644 --- a/docs-ui/src/content/components/collapsible.mdx +++ b/docs-ui/src/content/components/collapsible.mdx @@ -11,8 +11,9 @@ import { collapsibleTriggerSnippet, collapsibleOpenSnippet, } from './collapsible.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -71,3 +66,7 @@ Open the panel by default by setting the `defaultOpen` prop to `true`. preview={} code={collapsibleOpenSnippet} /> + + + + diff --git a/docs-ui/src/content/components/container.mdx b/docs-ui/src/content/components/container.mdx index 32fd0d5ca8..05615cb1c2 100644 --- a/docs-ui/src/content/components/container.mdx +++ b/docs-ui/src/content/components/container.mdx @@ -9,8 +9,9 @@ import { containerSimpleSnippet, containerResponsiveSnippet, } from './container.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -48,3 +47,7 @@ The Container component also supports responsive values, making it easy to create responsive designs. + + + + diff --git a/docs-ui/src/content/components/flex.mdx b/docs-ui/src/content/components/flex.mdx index ff12320449..89cd2e380a 100644 --- a/docs-ui/src/content/components/flex.mdx +++ b/docs-ui/src/content/components/flex.mdx @@ -12,8 +12,9 @@ import { flexAlignSnippet, } from './flex.props'; import { spacingPropDefs } from '@/utils/propDefs'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -63,3 +62,7 @@ The Flex component also supports responsive alignment, making it easy to create responsive designs. + + + + diff --git a/docs-ui/src/content/components/grid.mdx b/docs-ui/src/content/components/grid.mdx index 6a1c6bd041..0ffdba6a66 100644 --- a/docs-ui/src/content/components/grid.mdx +++ b/docs-ui/src/content/components/grid.mdx @@ -14,8 +14,9 @@ import { gridResponsiveSnippet, gridStartEndSnippet, } from './grid.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -93,3 +92,7 @@ responsive designs. The start and end props can be used to position the item in the grid. + + + + diff --git a/docs-ui/src/content/components/heading.mdx b/docs-ui/src/content/components/heading.mdx index 07c161de75..de724d0b00 100644 --- a/docs-ui/src/content/components/heading.mdx +++ b/docs-ui/src/content/components/heading.mdx @@ -10,8 +10,9 @@ import { headingTruncateSnippet, headingResponsiveSnippet, } from './heading.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -66,3 +65,7 @@ You can also use the `variant` prop to change the appearance of the text based on the screen size. + + + + diff --git a/docs-ui/src/content/components/icon.mdx b/docs-ui/src/content/components/icon.mdx index fea93195c0..91860a7e5e 100644 --- a/docs-ui/src/content/components/icon.mdx +++ b/docs-ui/src/content/components/icon.mdx @@ -7,8 +7,9 @@ import { iconUsageSnippet, iconDefaultSnippet, } from './icon.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference + + + + diff --git a/docs-ui/src/content/components/link.mdx b/docs-ui/src/content/components/link.mdx index 97bb6482aa..ad0c1e0eaf 100644 --- a/docs-ui/src/content/components/link.mdx +++ b/docs-ui/src/content/components/link.mdx @@ -13,8 +13,9 @@ import { linkVariantsSnippet, linkWeightsSnippet, } from './link.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -71,3 +62,7 @@ Here's a view when links have different weights. preview={} code={linkWeightsSnippet} /> + + + + diff --git a/docs-ui/src/content/components/menu.mdx b/docs-ui/src/content/components/menu.mdx index 153b2bcd2b..c1b67b5034 100644 --- a/docs-ui/src/content/components/menu.mdx +++ b/docs-ui/src/content/components/menu.mdx @@ -13,8 +13,9 @@ import { menuHoverSnippet, menuSubmenuSnippet, } from './menu.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -105,3 +88,7 @@ You can nest menus to create a more complex navigation structure. preview={} code={menuSubmenuSnippet} /> + + + + diff --git a/docs-ui/src/content/components/radio-group.mdx b/docs-ui/src/content/components/radio-group.mdx index 8b3ddf1a8f..ab3d28ad81 100644 --- a/docs-ui/src/content/components/radio-group.mdx +++ b/docs-ui/src/content/components/radio-group.mdx @@ -12,8 +12,10 @@ import { radioGroupValidationSnippet, radioGroupReadOnlySnippet, } from './radio-group.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; +import { CodeBlock } from '@/components/CodeBlock'; - +## Usage + + ## API reference @@ -98,3 +98,7 @@ You can make the radio group read only by adding the `isReadOnly` prop to the `R preview={} code={radioGroupReadOnlySnippet} /> + + + + diff --git a/docs-ui/src/content/components/search-field.mdx b/docs-ui/src/content/components/search-field.mdx index a11b0a3d40..cc8ae98685 100644 --- a/docs-ui/src/content/components/search-field.mdx +++ b/docs-ui/src/content/components/search-field.mdx @@ -8,7 +8,10 @@ import { searchFieldSizesSnippet, searchFieldDescriptionSnippet, } from './search-field.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; +import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; +import { CodeBlock } from '@/components/CodeBlock'; - +## Usage + + ## API reference @@ -68,3 +58,7 @@ Here's a simple SearchField with a description. preview={} code={searchFieldDescriptionSnippet} /> + + + + diff --git a/docs-ui/src/content/components/select.mdx b/docs-ui/src/content/components/select.mdx index 0a693fec40..09a852e871 100644 --- a/docs-ui/src/content/components/select.mdx +++ b/docs-ui/src/content/components/select.mdx @@ -12,8 +12,9 @@ import { selectResponsiveSnippet, selectIconSnippet, } from './select.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -102,3 +92,7 @@ Here's a view when the select is disabled. Here's a view when the select is responsive. + + + + diff --git a/docs-ui/src/content/components/skeleton.mdx b/docs-ui/src/content/components/skeleton.mdx index 03a2664898..f0d3fbc39a 100644 --- a/docs-ui/src/content/components/skeleton.mdx +++ b/docs-ui/src/content/components/skeleton.mdx @@ -9,8 +9,9 @@ import { skeletonDemo1Snippet, skeletonDemo2Snippet, } from './skeleton.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -59,3 +58,7 @@ You can use a mix of different sizes to create a more complex skeleton. code={skeletonDemo2Snippet} open /> + + + + diff --git a/docs-ui/src/content/components/switch.mdx b/docs-ui/src/content/components/switch.mdx index a402b2466a..acf588e37d 100644 --- a/docs-ui/src/content/components/switch.mdx +++ b/docs-ui/src/content/components/switch.mdx @@ -3,8 +3,9 @@ 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'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; `} /> - +## Usage + + ## API reference @@ -41,3 +40,7 @@ A switch can be disabled using the `isDisabled` prop. preview={} code={``} /> + + + + diff --git a/docs-ui/src/content/components/tabs.mdx b/docs-ui/src/content/components/tabs.mdx index e2aa0f1ecd..dd0552b436 100644 --- a/docs-ui/src/content/components/tabs.mdx +++ b/docs-ui/src/content/components/tabs.mdx @@ -10,8 +10,9 @@ import { tabsUsageSnippet, tabsDefaultSnippet, } from './tabs.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -61,3 +54,7 @@ An individual interactive tab button that toggles the corresponding panel. Rende A panel displayed when the corresponding tab is active. Renders a `
` element. + + + + diff --git a/docs-ui/src/content/components/text-field.mdx b/docs-ui/src/content/components/text-field.mdx index 922b170551..ad90783ffb 100644 --- a/docs-ui/src/content/components/text-field.mdx +++ b/docs-ui/src/content/components/text-field.mdx @@ -8,8 +8,10 @@ import { textFieldSizesSnippet, textFieldDescriptionSnippet, } from './text-field.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; +import { CodeBlock } from '@/components/CodeBlock'; - +## Usage + + ## API reference @@ -68,3 +58,7 @@ Here's a simple TextField with a description. preview={} code={textFieldDescriptionSnippet} /> + + + + diff --git a/docs-ui/src/content/components/text.mdx b/docs-ui/src/content/components/text.mdx index 2b64c7ca12..d8d095e61d 100644 --- a/docs-ui/src/content/components/text.mdx +++ b/docs-ui/src/content/components/text.mdx @@ -11,8 +11,9 @@ import { textTruncateSnippet, textResponsiveSnippet, } from './text.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -76,3 +75,7 @@ You can also use the `variant` prop to change the appearance of the text based on the screen size. + + + + diff --git a/docs-ui/src/content/components/tooltip.mdx b/docs-ui/src/content/components/tooltip.mdx index d6ea3fb4e4..dd2add5308 100644 --- a/docs-ui/src/content/components/tooltip.mdx +++ b/docs-ui/src/content/components/tooltip.mdx @@ -8,8 +8,9 @@ import { tooltipTriggerPropDefs, tooltipPropDefs, } from './tooltip.props'; -import { ComponentInfos } from '@/components/ComponentInfos'; import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; - +## Usage + + ## API reference @@ -42,3 +41,7 @@ The trigger will wrap both the trigger and the tooltip. The tooltip will wrap the content of the tooltip. + + + + diff --git a/docs-ui/src/css/globals.css b/docs-ui/src/css/globals.css index 24dcc78f3f..334e6a870a 100644 --- a/docs-ui/src/css/globals.css +++ b/docs-ui/src/css/globals.css @@ -3,6 +3,7 @@ --panel: #fff; --primary: #000; --secondary: #929292; + --action: #fff; --link: #4f5ce0; --font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', @@ -17,9 +18,10 @@ [data-theme='dark'] { --bg: #000; - --panel: #1a1a1a; + --panel: #181818; --primary: #fff; --secondary: #818181; + --action: #202020; --link: #4856e8; --border: #2a2a2a; --surface-1: #282828; diff --git a/docs-ui/yarn.lock b/docs-ui/yarn.lock index 7fbef814a6..56895e3b7b 100644 --- a/docs-ui/yarn.lock +++ b/docs-ui/yarn.lock @@ -2321,7 +2321,6 @@ __metadata: prop-types: "npm:^15.8.1" react: "npm:19.1.0" react-dom: "npm:19.1.0" - react-frame-component: "npm:^5.2.7" shiki: "npm:^1.26.1" storybook: "npm:^8.6.8" typescript: "npm:^5" @@ -5587,17 +5586,6 @@ __metadata: languageName: node linkType: hard -"react-frame-component@npm:^5.2.7": - version: 5.2.7 - resolution: "react-frame-component@npm:5.2.7" - peerDependencies: - prop-types: ^15.5.9 - react: ">= 16.3" - react-dom: ">= 16.3" - checksum: 10/bedee0c25075cbfb6d592991937640a9c8680f9017284e73ced338cc07348b3efc99121052b60ba0923d3d4ec1ed050348ddec452f059e0b947f6bff1d5bfe24 - languageName: node - linkType: hard - "react-is@npm:^16.13.1": version: 16.13.1 resolution: "react-is@npm:16.13.1"