feat: change font size and line height for touch interactive elements

nulogy · Nov 19, 2024 · 4c279e3 · 4c279e3
1 parent f535426
commit 4c279e3
Show file tree

Hide file tree

Showing 23 changed files with 107 additions and 325 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -66,13 +66,13 @@ export const globalTypes = {
   },
   desktopScale: {
     name: "Desktop typography scale",
-    description: "Toggles between the old and new desktop typography scale",
-    defaultValue: "old",
+    description: "Toggles between the legacy and new desktop typography scale",
+    defaultValue: "legacy",
     toolbar: {
       icon: "paragraph",
       items: [
-        { value: "old", title: "Old" },
-        { value: "new", title: "New" },
+        { value: "legacy", title: "Legacy desktop scale" },
+        { value: "new", title: "New desktop scale" },
       ],
       dynamicTitle: true,
     },
@@ -95,8 +95,6 @@ export const globalTypes = {
 const withThemeProvider = (Story, context) => {
   const { theme, locale, desktopScale } = context.globals;
 
-  console.log(locale);
-
   return (
     <NDSProvider locale={locale} variant={theme} futureFlags={{ newDesktopTypographyScale: desktopScale === "new" }}>
       <Story />

diff --git a/src/Breadcrumbs/BreadcrumbsListItem.tsx b/src/Breadcrumbs/BreadcrumbsListItem.tsx
@@ -42,24 +42,6 @@ export const BreadcrumbsListItem = styled.li<{ variant: ComponentVariant }>(
       lineHeight: theme.lineHeights.smallTextBase,
     },
   }),
-  variant({
-    variants: {
-      touch: {
-        "a, p": {
-          py: "x2",
-          px: "x0",
-          fontSize: "base",
-        },
-      },
-      desktop: {
-        "a, p": {
-          py: "0",
-          px: "0",
-          fontSize: "small",
-        },
-      },
-    },
-  }),
   space,
   layout,
   color,

diff --git a/src/Button/Button.story.tsx b/src/Button/Button.story.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Flex } from "../Flex";
 import { Button, PrimaryButton, DangerButton, QuietButton } from ".";
-import { Heading2, Heading4 } from "../Type";
+import { Heading4 } from "../Type";
 
 export default {
   title: "Components/Buttons",
@@ -27,8 +27,8 @@ _QuietButton.story = {
 };
 
 export const WithDifferentSizes = () => (
-  <Flex flexDirection="column" gap="x2">
-    <Flex flexDirection="column">
+  <Flex flexDirection="column" gap="x3">
+    <Flex flexDirection="column" gap="x1">
       <Heading4>Medium size (default)</Heading4>
       <Flex gap="x1">
         <Button>Secondary Button</Button>
@@ -37,7 +37,7 @@ export const WithDifferentSizes = () => (
         <QuietButton>Quiet Button</QuietButton>
       </Flex>
     </Flex>
-    <Flex flexDirection="column">
+    <Flex flexDirection="column" gap="x1">
       <Heading4>Small size</Heading4>
       <Flex gap="x1">
         <Button size="small">Secondary Button</Button>

diff --git a/src/Button/IconicButton.tsx b/src/Button/IconicButton.tsx
@@ -103,15 +103,10 @@ const WrapperButton = styled.button<IconicButtonProps>(
     paddingRight: theme.space.none,
   }),
   variant({
-    prop: "scale",
     variants: {
       touch: {
-        py: "x1",
-        px: "none",
-      },
-      desktop: {
-        py: "half",
-        px: "none",
+        fontSize: "md",
+        lineHeight: "base",
       },
     },
   }),

diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx
@@ -152,10 +152,14 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
           checked={checked}
           indeterminate={indeterminate}
           data-testid="visual-checkbox"
-          marginTop={labelText ? "half" : "0px"}
         />
         {labelText && (
-          <Text disabled={disabled} ml="x1">
+          <Text
+            fontSize={componentVariant === "touch" ? "md" : undefined}
+            lineHeight={componentVariant === "touch" ? "base" : undefined}
+            disabled={disabled}
+            ml="x1"
+          >
             {labelText}
           </Text>
         )}

diff --git a/src/DatePicker/DatePicker.tsx b/src/DatePicker/DatePicker.tsx
@@ -146,7 +146,6 @@ const DatePicker = forwardRef<unknown, DatePickerProps>(
         <LocaleContext.Consumer>
           {({ locale }) => (
             <ReactDatePicker
-              showTimeSelect
               selected={selectedDate}
               openToDate={selectedDate}
               dateFormat={dateFormat}

diff --git a/src/Divider/index.ts b/src/Divider/index.ts
@@ -1 +1,3 @@
+
 export { default as Divider } from "./Divider";
+
diff --git a/src/DropdownMenu/DropdownButton.tsx b/src/DropdownMenu/DropdownButton.tsx
@@ -31,7 +31,7 @@ const DropdownButton = styled.button<DropdownButtonProps>(
     paddingTop: theme.space.x1,
     paddingRight: theme.space.x2,
     paddingBottom: theme.space.x1,
-    paddingLeft: "12px",
+    paddingLeft: `calc(${theme.space.x2} - ${theme.space.half})`,
     "&:hover": {
       color: theme.colors[hoverColor],
       backgroundColor: disabled ? "transparent" : theme.colors[bgHoverColor],
@@ -47,19 +47,10 @@ const DropdownButton = styled.button<DropdownButtonProps>(
     },
   }),
   variant({
-    prop: "scale",
     variants: {
       touch: {
-        pt: "x2",
-        pr: "x2",
-        pb: "x2",
-        pl: "12px",
-      },
-      desktop: {
-        pt: "x1",
-        pr: "x2",
-        pb: "x1",
-        pl: "12px",
+        fontSize: "md",
+        lineHeight: "base",
       },
     },
   }),

diff --git a/src/DropdownMenu/DropdownItem.tsx b/src/DropdownMenu/DropdownItem.tsx
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { variant } from "../StyledProps";
 
 type Props = {
   color?: string;
@@ -36,6 +37,14 @@ const DropdownItem = styled.div<Props>(
         color: theme.colors[hoverColor],
       },
     },
+  }),
+  variant({
+    variants: {
+      touch: {
+        fontSize: "md",
+        lineHeight: "base",
+      },
+    },
   })
 );
 

diff --git a/src/DropdownMenu/DropdownLink.tsx b/src/DropdownMenu/DropdownLink.tsx
@@ -51,20 +51,10 @@ const DropdownLink = styled.a.withConfig<Props>({
     paddingLeft: `calc(${theme.space.x2} - ${theme.space.half})`,
   }),
   variant({
-    prop: "scale",
     variants: {
       touch: {
-        pt: "x2",
-        pr: "x2",
-        pb: "x2",
-        pl: "12px",
-      },
-
-      desktop: {
-        pt: "x1",
-        pr: "x2",
-        pb: "x1",
-        pl: "12px",
+        fontSize: "md",
+        lineHeight: "base",
       },
     },
   }),

diff --git a/src/Input/InputField.tsx b/src/Input/InputField.tsx
@@ -130,18 +130,14 @@ const StyledInput = styled.input<StyledInputProps>(
     paddingTop: `${subPx(theme.space.x1)}`,
     paddingBottom: `${subPx(theme.space.x1)}`,
   }),
-  ({ theme }) =>
-    variant({
-      prop: "scale",
-      variants: {
-        touch: {
-          padding: `${subPx(theme.space.x2)}`,
-        },
-        desktop: {
-          padding: `${subPx(theme.space.x1)}`,
-        },
+  variant({
+    variants: {
+      touch: {
+        fontSize: "md",
+        lineHeight: "base",
       },
-    }),
+    },
+  }),
   ({ disabled, error, theme }) => cssForState({ disabled, error, theme }),
   space
 );

diff --git a/src/Link/Link.tsx b/src/Link/Link.tsx
@@ -47,11 +47,6 @@ const Link = styled.a<LinkProps>(
       color: getHoverColor(props),
     },
   }),
