Merge branch 'main' into readonlySlider

carbon-design-system · Nov 15, 2022 · fe45ba2 · fe45ba2
2 parents 1465623 + 6d9f602
commit fe45ba2
Show file tree

Hide file tree

Showing 34 changed files with 457 additions and 1,793 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -905,6 +905,16 @@
         "code"
       ]
     },
+    {
+      "login": "61130061",
+      "name": "Llam4u",
+      "avatar_url": "https://avatars.githubusercontent.com/u/54393468?v=4",
+      "profile": "https://61130061.github.io/llam4u-terminal/",
+      "contributions": [
+        "code",
+        "bug"
+      ]
+    },
     {
       "login": "torresga",
       "name": "G. Torres",

diff --git a/README.md b/README.md
@@ -202,6 +202,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/hannelevaltanen"><img src="https://avatars.githubusercontent.com/u/26527460?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hannele Valtanen</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=hannelevaltanen" title="Code">💻</a></td>
+    <td align="center"><a href="https://61130061.github.io/llam4u-terminal/"><img src="https://avatars.githubusercontent.com/u/54393468?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Llam4u</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=61130061" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/issues?q=author%3A61130061" title="Bug reports">🐛</a></td>
     <td align="center"><a href="http://torresga.github.io/"><img src="https://avatars.githubusercontent.com/u/6892410?v=4?s=100" width="100px;" alt=""/><br /><sub><b>G. Torres</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=torresga" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/FionaDL"><img src="https://avatars.githubusercontent.com/u/28625558?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Fiona</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=FionaDL" title="Code">💻</a></td>
     <td align="center"><a href="https://lewisdavanzo.com/"><img src="https://avatars.githubusercontent.com/u/70274722?v=4?s=100" width="100px;" alt=""/><br /><sub><b>kindoflew</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=kindoflew" title="Code">💻</a></td>

diff --git a/e2e/icons-react/__snapshots__/PublicAPI-test.js.snap b/e2e/icons-react/__snapshots__/PublicAPI-test.js.snap
@@ -502,6 +502,7 @@ Array [
   "DewPointFilled",
   "Diagram",
   "DiagramReference",
+  "DiamondFill",
   "DirectLink",
   "DirectionBearRight_01",
   "DirectionBearRight_01Filled",

diff --git a/e2e/icons-vue/__snapshots__/PublicAPI-test.js.snap b/e2e/icons-vue/__snapshots__/PublicAPI-test.js.snap
@@ -1993,6 +1993,7 @@ Array [
   "DiagramReference20",
   "DiagramReference24",
   "DiagramReference32",
+  "DiamondFillGlyph",
   "DirectLink16",
   "DirectLink20",
   "DirectLink24",
@@ -6924,7 +6925,6 @@ Array [
   "UndefinedFilled20",
   "UndefinedFilled24",
   "UndefinedFilled32",
-  "UndefinedGlyph",
   "Undo16",
   "Undo20",
   "Undo24",

diff --git a/e2e/icons/__snapshots__/PublicAPI-test.js.snap b/e2e/icons/__snapshots__/PublicAPI-test.js.snap
@@ -1992,6 +1992,7 @@ Array [
   "DiagramReference20",
   "DiagramReference24",
   "DiagramReference32",
+  "DiamondFillGlyph",
   "DirectLink16",
   "DirectLink20",
   "DirectLink24",
@@ -6923,7 +6924,6 @@ Array [
   "UndefinedFilled20",
   "UndefinedFilled24",
   "UndefinedFilled32",
-  "UndefinedGlyph",
   "Undo16",
   "Undo20",
   "Undo24",

diff --git a/packages/icons/categories.yml b/packages/icons/categories.yml
@@ -1316,26 +1316,26 @@ categories:
           - ZIP--reference
       - name: Status
         members:
+          - caution
+          - caution-inverted
           - checkmark
           - checkmark--filled
           - checkmark--filled--error
           - checkmark--filled--warning
           - checkmark--outline
           - checkmark--outline--error
           - checkmark--outline--warning
+          - circle-fill
+          - circle-stroke
           - condition--point
           - condition--wait-point
+          - critical
+          - critical-severity
+          - diamond-fill
           - error
           - error--filled
           - error--outline
-          - caution
-          - caution-inverted
-          - circle-fill
-          - circle-stroke
-          - critical-severity
           - low-severity
-          - critical
-          - square-fill
           - help
           - help--filled
           - in-progress
@@ -1355,6 +1355,7 @@ categories:
           - pending
           - pending--filled
           - queued
+          - square-fill
           - undefined
           - undefined--filled
           - unknown

diff --git a/packages/icons/icons.yml b/packages/icons/icons.yml
@@ -5855,6 +5855,14 @@
     - source
   sizes:
     - 32
+- name: diamond-fill
+  friendly_name: Diamond fill
+  aliases:
+    - diamond
+    - fill
+    - status
+  sizes:
+    - glyph
 - name: dicom--6000
   friendly_name: DICOM 6000
   sizes:
@@ -18463,7 +18471,6 @@
     - undefined
   sizes:
     - 32
-    - glyph
 - name: undefined--filled
   friendly_name: Undefined filled
   sizes:

diff --git a/packages/icons/src/svg/undefined.svg → packages/icons/src/svg/diamond-fill.svg b/packages/icons/src/svg/undefined.svg → packages/icons/src/svg/diamond-fill.svg
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1363,6 +1363,17 @@ Map {
         "isRequired": true,
         "type": "oneOfType",
       },
+      "size": Object {
+        "args": Array [
+          Array [
+            "sm",
+            "md",
+            "lg",
+            "xl",
+          ],
+        ],
+        "type": "oneOf",
+      },
     },
   },
   "ContainedListItem" => Object {

diff --git a/packages/react/src/components/ContainedList/ContainedList.js b/packages/react/src/components/ContainedList/ContainedList.js
@@ -19,13 +19,15 @@ function ContainedList({
   className,
   kind = variants[0],
   label,
+  size = 'lg',
 }) {
   const labelId = `${useId('contained-list')}-header`;
   const prefix = usePrefix();
 
   const classes = classNames(
     `${prefix}--contained-list`,
     `${prefix}--contained-list--${kind}`,
+    `${prefix}--contained-list--${size}`,
     className
   );
 
@@ -69,6 +71,11 @@ ContainedList.propTypes = {
    * A label describing the contained list.
    */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+
+  /**
+   * Specify the size of the contained list.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
 };
 
 export default ContainedList;
diff --git a/packages/react/src/components/ContainedList/ContainedList.stories.js b/packages/react/src/components/ContainedList/ContainedList.stories.js
@@ -90,16 +90,14 @@ export const WithInteractiveItems = () => {
   const onClick = action('onClick (ContainedListItem)');
 
   return (
-    <VStack gap={12}>
-      <ContainedList label="List title" kind="on-page">
-        <ContainedListItem onClick={onClick}>List item</ContainedListItem>
-        <ContainedListItem onClick={onClick} disabled>
-          List item
-        </ContainedListItem>
-        <ContainedListItem onClick={onClick}>List item</ContainedListItem>
-        <ContainedListItem onClick={onClick}>List item</ContainedListItem>
-      </ContainedList>
-    </VStack>
+    <ContainedList label="List title" kind="on-page">
+      <ContainedListItem onClick={onClick}>List item</ContainedListItem>
+      <ContainedListItem onClick={onClick} disabled>
+        List item
+      </ContainedListItem>
+      <ContainedListItem onClick={onClick}>List item</ContainedListItem>
+      <ContainedListItem onClick={onClick}>List item</ContainedListItem>
+    </ContainedList>
   );
 };
 
@@ -114,19 +112,17 @@ export const WithActions = () => {
   );
 
   return (
-    <VStack gap={12}>
-      <ContainedList
-        label="List title"
-        kind="on-page"
-        action={<ExpandableSearch placeholder="Find item" size="lg" />}>
-        <ContainedListItem action={itemAction}>List item</ContainedListItem>
-        <ContainedListItem action={itemAction} disabled>
-          List item
-        </ContainedListItem>
-        <ContainedListItem action={itemAction}>List item</ContainedListItem>
-        <ContainedListItem action={itemAction}>List item</ContainedListItem>
-      </ContainedList>
-    </VStack>
+    <ContainedList
+      label="List title"
+      kind="on-page"
+      action={<ExpandableSearch placeholder="Find item" size="lg" />}>
+      <ContainedListItem action={itemAction}>List item</ContainedListItem>
+      <ContainedListItem action={itemAction} disabled>
+        List item
+      </ContainedListItem>
+      <ContainedListItem action={itemAction}>List item</ContainedListItem>
+      <ContainedListItem action={itemAction}>List item</ContainedListItem>
+    </ContainedList>
   );
 };
 
@@ -142,89 +138,81 @@ export const WithInteractiveItemsAndActions = () => {
   );
 
   return (
-    <VStack gap={12}>
-      <ContainedList
-        label="List title"
-        kind="on-page"
-        action={<ExpandableSearch placeholder="Find item" size="lg" />}>
-        <ContainedListItem action={itemAction} onClick={onClick}>
-          List item
-        </ContainedListItem>
-        <ContainedListItem action={itemAction} onClick={onClick}>
-          List item
-        </ContainedListItem>
-        <ContainedListItem action={itemAction} onClick={onClick}>
-          List item
-        </ContainedListItem>
-        <ContainedListItem action={itemAction} onClick={onClick}>
-          List item
-        </ContainedListItem>
-      </ContainedList>
-    </VStack>
+    <ContainedList
+      label="List title"
+      kind="on-page"
+      action={<ExpandableSearch placeholder="Find item" size="lg" />}>
+      <ContainedListItem action={itemAction} onClick={onClick}>
+        List item
+      </ContainedListItem>
+      <ContainedListItem action={itemAction} onClick={onClick}>
+        List item
+      </ContainedListItem>
+      <ContainedListItem action={itemAction} onClick={onClick}>
+        List item
+      </ContainedListItem>
+      <ContainedListItem action={itemAction} onClick={onClick}>
+        List item
+      </ContainedListItem>
+    </ContainedList>
   );
 };
 
 export const WithListTitleDecorators = () => {
   return (
-    <VStack gap={12}>
-      <ContainedList
-        label={
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-            }}>
-            <span>List title</span>
-            <Tag size="sm">4</Tag>
-          </div>
-        }
-        kind="on-page">
-        <ContainedListItem>List item</ContainedListItem>
-        <ContainedListItem>List item</ContainedListItem>
-        <ContainedListItem>List item</ContainedListItem>
-        <ContainedListItem>List item</ContainedListItem>
-      </ContainedList>
-    </VStack>
+    <ContainedList
+      label={
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}>
+          <span>List title</span>
+          <Tag size="sm">4</Tag>
+        </div>
+      }
+      kind="on-page">
+      <ContainedListItem>List item</ContainedListItem>
+      <ContainedListItem>List item</ContainedListItem>
+      <ContainedListItem>List item</ContainedListItem>
+      <ContainedListItem>List item</ContainedListItem>
+    </ContainedList>
   );
 };
 
 export const WithIcons = () => {
   return (
-    <VStack gap={12}>
-      <ContainedList label="List title" kind="on-page">
-        <ContainedListItem renderIcon={Apple}>List item</ContainedListItem>
-        <ContainedListItem renderIcon={Wheat}>List item</ContainedListItem>
-        <ContainedListItem renderIcon={Strawberry}>List item</ContainedListItem>
-        <ContainedListItem renderIcon={Fish}>List item</ContainedListItem>
-      </ContainedList>
-    </VStack>
+    <ContainedList label="List title" kind="on-page">
+      <ContainedListItem renderIcon={Apple}>List item</ContainedListItem>
+      <ContainedListItem renderIcon={Wheat}>List item</ContainedListItem>
+      <ContainedListItem renderIcon={Strawberry}>List item</ContainedListItem>
+      <ContainedListItem renderIcon={Fish}>List item</ContainedListItem>
+    </ContainedList>
   );
 };
 
 export const WithLayer = () => {
   return (
-    <VStack gap={12}>
-      <VStack gap={5}>
-        <ContainedList label="List title" kind="on-page">
-          <ContainedListItem>List item</ContainedListItem>
-          <ContainedListItem>List item</ContainedListItem>
-        </ContainedList>
-        <Layer>
-          <VStack gap={5}>
+    <VStack gap={5}>
+      <ContainedList label="List title" kind="on-page">
+        <ContainedListItem>List item</ContainedListItem>
+        <ContainedListItem>List item</ContainedListItem>
+      </ContainedList>
+      <Layer>
+        <VStack gap={5}>
+          <ContainedList label="List title" kind="on-page">
+            <ContainedListItem>List item</ContainedListItem>
+            <ContainedListItem>List item</ContainedListItem>
+          </ContainedList>
+          <Layer>
             <ContainedList label="List title" kind="on-page">
               <ContainedListItem>List item</ContainedListItem>
               <ContainedListItem>List item</ContainedListItem>
             </ContainedList>
-            <Layer>
-              <ContainedList label="List title" kind="on-page">
-                <ContainedListItem>List item</ContainedListItem>
-                <ContainedListItem>List item</ContainedListItem>
-              </ContainedList>
-            </Layer>
-          </VStack>
-        </Layer>
-      </VStack>
+          </Layer>
+        </VStack>
+      </Layer>
     </VStack>
   );
 };
@@ -250,4 +238,7 @@ Playground.argTypes = {
   kind: {
     defaultValue: 'on-page',
   },
+  size: {
+    defaultValue: 'lg',
+  },
 };
diff --git a/packages/react/src/components/FormLabel/FormLabel.stories.js b/packages/react/src/components/FormLabel/FormLabel.stories.js
@@ -8,7 +8,7 @@
 import React from 'react';
 
 import FormLabel from './FormLabel';
-import { Tooltip } from '../Tooltip/next/Tooltip';
+import { Tooltip } from '../Tooltip';
 import { Information } from '@carbon/icons-react';
 import { ActionableNotification } from '../Notification';
 import { Toggletip, ToggletipButton, ToggletipContent } from '../Toggletip';