From 6916b16531e723962067ef632c17d1c6b8ca3101 Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Fri, 31 May 2024 12:25:58 +0200 Subject: [PATCH 01/12] feat(status): :sparkles: component lifecycle badge for stories --- storybook/src/docs/components/StatusBadge.tsx | 19 +++++++++++++++++++ .../src/docs/components/status-badge.css | 19 +++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 storybook/src/docs/components/StatusBadge.tsx create mode 100644 storybook/src/docs/components/status-badge.css diff --git a/storybook/src/docs/components/StatusBadge.tsx b/storybook/src/docs/components/StatusBadge.tsx new file mode 100644 index 0000000000..a5c6443ae3 --- /dev/null +++ b/storybook/src/docs/components/StatusBadge.tsx @@ -0,0 +1,19 @@ +import './status-badge.css' +import { Badge } from '@amsterdam/design-system-react/src' + +export const StatusBadge = ({ + status = 'beta', + statusReason = '', + documentTop = true, +}: { + status: 'beta' + statusReason: string + documentTop: boolean +}) => { + return ( + + + {statusReason && {statusReason}} + + ) +} diff --git a/storybook/src/docs/components/status-badge.css b/storybook/src/docs/components/status-badge.css new file mode 100644 index 0000000000..da39854a39 --- /dev/null +++ b/storybook/src/docs/components/status-badge.css @@ -0,0 +1,19 @@ +.ams-storybook-status-badge { + align-items: center; + display: inline-flex; + gap: 1em; +} + +/* + * Position the badge at the top of the page above the top-level heading without affecting margins. + * This class is applied by default. + */ + +.ams-storybook-status-badge.ams-storybook-status-badge--top { + position: relative; + top: -1rem; +} + +.ams-storybook-status-badge.ams-storybook-status-badge--top ~ h1 { + margin-block-start: 0; +} From 28beafd5fb53db3df6a720ecc2c3b5e84366e25b Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Fri, 31 May 2024 12:27:05 +0200 Subject: [PATCH 02/12] feat(status): :tada: apply status badge to beta components --- storybook/src/components/Header/Header.docs.mdx | 3 +++ storybook/src/components/Icon/Icon.docs.mdx | 3 +++ storybook/src/components/MegaMenu/MegaMenu.docs.mdx | 3 +++ storybook/src/components/PageMenu/PageMenu.docs.mdx | 3 +++ storybook/src/components/TopTaskLink/TopTaskLink.docs.mdx | 3 +++ storybook/src/docs/icon-gallery.docs.mdx | 3 +++ 6 files changed, 18 insertions(+) diff --git a/storybook/src/components/Header/Header.docs.mdx b/storybook/src/components/Header/Header.docs.mdx index 1f0ed5f1ab..2a9d23033b 100644 --- a/storybook/src/components/Header/Header.docs.mdx +++ b/storybook/src/components/Header/Header.docs.mdx @@ -1,9 +1,12 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as HeaderStories from "./Header.stories.tsx"; import README from "../../../../packages/css/src/components/header/README.md?raw"; +import { StatusBadge } from "../../docs/components/StatusBadge"; + + {README} diff --git a/storybook/src/components/Icon/Icon.docs.mdx b/storybook/src/components/Icon/Icon.docs.mdx index 38b8401b76..32811f8f77 100644 --- a/storybook/src/components/Icon/Icon.docs.mdx +++ b/storybook/src/components/Icon/Icon.docs.mdx @@ -1,9 +1,12 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as IconStories from "./Icon.stories.tsx"; import README from "../../../../packages/css/src/components/icon/README.md?raw"; +import { StatusBadge } from "../../docs/components/StatusBadge"; + + {README} # Usage diff --git a/storybook/src/components/MegaMenu/MegaMenu.docs.mdx b/storybook/src/components/MegaMenu/MegaMenu.docs.mdx index d5483277d7..808c1b6373 100644 --- a/storybook/src/components/MegaMenu/MegaMenu.docs.mdx +++ b/storybook/src/components/MegaMenu/MegaMenu.docs.mdx @@ -1,9 +1,12 @@ import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks"; import * as MegaMenuStories from "./MegaMenu.stories.tsx"; import README from "../../../../packages/css/src/components/mega-menu/README.md?raw"; +import { StatusBadge } from "../../docs/components/StatusBadge"; + + {README} diff --git a/storybook/src/components/PageMenu/PageMenu.docs.mdx b/storybook/src/components/PageMenu/PageMenu.docs.mdx index 1194109957..0bf82f77aa 100644 --- a/storybook/src/components/PageMenu/PageMenu.docs.mdx +++ b/storybook/src/components/PageMenu/PageMenu.docs.mdx @@ -1,9 +1,12 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as PageMenuStories from "./PageMenu.stories.tsx"; import README from "../../../../packages/css/src/components/page-menu/README.md?raw"; +import { StatusBadge } from "../../docs/components/StatusBadge"; + + {README} diff --git a/storybook/src/components/TopTaskLink/TopTaskLink.docs.mdx b/storybook/src/components/TopTaskLink/TopTaskLink.docs.mdx index 6dc8f88316..12cdc6e6ae 100644 --- a/storybook/src/components/TopTaskLink/TopTaskLink.docs.mdx +++ b/storybook/src/components/TopTaskLink/TopTaskLink.docs.mdx @@ -1,9 +1,12 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as TopTaskLinkStories from "./TopTaskLink.stories.tsx"; import README from "../../../../packages/css/src/components/top-task-link/README.md?raw"; +import { StatusBadge } from "../../docs/components/StatusBadge"; + + {README} diff --git a/storybook/src/docs/icon-gallery.docs.mdx b/storybook/src/docs/icon-gallery.docs.mdx index 6a071155eb..77cc8dc5da 100644 --- a/storybook/src/docs/icon-gallery.docs.mdx +++ b/storybook/src/docs/icon-gallery.docs.mdx @@ -1,8 +1,11 @@ import { Meta } from "@storybook/blocks"; import { AmsterdamIconGallery } from "./components/AmsterdamIconGallery"; +import { StatusBadge } from "./components/StatusBadge"; + + # Icons An overview of all currently available icons. From 5d3a78f0e11dccaab897280188f2c8d02d36cb50 Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Fri, 31 May 2024 13:40:55 +0200 Subject: [PATCH 03/12] =?UTF-8?q?fix(status):=20=E2=99=BB=EF=B8=8Fi=20repl?= =?UTF-8?q?ace=20positioning=20with=20margin?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- storybook/src/docs/components/status-badge.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/storybook/src/docs/components/status-badge.css b/storybook/src/docs/components/status-badge.css index da39854a39..79afe6858b 100644 --- a/storybook/src/docs/components/status-badge.css +++ b/storybook/src/docs/components/status-badge.css @@ -10,8 +10,7 @@ */ .ams-storybook-status-badge.ams-storybook-status-badge--top { - position: relative; - top: -1rem; + margin-block-end: 1rem; } .ams-storybook-status-badge.ams-storybook-status-badge--top ~ h1 { From d1de2423be340f943861dcd9094daf613127fd3c Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Fri, 31 May 2024 14:08:08 +0200 Subject: [PATCH 04/12] refactor(status): :recycle: style with sb overrides; simplify badge --- storybook/config/storybook-overrides.css | 6 +----- storybook/src/docs/components/status-badge.css | 9 --------- 2 files changed, 1 insertion(+), 14 deletions(-) diff --git a/storybook/config/storybook-overrides.css b/storybook/config/storybook-overrides.css index 976f5bc5aa..89116d8fe2 100644 --- a/storybook/config/storybook-overrides.css +++ b/storybook/config/storybook-overrides.css @@ -55,6 +55,7 @@ .sbdocs-content.sbdocs-content > h1, .sbdocs-content.sbdocs-content > div:not(.sb-unstyled) > h1 { font-size: 2.5rem; + margin-block-start: 0; } .sbdocs-content.sbdocs-content > h2, @@ -88,11 +89,6 @@ padding-block: 0; } -.sbdocs-content.sbdocs-content > :first-child, -.sbdocs-content.sbdocs-content > div:not(.sb-unstyled) > :first-child { - margin-block-start: 0; -} - .sbdocs-content.sbdocs-content > table:not(.sb-unstyled) :is(td, th), .sbdocs-content.sbdocs-content > div:not(.sb-unstyled) > table:not(.sb-unstyled) :is(td, th) { font-size: 1rem; diff --git a/storybook/src/docs/components/status-badge.css b/storybook/src/docs/components/status-badge.css index 79afe6858b..b363e483b8 100644 --- a/storybook/src/docs/components/status-badge.css +++ b/storybook/src/docs/components/status-badge.css @@ -4,15 +4,6 @@ gap: 1em; } -/* - * Position the badge at the top of the page above the top-level heading without affecting margins. - * This class is applied by default. - */ - .ams-storybook-status-badge.ams-storybook-status-badge--top { margin-block-end: 1rem; } - -.ams-storybook-status-badge.ams-storybook-status-badge--top ~ h1 { - margin-block-start: 0; -} From 14095d630405f896218caf81f889e49817cce9c4 Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Fri, 31 May 2024 15:03:08 +0200 Subject: [PATCH 05/12] fix(status): empty string instead of "undefined" --- storybook/src/docs/components/StatusBadge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/storybook/src/docs/components/StatusBadge.tsx b/storybook/src/docs/components/StatusBadge.tsx index a5c6443ae3..7910393989 100644 --- a/storybook/src/docs/components/StatusBadge.tsx +++ b/storybook/src/docs/components/StatusBadge.tsx @@ -11,7 +11,7 @@ export const StatusBadge = ({ documentTop: boolean }) => { return ( - + {statusReason && {statusReason}} From d87939c1ecb925aea42f68b4f21695e92ed83475 Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Fri, 31 May 2024 15:30:41 +0200 Subject: [PATCH 06/12] feat(status): :fire: remove class modifier for top-level --- storybook/src/docs/components/StatusBadge.tsx | 12 ++---------- storybook/src/docs/components/status-badge.css | 5 +---- 2 files changed, 3 insertions(+), 14 deletions(-) diff --git a/storybook/src/docs/components/StatusBadge.tsx b/storybook/src/docs/components/StatusBadge.tsx index 7910393989..b4a3ab69b4 100644 --- a/storybook/src/docs/components/StatusBadge.tsx +++ b/storybook/src/docs/components/StatusBadge.tsx @@ -1,17 +1,9 @@ import './status-badge.css' import { Badge } from '@amsterdam/design-system-react/src' -export const StatusBadge = ({ - status = 'beta', - statusReason = '', - documentTop = true, -}: { - status: 'beta' - statusReason: string - documentTop: boolean -}) => { +export const StatusBadge = ({ status = 'beta', statusReason = '' }: { status: 'beta'; statusReason: string }) => { return ( - + {statusReason && {statusReason}} diff --git a/storybook/src/docs/components/status-badge.css b/storybook/src/docs/components/status-badge.css index b363e483b8..0ae1847cad 100644 --- a/storybook/src/docs/components/status-badge.css +++ b/storybook/src/docs/components/status-badge.css @@ -2,8 +2,5 @@ align-items: center; display: inline-flex; gap: 1em; -} - -.ams-storybook-status-badge.ams-storybook-status-badge--top { - margin-block-end: 1rem; + padding-block-end: 1rem; } From 3e683d6966fbc364a11ad780ffacbfee6509ceb8 Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Fri, 31 May 2024 16:25:50 +0200 Subject: [PATCH 07/12] feat(status): :speech_balloon: Add reasons for beta status --- storybook/src/components/Header/Header.docs.mdx | 2 +- storybook/src/components/Icon/Icon.docs.mdx | 2 +- storybook/src/components/MegaMenu/MegaMenu.docs.mdx | 2 +- storybook/src/components/PageMenu/PageMenu.docs.mdx | 2 +- storybook/src/docs/icon-gallery.docs.mdx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/storybook/src/components/Header/Header.docs.mdx b/storybook/src/components/Header/Header.docs.mdx index 2a9d23033b..707d229a8e 100644 --- a/storybook/src/components/Header/Header.docs.mdx +++ b/storybook/src/components/Header/Header.docs.mdx @@ -5,7 +5,7 @@ import { StatusBadge } from "../../docs/components/StatusBadge"; - + {README} diff --git a/storybook/src/components/Icon/Icon.docs.mdx b/storybook/src/components/Icon/Icon.docs.mdx index 32811f8f77..18b4bcb015 100644 --- a/storybook/src/components/Icon/Icon.docs.mdx +++ b/storybook/src/components/Icon/Icon.docs.mdx @@ -5,7 +5,7 @@ import { StatusBadge } from "../../docs/components/StatusBadge"; - + {README} diff --git a/storybook/src/components/MegaMenu/MegaMenu.docs.mdx b/storybook/src/components/MegaMenu/MegaMenu.docs.mdx index 808c1b6373..7da97ee315 100644 --- a/storybook/src/components/MegaMenu/MegaMenu.docs.mdx +++ b/storybook/src/components/MegaMenu/MegaMenu.docs.mdx @@ -5,7 +5,7 @@ import { StatusBadge } from "../../docs/components/StatusBadge"; - + {README} diff --git a/storybook/src/components/PageMenu/PageMenu.docs.mdx b/storybook/src/components/PageMenu/PageMenu.docs.mdx index 0bf82f77aa..639c8e317b 100644 --- a/storybook/src/components/PageMenu/PageMenu.docs.mdx +++ b/storybook/src/components/PageMenu/PageMenu.docs.mdx @@ -5,7 +5,7 @@ import { StatusBadge } from "../../docs/components/StatusBadge"; - + {README} diff --git a/storybook/src/docs/icon-gallery.docs.mdx b/storybook/src/docs/icon-gallery.docs.mdx index 77cc8dc5da..b14806369c 100644 --- a/storybook/src/docs/icon-gallery.docs.mdx +++ b/storybook/src/docs/icon-gallery.docs.mdx @@ -4,7 +4,7 @@ import { StatusBadge } from "./components/StatusBadge"; - + # Icons From d0c7991cdee0df7833b64116398538d16cfddcc0 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 4 Jun 2024 20:50:15 +0200 Subject: [PATCH 08/12] Update StatusBadge API and descriptions --- .../src/components/Header/Header.docs.mdx | 2 +- storybook/src/components/Icon/Icon.docs.mdx | 2 +- .../src/components/MegaMenu/MegaMenu.docs.mdx | 2 +- .../src/components/PageMenu/PageMenu.docs.mdx | 2 +- .../TopTaskLink/TopTaskLink.docs.mdx | 2 +- storybook/src/docs/components/StatusBadge.tsx | 20 ++++++++++++------- .../src/docs/components/status-badge.css | 6 +++--- storybook/src/docs/icon-gallery.docs.mdx | 2 +- 8 files changed, 22 insertions(+), 16 deletions(-) diff --git a/storybook/src/components/Header/Header.docs.mdx b/storybook/src/components/Header/Header.docs.mdx index 707d229a8e..0f73bfc46f 100644 --- a/storybook/src/components/Header/Header.docs.mdx +++ b/storybook/src/components/Header/Header.docs.mdx @@ -5,7 +5,7 @@ import { StatusBadge } from "../../docs/components/StatusBadge"; - + {README} diff --git a/storybook/src/components/Icon/Icon.docs.mdx b/storybook/src/components/Icon/Icon.docs.mdx index 18b4bcb015..1062f52f62 100644 --- a/storybook/src/components/Icon/Icon.docs.mdx +++ b/storybook/src/components/Icon/Icon.docs.mdx @@ -5,7 +5,7 @@ import { StatusBadge } from "../../docs/components/StatusBadge"; - + {README} diff --git a/storybook/src/components/MegaMenu/MegaMenu.docs.mdx b/storybook/src/components/MegaMenu/MegaMenu.docs.mdx index 7da97ee315..a71277dd7a 100644 --- a/storybook/src/components/MegaMenu/MegaMenu.docs.mdx +++ b/storybook/src/components/MegaMenu/MegaMenu.docs.mdx @@ -5,7 +5,7 @@ import { StatusBadge } from "../../docs/components/StatusBadge"; - + {README} diff --git a/storybook/src/components/PageMenu/PageMenu.docs.mdx b/storybook/src/components/PageMenu/PageMenu.docs.mdx index 639c8e317b..e831b26010 100644 --- a/storybook/src/components/PageMenu/PageMenu.docs.mdx +++ b/storybook/src/components/PageMenu/PageMenu.docs.mdx @@ -5,7 +5,7 @@ import { StatusBadge } from "../../docs/components/StatusBadge"; - + {README} diff --git a/storybook/src/components/TopTaskLink/TopTaskLink.docs.mdx b/storybook/src/components/TopTaskLink/TopTaskLink.docs.mdx index 12cdc6e6ae..29fe3f95c8 100644 --- a/storybook/src/components/TopTaskLink/TopTaskLink.docs.mdx +++ b/storybook/src/components/TopTaskLink/TopTaskLink.docs.mdx @@ -5,7 +5,7 @@ import { StatusBadge } from "../../docs/components/StatusBadge"; - + {README} diff --git a/storybook/src/docs/components/StatusBadge.tsx b/storybook/src/docs/components/StatusBadge.tsx index b4a3ab69b4..42501197da 100644 --- a/storybook/src/docs/components/StatusBadge.tsx +++ b/storybook/src/docs/components/StatusBadge.tsx @@ -1,11 +1,17 @@ import './status-badge.css' import { Badge } from '@amsterdam/design-system-react/src' -export const StatusBadge = ({ status = 'beta', statusReason = '' }: { status: 'beta'; statusReason: string }) => { - return ( - - - {statusReason && {statusReason}} - - ) +type StatusBadgeProps = { + /** The status of this component. */ + label?: string + /* The explanation of what needs to change before transitioning into another status. */ + reason: string } + +/** Indicates the status of a component. Use this to prepare implementers for API changes. */ +export const StatusBadge = ({ label = 'beta', reason }: StatusBadgeProps) => ( + + + {reason} + +) diff --git a/storybook/src/docs/components/status-badge.css b/storybook/src/docs/components/status-badge.css index 0ae1847cad..a65e6a688d 100644 --- a/storybook/src/docs/components/status-badge.css +++ b/storybook/src/docs/components/status-badge.css @@ -1,6 +1,6 @@ .ams-storybook-status-badge { - align-items: center; + align-items: baseline; display: inline-flex; - gap: 1em; - padding-block-end: 1rem; + gap: var(--ams-space-stack-xs); + margin-block-end: 1rem; } diff --git a/storybook/src/docs/icon-gallery.docs.mdx b/storybook/src/docs/icon-gallery.docs.mdx index b14806369c..5bfb212513 100644 --- a/storybook/src/docs/icon-gallery.docs.mdx +++ b/storybook/src/docs/icon-gallery.docs.mdx @@ -4,7 +4,7 @@ import { StatusBadge } from "./components/StatusBadge"; - + # Icons From 3613dfcb87db0d7f6ffc08554022dbdabee7b66e Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 4 Jun 2024 20:57:37 +0200 Subject: [PATCH 09/12] Remove unused prop --- storybook/src/docs/components/StatusBadge.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/storybook/src/docs/components/StatusBadge.tsx b/storybook/src/docs/components/StatusBadge.tsx index 42501197da..cdf84eea83 100644 --- a/storybook/src/docs/components/StatusBadge.tsx +++ b/storybook/src/docs/components/StatusBadge.tsx @@ -2,16 +2,14 @@ import './status-badge.css' import { Badge } from '@amsterdam/design-system-react/src' type StatusBadgeProps = { - /** The status of this component. */ - label?: string - /* The explanation of what needs to change before transitioning into another status. */ + /* Explains how the component must change to transition into another status. */ reason: string } /** Indicates the status of a component. Use this to prepare implementers for API changes. */ -export const StatusBadge = ({ label = 'beta', reason }: StatusBadgeProps) => ( +export const StatusBadge = ({ reason }: StatusBadgeProps) => ( - + {reason} ) From b6d6a00893d41e694bc5916e3a36d54b22f0bd16 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 4 Jun 2024 21:09:37 +0200 Subject: [PATCH 10/12] Fix styling --- storybook/config/storybook-overrides.css | 10 ++++++++++ storybook/src/docs/components/status-badge.css | 3 +-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/storybook/config/storybook-overrides.css b/storybook/config/storybook-overrides.css index 89116d8fe2..bd7a65cb51 100644 --- a/storybook/config/storybook-overrides.css +++ b/storybook/config/storybook-overrides.css @@ -33,6 +33,16 @@ margin-block-end: 2em; } +.sbdocs-content.sbdocs-content > .ams-storybook-status-badge { + margin-block-end: 1.5rem; +} + +.sbdocs-content.sbdocs-content > .ams-storybook-status-badge > span:nth-child(2) { + color: #000000; + font-family: "Amsterdam Sans", Arial, sans-serif; + font-size: var(--ams-text-level-6-font-size); +} + .sbdocs-content.sbdocs-content .sbdocs-a { color: #004699; text-decoration: underline; diff --git a/storybook/src/docs/components/status-badge.css b/storybook/src/docs/components/status-badge.css index a65e6a688d..6f56e7096e 100644 --- a/storybook/src/docs/components/status-badge.css +++ b/storybook/src/docs/components/status-badge.css @@ -1,6 +1,5 @@ .ams-storybook-status-badge { - align-items: baseline; + align-items: center; display: inline-flex; gap: var(--ams-space-stack-xs); - margin-block-end: 1rem; } From 5f9ca56eadde436c95da5be61b23fd652797b656 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 4 Jun 2024 21:16:06 +0200 Subject: [PATCH 11/12] Mark color palette as beta --- storybook/src/docs/color.docs.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/storybook/src/docs/color.docs.mdx b/storybook/src/docs/color.docs.mdx index a672d416d7..1203a11f52 100644 --- a/storybook/src/docs/color.docs.mdx +++ b/storybook/src/docs/color.docs.mdx @@ -1,9 +1,12 @@ import tokens from "@amsterdam/design-system-tokens/dist/index.json"; import { Meta } from "@storybook/blocks"; import { ColorPalette } from "./components/ColorPalette"; +import { StatusBadge } from "./components/StatusBadge"; + + # Colour The basic colours of Amsterdam are white, red, and black. From 621ccb69bb13e20bb931584b8c091d35ecd2e20b Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 4 Jun 2024 21:16:33 +0200 Subject: [PATCH 12/12] Update documentation on stability of the components --- packages/react/README.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/react/README.md b/packages/react/README.md index ad65d42512..3d258acf48 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -10,11 +10,12 @@ which are automatically installed when you install the React package. ## Stability of the components -The React components are released as _alpha_ version, which means the components are still work in progress and it is likely that some APIs will change between releases. +The React Library has not yet reached a 1.0.0 version. +However, most of them are stable enough to be used in production. +Components that have known issues, or for which we anticipate API changes, show a ‘beta’ badge on their page. -Make sure you specify the exact version as dependency, so you can schedule to upgrade to the latest version when you have time to test for regression bugs. - - +Make sure you specify the exact version as dependency. +You can then schedule an upgrade to the latest version when you have time to test for regressions. ## Getting started