🐛 DatePicker: Riktig skriftstørrelse på small input (#2232)

navikt · Sep 1, 2023 · b0da33c · b0da33c
1 parent c67e051
commit b0da33c
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 70 deletions.
diff --git a/.changeset/twelve-carrots-wonder.md b/.changeset/twelve-carrots-wonder.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+:bug: DatePicker: Riktig skriftstørrelse på small input
diff --git a/@navikt/core/react/src/date/DateInput.tsx b/@navikt/core/react/src/date/DateInput.tsx
@@ -113,7 +113,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
             "navds-date__field-input",
             "navds-text-field__input",
             "navds-body-short",
-            `navds-body-${size}`
+            `navds-body-short--${size}`
           )}
           size={14}
         />

diff --git a/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx b/@navikt/core/react/src/date/datepicker/datepicker.stories.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import { Meta, StoryObj } from "@storybook/react";
 import React, { useId, useState } from "react";
 import { useDatepicker, useRangeDatepicker } from "..";
 import { Button } from "../..";
-import DatePicker from "./DatePicker";
+import DatePicker, { DatePickerProps } from "./DatePicker";
 
 const disabledDays = [
   new Date("Oct 10 2022"),
@@ -12,20 +13,29 @@ const disabledDays = [
 export default {
   title: "ds-react/Datepicker",
   component: DatePicker,
+} satisfies Meta<typeof DatePicker>;
+
+type DefaultStoryProps = DatePickerProps & {
+  size: "medium" | "small";
+  openOnFocus: boolean;
+  inputfield: boolean;
+  standalone: boolean;
 };
 
-export const Default = {
+export const Default: StoryObj<DefaultStoryProps> = {
   render: (props) => {
     const [open, setOpen] = useState(false);
 
     const rangeCtx = useRangeDatepicker({
       fromDate: new Date("Aug 23 2020"),
       toDate: new Date("Aug 23 2023"),
+      openOnFocus: props.openOnFocus,
     });
 
     const singleCtx = useDatepicker({
       fromDate: new Date("Aug 23 2020"),
       toDate: new Date("Aug 23 2023"),
+      openOnFocus: props.openOnFocus,
     });
 
     const newProps = {
@@ -44,9 +54,7 @@ export const Default = {
     return (
       <div>
         <Comp
-          locale={props?.locale}
-          dropdownCaption={props?.dropdownCaption}
-          disableWeekends={props?.disableWeekends}
+          dropdownCaption={props.dropdownCaption}
           showWeekNumber={props.showWeekNumber}
           mode={props.mode}
           {...(props.mode === "single"
@@ -55,6 +63,8 @@ export const Default = {
             ? rangeCtx.datepickerProps
             : {})}
           {...newProps}
+          locale={props.locale}
+          disableWeekends={props.disableWeekends}
         >
           {!props.standalone && (
             <>
@@ -99,29 +109,23 @@ export const Default = {
     dropdownCaption: false,
     disableWeekends: false,
     showWeekNumber: false,
+    mode: "single",
+    openOnFocus: true,
     inputfield: true,
     standalone: false,
-    openOnFocus: true,
-    mode: "single",
   },
   argTypes: {
     size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
+      options: ["medium", "small"],
+      control: { type: "radio" },
     },
     locale: {
-      control: {
-        type: "radio",
-        options: ["nb", "nn", "en"],
-      },
+      options: ["nb", "nn", "en"],
+      control: { type: "radio" },
     },
     mode: {
-      control: {
-        type: "radio",
-        options: ["single", "multiple", "range"],
-      },
+      options: ["single", "multiple", "range"],
+      control: { type: "radio" },
     },
   },
 };

diff --git a/@navikt/core/react/src/date/monthpicker/monthpicker.stories.tsx b/@navikt/core/react/src/date/monthpicker/monthpicker.stories.tsx
@@ -1,30 +1,21 @@
+import { Meta, StoryFn } from "@storybook/react";
 import React, { useId, useState } from "react";
-import { Button } from "../..";
+import { Button, DateInputProps } from "../..";
 import { useMonthpicker } from "../hooks";
-import MonthPicker from "./MonthPicker";
+import MonthPicker, { MonthPickerProps } from "./MonthPicker";
 
 export default {
   title: "ds-react/Monthpicker",
   component: MonthPicker,
-  argTypes: {
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    locale: {
-      control: {
-        type: "radio",
-        options: ["nb", "nn", "en"],
-      },
-    },
-  },
-};
+} satisfies Meta<typeof MonthPicker>;
 
-export const Default = () => {
+export const Default: StoryFn<{
+  size: DateInputProps["size"];
+  locale: MonthPickerProps["locale"];
+}> = (props) => {
   const { inputProps, monthpickerProps } = useMonthpicker({
     disabled: [new Date("Apr 1 2022")],
+    locale: props.locale,
   });
 
   return (
@@ -33,12 +24,23 @@ export const Default = () => {
         <MonthPicker.Input
           label="Velg måned"
           variant="monthpicker"
+          size={props.size}
           {...inputProps}
         />
       </MonthPicker>
     </div>
   );
 };
+Default.argTypes = {
+  size: {
+    options: ["medium", "small"],
+    control: { type: "radio" },
+  },
+  locale: {
+    options: ["nb", "nn", "en"],
+    control: { type: "radio" },
+  },
+};
 
 export const dropdownCaption = () => {
   return (
@@ -54,20 +56,16 @@ export const NB = () => <MonthPicker.Standalone locale="nb" />;
 export const NN = () => <MonthPicker.Standalone locale="nn" />;
 export const EN = () => <MonthPicker.Standalone locale="en" />;
 
-export const DisabledMonths = {
-  render: (props) => {
-    return (
-      <MonthPicker.Standalone
-        disabled={[
-          { from: new Date("Jan 1 2022"), to: new Date("Jul  6 2022") },
-          { from: new Date("Apr 2 2023"), to: new Date("Dec 4 2023") },
-          new Date("Sep 5 2022"),
-          new Date("Jan 5 2023"),
-        ]}
-      />
-    );
-  },
-};
+export const DisabledMonths = () => (
+  <MonthPicker.Standalone
+    disabled={[
+      { from: new Date("Jan 1 2022"), to: new Date("Jul  6 2022") },
+      { from: new Date("Apr 2 2023"), to: new Date("Dec 4 2023") },
+      new Date("Sep 5 2022"),
+      new Date("Jan 5 2023"),
+    ]}
+  />
+);
 
 export const Standalone = () => {
   return <MonthPicker.Standalone />;

diff --git a/yarn.lock b/yarn.lock
@@ -3438,7 +3438,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^5.2.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^5.3.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3465,8 +3465,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
   dependencies:
-    "@navikt/ds-css": ^5.2.1
-    "@navikt/ds-tokens": ^5.2.1
+    "@navikt/ds-css": ^5.3.0
+    "@navikt/ds-tokens": ^5.3.0
     "@types/jest": ^29.0.0
     concurrently: 7.2.1
     copyfiles: 2.4.1
@@ -3483,7 +3483,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
-    "@navikt/ds-css": 5.2.1
+    "@navikt/ds-css": 5.3.0
     "@types/inquirer": ^9.0.3
     "@types/jest": ^29.0.0
     axios: 1.3.6
@@ -3507,11 +3507,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@*, @navikt/ds-css@5.2.1, @navikt/ds-css@^5.2.1, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@5.3.0, @navikt/ds-css@^5.3.0, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": ^5.2.1
+    "@navikt/ds-tokens": ^5.3.0
     cssnano: 6.0.0
     fast-glob: 3.2.11
     lodash: 4.17.21
@@ -3524,12 +3524,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@5.2.1, @navikt/ds-react@^5.2.1, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@5.3.0, @navikt/ds-react@^5.3.0, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react": 0.24.1
-    "@navikt/aksel-icons": ^5.2.1
+    "@navikt/aksel-icons": ^5.3.0
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3563,11 +3563,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^5.2.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^5.3.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": ^5.2.1
+    "@navikt/ds-tokens": ^5.3.0
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3578,7 +3578,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^5.2.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^5.3.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -8593,11 +8593,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel-icons": ^5.2.1
-    "@navikt/ds-css": ^5.2.1
-    "@navikt/ds-react": ^5.2.1
-    "@navikt/ds-tailwind": ^5.2.1
-    "@navikt/ds-tokens": ^5.2.1
+    "@navikt/aksel-icons": ^5.3.0
+    "@navikt/ds-css": ^5.3.0
+    "@navikt/ds-react": ^5.3.0
+    "@navikt/ds-tailwind": ^5.3.0
+    "@navikt/ds-tokens": ^5.3.0
     prettier-plugin-tailwindcss: ^0.2.3
   languageName: unknown
   linkType: soft
@@ -23686,8 +23686,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "shadow-dom@workspace:examples/shadow-dom"
   dependencies:
-    "@navikt/ds-css": 5.2.1
-    "@navikt/ds-react": 5.2.1
+    "@navikt/ds-css": 5.3.0
+    "@navikt/ds-react": 5.3.0
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^3.1.0