fix: expect overflown content in several components (#629)

* fix: expect overflown content in several components

* docs(CheckboxMultiSelect): add a showcase story

Author: ariser

src/components/IconWrapper/IconWrapper.tsx

@@ -33,6 +33,7 @@ const IconWrapper = ({
     <Container
       orientation="horizontal"
       gap={gap}
+      overflow="hidden"
       {...props}
     >
       {icon && iconDir === "start" && (

src/components/Select/CheckboxMultiSelect.stories.tsx

@@ -2,8 +2,12 @@ import { useEffect, useState } from "react";
 
 import { Meta, StoryObj } from "@storybook/react";
 
+import { Panel } from "../Panel/Panel";
+import { Text } from "../Typography/Text/Text";
+
 import { CheckboxMultiSelect } from "./CheckboxMultiSelect";
-import { selectOptions } from "./selectOptions";
+import { selectOptions, selectOptionsLong } from "./selectOptions";
+import { Spacer } from "../Spacer/Spacer";
 
 const meta: Meta<typeof CheckboxMultiSelect> = {
   component: CheckboxMultiSelect,
@@ -87,7 +91,7 @@ export const OptionsAsProp: StoryObj<typeof CheckboxMultiSelect> = {
   },
 };
 
-export const CheckboxMultiSelectVariants = {
+export const CheckboxMultiSelectVariants: StoryObj<typeof CheckboxMultiSelect> = {
   render: () => {
     const [selectedCount, setSetlectedCount] = useState<number>(0);
 
@@ -131,3 +135,109 @@ export const CheckboxMultiSelectVariants = {
     );
   },
 };
+
+export const Showcase: StoryObj<typeof CheckboxMultiSelect> = {
+  render: () => {
+    return (
+      <>
+        <Panel
+          hasBorder
+          width="300px"
+        >
+          <Text>With overflown options</Text>
+          <CheckboxMultiSelect options={selectOptionsLong} />
+        </Panel>
+
+        <Spacer />
+        <Panel
+          hasBorder
+          width="300px"
+        >
+          <Text>With overflown options (full width)</Text>
+          <CheckboxMultiSelect
+            useFullWidthItems
+            options={selectOptionsLong}
+          />
+        </Panel>
+
+        <Spacer />
+        <Panel
+          hasBorder
+          width="300px"
+        >
+          <Text>Disabled</Text>
+          <CheckboxMultiSelect
+            disabled
+            options={selectOptions}
+          />
+        </Panel>
+
+        <Spacer />
+        <Panel
+          hasBorder
+          width="300px"
+        >
+          <Text>With an error</Text>
+          <CheckboxMultiSelect
+            error="Incorrect value"
+            options={selectOptions}
+          />
+        </Panel>
+
+        <Spacer />
+        <Panel
+          hasBorder
+          width="300px"
+        >
+          <Text>With disabled options</Text>
+          <CheckboxMultiSelect
+            options={[
+              {
+                value: "1",
+                label: "Option 1 (disabled)",
+                disabled: true,
+              },
+              {
+                value: "2",
+                label: "Option 2 (disabled)",
+                disabled: true,
+              },
+              {
+                value: "3",
+                label: "Option 3",
+              },
+              {
+                value: "4",
+                label: "Option 4",
+              },
+            ]}
+          />
+        </Panel>
+
+        <Spacer />
+        <Panel
+          hasBorder
+          width="300px"
+        >
+          <Text>With search</Text>
+          <CheckboxMultiSelect
+            showSearch
+            options={selectOptions}
+          />
+        </Panel>
+
+        <Spacer />
+        <Panel
+          hasBorder
+          width="300px"
+        >
+          <Text>With custom selected text</Text>
+          <CheckboxMultiSelect
+            selectLabel="Something is selected"
+            options={selectOptions}
+          />
+        </Panel>
+      </>
+    );
+  },
+};

src/components/Select/common/InternalSelect.tsx

@@ -683,6 +683,7 @@ export const MultiSelectCheckboxItem = forwardRef<
           <Container
             orientation="horizontal"
             gap="xs"
+            overflow="hidden"
           >
             <Checkbox
               checked={isChecked}

src/components/Select/selectOptions.ts

@@ -6,6 +6,7 @@ export const selectOptions: Array<SelectOptionListItem> = [
     options: [
       {
         icon: "user",
+        iconDir: "start",
         value: "content0",
         label: "Content0",
       },
@@ -31,3 +32,26 @@ export const selectOptions: Array<SelectOptionListItem> = [
     label: "Content4",
   },
 ];
+
+export const selectOptionsLong: Array<SelectOptionListItem> = [
+  {
+    value: "1",
+    label:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  {
+    value: "2",
+    label:
+      "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+  },
+  {
+    value: "3",
+    label:
+      "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+  },
+  {
+    value: "4",
+    label:
+      "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+  },
+];