feat(filters): adding persisted menuopen and additional select option…

… text
commercetools · Nov 5, 2024 · c62a61b · c62a61b
1 parent 26ad4c2
commit c62a61b
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 28 deletions.
diff --git a/packages/components/inputs/select-input/src/select-input.stories.tsx b/packages/components/inputs/select-input/src/select-input.stories.tsx
@@ -52,24 +52,29 @@ const options = [
   {
     label: 'Animals 1',
     options: [
-      { value: 'platypus', label: 'Platypus' },
-      { value: 'goat', label: 'Goat' },
+      { value: 'platypus', label: 'Platypus', count: 103 },
+      { value: 'goat', label: 'Goat', count: 12.365 },
       { value: 'giraffe', label: 'Giraffe' },
-      { value: 'whale', label: 'Whale' },
-      { value: 'killer-whale', label: 'Killer Whale', isDisabled: true },
-      { value: 'otter', label: 'Otter' },
+      { value: 'whale', label: 'Whale', count: 1123 },
+      {
+        value: 'killer-whale',
+        label: 'Killer Whale',
+        isDisabled: true,
+        count: 1,
+      },
+      { value: 'otter', label: 'Otter', count: 10.356 },
       { value: 'elephant', label: 'Elephant' },
-      { value: 'rat', label: 'Rat' },
-      { value: 'anteater', label: 'Anteater' },
-      { value: 'alligator', label: 'Alligator' },
-      { value: 'dog', label: 'Dog' },
+      { value: 'rat', label: 'Rat', count: 0 },
+      { value: 'anteater', label: 'Anteater', count: 100335456413 },
+      { value: 'alligator', label: 'Alligator', count: 1 },
+      { value: 'dog', label: 'Dog', count: 5 },
       { value: 'pig', label: 'Pig' },
-      { value: 'hippopotamus', label: 'Hippopotamus' },
-      { value: 'lion', label: 'Lion' },
-      { value: 'monkey', label: 'Monkey' },
+      { value: 'hippopotamus', label: 'Hippopotamus', count: 10 },
+      { value: 'lion', label: 'Lion', count: 111 },
+      { value: 'monkey', label: 'Monkey', count: 57 },
       { value: 'kangaroo', label: 'Kangaroo' },
-      { value: 'flamingo', label: 'Flamingo' },
-      { value: 'moose', label: 'Moose' },
+      { value: 'flamingo', label: 'Flamingo', count: 3 },
+      { value: 'moose', label: 'Moose', count: 1003 },
     ],
   },
   {
@@ -99,19 +104,19 @@ const options = [
     label: 'Animals 3',
     options: [
       { value: 'llama', label: 'Llama' },
-      { value: 'seal', label: 'Seal' },
-      { value: 'hawk', label: 'Hawk' },
-      { value: 'wolf', label: 'Wolf' },
-      { value: 'yak', label: 'Yak' },
-      { value: 'rhinoceros', label: 'Rhinoceros' },
-      { value: 'alpaca', label: 'Alpaca' },
-      { value: 'zebra', label: 'Zebra' },
-      { value: 'cat', label: 'Cat' },
+      { value: 'seal', label: 'Seal', count: 245 },
+      { value: 'hawk', label: 'Hawk', count: 23 },
+      { value: 'wolf', label: 'Wolf', count: 89 },
+      { value: 'yak', label: 'Yak', count: 6 },
+      { value: 'rhinoceros', label: 'Rhinoceros', count: 9 },
+      { value: 'alpaca', label: 'Alpaca', count: 54 },
+      { value: 'zebra', label: 'Zebra', count: 302 },
+      { value: 'cat', label: 'Cat', count: 1 },
       { value: 'rabbit', label: 'Rabbit' },
       { value: 'turtle', label: 'Turtle' },
       { value: 'cow', label: 'Cow' },
       { value: 'turkey', label: 'Turkey' },
-      { value: 'deer', label: 'Deer' },
+      { value: 'deer', label: 'Deer', count: 12 },
     ],
   },
 ];

diff --git a/packages/components/inputs/select-input/src/select-input.tsx b/packages/components/inputs/select-input/src/select-input.tsx
@@ -386,6 +386,10 @@ export type TSelectInputProps = {
     | 16
     | 'scale'
     | 'auto';
+  /**
+   * An additional value displayed on the select options menu. This value is only available in the checkbox option style when appearance is set to filter.
+   */
+  count: number;
 };
 
 const defaultProps: Pick<
@@ -481,12 +485,18 @@ const SelectInput = (props: TSelectInputProps) => {
                 ClearIndicator: null,
               }),
               ...(props.optionStyle === 'checkbox'
-                ? optionStyleCheckboxComponents()
+                ? optionStyleCheckboxComponents(props.appearance)
                 : {}),
               ...props.components,
             } as ReactSelectProps['components']
           }
-          menuIsOpen={props.isReadOnly ? false : props.menuIsOpen}
+          menuIsOpen={
+            props.isReadOnly
+              ? false
+              : props.appearance === 'filter'
+              ? true
+              : props.menuIsOpen
+          }
           styles={
             createSelectStyles({
               hasWarning: props.hasWarning,

diff --git a/...nputs/select-utils/src/custom-styled-select-options/options-style-checkbox-components.tsx b/...nputs/select-utils/src/custom-styled-select-options/options-style-checkbox-components.tsx
@@ -1,14 +1,23 @@
-import { type Props as ReactSelectProps } from 'react-select';
+import { type Props as ReactSelectProps, OptionProps } from 'react-select';
 import CheckboxInput from '@commercetools-uikit/checkbox-input';
+import type { TSelectInputProps } from '@commercetools-uikit/select-input';
 import { css } from '@emotion/react';
 import { designTokens } from '@commercetools-uikit/design-system';
 
 /**
  * Returns custom components to be used with react-select, when optionStyle is set to "checkbox"
  */
-export const optionStyleCheckboxComponents = () => {
+type OptionType = {
+  label: string;
+  value: string;
+  count: number;
+};
+
+export const optionStyleCheckboxComponents = (
+  appearance: TSelectInputProps['appearance']
+) => {
   return {
-    Option: (props) => {
+    Option: (props: OptionProps<OptionType>) => {
       const {
         innerRef,
         innerProps,
@@ -17,6 +26,7 @@ export const optionStyleCheckboxComponents = () => {
         isFocused,
         isSelected,
         className,
+        data,
       } = props;
 
       return (
@@ -28,6 +38,8 @@ export const optionStyleCheckboxComponents = () => {
             padding: ${designTokens.spacing10} ${designTokens.spacing20};
             ${isFocused &&
             `background-color: ${designTokens.backgroundColorForInputWhenHovered};`}
+            display: flex;
+            justify-content: space-between;
           `}
           className={className}
           aria-disabled={isDisabled}
@@ -39,6 +51,21 @@ export const optionStyleCheckboxComponents = () => {
           >
             {label}
           </CheckboxInput>
+          {appearance === 'filter' && (
+            <div
+              css={css`
+                display: flex;
+                align-items: center;
+                font-size: 12px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 18px;
+                color: ${designTokens.colorNeutral50};
+              `}
+            >
+              {data.count}
+            </div>
+          )}
         </div>
       );
     },