Merge pull request #1974 from dxc-technology/jialecl/inputs-size-fix

Mil4n0r · web-flow · commit 50acff4b282e · 2024-05-06T08:02:53.000+02:00
Fixed some weird size behaviors in some input components
diff --git a/lib/src/number-input/NumberInput.stories.tsx b/lib/src/number-input/NumberInput.stories.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DxcNumberInput from "./NumberInput";
+import DxcFlex from "../flex/Flex";
 
 export default {
   title: "Number Input",
@@ -113,5 +114,13 @@ export const Chromatic = () => (
       <Title title="FillParent size" theme="light" level={4} />
       <DxcNumberInput label="FillParent" size="fillParent" />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Different sizes inside a flex" theme="light" level={4} />
+      <DxcFlex justifyContent="space-between" gap="1rem">
+        <DxcNumberInput label="fillParent" size="fillParent" />
+        <DxcNumberInput label="medium" size="medium" />
+        <DxcNumberInput label="large" size="large" />
+      </DxcFlex>
+    </ExampleContainer>
   </>
 );
diff --git a/lib/src/number-input/NumberInput.tsx b/lib/src/number-input/NumberInput.tsx
@@ -29,7 +29,7 @@ const DxcNumberInput = React.forwardRef<RefType, NumberInputPropsType>(
       size,
       tabIndex,
     },
-    ref
+    ref,
   ) => {
     const numberInputRef = React.useRef<HTMLInputElement>(null);
 
@@ -47,7 +47,7 @@ const DxcNumberInput = React.forwardRef<RefType, NumberInputPropsType>(
 
     return (
       <NumberInputContext.Provider value={{ typeNumber: "number", minNumber: min, maxNumber: max, stepNumber: step }}>
-        <NumberInputContainer ref={numberInputRef}>
+        <NumberInputContainer ref={numberInputRef} size={size}>
           <DxcTextInput
             label={label}
             name={name}
@@ -72,10 +72,11 @@ const DxcNumberInput = React.forwardRef<RefType, NumberInputPropsType>(
         </NumberInputContainer>
       </NumberInputContext.Provider>
     );
-  }
+  },
 );
 
-const NumberInputContainer = styled.div`
+const NumberInputContainer = styled.div<{ size: NumberInputPropsType["size"] }>`
+  ${(props) => props.size == "fillParent" && "width: 100%;"}
   // Chrome, Safari, Edge, Opera
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
diff --git a/lib/src/password-input/PasswordInput.stories.tsx b/lib/src/password-input/PasswordInput.stories.tsx
@@ -3,6 +3,7 @@ import { userEvent, within } from "@storybook/test";
 import DxcPasswordInput from "./PasswordInput";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DxcFlex from "../flex/Flex";
 
 export default {
   title: "Password Input",
@@ -81,6 +82,14 @@ export const Chromatic = () => (
       <Title title="FillParent size" theme="light" level={4} />
       <DxcPasswordInput label="FillParent" size="fillParent" />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Without label" theme="light" level={4} />
+      <DxcFlex justifyContent="space-between" gap="1rem">
+        <DxcPasswordInput label="fillParent" size="fillParent" />
+        <DxcPasswordInput label="medium" size="medium" />
+        <DxcPasswordInput label="large" size="large" />
+      </DxcFlex>
+    </ExampleContainer>
   </>
 );
 
diff --git a/lib/src/password-input/PasswordInput.tsx b/lib/src/password-input/PasswordInput.tsx
@@ -33,7 +33,7 @@ const DxcPasswordInput = React.forwardRef<RefType, PasswordInputPropsType>(
       size = "medium",
       tabIndex = 0,
     },
-    ref
+    ref,
   ) => {
     const [isPasswordVisible, setIsPasswordVisible] = useState(false);
     const inputRef = useRef<HTMLDivElement>(null);
@@ -52,7 +52,7 @@ const DxcPasswordInput = React.forwardRef<RefType, PasswordInputPropsType>(
     }, [isPasswordVisible, passwordInput]);
 
     return (
-      <PasswordInput ref={ref} role="group">
+      <PasswordInput ref={ref} role="group" size={size}>
         <DxcTextInput
           label={label}
           name={name}
@@ -62,7 +62,7 @@ const DxcPasswordInput = React.forwardRef<RefType, PasswordInputPropsType>(
             onClick: () => {
               setIsPasswordVisible((isPasswordVisible) => !isPasswordVisible);
             },
-            icon: isPasswordVisible ? 'Visibility_Off' : 'Visibility',
+            icon: isPasswordVisible ? "Visibility_Off" : "Visibility",
             title: isPasswordVisible ? passwordInput.inputHidePasswordTitle : passwordInput.inputShowPasswordTitle,
           }}
           error={error}
