Merge branch 'main' into eslint-plugin-ssr-friendly

carbon-design-system · Mar 20, 2024 · 4d229ba · 4d229ba
2 parents 9e44c41 + 4de1fc6
commit 4d229ba
Show file tree

Hide file tree

Showing 23 changed files with 174 additions and 61 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -1390,6 +1390,14 @@
       ]
     },
     {
+      "login": "onurozkardes",
+      "name": "Onur Özkardeş",
+      "avatar_url": "https://avatars.githubusercontent.com/u/38096930?v=4",
+      "profile": "https://github.com/onurozkardes",
+      "contributions": [
+        "code"
+      ]
+    },
       "login": "mattborghi",
       "name": "Matias Borghi",
       "avatar_url": "https://avatars.githubusercontent.com/u/11933424?v=4",

diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -76,7 +76,7 @@ Array [
   "chatAvatarBot",
   "chatAvatarUser",
   "chatBubbleAgent",
-  "chatBubbleAgentBorder",
+  "chatBubbleBorder",
   "chatBubbleUser",
   "chatButton",
   "chatButtonActive",

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9700,6 +9700,42 @@ Map {
       },
     },
   },
+  "unstable__AiSkeletonIcon" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "style": Object {
+        "type": "object",
+      },
+    },
+  },
+  "unstable__AiSkeletonPlaceholder" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+    },
+  },
+  "unstable__AiSkeletonText" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "heading": Object {
+        "type": "bool",
+      },
+      "lineCount": Object {
+        "type": "number",
+      },
+      "paragraph": Object {
+        "type": "bool",
+      },
+      "width": Object {
+        "type": "string",
+      },
+    },
+  },
   "unstable__ChatButton" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {

diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -246,6 +246,9 @@ describe('Carbon Components React', () => {
         "unstable_Pagination",
         "unstable_Text",
         "unstable_TextDirection",
+        "unstable__AiSkeletonIcon",
+        "unstable__AiSkeletonPlaceholder",
+        "unstable__AiSkeletonText",
         "unstable__ChatButton",
         "unstable__ChatButtonSkeleton",
         "unstable__FluidComboBox",

diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -500,9 +500,9 @@ const ComboBox = forwardRef(
     const titleClasses = cx(`${prefix}--label`, {
       [`${prefix}--label--disabled`]: disabled,
     });
-    const comboBoxHelperId = !helperText
-      ? undefined
-      : `combobox-helper-text-${comboBoxInstanceId}`;
+    const helperTextId = `combobox-helper-text-${comboBoxInstanceId}`;
+    const warnTextId = `combobox-warn-text-${comboBoxInstanceId}`;
+    const invalidTextId = `combobox-invalid-text-${comboBoxInstanceId}`;
     const helperClasses = cx(`${prefix}--form__helper-text`, {
       [`${prefix}--form__helper-text--disabled`]: disabled,
     });
@@ -666,6 +666,15 @@ const ComboBox = forwardRef(
               }
             : {};
 
+          // The input should be described by the appropriate message text id
+          // when both the message is supplied *and* when the component is in
+          // the matching state (invalid, warn, etc).
+          const ariaDescribedBy =
+            (invalid && invalidText && invalidTextId) ||
+            (warn && warnText && warnTextId) ||
+            (helperText && !isFluid && helperTextId) ||
+            undefined;
+
           return (
             <div className={wrapperClasses}>
               {titleText && (
@@ -680,11 +689,13 @@ const ComboBox = forwardRef(
                 disabled={disabled}
                 invalid={invalid}
                 invalidText={invalidText}
+                invalidTextId={invalidTextId}
                 isOpen={isOpen}
                 light={light}
                 size={size}
                 warn={warn}
-                warnText={warnText}>
+                warnText={warnText}
+                warnTextId={warnTextId}>
                 <div className={`${prefix}--list-box__field`}>
                   <input
                     role="combobox"
@@ -703,11 +714,7 @@ const ComboBox = forwardRef(
                     {...readOnlyEventHandlers}
                     readOnly={readOnly}
                     ref={mergeRefs(textInput, ref)}
-                    aria-describedby={
-                      helperText && !invalid && !warn && !isFluid
-                        ? comboBoxHelperId
-                        : undefined
-                    }
+                    aria-describedby={ariaDescribedBy}
                   />
                   {invalid && (
                     <WarningFilled
@@ -786,7 +793,7 @@ const ComboBox = forwardRef(
                 </ListBox.Menu>
               </ListBox>
               {helperText && !invalid && !warn && !isFluid && (
-                <Text as="div" id={comboBoxHelperId} className={helperClasses}>
+                <Text as="div" id={helperTextId} className={helperClasses}>
                   {helperText}
                 </Text>
               )}

diff --git a/packages/react/src/components/ListBox/ListBox.tsx b/packages/react/src/components/ListBox/ListBox.tsx
@@ -44,6 +44,11 @@ export interface ListBoxProps
    */
   invalidText?: React.ReactNode;
 
+  /**
+   * Specify the id to be applied to the element containing the invalid text
+   */
+  invalidTextId?: string;
+
   /**
    * Specify if the control should render open
    */
@@ -78,6 +83,11 @@ export interface ListBoxProps
    * Provide the text that is displayed when the control is in warning state
    */
   warnText?: React.ReactNode;
+
+  /**
+   * Specify the id to be applied to the element containing the warn text
+   */
+  warnTextId?: string;
 }
 
 export type ListBoxComponent = ForwardRefReturn<HTMLDivElement, ListBoxProps>;
@@ -95,8 +105,10 @@ const ListBox: ListBoxComponent = React.forwardRef(function ListBox(
     size,
     invalid,
     invalidText,
+    invalidTextId,
     warn,
     warnText,
+    warnTextId,
     light,
     isOpen,
     ...rest
@@ -132,10 +144,14 @@ const ListBox: ListBoxComponent = React.forwardRef(function ListBox(
       </div>
       {isFluid && <hr className={`${prefix}--list-box__divider`} />}
       {invalid ? (
-        <div className={`${prefix}--form-requirement`}>{invalidText}</div>
+        <div className={`${prefix}--form-requirement`} id={invalidTextId}>
+          {invalidText}
+        </div>
       ) : null}
       {showWarning ? (
-        <div className={`${prefix}--form-requirement`}>{warnText}</div>
+        <div className={`${prefix}--form-requirement`} id={warnTextId}>
+          {warnText}
+        </div>
       ) : null}
     </>
   );
@@ -168,6 +184,11 @@ ListBox.propTypes = {
    */
   invalidText: PropTypes.node,
 
+  /**
+   * Specify the id to be applied to the element containing the invalid text
+   */
+  invalidTextId: PropTypes.string,
+
   /**
    * Specify if the control should render open
    */
@@ -202,7 +223,12 @@ ListBox.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes.node,
+  warnText: PropTypes.string,
+
+  /**
+   * Specify the id to be applied to the element containing the warn text
+   */
+  warnTextId: PropTypes.string,
 };
 
 export default ListBox;
diff --git a/packages/react/src/components/Stack/HStack.tsx b/packages/react/src/components/Stack/HStack.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import { Stack, StackProps } from './Stack';
+
+const HStack = React.forwardRef<React.ReactNode, StackProps>(function HStack(
+  { children, ...props },
+  ref
+) {
+  return (
+    <Stack {...props} ref={ref} orientation="horizontal">
+      {children}
+    </Stack>
+  );
+});
+
+export { HStack };
diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx
@@ -5,10 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { spacing } from '@carbon/layout';
+import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import { spacing } from '@carbon/layout';
+
 import { usePrefix } from '../../internal/usePrefix';
 
 /**
@@ -21,7 +22,7 @@ const SPACING_STEPS = Array.from({ length: spacing.length - 1 }).map(
   }
 );
 
-interface StackProps extends React.HTMLAttributes<HTMLElement> {
+export interface StackProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Provide a custom element type to render as the outermost element in
    * the Stack component. By default, this component will render a `div`.

diff --git a/packages/react/src/components/Stack/VStack.tsx b/packages/react/src/components/Stack/VStack.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import { Stack, StackProps } from './Stack';
+
+const VStack = React.forwardRef<React.ReactNode, StackProps>(function VStack(
+  props,
+  ref
+) {
+  return <Stack {...props} ref={ref} orientation="vertical" />;
+});
+
+export { VStack };
diff --git a/packages/react/src/components/Stack/index.ts b/packages/react/src/components/Stack/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { HStack } from './HStack';
+export { VStack } from './VStack';
+export { Stack, type StackProps } from './Stack';
diff --git a/packages/react/src/components/Stack/index.tsx b/packages/react/src/components/Stack/index.tsx
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -76,6 +76,7 @@ export * from './components/SkeletonIcon';
 export * from './components/SkeletonPlaceholder';
 export * from './components/SkeletonText';
 export * from './components/Slider';
+export * from './components/Stack';
 export * from './components/StructuredList';
 export * from './components/Switch';
 export * from './components/Tab';
@@ -161,6 +162,11 @@ export {
   ChatButton as unstable__ChatButton,
   ChatButtonSkeleton as unstable__ChatButtonSkeleton,
 } from './components/ChatButton';
+export {
+  AiSkeletonText as unstable__AiSkeletonText,
+  AiSkeletonIcon as unstable__AiSkeletonIcon,
+  AiSkeletonPlaceholder as unstable__AiSkeletonPlaceholder,
+} from './components/AiSkeleton';
 export * from './components/Stack';
 export * from './components/Tooltip';
 export {

diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
@@ -153,7 +153,7 @@ describe('@carbon/styles/scss/theme', () => {
         "chat-prompt-border-end",
         "chat-bubble-user",
         "chat-bubble-agent",
-        "chat-bubble-agent-border",
+        "chat-bubble-border",
         "chat-avatar-bot",
         "chat-avatar-agent",
         "chat-avatar-user",

diff --git a/packages/styles/scss/components/link/_link.scss b/packages/styles/scss/components/link/_link.scss
@@ -65,11 +65,11 @@ $link-focus-text-color: custom-property.get-var(
     }
 
     &:visited {
-      color: $link-visited-text-color;
+      color: $link-text-color;
     }
 
     &:visited:hover {
-      color: $link-visited-text-color;
+      color: $link-hover-text-color;
     }
   }
 

diff --git a/packages/styles/scss/components/ui-shell/content/_content.scss b/packages/styles/scss/components/ui-shell/content/_content.scss
@@ -19,7 +19,8 @@
     will-change: margin-left;
   }
 
-  .#{$prefix}--header ~ .#{$prefix}--content {
+  .#{$prefix}--header ~ .#{$prefix}--content,
+  div:has(.#{$prefix}--header) ~ .#{$prefix}--content {
     margin-block-start: mini-units(6);
   }
 

diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
@@ -243,7 +243,7 @@ export const chatPromptBorderStart = gray10;
 export const chatPromptBorderEnd = rgba(gray10, 0);
 export const chatBubbleUser = gray20;
 export const chatBubbleAgent = white;
-export const chatBubbleAgentBorder = gray20;
+export const chatBubbleBorder = gray20;
 export const chatAvatarBot = gray60;
 export const chatAvatarAgent = gray80;
 export const chatAvatarUser = blue60;