Merge branch 'main' into list-box-enter-behavior

carbon-design-system · Mar 6, 2023 · e3a883b · e3a883b
2 parents d79e95e + 05d64ad
commit e3a883b
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 16 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -970,7 +970,7 @@ Map {
   "ComboBox" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "defaultProps": Object {
-      "ariaLabel": "Choose an item",
+      "aria-label": "Choose an item",
       "direction": "bottom",
       "disabled": false,
       "itemToElement": null,
@@ -979,9 +979,10 @@ Map {
       "type": "default",
     },
     "propTypes": Object {
-      "ariaLabel": Object {
+      "aria-label": Object {
         "type": "string",
       },
+      "ariaLabel": [Function],
       "className": Object {
         "type": "string",
       },

diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js
@@ -135,6 +135,11 @@ export const Playground = (args) => (
 );
 
 Playground.argTypes = {
+  ['aria-label']: {
+    table: {
+      disable: true,
+    },
+  },
   ariaLabel: {
     table: {
       disable: true,

diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -86,6 +86,13 @@ export interface ComboBoxProps
     ExcludedAttributes
   > {
   /**
+   * Specify a label to be read by screen readers on the container node
+   * 'aria-label' of the ListBox component.
+   */
+  ['aria-label']?: string;
+
+  /**
+   * @deprecated please use `aria-label` instead.
    * 'aria-label' of the ListBox component.
    */
   ariaLabel?: string;
@@ -250,7 +257,8 @@ export interface ComboBoxProps
 
 const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
   const {
-    ariaLabel,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
     className: containerClassName,
     direction,
     disabled,
@@ -568,7 +576,10 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                   translateWithId={translateWithId}
                 />
               </div>
-              <ListBox.Menu {...getMenuProps({ 'aria-label': ariaLabel })}>
+              <ListBox.Menu
+                {...getMenuProps({
+                  'aria-label': deprecatedAriaLabel || ariaLabel,
+                })}>
                 {isOpen
                   ? filterItems(items, itemToString, inputValue).map(
                       (item, index) => {
@@ -634,9 +645,20 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
 ComboBox.displayName = 'ComboBox';
 ComboBox.propTypes = {
   /**
+   * 'aria-label' of the ListBox component.
+   * Specify a label to be read by screen readers on the container node
+   */
+  ['aria-label']: PropTypes.string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the container note.
    * 'aria-label' of the ListBox component.
    */
-  ariaLabel: PropTypes.string,
+  ariaLabel: deprecate(
+    PropTypes.string,
+    'This prop syntax has been deprecated. Please use the new `aria-label`.'
+  ),
 
   /**
    * An optional className to add to the container node
@@ -813,7 +835,7 @@ ComboBox.defaultProps = {
   itemToElement: null,
   shouldFilterItem: defaultShouldFilterItem,
   type: 'default',
-  ariaLabel: 'Choose an item',
+  ['aria-label']: 'Choose an item',
   direction: 'bottom',
 };
 

diff --git a/packages/react/src/components/Tabs/Tabs.mdx b/packages/react/src/components/Tabs/Tabs.mdx
@@ -13,9 +13,14 @@ import { Tabs, TabList, Tab, TabPanels, TabPanel } from './Tabs';
 
 - [Overview](#overview)
   - [Line Tabs](#line-tabs)
-  - [Container Tabs](#container-tabs)
+  - [Contained Tabs](#contained-tabs)
+  - [Icon Tabs](#icon-tabs)
 - [Component API](#component-api)
-  - [Tab `renderContent`](#tab-rendercontent)
+  - [Tab - render content on click](#tab---render-content-on-click)
+- [V11](#v11)
+  - [Tabs composition](#tabs-composition)
+  - [Various updates](#various-updates)
+  - [Max width](#max-width)
 - [Feedback](#feedback)
 
 ## Overview
@@ -144,6 +149,18 @@ minor tweaks in naming or implementation.
 - Because `renderButton` is no longer needed, the associated `tabIndex` prop has
   also been deprecated.
 
+### Max width
+
+In V11, tabs no longer have a max-width property set. Which means a tab title
+can span as wide as long it's title is. To override this behavior, you may use
+some style rules:
+
+```css
+.cds--tabs__nav-link {
+  max-width: 10rem;
+}
+```
+
 ## Feedback
 
 Help us improve this component by providing feedback, asking questions on Slack,

diff --git a/packages/react/src/components/Tabs/Tabs.stories.js b/packages/react/src/components/Tabs/Tabs.stories.js
@@ -44,7 +44,7 @@ export const Default = () => (
       <Tab>Tab Label 1</Tab>
       <Tab>Tab Label 2</Tab>
       <Tab disabled>Tab Label 3</Tab>
-      <Tab>Tab Label 4 with a very long long label</Tab>
+      <Tab>Tab Label 4</Tab>
     </TabList>
     <TabPanels>
       <TabPanel>Tab Panel 1</TabPanel>
@@ -77,9 +77,7 @@ export const Manual = () => (
       <Tab>Tab Label 1</Tab>
       <Tab>Tab Label 2</Tab>
       <Tab disabled>Tab Label 3</Tab>
-      <Tab title="Tab Label 4 with a very long long label">
-        Tab Label 4 with a very long long label
-      </Tab>
+      <Tab title="Tab Label 4">Tab Label 4</Tab>
       <Tab>Tab Label 5</Tab>
     </TabList>
     <TabPanels>
@@ -156,9 +154,7 @@ export const Contained = () => (
       <Tab>Tab Label 1</Tab>
       <Tab>Tab Label 2</Tab>
       <Tab disabled>Tab Label 3</Tab>
-      <Tab title="Tab Label 4 with a very long long title">
-        Tab Label 4 with a very long long title
-      </Tab>
+      <Tab title="Tab Label 4">Tab Label 4</Tab>
       <Tab>Tab Label 5</Tab>
     </TabList>
     <TabPanels>

diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss
@@ -279,7 +279,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       }
 
       overflow: hidden;
-      max-width: 10rem;
       padding: $spacing-04 $spacing-05 $spacing-03;
       border-bottom: $tab-underline-color;
       color: $text-secondary;