From e0c2a356dccddd78a6374e57cd6cd6fb7b0ddd84 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 3 Apr 2025 10:42:33 +0100 Subject: [PATCH 1/4] Add new release page Signed-off-by: Charles de Dreuille --- canon-docs/src/app/(docs)/releases/page.mdx | 31 +++++++++++++++++++++ canon-docs/src/css/globals.css | 2 ++ canon-docs/src/css/mdx.module.css | 19 +++++++++++-- canon-docs/src/mdx-components.tsx | 7 +++-- canon-docs/src/utils/data.ts | 4 +++ 5 files changed, 59 insertions(+), 4 deletions(-) create mode 100644 canon-docs/src/app/(docs)/releases/page.mdx diff --git a/canon-docs/src/app/(docs)/releases/page.mdx b/canon-docs/src/app/(docs)/releases/page.mdx new file mode 100644 index 0000000000..efaa8bf191 --- /dev/null +++ b/canon-docs/src/app/(docs)/releases/page.mdx @@ -0,0 +1,31 @@ +# Releases + +## Version 0.2.0 + +### Main updates + +- New `Tooltip` component ([#29241](https://github.com/backstage/backstage/pull/29241)) +- New `Menu` component. ([#29151](https://github.com/backstage/backstage/pull/29151)) +- New `IconButton` component. ([#29239](https://github.com/backstage/backstage/pull/29239)) +- New `ScrollArea` component. ([#29240](https://github.com/backstage/backstage/pull/29240)) +- Improve `Button` & `Checkbox` styles. ([#29127](https://github.com/backstage/backstage/pull/29127)) ([#28789](https://github.com/backstage/backstage/pull/28789)) +- Improve `Text` styles. ([#29200](https://github.com/backstage/backstage/pull/29200)) +- Renamed `CanonProvider` to `IconProvider`. ([#29002](https://github.com/backstage/backstage/pull/29002)) +- Added about 40+ new icons. ([#29264](https://github.com/backstage/backstage/pull/29264)) +- Simplified styling into a unique styles.css file ([#29199](https://github.com/backstage/backstage/pull/29199)) +- Added Canon styles to Backstage ([#29137](https://github.com/backstage/backstage/pull/29137)) +- Update global CSS tokens ([#28804](https://github.com/backstage/backstage/pull/28804)) +- Merge Stack + Inline into Flex ([#28634](https://github.com/backstage/backstage/pull/28634)) + +### Noticable fixes: + +- Improve `Button` types. ([#29205](https://github.com/backstage/backstage/pull/29205)) +- Move font weight and family back to each components ([#28972](https://github.com/backstage/backstage/pull/28972)) +- Fix custom values in spacing props ([#28770](https://github.com/backstage/backstage/pull/28770)) +- Multiple updates on the Canon Docs site ([#28760](https://github.com/backstage/backstage/pull/28760)) ([#28591](https://github.com/backstage/backstage/pull/28591)) + +## Version 0.1.0 + +We're excited to share the initial release of Canon 💚 In this first alpha version, you'll find the foundation of our design system: +a set of versatile layout components and a handful of essential atomic elements to help you get started. While Canon is still in its +early stages, it's ready for exploration and we'd love for you to give it a try and share your feedback. diff --git a/canon-docs/src/css/globals.css b/canon-docs/src/css/globals.css index d7e64c3341..21f55587d1 100644 --- a/canon-docs/src/css/globals.css +++ b/canon-docs/src/css/globals.css @@ -3,6 +3,7 @@ --panel: #fff; --primary: #000; --secondary: #757575; + --link: #4f5ce0; --font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; @@ -18,6 +19,7 @@ --panel: #222222; --primary: #fff; --secondary: #9e9e9e; + --link: #4856e8; --border: rgba(255, 255, 255, 0.1); } diff --git a/canon-docs/src/css/mdx.module.css b/canon-docs/src/css/mdx.module.css index 9fb977214d..4900455504 100644 --- a/canon-docs/src/css/mdx.module.css +++ b/canon-docs/src/css/mdx.module.css @@ -27,6 +27,21 @@ color: var(--secondary); } -.p:first-of-type { - margin-bottom: 2rem; +.ul { + margin: 0; + padding-left: 2rem; +} + +.li { + color: var(--secondary); + margin-bottom: 0.5rem; +} + +.a { + color: var(--link); + text-decoration: none; +} + +.a:hover { + text-decoration: underline; } diff --git a/canon-docs/src/mdx-components.tsx b/canon-docs/src/mdx-components.tsx index 8ef40f3924..9517e882cc 100644 --- a/canon-docs/src/mdx-components.tsx +++ b/canon-docs/src/mdx-components.tsx @@ -17,12 +17,15 @@ export function useMDXComponents(components: MDXComponents): MDXComponents { ), p: ({ children }) =>

