From 4311584fb2729885dab8f8a73782ff189124eae4 Mon Sep 17 00:00:00 2001 From: nuria1110 Date: Mon, 27 Jan 2025 15:55:52 +0000 Subject: [PATCH 1/2] docs(drawer): fix expanded uncontrolled error with controls --- src/components/drawer/drawer.stories.tsx | 94 +++++++++++++++--------- 1 file changed, 60 insertions(+), 34 deletions(-) diff --git a/src/components/drawer/drawer.stories.tsx b/src/components/drawer/drawer.stories.tsx index 28a96bee40..7451c13bea 100644 --- a/src/components/drawer/drawer.stories.tsx +++ b/src/components/drawer/drawer.stories.tsx @@ -32,6 +32,9 @@ const meta: Meta = { chromatic: { disableSnapshot: false, }, + controls: { + exclude: ["title", "footer", "sidebar", "onChange"], + }, }, }; @@ -41,9 +44,6 @@ type Story = StoryObj; export const Default: Story = (args: DrawerProps) => (
  • link a
    • @@ -59,11 +59,16 @@ export const Default: Story = (args: DrawerProps) => (     ); Default.storyName = "Default"; +Default.args = { + expandedWidth: "40%", + animationDuration: "0.5s", + sidebarAriaLabel: "default", + expanded: true, +}; export const CustomHeight: Story = (args: DrawerProps) => (
  • link a
    • @@ -82,6 +87,7 @@ CustomHeight.args = { expandedWidth: "40%", animationDuration: "0.5s", sidebarAriaLabel: "custom height", + expanded: true, }; export const BackgroundColorRed: Story = (args: DrawerProps) => ( @@ -107,6 +113,7 @@ BackgroundColorRed.args = { animationDuration: "0.5s", sidebarAriaLabel: "custom background color red", backgroundColor: "#FF0000", + expanded: true, }; export const BackgroundColorWhite: Story = (args: DrawerProps) => ( @@ -132,6 +139,7 @@ BackgroundColorWhite.args = { animationDuration: "0.5s", sidebarAriaLabel: "custom background color white", backgroundColor: "#FFFFFF", + expanded: true, }; export const BackgroundColorTransparent: Story = (args: DrawerProps) => ( @@ -157,13 +165,12 @@ BackgroundColorTransparent.args = { animationDuration: "0.5s", sidebarAriaLabel: "custom background color transparent", backgroundColor: "transparent", + expanded: true, }; export const Title: Story = (args: DrawerProps) => ( Drawer title} sidebar={
      @@ -180,13 +187,15 @@ export const Title: Story = (args: DrawerProps) => ( ); Title.storyName = "Title"; +Title.args = { + expandedWidth: "40%", + animationDuration: "0.5s", + expanded: true, +}; export const WithSidebarAriaLabel: Story = (args: DrawerProps) => (
    • link a
      • @@ -202,11 +211,16 @@ export const WithSidebarAriaLabel: Story = (args: DrawerProps) => (       ); WithSidebarAriaLabel.storyName = "Sidebar Aria Label"; +WithSidebarAriaLabel.args = { + expandedWidth: "40%", + animationDuration: "0.5s", + sidebarAriaLabel: "sidebar aria label", + expanded: true, +}; export const WithControls: Story = (args: DrawerProps) => (
    • link a
      • @@ -226,16 +240,14 @@ WithControls.args = { expandedWidth: "40%", animationDuration: "0.5s", sidebarAriaLabel: "with controls", + showControls: true, + expanded: true, }; -export const WithStickyHeader: Story = () => ( +export const WithStickyHeader: Story = (args: DrawerProps) => ( Sticky Header} - stickyHeader - showControls - expandedWidth="40%" - animationDuration="0.5s" sidebar={ <> ( /> } + {...args} > content body content body content body content body content body content body content body @@ -302,15 +315,18 @@ export const WithStickyHeader: Story = () => ( ); WithStickyHeader.storyName = "With Sticky Header"; +WithStickyHeader.args = { + expandedWidth: "40%", + animationDuration: "0.5s", + stickyHeader: true, + showControls: true, + expanded: true, +}; -export const WithFooter: Story = () => ( +export const WithFooter: Story = (args: DrawerProps) => ( With Footer} - stickyHeader - showControls - expandedWidth="40%" - animationDuration="0.5s" footer={ @@ -378,6 +394,7 @@ export const WithFooter: Story = () => ( /> } + {...args} > content body content body content body content body content body content body content body @@ -385,16 +402,18 @@ export const WithFooter: Story = () => ( ); WithFooter.storyName = "With Footer"; +WithFooter.args = { + expandedWidth: "40%", + animationDuration: "0.5s", + stickyHeader: true, + showControls: true, + expanded: true, +}; -export const WithStickyFooter: Story = () => ( +export const WithStickyFooter: Story = (args: DrawerProps) => ( Sticky Footer} - stickyHeader - stickyFooter - showControls - expandedWidth="40%" - animationDuration="0.5s" footer={ @@ -462,6 +481,7 @@ export const WithStickyFooter: Story = () => ( /> } + {...args} > content body content body content body content body content body content body content body @@ -469,6 +489,14 @@ export const WithStickyFooter: Story = () => ( ); WithStickyFooter.storyName = "With Sticky Footer"; +WithStickyFooter.args = { + expandedWidth: "40%", + animationDuration: "0.5s", + stickyHeader: true, + stickyFooter: true, + showControls: true, + expanded: true, +}; export const CustomSidebar: Story = (args: DrawerProps) => { const rows = [ @@ -610,7 +638,6 @@ export const CustomSidebar: Story = (args: DrawerProps) => { return ( (
    • link a
      • @@ -763,6 +790,8 @@ CustomContent.storyName = "Custom Content"; CustomContent.args = { expandedWidth: "20%", animationDuration: "0.5s", + sidebarAriaLabel: "custom content", + expanded: true, }; export const DifferentExpandedWidth: Story = () => { @@ -836,7 +865,7 @@ export const DifferentAnimationSpeed: Story = () => { }; DifferentAnimationSpeed.storyName = "Different Animation Speed"; -export const Controlled: Story = (args: DrawerProps) => { +export const Controlled: Story = () => { const [isExpanded, setIsExpanded] = useState(false); const onChangeHandler = useCallback(() => { setIsExpanded(!isExpanded); @@ -852,6 +881,8 @@ export const Controlled: Story = (args: DrawerProps) => { backgroundColor="#FFF000" title={

      Controlled Usage Drawer

      } showControls + expandedWidth="40%" + animationDuration="0.5s" expanded={isExpanded} onChange={onChangeHandler} sidebar={ @@ -861,7 +892,6 @@ export const Controlled: Story = (args: DrawerProps) => {
    • link c
    } - {...args} > content body content body content body content body content body content body content body @@ -871,10 +901,6 @@ export const Controlled: Story = (args: DrawerProps) => { ); }; Controlled.storyName = "Controlled"; -Controlled.args = { - expandedWidth: "40%", - animationDuration: "0.5s", -}; export const SideViewNavigation: Story = () => { type dataPropTypes = { From 7ecc1b24cd167087d6ab27c72c09f30c7bc9bf5c Mon Sep 17 00:00:00 2001 From: nuria1110 Date: Mon, 27 Jan 2025 15:57:31 +0000 Subject: [PATCH 2/2] docs: fix broken docs links --- docs/using-draft-js.mdx | 6 +++--- docs/validations.mdx | 4 ++-- src/components/box/box.component.tsx | 2 +- src/components/checkbox/checkbox.mdx | 6 +++--- src/components/confirm/confirm.mdx | 8 ++++---- src/components/date-range/date-range.mdx | 2 ++ src/components/definition-list/definition-list.mdx | 8 -------- src/components/dialog-full-screen/dialog-full-screen.mdx | 4 ++-- src/components/message/message.mdx | 4 ++-- src/components/settings-row/settings-row.mdx | 2 +- src/components/sidebar/sidebar.mdx | 4 ++-- src/components/split-button/split-button.mdx | 1 - src/components/switch/switch.mdx | 8 ++++---- src/components/tabs/tabs.mdx | 5 ++--- 14 files changed, 28 insertions(+), 36 deletions(-) diff --git a/docs/using-draft-js.mdx b/docs/using-draft-js.mdx index 19b4eb0d8b..b1cc5aecb2 100644 --- a/docs/using-draft-js.mdx +++ b/docs/using-draft-js.mdx @@ -14,8 +14,8 @@ import { Meta } from "@storybook/blocks"; ## Installation -The [TextEditor](https://carbon.sage.com/?path=/docs/text-editor--default) and -[Note](https://carbon.sage.com/?path=/docs/note--default) components utilise the `Draft.js` framework to +The [TextEditor](../?path=/docs/text-editor--docs) and +[Note](../?path=/docs/note--docs) components utilise the `Draft.js` framework to support creating and rendering rich-text content. As such, the framework has been added as a peer-dependency and consuming projects are required to install it if they wish to use either component, this can be done as an [npm package](https://www.npmjs.com/package/draft-js). @@ -56,7 +56,7 @@ The framework surfaces a range of static methods for initialising the state: the component with some existing `ContentState` and any `Decorators` and return a new `EditorState` object. - `EditorState.create(config: EditorStateCreationConfig)` - offers the same as `createWithContent` but enables initialising the `EditorState` from a config, affording you more fine grain control. For example, it is possible to - define an intitial `SelectionState` using this static method. + define an initial `SelectionState` using this static method. #### Other useful methods diff --git a/docs/validations.mdx b/docs/validations.mdx index d6ef6c5c20..c7598930c0 100644 --- a/docs/validations.mdx +++ b/docs/validations.mdx @@ -24,7 +24,7 @@ These states can indicate whether the input is valid or not, and can also preven ### Validation redesign Carbon is in the process of implementing a new validation pattern to our input components. To opt into this new pattern, you can set the -`validationRedesignOptIn` flag to true in the [CarbonProvider](https://carbon.sage.com/?path=/docs/carbon-provider--docs). +`validationRedesignOptIn` flag to true in the [CarbonProvider](../?path=/docs/carbon-provider--docs). Component props that are not supported if the opt-in flag is set to true are labelled as [Legacy] in their corresponding prop tables. These props should not be used if the new validation pattern is being used. @@ -98,7 +98,7 @@ Carbon provides a Form component which augments an HTML `
    ` element with: - footer - a container for rendering "Save", "Cancel" and other custom buttons; it can also be made sticky if wanted - validation summary - graphical indicator of errors and warnings -For more information check [Form in Storybook](https://carbon.sage.com/?path=/docs/form) +For more information check [Form in Storybook](../?path=/docs/form--docs) ## Formik overview diff --git a/src/components/box/box.component.tsx b/src/components/box/box.component.tsx index d6e56f9d41..b475d7f977 100644 --- a/src/components/box/box.component.tsx +++ b/src/components/box/box.component.tsx @@ -61,7 +61,7 @@ export interface BoxProps rowGap?: Gap; /** Design Token for Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Box component. */ boxShadow?: BoxShadowsType; - /** Design Token for Border Radius. Note: please check that the border radius design token you are using is compatible with the Box component. **This prop will not do anything if you have the roundedCornerOptOut flag set in the CarbonProvider** */ + /** Design Token for Border Radius. Note: please check that the border radius design token you are using is compatible with the Box component. */ borderRadius?: BorderRadiusType; /** @private @ignore */ className?: string; diff --git a/src/components/checkbox/checkbox.mdx b/src/components/checkbox/checkbox.mdx index f7e086a4a3..87a2fc9efe 100644 --- a/src/components/checkbox/checkbox.mdx +++ b/src/components/checkbox/checkbox.mdx @@ -41,9 +41,9 @@ import { Checkbox, CheckboxGroup } from "carbon-react/lib/components/checkbox"; ## Related Components -- Choosing one option from a longer list? [Try Radio Button](https://carbon.sage.com/?path=/docs/radiobutton--default "Radio Button"). -- Choosing one option from a very long list? [Try Select](https://carbon.sage.com/?path=/docs/select--default "Select"). -- Choosing one option from a highly visible range? [Try Button Toggle](https://carbon.sage.com/?path=/docs/button-toggle--default "Button Toggle"). +- Choosing one option from a longer list? [Try Radio Button](../?path=/docs/radio-button--docs). +- Choosing one option from a very long list? [Try Select](../?path=/docs/select--docs). +- Choosing one option from a highly visible range? [Try Button Toggle](../?path=/docs/button-toggle--docs). ## Examples diff --git a/src/components/confirm/confirm.mdx b/src/components/confirm/confirm.mdx index 577bd562c1..4470da5f79 100644 --- a/src/components/confirm/confirm.mdx +++ b/src/components/confirm/confirm.mdx @@ -26,10 +26,10 @@ import Confirm from "carbon-react/lib/components/confirm"; ## Related Components -- Longer message which stays on-screen? [Try Message](https://carbon.sage.com/?path=/docs/message--default "Message"). -- Longer, time sensitive message that must be dismissed? [Try Toast](https://carbon.sage.com/?path=/docs/toast--default "Toast"). -- Error or warning message that interrupts activity? [Try Alert](https://carbon.sage.com/?path=/docs/alert--default-alert "Alert"). -- Simple task in context? [Try Dialog](https://carbon.sage.com/?path=/docs/dialog--default-story "Dialog"). +- Longer message which stays on-screen? [Try Message](../?path=/docs/message--docs). +- Longer, time sensitive message that must be dismissed? [Try Toast](../?path=/docs/toast--docs). +- Error or warning message that interrupts activity? [Try Alert](../?path=/docs/alert--docs). +- Simple task in context? [Try Dialog](../?path=/docs/dialog--docs). ## Examples diff --git a/src/components/date-range/date-range.mdx b/src/components/date-range/date-range.mdx index 1489b9cf26..8376426314 100644 --- a/src/components/date-range/date-range.mdx +++ b/src/components/date-range/date-range.mdx @@ -33,6 +33,8 @@ Used to filter a Table of data according to a start and end date, or to set two import DateRange from "carbon-react/lib/components/date-range"; ``` +## Examples + ### Default diff --git a/src/components/definition-list/definition-list.mdx b/src/components/definition-list/definition-list.mdx index 275ba3b30d..c66bd1153e 100644 --- a/src/components/definition-list/definition-list.mdx +++ b/src/components/definition-list/definition-list.mdx @@ -11,7 +11,6 @@ import * as DefinitionListStories from "./definition-list.stories"; ## Contents - [Quick Start](#quick-start) -- [Related Components](#related-components) - [Examples](#examples) - [Props](#props) @@ -21,13 +20,6 @@ import * as DefinitionListStories from "./definition-list.stories"; import { Dl, Dt, Dd } from "carbon-react/lib/components/definition-list"; ``` -## Related Components - -Definition List most of the time is in use with other components. Look at the examples below - -- [Tile component with Definition List](/?path=/docs/tile--with-definition-list-default "Tile component with Definition List"). -- [Accordion component with Definition List](/?path=/docs/accordion--with-a-definition-list "Accordion component with Definition List"). - ## Examples ### Default diff --git a/src/components/dialog-full-screen/dialog-full-screen.mdx b/src/components/dialog-full-screen/dialog-full-screen.mdx index c8a1cddfd8..b83e9b4d81 100644 --- a/src/components/dialog-full-screen/dialog-full-screen.mdx +++ b/src/components/dialog-full-screen/dialog-full-screen.mdx @@ -25,8 +25,8 @@ import DialogFullScreen from "carbon-react/lib/components/dialog-full-screen"; ## Related Components -- Simple task in context? [Try Dialog](https://carbon.sage.com/?path=/docs/dialog--default-story "Dialog"). -- Need to refer back to the underlying page? [Try Sidebar](https://carbon.sage.com/?path=/docs/sidebar--default-story "Sidebar"). +- Simple task in context? [Try Dialog](../?path=/docs/dialog--docs). +- Need to refer back to the underlying page? [Try Sidebar](../?path=/docs/sidebar--docs). ## Examples diff --git a/src/components/message/message.mdx b/src/components/message/message.mdx index 282ad9da9f..79c110c813 100644 --- a/src/components/message/message.mdx +++ b/src/components/message/message.mdx @@ -39,8 +39,8 @@ Various types are available: ## Related Components -- Longer, time sensitive message that must be dismissed? [Try Toast](https://carbon.sage.com/?path=/docs/toast--default "Toast"). -- Error or warning message that interrupts activity? [Try Alert](https://carbon.sage.com/?path=/docs/alert--default-alert "Alert"). +- Longer, time sensitive message that must be dismissed? [Try Toast](../?path=/docs/toast--docs). +- Error or warning message that interrupts activity? [Try Alert](../?path=/docs/alert--docs). ## Examples diff --git a/src/components/settings-row/settings-row.mdx b/src/components/settings-row/settings-row.mdx index 5cf3866c39..7ee13c253a 100644 --- a/src/components/settings-row/settings-row.mdx +++ b/src/components/settings-row/settings-row.mdx @@ -22,7 +22,7 @@ A good example is a settings page, or step-by-step wizard. import SettingsRow from "carbon-react/lib/components/settings-row"; ``` -## Example +## Examples ### Default diff --git a/src/components/sidebar/sidebar.mdx b/src/components/sidebar/sidebar.mdx index 7e60b395f8..c0fecad67d 100644 --- a/src/components/sidebar/sidebar.mdx +++ b/src/components/sidebar/sidebar.mdx @@ -36,8 +36,8 @@ import Sidebar from "carbon-react/lib/components/sidebar"; ## Related Components -- Simple task in context? [Try Dialog](https://carbon.sage.com/?path=/docs/dialog--default-story "Try Dialog"). -- Complex task that needs more space? [Try Dialog Full Screen](https://carbon.sage.com/?path=/docs/dialog-full-screen--default "Try Dialog Full Screen"). +- Simple task in context? [Try Dialog](../?path=/docs/dialog--docs). +- Complex task that needs more space? [Try Dialog Full Screen](../?path=/docs/dialog-full-screen--docs). ## Examples diff --git a/src/components/split-button/split-button.mdx b/src/components/split-button/split-button.mdx index 8e6b08c2a9..efe0fc17e8 100644 --- a/src/components/split-button/split-button.mdx +++ b/src/components/split-button/split-button.mdx @@ -21,7 +21,6 @@ import * as SplitButtonStories from "./split-button.stories"; ## Contents - [Quick Start](#quick-start) -- [Related Components](#related-components) - [Examples](#examples) - [Props](#props) - [Translation keys](#translation-keys) diff --git a/src/components/switch/switch.mdx b/src/components/switch/switch.mdx index 3f144a753e..6d02e899d1 100644 --- a/src/components/switch/switch.mdx +++ b/src/components/switch/switch.mdx @@ -38,10 +38,10 @@ import Switch from "carbon-react/lib/components/switch"; ## Related Components -- Choosing more than one option? [Try Checkbox](https://carbon.sage.com/?path=/docs/checkbox--default "Checkbox"). -- Choosing one option from a longer list? [Try Radio Button](https://carbon.sage.com/?path=/docs/radiobutton--default "Radio Button"). -- Choosing one option from a very long list? [Try Select](https://carbon.sage.com/?path=/docs/select--default "Select"). -- Choosing one option from a highly visible range? [Try Button Toggle](https://carbon.sage.com/?path=/docs/button-toggle--default "Button Toggle"). +- Choosing more than one option? [Try Checkbox](../?path=/docs/checkbox--docs). +- Choosing one option from a longer list? [Try Radio Button](../?path=/docs/radio-button--docs). +- Choosing one option from a very long list? [Try Select](../?path=/docs/select--docs). +- Choosing one option from a highly visible range? [Try Button Toggle](../?path=/docs/button-toggle--docs). ## Translations diff --git a/src/components/tabs/tabs.mdx b/src/components/tabs/tabs.mdx index 9271fda842..e04cbf69c6 100644 --- a/src/components/tabs/tabs.mdx +++ b/src/components/tabs/tabs.mdx @@ -21,7 +21,6 @@ Switch between content panes or filtered views of tables. ## Contents - [Quick Start](#quick-start) -- [Related Components](#related-components) - [Examples](#examples) - [Props](#props) @@ -31,8 +30,8 @@ Switch between content panes or filtered views of tables. import { Tabs, Tab } from "carbon-react/lib/components/tabs"; ``` -- Navigating the hierarchy of the app? [Try Menu](https://carbon.sage.com/?path=/docs/menu) -- Positioning your primary navigation? [Try Navigation Bar](https://carbon.sage.com/?path=/docs/navigation-bar) +- Navigating the hierarchy of the app? [Try Menu](../?path=/docs/menu--docs) +- Positioning your primary navigation? [Try Navigation Bar](../?path=/docs/navigation-bar--docs) - Switch between variants of a page or different tables (e.g. separate tables showing unread and read emails). - There are two `position` options: