Merge branch 'main' into refactor/12555-select-typescript

carbon-design-system · Mar 6, 2023 · 090b73d · 090b73d
2 parents 5acfa7f + 2e528c0
commit 090b73d
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 20 deletions.
diff --git a/packages/react/src/components/Dropdown/Dropdown.stories.js b/packages/react/src/components/Dropdown/Dropdown.stories.js
@@ -121,7 +121,7 @@ Playground.argTypes = {
     control: {
       type: 'text',
     },
-    defaultValue: 'this is an example label',
+    defaultValue: 'This is an example label',
   },
   warn: {
     control: {
@@ -139,7 +139,7 @@ Playground.argTypes = {
     control: {
       type: 'text',
     },
-    defaultValue: 'this is an example title',
+    defaultValue: 'This is an example title',
   },
   size: {
     options: ['sm', 'md', 'lg'],
@@ -158,7 +158,6 @@ export const Default = () => (
       id="default"
       titleText="Dropdown label"
       helperText="This is some helper text"
-      initialSelectedItem={items[0]}
       label="Dropdown menu options"
       items={items}
       itemToString={(item) => (item ? item.text : '')}
@@ -171,7 +170,6 @@ export const Inline = () => (
     <Dropdown
       id="inline"
       titleText="Inline dropdown label"
-      initialSelectedItem={items[0]}
       label="Dropdown menu options"
       type="inline"
       items={items}
@@ -186,7 +184,6 @@ export const WithLayer = () => (
       id="default"
       titleText="First Layer"
       helperText="This is some helper text"
-      initialSelectedItem={items[0]}
       label="Dropdown menu options"
       items={items}
       itemToString={(item) => (item ? item.text : '')}
@@ -196,7 +193,6 @@ export const WithLayer = () => (
         id="default"
         titleText="Second Layer"
         helperText="This is some helper text"
-        initialSelectedItem={items[0]}
         label="Dropdown menu options"
         items={items}
         itemToString={(item) => (item ? item.text : '')}
@@ -206,7 +202,6 @@ export const WithLayer = () => (
           id="default"
           titleText="Third Layer"
           helperText="This is some helper text"
-          initialSelectedItem={items[0]}
           label="Dropdown menu options"
           items={items}
           itemToString={(item) => (item ? item.text : '')}
@@ -221,7 +216,6 @@ export const InlineWithLayer = () => (
     <Dropdown
       id="inline"
       titleText="First Layer"
-      initialSelectedItem={items[0]}
       label="Dropdown menu options"
       type="inline"
       items={items}
@@ -231,7 +225,6 @@ export const InlineWithLayer = () => (
       <Dropdown
         id="inline"
         titleText="Second Layer"
-        initialSelectedItem={items[0]}
         label="Dropdown menu options"
         type="inline"
         items={items}
@@ -241,7 +234,6 @@ export const InlineWithLayer = () => (
         <Dropdown
           id="inline"
           titleText="Third Layer"
-          initialSelectedItem={items[0]}
           label="Dropdown menu options"
           type="inline"
           items={items}

diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -302,6 +302,10 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect(
                   event.stopPropagation();
                 }
 
+                if (match(event, keys.Enter)) {
+                  handleOnMenuChange(true);
+                }
+
                 if (!disabled) {
                   if (match(event, keys.Delete) || match(event, keys.Escape)) {
                     if (isOpen) {

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -478,6 +478,10 @@ const MultiSelect = React.forwardRef(function MultiSelect<ItemType>(
         clearSelection();
         e.stopPropagation();
       }
+
+      if (match(e, keys.Space) || match(e, keys.ArrowDown)) {
+        setIsOpenWrapper(true);
+      }
     }
   };
 

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;