{children as ReactNode}

, a: ({ children, href }) => ( - + {children as ReactNode} ), + ul: ({ children }) => ( + + ), li: ({ children }) => ( -
  • {children as ReactNode}
    • +
  • {children as ReactNode}
    • ), pre: ({ children }) => { const codeContent = React.isValidElement(children) diff --git a/canon-docs/src/utils/data.ts b/canon-docs/src/utils/data.ts index 4c5436eac7..c253089022 100644 --- a/canon-docs/src/utils/data.ts +++ b/canon-docs/src/utils/data.ts @@ -13,6 +13,10 @@ export const overview: Page[] = [ title: 'About', slug: 'about', }, + { + title: 'Releases', + slug: 'releases', + }, ]; export const theme: Page[] = [ From aec9da25a2d0703da10458ce76e8225eed4fadec Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 3 Apr 2025 10:56:13 +0100 Subject: [PATCH 2/4] Update canon-docs/src/app/(docs)/releases/page.mdx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fredrik Adelöw Signed-off-by: Charles de Dreuille --- canon-docs/src/app/(docs)/releases/page.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/canon-docs/src/app/(docs)/releases/page.mdx b/canon-docs/src/app/(docs)/releases/page.mdx index efaa8bf191..5fc22cd6b4 100644 --- a/canon-docs/src/app/(docs)/releases/page.mdx +++ b/canon-docs/src/app/(docs)/releases/page.mdx @@ -17,7 +17,7 @@ - Update global CSS tokens ([#28804](https://github.com/backstage/backstage/pull/28804)) - Merge Stack + Inline into Flex ([#28634](https://github.com/backstage/backstage/pull/28634)) -### Noticable fixes: +### Notable fixes: - Improve `Button` types. ([#29205](https://github.com/backstage/backstage/pull/29205)) - Move font weight and family back to each components ([#28972](https://github.com/backstage/backstage/pull/28972)) From 3f1c2dafeef1f660d122e04937ea859a14aae88e Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 3 Apr 2025 11:19:49 +0100 Subject: [PATCH 3/4] Fix docs on TextField Signed-off-by: Charles de Dreuille --- .../src/app/(docs)/components/field/page.mdx | 99 ------------------- .../src/app/(docs)/components/field/props.ts | 69 ------------- .../components/{input => text-field}/page.mdx | 42 +++++--- .../components/{input => text-field}/props.ts | 0 canon-docs/src/snippets/stories-snippets.tsx | 20 +--- canon-docs/src/utils/data.ts | 15 +-- .../TextField/TextField.stories.tsx | 5 +- .../src/components/TextField/TextField.tsx | 7 +- 8 files changed, 45 insertions(+), 212 deletions(-) delete mode 100644 canon-docs/src/app/(docs)/components/field/page.mdx delete mode 100644 canon-docs/src/app/(docs)/components/field/props.ts rename canon-docs/src/app/(docs)/components/{input => text-field}/page.mdx (51%) rename canon-docs/src/app/(docs)/components/{input => text-field}/props.ts (100%) diff --git a/canon-docs/src/app/(docs)/components/field/page.mdx b/canon-docs/src/app/(docs)/components/field/page.mdx deleted file mode 100644 index 1526ce8c9f..0000000000 --- a/canon-docs/src/app/(docs)/components/field/page.mdx +++ /dev/null @@ -1,99 +0,0 @@ -import { PropsTable } from '@/components/PropsTable'; -import { Snippet } from '@/components/Snippet'; -import { Tabs } from '@/components/Tabs'; -import { CodeBlock } from '@/components/CodeBlock'; -import { FieldSnippet } from '@/snippets/stories-snippets'; -import { BaseUI } from '@/components/HeadlessBanners/BaseUI'; -import { - fieldRootPropDefs, - fieldLabelPropDefs, - fieldDescriptionPropDefs, - fieldErrorPropDefs, -} from './props'; - -# Field - -A wrapper around `Input` or `Select` component to add label, description and error messages.. - -} - code={``} -/> - - - - Usage - Theming - - - - Name - - Visible on your profile - -`} - /> - - - 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. - - - - -`} - /> - - - -## API reference - - - -### Field.Root - -Groups all parts of the field. Renders a `
    ` element. - - - -### Field.Label - -An accessible label that is automatically associated with the field control. Renders a `