-  variant({
-    variants: {
-      touch: {},
-    },
-  }),
   addStyledProps
 );
 

diff --git a/src/Radio/Radio.tsx b/src/Radio/Radio.tsx
@@ -8,6 +8,7 @@ import { ClickInputLabel } from "../utils";
 import { DefaultNDSThemeType } from "../theme";
 import { getSubset, omitSubset } from "../utils/subset";
 import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import { variant } from "../StyledProps";
 
 const radioStyle = (theme: DefaultNDSThemeType) => ({
   checked: {
@@ -68,17 +69,27 @@ const VisualRadio = styled.div<VisualRadioProps>(
     borderRadius: theme.radii.circle,
     border: "solid 1px",
     position: "relative",
-    top: theme.space.half,
     "&:before": {
       cursor: disabled ? undefined : "pointer",
       content: "''",
       display: "none",
-      width: theme.sizes.x1,
-      height: theme.sizes.x1,
+      width: `calc(${theme.sizes.x1} - 2px)`,
+      height: `calc(${theme.sizes.x1} - 2px)`,
       background: theme.colors.white,
       borderRadius: theme.radii.circle,
     },
-  })
+  }),
+  ({ theme }) =>
+    variant({
+      variants: {
+        touch: {
+          "&:before": {
+            width: `calc(${theme.sizes.x1} - 3px)`,
+            height: `calc(${theme.sizes.x1} - 3px)`,
+          },
+        },
+      },
+    })
 );
 
 const RadioInput = styled.input<RadioProps>((props) => ({
@@ -136,7 +147,12 @@ const Radio = forwardRef<Ref, RadioProps>(
             aria-invalid={error}
           />
           <VisualRadio disabled={disabled} />
-          <Text inline disabled={disabled}>
+          <Text
+            inline
+            disabled={disabled}
+            fontSize={componentVariant === "touch" ? "md" : undefined}
+            lineHeight={componentVariant === "touch" ? "base" : undefined}
+          >
             {" "}
             {labelText}{" "}
           </Text>

diff --git a/src/Select/customReactSelectStyles.tsx b/src/Select/customReactSelectStyles.tsx
@@ -74,7 +74,7 @@ export function getMenuBorderRadius({
 }
 
 type VariantConfig = {
-  [key in ComponentVariant]: CSSObject;
+  [key in ComponentVariant]?: CSSObject;
 };
 
 export function stylesForVariant(config: VariantConfig, variant: ComponentVariant = "desktop") {
@@ -195,18 +195,13 @@ const customStyles: <Option, IsMulti extends boolean, Group extends GroupBase<Op
       overflow: "auto",
       maxHeight: "150px",
       gap: theme.space.half,
+      paddingTop: theme.space.none,
+      paddingBottom: theme.space.none,
       ...stylesForVariant(
         {
           touch: {
-            // paddingTop: state.isMulti && state.hasValue ? theme.space.x1 : theme.space.x2,
-            // paddingBottom: state.isMulti && state.hasValue ? theme.space.x1 : theme.space.x2,
-            // gap: theme.space.x1,
-            paddingTop: theme.space.none,
-            paddingBottom: theme.space.none,
-          },
-          desktop: {
-            paddingTop: theme.space.none,
-            paddingBottom: theme.space.none,
+            fontSize: "md",
+            lineHeight: "base",
           },
         },
         variant
@@ -281,16 +276,8 @@ const customStyles: <Option, IsMulti extends boolean, Group extends GroupBase<Op
       ...stylesForVariant(
         {
           touch: {
-            // fontSize: theme.fontSizes.medium,
-            // lineHeight: theme.lineHeights.base,
-            // padding: theme.space.x1,
-            // paddingRight: theme.space.half,
-            padding: theme.space.half,
-            paddingLeft: theme.space.x1,
-          },
-          desktop: {
-            padding: theme.space.half,
-            paddingLeft: theme.space.x1,
+            fontSize: "md",
+            lineHeight: "base",
           },
         },
         variant
@@ -309,10 +296,8 @@ const customStyles: <Option, IsMulti extends boolean, Group extends GroupBase<Op
       ...stylesForVariant(
         {
           touch: {
-            // padding: theme.space.x1,
-          },
-          desktop: {
-            // Nothing
+            fontSize: "md",
+            lineHeight: "base",
           },
         },
         variant

diff --git a/src/Switcher/Switch.tsx b/src/Switcher/Switch.tsx
@@ -25,7 +25,7 @@ const SwitchButton = styled.button<SwitchProps>(
     color: selected ? theme.colors.darkBlue : theme.colors.darkGrey,
     cursor: "pointer",
     border: "none",
-    borderRadius: 9999, // todo: move to a token
+    borderRadius: theme.radii.pill,
     fontSize: theme.fontSizes.base,
     fontWeight: theme.fontWeights.medium,
     lineHeight: theme.lineHeights.base,
@@ -46,18 +46,14 @@ const SwitchButton = styled.button<SwitchProps>(
       },
     }),
   }),
-  ({ theme }) =>
-    variant({
-      prop: "scale",
-      variants: {
-        touch: {
-          padding: `${numberFromDimension(theme.space.x2) - 1}px ${theme.space.x3}`,
-        },
-        desktop: {
-          padding: `${numberFromDimension(theme.space.x1) - 1}px ${theme.space.x2}`,
-        },
+  variant({
+    variants: {
+      touch: {
+        fontSize: "md",
+        lineHeight: "base",
       },
-    })
+    },
+  })
 );
 
 export default Switch;
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@

		export { default as Divider } from "./Divider";