@@ -80,10 +80,11 @@ const DxcPasswordInput = React.forwardRef<RefType, PasswordInputPropsType>(
         />
       </PasswordInput>
     );
-  }
+  },
 );
 
-const PasswordInput = styled.div`
+const PasswordInput = styled.div<{ size: PasswordInputPropsType["size"] }>`
+  ${(props) => props.size == "fillParent" && "width: 100%;"}
   & ::-ms-reveal {
     display: none;
   }
diff --git a/lib/src/select/Select.stories.tsx b/lib/src/select/Select.stories.tsx
@@ -9,6 +9,7 @@ import useTheme from "../useTheme";
 import { HalstackProvider } from "../HalstackContext";
 import { disabledRules } from "../../test/accessibility/rules/specific/select/disabledRules";
 import preview from "../../.storybook/preview";
+import DxcFlex from "../flex/Flex";
 
 export default {
   title: "Select",
@@ -305,6 +306,14 @@ const Select = () => (
       <Title title="Fillparent size" theme="light" level={4} />
       <DxcSelect label="Fillparent" options={single_options} size="fillParent" />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Different sizes inside a flex" theme="light" level={4} />
+      <DxcFlex justifyContent="space-between" gap="1rem">
+        <DxcSelect label="fillParent" size="fillParent" options={single_options} />
+        <DxcSelect label="medium" size="medium" options={single_options} />
+        <DxcSelect label="large" size="large" options={single_options} />
+      </DxcFlex>
+    </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="xxsmall margin" theme="light" level={4} />
diff --git a/lib/src/select/Select.tsx b/lib/src/select/Select.tsx
@@ -25,15 +25,15 @@ const canOpenOptions = (options: Option[] | OptionGroup[], disabled: boolean) =>
 
 const filterOptionsBySearchValue = (
   options: Option[] | OptionGroup[],
-  searchValue: string
+  searchValue: string,
 ): Option[] | OptionGroup[] => {
   if (options?.length > 0) {
     if (isArrayOfOptionGroups(options))
       return options.map((optionGroup) => {
         const group = {
           label: optionGroup.label,
           options: optionGroup.options.filter((option) =>
-            option.label.toUpperCase().includes(searchValue.toUpperCase())
+            option.label.toUpperCase().includes(searchValue.toUpperCase()),
           ),
         };
         return group;
@@ -47,7 +47,7 @@ const getLastOptionIndex = (
   filteredOptions: Option[] | OptionGroup[],
   searchable: boolean,
   optional: boolean,
-  multiple: boolean
+  multiple: boolean,
 ) => {
   let last = 0;
   const reducer = (acc: number, current: OptionGroup) => acc + current.options?.length;
@@ -67,7 +67,7 @@ const getSelectedOption = (
   options: Option[] | OptionGroup[],
   multiple: boolean,
   optional: boolean,
-  optionalItem: Option
+  optionalItem: Option,
 ) => {
   let selectedOption: Option | Option[] = multiple ? [] : ({} as Option);
   let singleSelectionIndex: number;
@@ -164,7 +164,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>(
       size = "medium",
       tabIndex = 0,
     },
-    ref
+    ref,
   ): JSX.Element => {
     const selectId = `select-${useId()}`;
     const selectLabelId = `label-${selectId}`;
@@ -188,11 +188,11 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>(
     const filteredOptions = useMemo(() => filterOptionsBySearchValue(options, searchValue), [options, searchValue]);
     const lastOptionIndex = useMemo(
       () => getLastOptionIndex(options, filteredOptions, searchable, optional, multiple),
-      [options, filteredOptions, searchable, optional, multiple]
+      [options, filteredOptions, searchable, optional, multiple],
     );
     const { selectedOption, singleSelectionIndex } = useMemo(
       () => getSelectedOption(value ?? innerValue, options, multiple, optional, optionalItem),
-      [value, innerValue, options, multiple, optional, optionalItem]
+      [value, innerValue, options, multiple, optional, optionalItem],
     );
 
     const openOptions = () => {
@@ -275,7 +275,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>(
           (!isOpen || (visualFocusIndex === -1 && singleSelectionIndex > -1 && singleSelectionIndex <= lastOptionIndex))
             ? changeVisualFocusIndex(singleSelectionIndex)
             : changeVisualFocusIndex((visualFocusIndex) =>
-                visualFocusIndex === 0 || visualFocusIndex === -1 ? lastOptionIndex : visualFocusIndex - 1
+                visualFocusIndex === 0 || visualFocusIndex === -1 ? lastOptionIndex : visualFocusIndex - 1,
               );
           openOptions();
           break;
@@ -350,7 +350,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>(
         !multiple && closeOptions();
         setSearchValue("");
       },
-      [handleSelectChangeValue, closeOptions, multiple]
+      [handleSelectChangeValue, closeOptions, multiple],
     );
 
     useEffect(() => {
@@ -521,7 +521,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>(
         </SelectContainer>
       </ThemeProvider>
     );
-  }
+  },
 );
 
 const sizes = {
@@ -542,6 +542,7 @@ const SelectContainer = styled.div<{ margin: SelectPropsType["margin"]; size: Se
   box-sizing: border-box;
 
   width: ${(props) => calculateWidth(props.margin, props.size)};
+  ${(props) => props.size !== "fillParent" && "min-width:" + calculateWidth(props.margin, props.size)};
   margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
   margin-top: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
diff --git a/lib/src/text-input/TextInput.stories.tsx b/lib/src/text-input/TextInput.stories.tsx
@@ -7,6 +7,7 @@ import Suggestions from "./Suggestions";
 import { ThemeProvider } from "styled-components";
 import useTheme from "../useTheme";
 import { HalstackProvider } from "../HalstackContext";
+import DxcFlex from "../flex/Flex";
 
 export default {
   title: "Text Input",
@@ -268,6 +269,14 @@ export const Chromatic = () => (
       <Title title="FillParent size" theme="light" level={4} />
       <DxcTextInput label="FillParent" size="fillParent" />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Different sizes inside a flex" theme="light" level={4} />
+      <DxcFlex justifyContent="space-between" gap="1.5rem">
+        <DxcTextInput label="Text input" size="fillParent" />
+        <DxcTextInput label="Text input" size="medium" />
+        <DxcTextInput label="Text input" size="large" />
+      </DxcFlex>
+    </ExampleContainer>
     <Title title="Opinionated theme" theme="light" level={2} />
     <ExampleContainer>
       <HalstackProvider theme={opinionatedTheme}>
diff --git a/lib/src/text-input/TextInput.tsx b/lib/src/text-input/TextInput.tsx
@@ -33,7 +33,7 @@ const makeCancelable = (promise) => {
   const wrappedPromise = new Promise<string[]>((resolve, reject) => {
     promise.then(
       (val) => (hasCanceled_ ? reject({ isCanceled: true }) : resolve(val)),
-      (promiseError) => (hasCanceled_ ? reject({ isCanceled: true }) : reject(promiseError))
+      (promiseError) => (hasCanceled_ ? reject({ isCanceled: true }) : reject(promiseError)),
     );
   });
   return {
@@ -106,7 +106,7 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>(
       size = "medium",
       tabIndex = 0,
     },
-    ref
+    ref,
   ): JSX.Element => {
     const inputId = `input-${useId()}`;
     const autosuggestId = `suggestions-${inputId}`;
@@ -337,7 +337,7 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>(
         };
       } else if (suggestions?.length > 0) {
         changeFilteredSuggestions(
-          suggestions.filter((suggestion) => suggestion.toUpperCase().startsWith((value ?? innerValue).toUpperCase()))
+          suggestions.filter((suggestion) => suggestion.toUpperCase().startsWith((value ?? innerValue).toUpperCase())),
         );
         changeVisualFocusIndex(-1);
       }
@@ -347,7 +347,7 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>(
           numberInputContext.typeNumber,
           numberInputContext.minNumber,
           numberInputContext.maxNumber,
-          numberInputContext.stepNumber
+          numberInputContext.stepNumber,
         );
     }, [value, innerValue, suggestions, numberInputContext]);
 
@@ -506,14 +506,15 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>(
         </TextInputContainer>
       </ThemeProvider>
     );
-  }
+  },
 );
 
 const TextInputContainer = styled.div<{ margin: TextInputPropsType["margin"]; size: TextInputPropsType["size"] }>`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   width: ${(props) => calculateWidth(props.margin, props.size)};
+  ${(props) => props.size !== "fillParent" && "min-width:" + calculateWidth(props.margin, props.size)};
   margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
   margin-top: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
@@ -590,8 +591,8 @@ const InputContainer = styled.div<{
           props.error
             ? "transparent"
             : props.readOnly
-            ? props.theme.hoverReadOnlyBorderColor
-            : props.theme.hoverBorderColor
+              ? props.theme.hoverReadOnlyBorderColor
+              : props.theme.hoverBorderColor
         };
         ${props.error ? `box-shadow: 0 0 0 2px ${props.theme.hoverErrorBorderColor};` : ""}
       }
