Modal small (#2909)

navikt · May 31, 2024 · 1cab369 · 1cab369
1 parent b9fb86c
commit 1cab369
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 19 deletions.
diff --git a/.changeset/flat-scissors-hunt.md b/.changeset/flat-scissors-hunt.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+✨ Modal: add small version
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,9 +1,7 @@
 {
   "cssVariables.lookupFiles": ["@navikt/core/css/dist/index.css"],
   "eslint.problems.shortenToSingleLine": true,
-  "deno.enablePaths": ["scripts/article-views", "scripts/changelog"],
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "deno.lint": true,
   "files.watcherExclude": {
     "**/.yarn/**": true,
     "**/dist": true,

diff --git a/@navikt/core/css/modal.css b/@navikt/core/css/modal.css
@@ -103,6 +103,10 @@
   padding: var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6);
 }
 
+.navds-modal--small .navds-modal__header {
+  padding: var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);
+}
+
 .navds-modal__header-icon svg {
   display: inline;
   vertical-align: -0.25rem;
@@ -121,6 +125,10 @@
   position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
 }
 
+.navds-modal--small .navds-modal__body {
+  padding: var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4);
+}
+
 .navds-modal__header + .navds-modal__body {
   padding-top: var(--a-spacing-0);
 }
@@ -132,6 +140,10 @@
   padding: var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6);
 }
 
+.navds-modal--small .navds-modal__footer {
+  padding: var(--a-spacing-4);
+}
+
 .navds-modal__footer :nth-of-type(2) {
   margin-left: auto;
 }

diff --git a/@navikt/core/react/src/modal/ModalBody.tsx b/@navikt/core/react/src/modal/ModalBody.tsx
@@ -6,9 +6,11 @@ export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(
-  ({ className, ...rest }, ref) => (
-    <div {...rest} ref={ref} className={cl("navds-modal__body", className)} />
-  ),
+  ({ className, ...rest }, ref) => {
+    return (
+      <div {...rest} ref={ref} className={cl("navds-modal__body", className)} />
+    );
+  },
 );
 
 export default ModalBody;
diff --git a/@navikt/core/react/src/modal/ModalFooter.tsx b/@navikt/core/react/src/modal/ModalFooter.tsx
@@ -6,9 +6,15 @@ export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(
-  ({ className, ...rest }, ref) => (
-    <div {...rest} ref={ref} className={cl("navds-modal__footer", className)} />
-  ),
+  ({ className, ...rest }, ref) => {
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={cl("navds-modal__footer", className)}
+      />
+    );
+  },
 );
 
 export default ModalFooter;
diff --git a/@navikt/core/react/src/modal/modal.stories.tsx b/@navikt/core/react/src/modal/modal.stories.tsx
@@ -5,7 +5,7 @@ import { Button } from "../button";
 import { Checkbox, CheckboxGroup } from "../form/checkbox";
 import { VStack } from "../layout/stack";
 import { Tooltip } from "../tooltip";
-import { BodyLong, Heading } from "../typography";
+import { BodyLong, BodyShort, Heading } from "../typography";
 import Modal from "./Modal";
 
 const meta: Meta<typeof Modal> = {
@@ -49,6 +49,7 @@ export const WithUseRef: StoryFn = () => {
 
           {/* Nested modal */}
           <Modal
+            size="small"
             ref={ref2}
             onBeforeClose={() =>
               window.confirm("Are you sure you want to close the modal?")
@@ -164,14 +165,27 @@ export const EmptyHeader: StoryFn = () => (
 );
 
 export const Small: StoryFn = () => (
-  <Modal
-    open
-    onClose={() => null}
-    width="small"
-    header={{ heading: "Simple header" }}
-  >
-    <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
-  </Modal>
+  <>
+    <Modal
+      open
+      onClose={() => null}
+      width="small"
+      header={{
+        heading: "Simple header",
+        size: "small",
+      }}
+      size="small"
+    >
+      <Modal.Body>
+        <BodyLong size="small">Lorem ipsum dolor sit amet.</BodyLong>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button size="small" variant="secondary">
+          Dummy button
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  </>
 );
 Small.storyName = "Size = Small";
 
@@ -183,7 +197,9 @@ export const MediumWithPortal: StoryFn = () => (
     width="medium"
     header={{ heading: "Simple header" }}
   >
-    <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
+    <Modal.Body>
+      <BodyShort size="small">Lorem ipsum dolor sit amet.</BodyShort>
+    </Modal.Body>
   </Modal>
 );
 MediumWithPortal.storyName = "Size = Medium (with portal)";

diff --git a/@navikt/core/react/src/modal/types.ts b/@navikt/core/react/src/modal/types.ts
@@ -1,4 +1,8 @@
 interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
+  /**
+   * Affects internal padding
+   */
+  size?: "small" | "medium";
   /**
    * Content for the header. Alteratively you can use `<Modal.Header>` instead for more control, but then you have to set `aria-label` or `aria-labelledby` on the modal manually.
    */
@@ -9,7 +13,7 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
     /**
      * Heading size.
      * @default "medium"
-     * */
+     */
     size?: "medium" | "small";
     /**
      * Removes close-button (X) when false.

diff --git a/yarn.lock b/yarn.lock
@@ -3241,6 +3241,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/react-dom@npm:^2.0.9":
+  version: 2.0.9
+  resolution: "@floating-ui/react-dom@npm:2.0.9"
+  dependencies:
+    "@floating-ui/dom": ^1.0.0
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: f7a05c90955c713fc2851f74f87bdde9bd91df5f264f061f489bd3b6ce74c78dda204c3e71a09adc56b64f5324f2c2f23c01382e5ec897ee7e8e5235c41b45a9
+  languageName: node
+  linkType: hard
+
 "@floating-ui/react@npm:0.25.4":
   version: 0.25.4
   resolution: "@floating-ui/react@npm:0.25.4"