feat(filter-select): change the popover width to be more flexible (#3913

)

* feat(filter-select): change the popover width to be more flexible

* docs(filter-select): add stickersheet to docs

.changeset/gold-rings-remember.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": minor
+---
+
+Change the FilterSelect popover width to be between 196-400px.

packages/components/src/FilterSelect/FilterSelect.module.scss

@@ -1,7 +1,9 @@
 @import "~@kaizen/design-tokens/sass/spacing";
 
 .filterContents {
-  width: 224px; // @todo: check this value
+  box-sizing: border-box;
+  min-width: 12.25rem; // 196px
+  max-width: 25rem; // 400px
   overflow: auto;
   padding: $spacing-12;
 }

packages/components/src/FilterSelect/_docs/FilterSelect.mdx

@@ -1,7 +1,8 @@
-import { ArgTypes, Controls, Description, Meta } from "@storybook/blocks"
+import { ArgTypes, Canvas, Controls, Description, Meta } from "@storybook/blocks"
 import { ResourceLinks, KaioNotification, Installation, NoClipCanvas } from "../../../../../storybook/components"
 import { LinkTo } from "../../../../../storybook/components/LinkTo"
 import * as FilterSelectStories from "./FilterSelect.stories"
+import * as FilterSelectStickerSheet from "./FilterSelect.stickersheet.stories"
 
 <Meta of={FilterSelectStories} />
 
@@ -22,11 +23,17 @@ import * as FilterSelectStories from "./FilterSelect.stories"
 />
 
 ## Playground
+
 <NoClipCanvas of={FilterSelectStories.Playground} />
 <Controls of={FilterSelectStories.Playground} />
 
 ## API
 
-### Additional Option Properties (generic)
+### Additional option properties (generic)
+
 <Description of={FilterSelectStories.AdditionalProperties} />
 <NoClipCanvas of={FilterSelectStories.AdditionalProperties} />
+
+## Sticker sheet
+
+<Canvas of={FilterSelectStickerSheet.StickerSheetDefault} />

packages/components/src/FilterSelect/_docs/FilterSelect.stickersheet.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import { Meta, StoryFn } from "@storybook/react"
 import isChromatic from "chromatic"
 import { StickerSheet } from "../../../../../storybook/components/StickerSheet"
