fix: visual defects in the touch variant

nulogy · Nov 18, 2024 · 393f034 · 393f034
1 parent c175cf1
commit 393f034
Show file tree

Hide file tree

Showing 30 changed files with 196 additions and 119 deletions.
diff --git a/src/Button/IconicButton.tsx b/src/Button/IconicButton.tsx
@@ -103,7 +103,7 @@ const WrapperButton = styled.button<IconicButtonProps>(
     paddingRight: theme.space.none,
   }),
   variant({
-    prop: "foo",
+    prop: "scale",
     variants: {
       touch: {
         py: "x1",

diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx
@@ -99,9 +99,9 @@ const VisualCheckbox = styled.div<VisualCheckboxProps>(
       content: "''",
       display: "none",
       position: "relative",
-      left: "4px",
-      width: "3px",
-      height: "9px",
+      left: theme.space.half,
+      width: theme.sizes.half,
+      height: theme.sizes.x1,
       border: `solid ${theme.colors.white}`,
       ...(indeterminate ? indeterminateStyles : checkedStyles),
     },

diff --git a/src/DatePicker/DatePicker.tsx b/src/DatePicker/DatePicker.tsx
@@ -118,7 +118,7 @@ const DatePicker = forwardRef<unknown, DatePickerProps>(
 
     const customInputProps = {
       ...InputFieldDefaultProps,
-      inputWidth: componentVariant === "touch" ? "240px" : "184px",
+      inputWidth: componentVariant === "touch" ? "280px" : "184px",
       error: !!(errorMessage || errorList),
       ...inputProps,
       placeholder:
@@ -167,6 +167,7 @@ const DatePicker = forwardRef<unknown, DatePickerProps>(
               onFocus={onFocus}
               onBlur={onBlur}
               popperModifiers={{
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 flip: { enabled: !disableFlipping },
               }}

diff --git a/src/DatePicker/DatePickerInput.tsx b/src/DatePicker/DatePickerInput.tsx
@@ -71,6 +71,7 @@ const DatePickerInput = forwardRef<HTMLInputElement, DatePickerInputProps>(
         value={value}
         placeholder={placeholder}
         icon="calendarToday"
+        iconSize="x2"
         onClick={onClick}
         onKeyDown={handleKeyDown}
         onChange={handleChange}

diff --git a/src/DatePicker/DatePickerStyles.ts b/src/DatePicker/DatePickerStyles.ts
@@ -56,7 +56,7 @@ export const DatePickerStyles = createGlobalStyle<{ theme: DefaultNDSThemeType }
       display: "inline-block",
       lineHeight: theme.space.x4,
       textAlign: "center",
-      width: `calc(${theme.space.x3}+${theme.space.half})`,
+      width: `calc(${theme.space.x3} + ${theme.space.half})`,
       margin: theme.space.half,
       boxSizing: "content-box",
       "&:hover": {
@@ -83,9 +83,10 @@ export const DatePickerStyles = createGlobalStyle<{ theme: DefaultNDSThemeType }
         cursor: "pointer",
       },
     },
-    ".react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover": {
-      backgroundColor: "transparent",
-    },
+    ".react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover":
+      {
+        backgroundColor: "transparent",
+      },
     ".react-datepicker__day-names, .react-datepicker__week": {
       whiteSpace: "nowrap",
     },

diff --git a/src/DateRange/DateRange.story.tsx b/src/DateRange/DateRange.story.tsx
@@ -53,13 +53,13 @@ export const CustomizingInputProps = () => (
   <DateRange
     startDateInputProps={{
       placeholder: "From (Mon YYYY)",
-      inputWidth: "200px",
+      inputWidth: "280px",
       labelText: "From",
       error: true,
     }}
     endDateInputProps={{
       placeholder: "To (Mon YYYY)",
-      inputWidth: "180px",
+      inputWidth: "260px",
       labelText: "To",
     }}
     labelProps={{ labelText: "" }}
@@ -126,8 +126,8 @@ export const WithTimes = () => (
 
 export const CustomizingInputPropsWithTimes = () => (
   <DateRange
-    startDateInputProps={{ placeholder: "From", inputWidth: "130px" }}
-    endDateInputProps={{ placeholder: "To", inputWidth: "130px" }}
+    startDateInputProps={{ placeholder: "From", inputWidth: "280px" }}
+    endDateInputProps={{ placeholder: "To", inputWidth: "280px" }}
     onRangeChange={action("range changed")}
     onStartDateChange={action("start date changed")}
     onEndDateChange={action("end date changed")}

diff --git a/src/DropdownMenu/DropdownButton.tsx b/src/DropdownMenu/DropdownButton.tsx
@@ -47,7 +47,7 @@ const DropdownButton = styled.button<DropdownButtonProps>(
     },
   }),
   variant({
-    prop: "foo",
+    prop: "scale",
     variants: {
       touch: {
         pt: "x2",

diff --git a/src/DropdownMenu/DropdownLink.tsx b/src/DropdownMenu/DropdownLink.tsx
@@ -40,18 +40,18 @@ const DropdownLink = styled.a.withConfig<Props>({
       outline: "none",
       color: theme.colors[hoverColor],
       backgroundColor: theme.colors[bgHoverColor],
-      borderLeft: `${theme.space.half}  solid ${theme.colors.blue}`,
+      borderLeft: `${theme.space.half} solid ${theme.colors.blue}`,
     },
     "&:disabled": {
       opacity: ".5",
     },
     paddingTop: theme.space.x1,
     paddingRight: theme.space.x2,
     paddingBottom: theme.space.x1,
-    paddingLeft: "12px",
+    paddingLeft: `calc(${theme.space.x2} - ${theme.space.half})`,
   }),
   variant({
-    prop: "foo",
+    prop: "scale",
     variants: {
       touch: {
         pt: "x2",

diff --git a/src/FieldLabel/FieldLabel.tsx b/src/FieldLabel/FieldLabel.tsx
@@ -26,7 +26,7 @@ export default function FieldLabel({
           </Flex>
           {hint && (
             <Flex display="inline-flex" ml="half">
-              <FramedIcon iconSize="20px" icon="info" tooltip={hint} />
+              <FramedIcon iconSize="x2_5" icon="info" tooltip={hint} />
             </Flex>
           )}
         </Flex>

diff --git a/src/FieldLabel/RequirementText.tsx b/src/FieldLabel/RequirementText.tsx
@@ -2,6 +2,6 @@ import React from "react";
 import { Text } from "../Type";
 import { TextProps } from "../Type/Text";
 
-const RequirementText = (props: TextProps) => <Text inline ml="x1" fontSize="12px" color="darkGrey" {...props} />;
+const RequirementText = (props: TextProps) => <Text inline ml="x1" fontSize="smaller" color="darkGrey" {...props} />;
 
 export default RequirementText;
diff --git a/src/Icon/Icon.story.tsx b/src/Icon/Icon.story.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import icons from "@nulogy/icons";
-import { Box, Flex, Icon, InlineIcon, NDSProvider } from "../index";
 import { useTheme } from "styled-components";
+import icons from "@nulogy/icons";
+import { Box, Flex, Icon, InlineIcon } from "../index";
 
 const iconNames = [...Object.keys(icons), "loading"];
 const iconSubset = [...iconNames.slice(0, 5), "loading"];

diff --git a/src/Icon/Icon.tsx b/src/Icon/Icon.tsx
@@ -30,20 +30,26 @@ const Svg = React.forwardRef<SVGSVGElement, IconProps>(
       color: fillColor = "currentColor",
       className = undefined,
       title = undefined,
-      size = "24px",
+      size,
       focusable = false,
       icon,
       ...props
     }: IconProps,
     ref
   ) => {
     const theme = useTheme();
+    size ||= theme.sizes.x3;
 
     if (icon === "loading") {
       return (
         <LoadingIcon
-          color={theme.colors[fillColor] ? theme.colors[fillColor] : fillColor}
-          className={className}
+          ref={ref}
+          aria-hidden={title == null}
+          width={theme.space[size] || size}
+          height={theme.space[size] || size}
+          fill={theme.colors[fillColor] ? theme.colors[fillColor] : fillColor}
+          focusable={focusable}
+          className={`${className} nds-icon--${icon}`}
           {...props}
         />
       );

diff --git a/src/Icon/LoadingIcon.tsx b/src/Icon/LoadingIcon.tsx
@@ -1,13 +1,20 @@
 import React from "react";
+import { useTheme } from "styled-components";
 
-type LoadingIconProps = React.ComponentPropsWithoutRef<"svg">;
+interface LoadingIconProps extends React.ComponentPropsWithRef<"svg"> {
+  size?: string;
+}
+
+const LoadingIcon = React.forwardRef<SVGSVGElement, LoadingIconProps>(({ size, ...props }, ref) => {
+  const theme = useTheme();
+  size ||= theme.sizes.x3;
 
-const LoadingIcon: React.FC<React.PropsWithChildren<LoadingIconProps>> = (props) => {
   return (
     <svg
+      ref={ref}
       viewBox="0 0 24px 24px"
-      width="24px"
-      height="24px"
+      width={size}
+      height={size}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       preserveAspectRatio="xMidYMid"
@@ -102,6 +109,6 @@ const LoadingIcon: React.FC<React.PropsWithChildren<LoadingIconProps>> = (props)
       </g>
     </svg>
   );
-};
+});
 
 export default LoadingIcon;
diff --git a/src/Input/InputField.tsx b/src/Input/InputField.tsx
@@ -112,7 +112,7 @@ const StyledInput = styled.input<StyledInputProps>(
   }),
   ({ theme }) =>
     variant({
-      prop: "foo",
+      prop: "scale",
       variants: {
         touch: {
           padding: `${subPx(theme.space.x2)}`,
@@ -136,7 +136,7 @@ const StyledInputIcon = styled(Icon)<{ variant: ComponentVariant }>(
     pointerEvents: "none",
   }),
   variant({
-    prop: "foo",
+    prop: "scale",
     variants: {
       touch: {
         right: "x2",

diff --git a/src/Link/Link.tsx b/src/Link/Link.tsx
@@ -49,10 +49,7 @@ const StyledLink = styled.a<LinkProps>(
   }),
   variant({
     variants: {
-      touch: {
-        py: "x2",
-        px: "0",
-      },
+      touch: {},
       medium: {},
     },
   }),

diff --git a/src/NDSProvider/ComponentVariantContext.tsx b/src/NDSProvider/ComponentVariantContext.tsx
@@ -7,6 +7,10 @@ type ComponentVariantContextValue = {
   children?: React.ReactNode;
 };
 
+export default function ComponentVariantContextProvider({ variant, children }: ComponentVariantContextValue) {
+  return <ComponentVariantContext.Provider value={{ variant: variant }}>{children}</ComponentVariantContext.Provider>;
+}
+
 export const ComponentVariantContext = createContext<ComponentVariantContextValue>(undefined);
 
 export function useComponentVariant(selectedVariant?: ComponentVariant) {
@@ -18,8 +22,14 @@ export function useComponentVariant(selectedVariant?: ComponentVariant) {
   return selectedVariant ?? context.variant;
 }
 
-const ComponentVariantContextProvider = ({ variant, children }: ComponentVariantContextValue) => {
-  return <ComponentVariantContext.Provider value={{ variant: variant }}>{children}</ComponentVariantContext.Provider>;
+type WithVariantProps = {
+  variant?: ComponentVariant;
 };
 
-export default ComponentVariantContextProvider;
+export function withComponentVariant<P extends WithVariantProps>(WrappedComponent: React.ComponentType<P>) {
+  return function ComponentWithVariant(props: P) {
+    const variant = useComponentVariant(props.variant);
+
+    return <WrappedComponent {...(props as P)} variant={variant} />;
+  };
+}
diff --git a/src/Pagination/PaginationButton.tsx b/src/Pagination/PaginationButton.tsx
@@ -11,21 +11,23 @@ const getHoverBackground = (currentPage: boolean, disabled: boolean, theme: Defa
   return theme.colors.lightGrey;
 };
 
-const PaginationButton = styled.button(({ theme, disabled, currentPage }: any) => ({
-  fontSize: theme.fontSizes.small,
-  padding: `${theme.space.x1} ${theme.space.x2}`,
-  lineHeight: theme.lineHeights.smallTextBase,
-  display: "flex",
-  borderRadius: theme.radii.medium,
-  border: `1px solid ${currentPage ? theme.colors.darkBlue : theme.colors.lightGrey}`,
-  color: disabled ? theme.colors.grey : theme.colors.black,
-  "&:not(:last-child)": {
-    marginRight: theme.space.x2,
-  },
-  cursor: disabled ? "default" : "pointer",
-  "&:hover": {
-    background: getHoverBackground(currentPage, disabled, theme),
-  },
-}));
+const PaginationButton = styled.button<{ disabled?: boolean; currentPage?: boolean }>(
+  ({ theme, disabled, currentPage }) => ({
+    fontSize: theme.fontSizes.small,
+    padding: `${theme.space.x1} ${theme.space.x2}`,
+    lineHeight: theme.lineHeights.smallTextBase,
+    display: "flex",
+    borderRadius: theme.radii.medium,
+    border: `1px solid ${currentPage ? theme.colors.darkBlue : theme.colors.lightGrey}`,
+    color: disabled ? theme.colors.grey : theme.colors.black,
+    "&:not(:last-child)": {
+      marginRight: theme.space.x2,
+    },
+    cursor: disabled ? "default" : "pointer",
+    "&:hover": {
+      background: getHoverBackground(currentPage, disabled, theme),
+    },
+  })
+);
 
 export default PaginationButton;
diff --git a/src/Radio/Radio.tsx b/src/Radio/Radio.tsx
@@ -59,6 +59,9 @@ type VisualRadioProps = {
 
 const VisualRadio = styled.div<VisualRadioProps>(
   ({ disabled, theme }: VisualRadioProps): CSSObject => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
     minWidth: theme.space.x2,
     height: theme.space.x2,
     marginRight: theme.space.x1,
@@ -70,13 +73,9 @@ const VisualRadio = styled.div<VisualRadioProps>(
       cursor: disabled ? undefined : "pointer",
       content: "''",
       display: "none",
-      position: "relative",
-      left: "4px",
-      top: "4px",
-      width: "2px",
-      height: "2px",
+      width: theme.sizes.x1,
+      height: theme.sizes.x1,
       background: theme.colors.white,
-      border: `2px solid ${theme.colors.white}`,
       borderRadius: theme.radii.circle,
     },
   })

diff --git a/src/Radio/RadioGroup.story.tsx b/src/Radio/RadioGroup.story.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Radio, RadioGroup, Icon, Tooltip } from "../index";
+import { Radio, RadioGroup, Icon, Tooltip, Flex } from "../index";
 
 const errorList = ["Error message 1", "Error message 2"];
 
@@ -34,12 +34,12 @@ export const RadioGroupWithAllProps = () => (
     <Radio
       value="a"
       labelText={
-        <>
+        <Flex alignItems="center">
           Option A
           <Tooltip placement="bottom" tooltip="Option A is a special option with extra information" defaultOpen>
-            <Icon icon="help" color="darkBlue" size="16px" ml="x1" />
+            <Icon icon="help" color="darkBlue" size="x2" ml="x1" />
           </Tooltip>
-        </>
+        </Flex>
       }
     />
     <Radio value="b" labelText="Option B" />

diff --git a/src/Radio/RadioGroup.tsx b/src/Radio/RadioGroup.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { CSSObject, ThemeContext } from "styled-components";
+import { CSSObject, ThemeContext, useTheme } from "styled-components";
 import { HelpText, RequirementText } from "../FieldLabel";
 import { InlineValidation } from "../Validation";
 import { Fieldset } from "../Form";
@@ -15,7 +15,7 @@ interface RadioGroupProps {
   helpText?: string;
   required?: boolean;
   requirementText?: string;
-  children?: any;
+  children?: React.ReactNode;
   name?: string;
   disabled?: boolean;
   defaultValue?: string;
@@ -35,12 +35,12 @@ export default function RadioGroup({
   ...props
 }: RadioGroupProps) {
   const otherProps = { ...props, errorMessage, errorList };
-  const themeContext = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <Fieldset className={className} id={id}>
-      <legend style={{ marginBottom: themeContext.space.x1 }}>
-        <span style={labelTextStyles(themeContext)}>{labelText}</span>
+      <legend style={{ marginBottom: theme.space.x1 }}>
+        <span style={labelTextStyles(theme)}>{labelText}</span>
         {requirementText && <RequirementText>{requirementText}</RequirementText>}
       </legend>
       {helpText && <HelpText>{helpText}</HelpText>}