Merge pull request #542 from LifeSG/toggle-fit-content-width

[BOOKINGSG-5999][JH] add optional useContentWidth for Toggle & Filter.Checkbox

src/filter/addons/filter-item-checkbox.tsx

@@ -18,6 +18,7 @@ export const FilterItemCheckbox = <T,>({
     onSelect,
     labelExtractor,
     valueExtractor,
+    useToggleContentWidth,
     ...filterItemProps
 }: FilterItemCheckboxProps<T>) => {
     // =============================================================================
@@ -180,6 +181,7 @@ export const FilterItemCheckbox = <T,>({
                     (minimisedHeight && index <= lastVisibleElementIndex)
                 }
                 onChange={handleItemClick(option)}
+                useContentWidth={useToggleContentWidth}
             >
                 {optionLabel}
             </StyledToggle>

src/filter/types.ts

@@ -62,4 +62,6 @@ export interface FilterItemCheckboxProps<T>
     labelExtractor?: ((item: T) => React.ReactNode) | undefined;
     /** Function to derive value from an item. If not set, checks `item.value`. */
     valueExtractor?: ((item: T) => string) | undefined;
+    /** Changes min-width of toggle in mobile view to fit content */
+    useToggleContentWidth?: boolean | undefined;
 }

src/toggle/toggle.styles.tsx

@@ -20,6 +20,7 @@ interface StyleProps {
 interface ContainerStyleProps extends StyleProps {
     $styleType?: ToggleStyleType;
     $error?: boolean;
+    $useContentWidth?: boolean;
 }
 
 interface IndicatorLabelContainerStyleProps {
@@ -61,6 +62,15 @@ export const Container = styled.div<ContainerStyleProps>`
         }
     }}
 
+    // Container min width to fit content
+    ${(props) => {
+        if (props.$useContentWidth) {
+            return css`
+                min-width: unset;
+            `;
+        }
+    }}
+
     // Background, Hover and Border style
     ${(props) => {
         switch (props.$styleType) {

src/toggle/toggle.tsx

@@ -39,6 +39,7 @@ export const Toggle = ({
     onRemove,
     "data-testid": testId,
     onChange,
+    useContentWidth,
 }: ToggleProps) => {
     // =============================================================================
     // CONST, STATE, REF
@@ -324,6 +325,7 @@ export const Toggle = ({
             $styleType={styleType}
             $error={error}
             $indicator={indicator}
+            $useContentWidth={useContentWidth}
             id={id}
             data-testid={testId}
         >

src/toggle/types.ts

@@ -46,6 +46,8 @@ export interface ToggleProps
     /** Specifies if the remove button should be displayed */
     removable?: boolean | undefined;
     onRemove?: (() => void) | undefined;
+    /** Changes min-width to fit content */
+    useContentWidth?: boolean | undefined;
 }
 
 export interface ToggleCompositeSectionProps {

stories/filter/addon-props-table.tsx

@@ -37,6 +37,12 @@ const FILTER_CHECKBOX_DATA: ApiTableSectionProps[] = [
                 description: "Called when selection changes",
                 propTypes: ["(options: T[]) => void"],
             },
+            {
+                name: "useToggleContentWidth",
+                description:
+                    "Changes the minimum width of the checkbox toggle to fit its content (on mobile)",
+                propTypes: ["boolean"],
+            },
             {
                 name: "labelExtractor",
                 description: (

stories/toggle/props-table.tsx

@@ -124,6 +124,12 @@ const DATA: ApiTableSectionProps[] = [
                 ),
                 propTypes: ["CompositeSectionProps"],
             },
+            {
+                name: "useContentWidth",
+                description:
+                    "Changes the minimum width of the container to fit its content",
+                propTypes: ["boolean"],
+            },
         ],
     },