@@ -26,22 +26,25 @@ const StickerSheetTemplate: StoryFn = () => {
   // Only open the dropdowns in Chromatic as the focus locks clash with
   // each other in Storybook.
   const [isOpenDefaultSingle, setIsOpenDefaultSingle] =
-    React.useState<boolean>(IS_CHROMATIC)
+    useState<boolean>(IS_CHROMATIC)
   const [isOpenDefaultGroup, setIsOpenDefaultGroup] =
-    React.useState<boolean>(IS_CHROMATIC)
+    useState<boolean>(IS_CHROMATIC)
   const [isOpenDefaultExisting, setIsOpenDefaultExisting] =
-    React.useState<boolean>(IS_CHROMATIC)
+    useState<boolean>(IS_CHROMATIC)
   const [isOpenDefaultDisabled, setIsOpenDefaultDisabled] =
-    React.useState<boolean>(IS_CHROMATIC)
+    useState<boolean>(IS_CHROMATIC)
 
   const [isOpenCustomSingle, setIsOpenCustomSingle] =
-    React.useState<boolean>(IS_CHROMATIC)
+    useState<boolean>(IS_CHROMATIC)
   const [isOpenCustomPartial, setIsOpenCustomPartial] =
-    React.useState<boolean>(IS_CHROMATIC)
+    useState<boolean>(IS_CHROMATIC)
   const [isOpenCustomDividerMixed, setIsOpenCustomDividerMixed] =
-    React.useState<boolean>(IS_CHROMATIC)
+    useState<boolean>(IS_CHROMATIC)
   const [isOpenCustomDividerSpecific, setIsOpenCustomDividerSpecific] =
-    React.useState<boolean>(IS_CHROMATIC)
+    useState<boolean>(IS_CHROMATIC)
+
+  const [isOpenMin, setIsOpenMin] = useState<boolean>(IS_CHROMATIC)
+  const [isOpenMax, setIsOpenMax] = useState<boolean>(IS_CHROMATIC)
 
   return (
     <>
@@ -59,7 +62,7 @@ const StickerSheetTemplate: StoryFn = () => {
                 label="Label"
                 isOpen={isOpenDefaultSingle}
                 setIsOpen={setIsOpenDefaultSingle}
-                renderTrigger={(triggerProps): JSX.Element => (
+                renderTrigger={triggerProps => (
                   <FilterButton {...triggerProps} />
                 )}
                 items={singleMockItems}
@@ -70,7 +73,7 @@ const StickerSheetTemplate: StoryFn = () => {
                 label="Label"
                 isOpen={isOpenDefaultGroup}
                 setIsOpen={setIsOpenDefaultGroup}
-                renderTrigger={(triggerProps): JSX.Element => (
+                renderTrigger={triggerProps => (
                   <FilterButton {...triggerProps} />
                 )}
                 items={groupedMockItems}
@@ -81,7 +84,7 @@ const StickerSheetTemplate: StoryFn = () => {
                 label="Label"
                 isOpen={isOpenDefaultExisting}
                 setIsOpen={setIsOpenDefaultExisting}
-                renderTrigger={(triggerProps): JSX.Element => (
+                renderTrigger={triggerProps => (
                   <FilterButton {...triggerProps} />
                 )}
                 items={singleMockItems}
@@ -93,7 +96,7 @@ const StickerSheetTemplate: StoryFn = () => {
                 label="Label"
                 isOpen={isOpenDefaultDisabled}
                 setIsOpen={setIsOpenDefaultDisabled}
-                renderTrigger={(triggerProps): JSX.Element => (
+                renderTrigger={triggerProps => (
                   <FilterButton {...triggerProps} />
                 )}
                 items={mixedMockItemsDisabled}
@@ -122,7 +125,7 @@ const StickerSheetTemplate: StoryFn = () => {
                 label="Label"
                 isOpen={isOpenCustomSingle}
                 setIsOpen={setIsOpenCustomSingle}
-                renderTrigger={(triggerProps): JSX.Element => (
+                renderTrigger={triggerProps => (
                   <FilterButton {...triggerProps} />
                 )}
                 items={singleMockItems}
@@ -166,7 +169,7 @@ const StickerSheetTemplate: StoryFn = () => {
                 label="Label"
                 isOpen={isOpenCustomPartial}
                 setIsOpen={setIsOpenCustomPartial}
-                renderTrigger={(triggerProps): JSX.Element => (
+                renderTrigger={triggerProps => (
                   <FilterButton {...triggerProps} />
                 )}
                 items={mixedMockItemsUngroupedFirst}
@@ -218,7 +221,7 @@ const StickerSheetTemplate: StoryFn = () => {
                 label="Label"
                 isOpen={isOpenCustomDividerMixed}
                 setIsOpen={setIsOpenCustomDividerMixed}
-                renderTrigger={(triggerProps): JSX.Element => (
+                renderTrigger={triggerProps => (
                   <FilterButton {...triggerProps} />
                 )}
                 items={mixedMockItemsUnordered}
@@ -244,7 +247,7 @@ const StickerSheetTemplate: StoryFn = () => {
                 label="Label"
                 isOpen={isOpenCustomDividerSpecific}
                 setIsOpen={setIsOpenCustomDividerSpecific}
-                renderTrigger={(triggerProps): JSX.Element => (
+                renderTrigger={triggerProps => (
                   <FilterButton {...triggerProps} />
                 )}
                 items={[
@@ -276,6 +279,51 @@ const StickerSheetTemplate: StoryFn = () => {
           </StickerSheet.Row>
         </StickerSheet.Body>
       </StickerSheet>
+
+      <StickerSheet
+        heading="Min/Max"
+        style={{ paddingTop: IS_CHROMATIC ? "26rem" : undefined }}
+      >
+        <StickerSheet.Header headings={["Min size", "Max size"]} />
+        <StickerSheet.Body>
+          <StickerSheet.Row>
+            <div style={{ width: "250px" }}>
+              <FilterSelect
+                label="Label"
+                isOpen={isOpenMin}
+                setIsOpen={setIsOpenMin}
+                renderTrigger={triggerProps => (
+                  <FilterButton {...triggerProps} />
+                )}
+                items={[{ value: "a", label: "A" }]}
+              />
+            </div>
+            <div>
+              <FilterSelect
+                label="Label"
+                isOpen={isOpenMax}
+                setIsOpen={setIsOpenMax}
+                renderTrigger={triggerProps => (
+                  <FilterButton {...triggerProps} />
+                )}
+                items={[
+                  {
+                    value: "long-1",
+                    label:
+                      "Super long option where the container is fixed width and the selected option goes multiline",
+                  },
+                  {
+                    value: "long-2",
+                    label:
+                      "Another super long option where the container is fixed width and the selected option goes multiline",
+                  },
+                  ...singleMockItems,
+                ]}
+              />
+            </div>
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
     </>
   )
 }