diff --git a/packages/react/carbon.yml b/packages/react/carbon.yml index dcb84b2923b8..42084fee37c5 100644 --- a/packages/react/carbon.yml +++ b/packages/react/carbon.yml @@ -94,6 +94,23 @@ assets: stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/checkbox/style.mdx accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/checkbox/accessibility.mdx overviewPath: ./src/components/Checkbox/docs/overview.mdx + class-prefix: + name: Class prefix + description: The ClassPrefix component is used to change the prefix in the classes used by components in Carbon. + type: component + framework: react + status: stable + platform: web + thumbnailPath: ./thumbnails/class-prefix.svg + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://react.carbondesignsystem.com/?path=/docs/components-classprefix + tags: + - content-element + docs: + overviewPath: ./src/components/ClassPrefix/docs/overview.mdx code-snippet: status: stable externalDocsUrl: https://www.carbondesignsystem.com/components/code-snippet/usage @@ -135,7 +152,11 @@ assets: docs: overviewPath: ./src/components/ComposedModal/docs/overview.mdx contained-list: + name: Contained list + type: component + platform: web status: stable + thumbnailPath: ./thumbnails/contained-list.svg externalDocsUrl: https://www.carbondesignsystem.com/components/contained-list/usage framework: react demoLinks: @@ -162,6 +183,21 @@ assets: stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/content-switcher/style.mdx accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/content-switcher/accessibility.mdx overviewPath: ./src/components/ContentSwitcher/docs/overview.mdx + context-menu: + name: Context menu + status: experimental + framework: react + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-menu-contextmenu + platform: web + thumbnailPath: ./thumbnails/context-menu.svg + docs: + overviewPath: ./src/components/ContextMenu/docs/overview.mdx + tags: + - system-feedback copy-button: status: stable framework: react @@ -255,25 +291,11 @@ assets: - type: storybook name: Storybook action: link - url: https://react.carbondesignsystem.com/?path=/docs/components-flexgrid + url: https://react.carbondesignsystem.com/?path=/docs/elements-flexgrid tags: - shell docs: overviewPath: ./src/components/FlexGrid/docs/overview.mdx - fluid-form: - name: Fluid form - framework: react - status: experimental - type: component - platform: web - thumbnailPath: ./thumbnails/fluid-form.svg - demoLinks: - - type: storybook - name: Storybook - action: link - url: https://react.carbondesignsystem.com/?path=/docs/experimental-fluidform - tags: - - form form: status: stable externalDocsUrl: https://www.carbondesignsystem.com/components/form/usage @@ -304,9 +326,24 @@ assets: - form docs: overviewPath: ./src/components/FormGroup/docs/overview.mdx - grid: + form-label: + name: Form label + framework: react status: stable type: component + platform: web + thumbnailPath: ./thumbnails/form-label.svg + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://react.carbondesignsystem.com/?path=/docs/components-formlabel + tags: + - content-element + docs: + overviewPath: ./src/components/FormLabel/docs/overview.mdx + grid: + status: stable framework: react demoLinks: - type: storybook @@ -326,11 +363,28 @@ assets: - type: storybook name: Storybook action: link - url: https://react.carbondesignsystem.com/?path=/docs/heading + url: https://react.carbondesignsystem.com/?path=/docs/components-heading--default docs: overviewPath: ./src/components/Heading/docs/overview.mdx tags: - content-element + id-prefix: + name: Id prefix + description: The IdPrefix component is used to change the prefix applied to the automatically generated id attributes placed on certain DOM elements. + framework: react + status: stable + type: component + platform: web + thumbnailPath: ./thumbnails/id-prefix.svg + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://react.carbondesignsystem.com/?path=/docs/components-idprefix + docs: + overviewPath: ./src/components/IdPrefix/docs/overview.mdx + tags: + - content-element icon-button: name: Icon button framework: react @@ -384,6 +438,7 @@ assets: status: experimental type: component platform: web + thumbnailPath: ./thumbnails/layout-direction.svg demoLinks: - type: storybook name: Storybook @@ -391,6 +446,8 @@ assets: url: https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-text--layout-and-text tags: - input-control + docs: + overviewPath: ./src/components/Layout/docs/overview.mdx link: status: stable externalDocsUrl: https://www.carbondesignsystem.com/components/link/usage @@ -419,20 +476,6 @@ assets: stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/loading/style.mdx accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/loading/accessibility.mdx overviewPath: ./src/components/Loading/docs/overview.mdx - menu: - name: Unstable menu - framework: react - status: experimental - type: component - platform: web - thumbnailPath: ./thumbnails/menu.svg - demoLinks: - - type: storybook - name: Storybook - action: link - url: https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-menu - tags: - - system-feedback modal: status: stable externalDocsUrl: https://www.carbondesignsystem.com/components/modal/usage @@ -457,7 +500,7 @@ assets: action: link url: https://react.carbondesignsystem.com/?path=/docs/components-multiselect docs: - overviewPath: ./src/components/Multiselect/docs/overview.mdx + overviewPath: ./src/components/MultiSelect/docs/overview.mdx notification: status: stable externalDocsUrl: https://www.carbondesignsystem.com/components/notification/usage @@ -468,6 +511,9 @@ assets: action: link url: https://react.carbondesignsystem.com/?path=/docs/components-notifications docs: + usagePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/notification/usage.mdx + stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/notification/style.mdx + accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/notification/accessibility.mdx overviewPath: ./src/components/Notification/docs/overview.mdx number-input: status: stable @@ -516,6 +562,16 @@ assets: stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/overflow-menu/style.mdx accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/overflow-menu/accessibility.mdx overviewPath: ./src/components/OverflowMenu/docs/overview.mdx + overflow-menu-v2: + status: experimental + framework: react + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-menu-overflowmenuv2 + docs: + overviewPath: ./src/components/OverflowMenuV2/docs/overview.mdx pagination: status: stable externalDocsUrl: https://www.carbondesignsystem.com/components/pagination/usage @@ -555,6 +611,8 @@ assets: tags: - data-display - contextual-navigation + docs: + overviewPath: ./src/components/Pagination/experimental/docs/overview.mdx popover: status: stable framework: react @@ -623,19 +681,6 @@ assets: stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/search/style.mdx accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/search/accessibility.mdx overviewPath: ./src/components/Search/docs/overview.mdx - section: - name: Section - framework: react - status: stable - type: component - platform: web - demoLinks: - - type: storybook - name: Storybook - action: link - url: https://react.carbondesignsystem.com/?path=/docs/heading - tags: - - content-element select: status: stable externalDocsUrl: https://www.carbondesignsystem.com/components/select/usage @@ -664,6 +709,8 @@ assets: url: https://react.carbondesignsystem.com/?path=/docs/components-skeleton tags: - shell + docs: + overviewPath: ./src/components/Skeleton/docs/overview.mdx slider: status: stable externalDocsUrl: https://www.carbondesignsystem.com/components/slider/usage @@ -692,6 +739,8 @@ assets: url: https://react.carbondesignsystem.com/?path=/docs/layout-stack tags: - content-block + docs: + overviewPath: ./src/components/Stack/docs/overview.mdx structured-list: status: stable externalDocsUrl: https://www.carbondesignsystem.com/components/structured-list/usage @@ -748,12 +797,15 @@ assets: url: https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-text tags: - input-control + docs: + overviewPath: ./src/components/Text/docs/overview.mdx text-direction: name: Unstable text direction framework: react status: experimental type: component platform: web + thumbnailPath: ./thumbnails/text-direction.svg demoLinks: - type: storybook name: Storybook @@ -761,6 +813,8 @@ assets: url: https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-text--set-text-direction tags: - input-control + docs: + overviewPath: ./src/components/Text/docs/text-direction-overview.mdx text-area: status: stable framework: react @@ -845,6 +899,7 @@ assets: tags: - content-element docs: + accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/toggletip/accessibility.mdx usagePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/toggletip/usage.mdx stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/toggletip/style.mdx overviewPath: ./src/components/Toggletip/docs/overview.mdx @@ -862,7 +917,7 @@ assets: stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/tooltip/style.mdx accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/tooltip/accessibility.mdx overviewPath: ./src/components/Tooltip/docs/overview.mdx - tooltip-definition: + definition-tooltip: status: stable framework: react demoLinks: @@ -870,6 +925,8 @@ assets: name: Storybook action: link url: https://react.carbondesignsystem.com/?path=/docs/components-definitiontooltip + docs: + overviewPath: ./src/components/Tooltip/docs/definition-tooltip-overview.mdx tree-view: status: experimental framework: react @@ -877,9 +934,12 @@ assets: - type: storybook name: Storybook action: link - url: https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-treeview + url: https://react.carbondesignsystem.com/?path=/docs/components-treeview--default docs: overviewPath: ./src/components/TreeView/docs/overview.mdx + usagePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/tree-view/usage.mdx + stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/tree-view/style.mdx + accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/tree-view/accessibility.mdx ui-shell-header: framework: react externalDocsUrl: https://www.carbondesignsystem.com/components/UI-shell-header/usage @@ -890,6 +950,9 @@ assets: action: link url: https://react.carbondesignsystem.com/?path=/docs/components-ui-shell docs: + usagePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-header/usage.mdx + stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-header/style.mdx + accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-header/accessibility.mdx codePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-header/code.mdx ui-shell-left-panel: framework: react @@ -901,6 +964,9 @@ assets: action: link url: https://react.carbondesignsystem.com/?path=/docs/components-ui-shell docs: + usagePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-left-panel/usage.mdx + stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-left-panel/style.mdx + accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-left-panel/accessibility.mdx codePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-left-panel/code.mdx ui-shell-right-panel: framework: react @@ -912,6 +978,9 @@ assets: action: link url: https://react.carbondesignsystem.com/?path=/docs/components-ui-shell docs: + usagePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-right-panel/usage.mdx + stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-right-panel/style.mdx + accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-right-panel/accessibility.mdx codePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-right-panel/code.mdx unordered-list: name: Unordered list @@ -956,6 +1025,21 @@ assets: platform: web tags: - hook + use-layer: + name: useLayer + framework: react + status: stable + type: function + platform: web + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://react.carbondesignsystem.com/?path=/docs/components-layer--use-layer + tags: + - hook + docs: + overviewPath: ./src/components/Layer/docs/use-layer-overview.mdx use-layout-direction: name: unstable_useLayoutDirection framework: react @@ -964,6 +1048,20 @@ assets: platform: web tags: - hook + use-prefix: + name: usePrefix + description: A hook that returns the prefix used in our classes. + framework: react + status: stable + type: function + platform: web + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://react.carbondesignsystem.com/?path=/docs/hooks-useprefix--page + tags: + - hook use-theme: name: useTheme framework: react @@ -972,3 +1070,5 @@ assets: platform: web tags: - hook + docs: + overviewPath: ./src/components/Theme/docs/use-theme-overview.mdx diff --git a/packages/react/src/components/ClassPrefix/docs/overview.mdx b/packages/react/src/components/ClassPrefix/docs/overview.mdx new file mode 100644 index 000000000000..4b4eb9511f99 --- /dev/null +++ b/packages/react/src/components/ClassPrefix/docs/overview.mdx @@ -0,0 +1,12 @@ +## Live demo + + diff --git a/packages/react/src/components/ComboBox/docs/overview.mdx b/packages/react/src/components/ComboBox/docs/overview.mdx index 88d1dab3f0d1..00f8dfb89f90 100644 --- a/packages/react/src/components/ComboBox/docs/overview.mdx +++ b/packages/react/src/components/ComboBox/docs/overview.mdx @@ -8,6 +8,14 @@ { label: 'Default', variant: 'components-combobox--default' + }, + { + label: 'Fluid (unstable)', + variant: 'experimental-unstable-fluidcombobox--default' + }, + { + label: 'Fluid Condensed (unstable)', + variant: 'experimental-unstable-fluidcombobox--condensed' } ]} /> diff --git a/packages/react/src/components/ComposedModal/docs/overview.mdx b/packages/react/src/components/ComposedModal/docs/overview.mdx index 636e0af88dc3..b5b7ae4c9dd0 100644 --- a/packages/react/src/components/ComposedModal/docs/overview.mdx +++ b/packages/react/src/components/ComposedModal/docs/overview.mdx @@ -10,6 +10,10 @@ label: 'Default', variant: 'components-composedmodal--default' }, + { + label: 'Full Width', + variant: 'components-composedmodal--full-width' + }, { label: 'Passive Modal', variant: 'components-composedmodal--passive-modal' diff --git a/packages/react/src/components/ContainedList/docs/overview.mdx b/packages/react/src/components/ContainedList/docs/overview.mdx index 4ec2f9533843..01ab275b1172 100644 --- a/packages/react/src/components/ContainedList/docs/overview.mdx +++ b/packages/react/src/components/ContainedList/docs/overview.mdx @@ -9,5 +9,29 @@ label: 'Default', variant: 'components-containedlist--default', }, + { + label: 'Disclosed', + variant: 'components-containedlist--disclosed', + }, + { + label: 'With Actions', + variant: 'components-containedlist--with-actions', + }, + { + label: 'With Icons', + variant: 'components-containedlist--with-icons', + }, + { + label: 'With Interactive Items', + variant: 'components-containedlist--with-interactive-items', + }, + { + label: 'With Interactive Items and Actions', + variant: 'components-containedlist--with-interactive-items-and-actions', + }, + { + label: 'With List Title Decorators', + variant: 'components-containedlist--with-list-title-decorators', + }, ]} /> diff --git a/packages/react/src/components/ContextMenu/docs/overview.mdx b/packages/react/src/components/ContextMenu/docs/overview.mdx new file mode 100644 index 000000000000..8620a9c55c4b --- /dev/null +++ b/packages/react/src/components/ContextMenu/docs/overview.mdx @@ -0,0 +1,17 @@ +## Live demo + + diff --git a/packages/react/src/components/DatePicker/docs/overview.mdx b/packages/react/src/components/DatePicker/docs/overview.mdx index 8746f07c2796..8b46f54d6e27 100644 --- a/packages/react/src/components/DatePicker/docs/overview.mdx +++ b/packages/react/src/components/DatePicker/docs/overview.mdx @@ -16,6 +16,18 @@ { label: 'Single With Calendar', variant: 'components-datepicker--single-with-calendar' + }, + { + label: 'Fluid Range With Calendar (unstable)', + variant: 'experimental-unstable-fluiddatepicker--range-with-calendar' + }, + { + label: 'Fluid Simple (unstable)', + variant: 'experimental-unstable-fluiddatepicker--simple' + }, + { + label: 'Fluid Single (unstable)', + variant: 'experimental-unstable-fluiddatepicker--single' } ]} /> diff --git a/packages/react/src/components/Dropdown/docs/overview.mdx b/packages/react/src/components/Dropdown/docs/overview.mdx index b333daec5255..fbc9ffd34ee6 100644 --- a/packages/react/src/components/Dropdown/docs/overview.mdx +++ b/packages/react/src/components/Dropdown/docs/overview.mdx @@ -12,6 +12,14 @@ { label: 'Inline', variant: 'components-dropdown--inline' + }, + { + label: 'Fluid (unstable)', + variant: 'experimental-unstable-fluiddropdown--default' + }, + { + label: 'Fluid Condensed (unstable)', + variant: 'experimental-unstable-fluiddropdown--condensed' } ]} /> diff --git a/packages/react/src/components/FlexGrid/docs/overview.mdx b/packages/react/src/components/FlexGrid/docs/overview.mdx index 5354d8a447b6..12b833d7d81f 100644 --- a/packages/react/src/components/FlexGrid/docs/overview.mdx +++ b/packages/react/src/components/FlexGrid/docs/overview.mdx @@ -7,39 +7,39 @@ variants={[ { label: 'Auto Columns', - variant: 'components-flexgrid--auto-columns' + variant: 'elements-flexgrid--auto-columns' }, { label: 'Condensed', - variant: 'components-flexgrid--condensed' + variant: 'elements-flexgrid--condensed' }, { label: 'Condensed Columns', - variant: 'components-flexgrid--condensed-columns' + variant: 'elements-flexgrid--condensed-columns' }, { label: 'Full Width', - variant: 'components-flexgrid--full-width' + variant: 'elements-flexgrid--full-width' }, { label: 'Mixed Grid Modes', - variant: 'components-flexgrid--mixed-grid-modes' + variant: 'elements-flexgrid--mixed-grid-modes' }, { label: 'Narrow', - variant: 'components-flexgrid--narrow' + variant: 'elements-flexgrid--narrow' }, { label: 'Narrow Columns', - variant: 'components-flexgrid--narrow-columns' + variant: 'elements-flexgrid--narrow-columns' }, { label: 'Offset', - variant: 'components-flexgrid--offset' + variant: 'elements-flexgrid--offset' }, { label: 'Responsive Grid', - variant: 'components-flexgrid--responsive-grid' + variant: 'elements-flexgrid--responsive-grid' } ]} /> diff --git a/packages/react/src/components/Form/docs/overview.mdx b/packages/react/src/components/Form/docs/overview.mdx index 8cc9aacae589..19aab480ab8c 100644 --- a/packages/react/src/components/Form/docs/overview.mdx +++ b/packages/react/src/components/Form/docs/overview.mdx @@ -8,6 +8,10 @@ { label: 'Default', variant: 'components-form--default' + }, + { + label: 'Fluid (unstable)', + variant: 'experimental-fluidform--default' } ]} /> diff --git a/packages/react/src/components/FormLabel/docs/overview.mdx b/packages/react/src/components/FormLabel/docs/overview.mdx new file mode 100644 index 000000000000..02ebb14ab0af --- /dev/null +++ b/packages/react/src/components/FormLabel/docs/overview.mdx @@ -0,0 +1,12 @@ +## Live demo + + diff --git a/packages/react/src/components/IdPrefix/docs/overview.mdx b/packages/react/src/components/IdPrefix/docs/overview.mdx new file mode 100644 index 000000000000..3555185ef8d7 --- /dev/null +++ b/packages/react/src/components/IdPrefix/docs/overview.mdx @@ -0,0 +1,12 @@ +## Live demo + + diff --git a/packages/react/src/components/Layer/docs/overview.mdx b/packages/react/src/components/Layer/docs/overview.mdx index 147454f650ee..3a29738dbaca 100644 --- a/packages/react/src/components/Layer/docs/overview.mdx +++ b/packages/react/src/components/Layer/docs/overview.mdx @@ -11,10 +11,6 @@ { label: 'Custom Level', variant: 'components-layer--custom-level' - }, - { - label: 'useLayer', - variant: 'components-layer--use-layer' } ]} /> diff --git a/packages/react/src/components/Layer/docs/use-layer-overview.mdx b/packages/react/src/components/Layer/docs/use-layer-overview.mdx new file mode 100644 index 000000000000..6fede02bd5b6 --- /dev/null +++ b/packages/react/src/components/Layer/docs/use-layer-overview.mdx @@ -0,0 +1,12 @@ +## Live demo + + diff --git a/packages/react/src/components/Layout/docs/overview.mdx b/packages/react/src/components/Layout/docs/overview.mdx new file mode 100644 index 000000000000..83eb79ed64ef --- /dev/null +++ b/packages/react/src/components/Layout/docs/overview.mdx @@ -0,0 +1,12 @@ +## Live demo + + diff --git a/packages/react/src/components/Modal/docs/overview.mdx b/packages/react/src/components/Modal/docs/overview.mdx index 602b6cfb81bf..e804e1c54fa9 100644 --- a/packages/react/src/components/Modal/docs/overview.mdx +++ b/packages/react/src/components/Modal/docs/overview.mdx @@ -13,6 +13,10 @@ label: 'Danger Modal', variant: 'components-modal--danger-modal' }, + { + label: 'Full Width', + variant: 'components-modal--full-width' + }, { label: 'Passive Modal', variant: 'components-modal--passive-modal' diff --git a/packages/react/src/components/MultiSelect/docs/overview.mdx b/packages/react/src/components/MultiSelect/docs/overview.mdx index d2e98b7783c9..42ba9d764b0e 100644 --- a/packages/react/src/components/MultiSelect/docs/overview.mdx +++ b/packages/react/src/components/MultiSelect/docs/overview.mdx @@ -5,16 +5,24 @@ url="https://react.carbondesignsystem.com" variants={[ { - label: 'Default, - variant: 'components-dropdown--default' + label: 'Default', + variant: 'components-multiselect--default' }, { label: 'Filterable', variant: 'components-multiselect--filterable' }, { - label: 'With initial selected items, + label: 'With initial selected items', variant: 'components-multiselect--with-initial-selected-items' + }, + { + label: 'Fluid (unstable)', + variant: 'experimental-unstable-fluidmultiselect--default' + }, + { + label: 'Fluid Condensed (unstable)', + variant: 'experimental-unstable-fluidmultiselect--condensed' } ]} /> diff --git a/packages/react/src/components/NumberInput/docs/overview.mdx b/packages/react/src/components/NumberInput/docs/overview.mdx index e5912dd4ccfa..3bc9129ff0ae 100644 --- a/packages/react/src/components/NumberInput/docs/overview.mdx +++ b/packages/react/src/components/NumberInput/docs/overview.mdx @@ -7,6 +7,10 @@ { label: 'Default', variant: 'components-numberinput--default' + }, + { + label: 'Fluid (unstable)', + variant: 'experimental-unstable-fluidnumberinput--default' } ]} -/> \ No newline at end of file +/> diff --git a/packages/react/src/components/OrderedList/docs/overview.mdx b/packages/react/src/components/OrderedList/docs/overview.mdx index b4f113da74aa..ac5332ff2f73 100644 --- a/packages/react/src/components/OrderedList/docs/overview.mdx +++ b/packages/react/src/components/OrderedList/docs/overview.mdx @@ -8,9 +8,14 @@ label: 'Default', variant: 'components-orderedlist--default' }, + { + label: 'Native List Styles', + variant: 'components-orderedlist--native-list-styles' + + }, { label: 'Nested', variant: 'components-orderedlist--nested' } ]} -/> \ No newline at end of file +/> diff --git a/packages/react/src/components/OverflowMenuV2/docs/overview.mdx b/packages/react/src/components/OverflowMenuV2/docs/overview.mdx new file mode 100644 index 000000000000..4165aca3ddc3 --- /dev/null +++ b/packages/react/src/components/OverflowMenuV2/docs/overview.mdx @@ -0,0 +1,21 @@ +## Live demo + + diff --git a/packages/react/src/components/Pagination/experimental/docs/overview.mdx b/packages/react/src/components/Pagination/experimental/docs/overview.mdx new file mode 100644 index 000000000000..1f2aa4bec683 --- /dev/null +++ b/packages/react/src/components/Pagination/experimental/docs/overview.mdx @@ -0,0 +1,17 @@ +## Live demo + + diff --git a/packages/react/src/components/Search/docs/overview.mdx b/packages/react/src/components/Search/docs/overview.mdx index 353077720c98..5454f995e888 100644 --- a/packages/react/src/components/Search/docs/overview.mdx +++ b/packages/react/src/components/Search/docs/overview.mdx @@ -8,9 +8,17 @@ label: 'Default', variant: 'components-search--default' }, + { + label: 'Disabled', + variant: 'components-search--disabled' + }, { label: 'Expandable', variant: 'components-search--expandable' + }, + { + label: 'Fluid (unstable)', + variant: 'experimental-unstable-fluidsearch--default' } ]} /> diff --git a/packages/react/src/components/Select/docs/overview.mdx b/packages/react/src/components/Select/docs/overview.mdx index 039d52a8f7d7..399f755ac60c 100644 --- a/packages/react/src/components/Select/docs/overview.mdx +++ b/packages/react/src/components/Select/docs/overview.mdx @@ -11,6 +11,10 @@ { label: 'Inline', variant: 'components-select--inline' + }, + { + label: 'Fluid (unstable)', + variant: 'experimental-unstable-fluidselect--default' } ]} /> diff --git a/packages/react/src/components/Skeleton/Docs/overview.mdx b/packages/react/src/components/Skeleton/Docs/overview.mdx new file mode 100644 index 000000000000..85b885c1447d --- /dev/null +++ b/packages/react/src/components/Skeleton/Docs/overview.mdx @@ -0,0 +1,20 @@ +## Live demo + + diff --git a/packages/react/src/components/Skeleton/docs/overview.mdx b/packages/react/src/components/Skeleton/docs/overview.mdx new file mode 100644 index 000000000000..85b885c1447d --- /dev/null +++ b/packages/react/src/components/Skeleton/docs/overview.mdx @@ -0,0 +1,20 @@ +## Live demo + + diff --git a/packages/react/src/components/Stack/docs/overview.mdx b/packages/react/src/components/Stack/docs/overview.mdx new file mode 100644 index 000000000000..1be5dcdfcb71 --- /dev/null +++ b/packages/react/src/components/Stack/docs/overview.mdx @@ -0,0 +1,16 @@ +## Live demo + + diff --git a/packages/react/src/components/StructuredList/docs/overview.mdx b/packages/react/src/components/StructuredList/docs/overview.mdx index 8100d9120985..0a158003f0be 100644 --- a/packages/react/src/components/StructuredList/docs/overview.mdx +++ b/packages/react/src/components/StructuredList/docs/overview.mdx @@ -9,6 +9,10 @@ label: 'Default', variant: 'components-structuredlist--default' }, + { + label: 'Simple', + variant: 'components-structuredlist--simple' + }, { label: 'Selection', variant: 'components-structuredlist--selection' diff --git a/packages/react/src/components/Text/docs/overview.mdx b/packages/react/src/components/Text/docs/overview.mdx new file mode 100644 index 000000000000..a64d620601f9 --- /dev/null +++ b/packages/react/src/components/Text/docs/overview.mdx @@ -0,0 +1,12 @@ +## Live demo + + diff --git a/packages/react/src/components/Text/docs/text-direction-overview.mdx b/packages/react/src/components/Text/docs/text-direction-overview.mdx new file mode 100644 index 000000000000..b8bc3c6cd563 --- /dev/null +++ b/packages/react/src/components/Text/docs/text-direction-overview.mdx @@ -0,0 +1,12 @@ +## Live demo + + diff --git a/packages/react/src/components/TextArea/docs/overview.mdx b/packages/react/src/components/TextArea/docs/overview.mdx index 5d5f4d8e81d2..2cbc3d5deb2d 100644 --- a/packages/react/src/components/TextArea/docs/overview.mdx +++ b/packages/react/src/components/TextArea/docs/overview.mdx @@ -7,6 +7,18 @@ { label: 'Default', variant: 'components-textarea--default' + }, + { + label: 'Fluid (unstable)', + variant: 'experimental-unstable-fluidtextarea--default' + }, + { + label: 'Fluid with Layers (unstable)', + variant: 'experimental-unstable-fluidtextarea--default-with-layers' + }, + { + label: 'Fluid with Tooltip (unstable)', + variant: 'experimental-unstable-fluidtextarea--default-with-tooltip' } ]} /> diff --git a/packages/react/src/components/TextInput/docs/overview.mdx b/packages/react/src/components/TextInput/docs/overview.mdx index aa3a6be43fa1..7a16c83e52dc 100644 --- a/packages/react/src/components/TextInput/docs/overview.mdx +++ b/packages/react/src/components/TextInput/docs/overview.mdx @@ -19,6 +19,18 @@ { label: 'Toggle password with visibility', variant: 'components-textinput--toggle-password-visibility' + }, + { + label: 'Fluid (unstable)', + variant: 'experimental-unstable-fluidtextinput--default' + }, + { + label: 'Fluid with Tooltip (unstable)', + variant: 'experimental-unstable-fluidtextinput--default-with-tooltip' + }, + { + label: 'Fluid with Password Input (unstable)', + variant: 'experimental-unstable-fluidtextinput--password-input' } ]} /> diff --git a/packages/react/src/components/Theme/docs/overview.mdx b/packages/react/src/components/Theme/docs/overview.mdx index 77f54ce15f8d..be3243ffa494 100644 --- a/packages/react/src/components/Theme/docs/overview.mdx +++ b/packages/react/src/components/Theme/docs/overview.mdx @@ -7,10 +7,6 @@ { label: 'Default', variant: 'components-theme--default' - }, - { - label: 'useTheme', - variant: 'components-theme--use-theme' } ]} /> diff --git a/packages/react/src/components/Theme/docs/use-theme-overview.mdx b/packages/react/src/components/Theme/docs/use-theme-overview.mdx new file mode 100644 index 000000000000..69eada26bc2e --- /dev/null +++ b/packages/react/src/components/Theme/docs/use-theme-overview.mdx @@ -0,0 +1,12 @@ +## Live demo + + diff --git a/packages/react/src/components/Tile/docs/overview.mdx b/packages/react/src/components/Tile/docs/overview.mdx index 96a90db11617..0aa5dc8cefcb 100644 --- a/packages/react/src/components/Tile/docs/overview.mdx +++ b/packages/react/src/components/Tile/docs/overview.mdx @@ -31,6 +31,26 @@ { label: 'Selectable', variant: 'components-tile--selectable' + }, + { + label: 'Clickable with Improved Contrast (unstable)', + variant: 'experimental-improved-contrast-tile--clickable' + }, + { + label: 'Expandable with Improved Contrast (unstable)', + variant: 'experimental-improved-contrast-tile--expandable' + }, + { + label: 'Multiselect with Improved Contrast (unstable)', + variant: 'experimental-improved-contrast-tile--multi-select' + }, + { + label: 'Radio with Improved Contrast (unstable)', + variant: 'experimental-improved-contrast-tile--radio' + }, + { + label: 'Selectable with Improved Contrast (unstable)', + variant: 'experimental-improved-contrast-tile--selectable' } ]} /> diff --git a/packages/react/src/components/TimePicker/docs/overview.mdx b/packages/react/src/components/TimePicker/docs/overview.mdx index 3cb6d19fd45f..cef13a81d79c 100644 --- a/packages/react/src/components/TimePicker/docs/overview.mdx +++ b/packages/react/src/components/TimePicker/docs/overview.mdx @@ -7,6 +7,10 @@ { label: 'Default', variant: 'components-timepicker--default' + }, + { + label: 'Fluid (unstable)', + variant: 'experimental-unstable-fluidtimepicker--default' } ]} /> diff --git a/packages/react/src/components/Tooltip/docs/definition-tooltip-overview.mdx b/packages/react/src/components/Tooltip/docs/definition-tooltip-overview.mdx new file mode 100644 index 000000000000..5a49ff28a5ac --- /dev/null +++ b/packages/react/src/components/Tooltip/docs/definition-tooltip-overview.mdx @@ -0,0 +1,12 @@ +## Live demo + + diff --git a/packages/react/thumbnails/class-prefix.svg b/packages/react/thumbnails/class-prefix.svg new file mode 100644 index 000000000000..af1df5dc1b52 --- /dev/null +++ b/packages/react/thumbnails/class-prefix.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/react/thumbnails/contained-list.svg b/packages/react/thumbnails/contained-list.svg new file mode 100644 index 000000000000..b6516be35363 --- /dev/null +++ b/packages/react/thumbnails/contained-list.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/react/thumbnails/context-menu.svg b/packages/react/thumbnails/context-menu.svg new file mode 100644 index 000000000000..bfb79562c08b --- /dev/null +++ b/packages/react/thumbnails/context-menu.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/react/thumbnails/form-label.svg b/packages/react/thumbnails/form-label.svg new file mode 100644 index 000000000000..4b4d6ed34a49 --- /dev/null +++ b/packages/react/thumbnails/form-label.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/react/thumbnails/id-prefix.svg b/packages/react/thumbnails/id-prefix.svg new file mode 100644 index 000000000000..d6eedb292a7b --- /dev/null +++ b/packages/react/thumbnails/id-prefix.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/packages/react/thumbnails/layout-direction.svg b/packages/react/thumbnails/layout-direction.svg new file mode 100644 index 000000000000..087326faf4d9 --- /dev/null +++ b/packages/react/thumbnails/layout-direction.svg @@ -0,0 +1,156 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/react/thumbnails/read-only.svg b/packages/react/thumbnails/read-only.svg new file mode 100644 index 000000000000..b56759a3a776 --- /dev/null +++ b/packages/react/thumbnails/read-only.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/react/thumbnails/text-direction.svg b/packages/react/thumbnails/text-direction.svg new file mode 100644 index 000000000000..326aa990146b --- /dev/null +++ b/packages/react/thumbnails/text-direction.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/react/thumbnails/text.svg b/packages/react/thumbnails/text.svg index 5913b51cacdd..0527093c9bb7 100644 --- a/packages/react/thumbnails/text.svg +++ b/packages/react/thumbnails/text.svg @@ -1,60 +1,50 @@ - - - text-unstable - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/styles/carbon.yml b/packages/styles/carbon.yml index 7f842ad5a3fb..7063c4bc577a 100644 --- a/packages/styles/carbon.yml +++ b/packages/styles/carbon.yml @@ -502,6 +502,15 @@ assets: usagePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/overflow-menu/usage.mdx stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/overflow-menu/style.mdx accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/overflow-menu/accessibility.mdx + overflow-menu-v2: + name: Overflow menu v2 + status: experimental + type: component + platform: web + noIndex: true + thumbnailPath: ./thumbnails/overflow-menu.svg + tags: + - input-control pagination: name: Pagination description: Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page. @@ -586,6 +595,16 @@ assets: usagePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/radio-button/usage.mdx stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/radio-button/style.mdx accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/radio-button/accessibility.mdx + read-only-states: + name: Read-only states + description: Read-only states are applied to components when the user is allowed to review but not modify the component. It removes all interactive functions from the component. + externalDocsUrl: https://carbondesignsystem.com/patterns/read-only-states-pattern + status: stable + type: pattern + platform: web + thumbnailPath: ./thumbnails/read-only.svg + docs: + usagePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/patterns/read-only-states-pattern/index.mdx search: name: Search description: Search enables users to specify a word or a phrase to find relevant pieces of content without the use of navigation. @@ -793,6 +812,7 @@ assets: tags: - content-element docs: + accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/toggletip/accessibility.mdx usagePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/toggletip/usage.mdx stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/toggletip/style.mdx tooltip: @@ -810,8 +830,8 @@ assets: usagePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/tooltip/usage.mdx stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/tooltip/style.mdx accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/tooltip/accessibility.mdx - tooltip-definition: - name: Tooltip definition + definition-tooltip: + name: Definition tooltip description: The DefinitionTooltip component is used to provide additional information about a particular term or phrase in text content. It is similar to a Tooltip component but has fewer alignment options and has a slightly different interaction pattern. status: stable type: component @@ -826,9 +846,14 @@ assets: type: component platform: web noIndex: true + externalDocsUrl: https://carbondesignsystem.com/components/tree-view/usage thumbnailPath: ./thumbnails/tree-view.svg tags: - contextual-navigation + docs: + usagePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/tree-view/usage.mdx + stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/tree-view/style.mdx + accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/tree-view/accessibility.mdx ui-shell-header: name: UI shell header description: This header is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform. It provides a common set of interaction patterns that persist between and across products. @@ -857,6 +882,7 @@ assets: tags: - shell docs: + accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-left-panel/accessibility.mdx usagePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-left-panel/usage.mdx stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-left-panel/style.mdx ui-shell-right-panel: @@ -871,5 +897,6 @@ assets: tags: - shell docs: + accessibilityPath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-right-panel/accessibility.mdx usagePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-right-panel/usage.mdx stylePath: https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/components/UI-shell-right-panel/style.mdx diff --git a/packages/styles/thumbnails/overflow-menu.svg b/packages/styles/thumbnails/overflow-menu.svg index 658fc4747b0a..bcdeb30910e5 100644 --- a/packages/styles/thumbnails/overflow-menu.svg +++ b/packages/styles/thumbnails/overflow-menu.svg @@ -1,40 +1,37 @@ - - - overflow-menu - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +