From 1d33237c9516454f5ca9626a08a755d8e6db3374 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 4 Jun 2024 14:24:42 +0200 Subject: [PATCH 1/8] WIP: List spacing --- @navikt/core/css/list.css | 2 +- @navikt/core/react/src/list/ListItem.tsx | 6 +++--- @navikt/core/react/src/list/list.stories.tsx | 13 +++++++++++-- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/@navikt/core/css/list.css b/@navikt/core/css/list.css index d4f04e2c5b..84303fec92 100644 --- a/@navikt/core/css/list.css +++ b/@navikt/core/css/list.css @@ -15,7 +15,7 @@ } .navds-list li { - margin-block-end: var(--a-spacing-4); + margin-block-end: var(--a-spacing-2); } .navds-list--small li { diff --git a/@navikt/core/react/src/list/ListItem.tsx b/@navikt/core/react/src/list/ListItem.tsx index 775fc35cdd..faf9f1f567 100644 --- a/@navikt/core/react/src/list/ListItem.tsx +++ b/@navikt/core/react/src/list/ListItem.tsx @@ -1,6 +1,6 @@ import cl from "clsx"; import React, { forwardRef, useContext } from "react"; -import { BodyShort, Label } from "../typography"; +import { BodyLong, Label } from "../typography"; import { ListContext } from "./context"; import { ListItemProps } from "./types"; @@ -45,14 +45,14 @@ export const ListItem = forwardRef( )} - + {title && ( )} {children} - + ); }, diff --git a/@navikt/core/react/src/list/list.stories.tsx b/@navikt/core/react/src/list/list.stories.tsx index 79ab54f410..55a71b20ba 100644 --- a/@navikt/core/react/src/list/list.stories.tsx +++ b/@navikt/core/react/src/list/list.stories.tsx @@ -29,8 +29,17 @@ export const Default = { Beskrivelse på punktet i lista. Prøv å hold den kort og konsis. - - Beskrivelse på punktet i lista. Prøv å hold den kort og konsis. + + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto fugiat + atque accusantium iure sunt, ipsum voluptas, impedit harum, minus + rerum recusandae. Consequuntur sint distinctio nulla reprehenderit eum + suscipit quae libero. + + + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto fugiat + atque accusantium iure sunt, ipsum voluptas, impedit harum, minus + rerum recusandae. Consequuntur sint distinctio nulla reprehenderit eum + suscipit quae libero. ); From 16146fd3ce39ad96280dfd0bdb5508437890a0db Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 5 Jun 2024 08:24:52 +0200 Subject: [PATCH 2/8] test: Added spacing-story test for list --- @navikt/core/css/list.css | 4 +- @navikt/core/react/src/list/list.stories.tsx | 64 ++++++++++++++++++++ 2 files changed, 66 insertions(+), 2 deletions(-) diff --git a/@navikt/core/css/list.css b/@navikt/core/css/list.css index 84303fec92..38b74a6cd2 100644 --- a/@navikt/core/css/list.css +++ b/@navikt/core/css/list.css @@ -15,11 +15,11 @@ } .navds-list li { - margin-block-end: var(--a-spacing-2); + margin-block-end: var(--a-spacing-3); } .navds-list--small li { - margin-block-end: var(--a-spacing-3); + margin-block-end: var(--a-spacing-2); } .navds-list--nested li { diff --git a/@navikt/core/react/src/list/list.stories.tsx b/@navikt/core/react/src/list/list.stories.tsx index 55a71b20ba..ee97a259d5 100644 --- a/@navikt/core/react/src/list/list.stories.tsx +++ b/@navikt/core/react/src/list/list.stories.tsx @@ -7,6 +7,7 @@ import { RecycleIcon, } from "@navikt/aksel-icons"; import { VStack } from "../layout/stack"; +import { BodyLong } from "../typography"; import List from "./List"; export default { @@ -293,6 +294,69 @@ export const Nested = { }, }; +export const Spacing = { + render: () => { + return ( + <> +

Medium

+ + Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus + aliquid, veniam quibusdam saepe autem quia odio? Tenetur dicta + voluptates iste maiores perspiciatis? Sapiente in possimus iusto + numquam? Esse, voluptatibus. + + + + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto + fugiat atque accusantium iure sunt, ipsum voluptas, impedit harum, + minus rerum recusandae. Consequuntur sint distinctio nulla + reprehenderit eum suscipit quae libero. + + + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto + fugiat atque accusantium iure sunt, ipsum voluptas, impedit harum, + minus rerum recusandae. Consequuntur sint distinctio nulla + reprehenderit eum suscipit quae libero. + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus + aliquid, veniam quibusdam saepe autem quia odio? Tenetur dicta + voluptates iste maiores perspiciatis? Sapiente in possimus iusto + numquam? Esse, voluptatibus. + +

Small

+ + Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus + aliquid, veniam quibusdam saepe autem quia odio? Tenetur dicta + voluptates iste maiores perspiciatis? Sapiente in possimus iusto + numquam? Esse, voluptatibus. + + + + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto + fugiat atque accusantium iure sunt, ipsum voluptas, impedit harum, + minus rerum recusandae. Consequuntur sint distinctio nulla + reprehenderit eum suscipit quae libero. + + + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto + fugiat atque accusantium iure sunt, ipsum voluptas, impedit harum, + minus rerum recusandae. Consequuntur sint distinctio nulla + reprehenderit eum suscipit quae libero. + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit minus + aliquid, veniam quibusdam saepe autem quia odio? Tenetur dicta + voluptates iste maiores perspiciatis? Sapiente in possimus iusto + numquam? Esse, voluptatibus. + + + ); + }, +}; + export const Chromatic: Story = { render: () => ( From 0c6261adcbd1b804638545c3cb6b4f6fb5cca5a5 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 5 Jun 2024 09:16:41 +0200 Subject: [PATCH 3/8] feat: Updated List with new spacing and Typo-elemenet --- .changeset/strong-bulldogs-jam.md | 6 ++++++ @navikt/core/react/src/list/list.stories.tsx | 4 ++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/strong-bulldogs-jam.md diff --git a/.changeset/strong-bulldogs-jam.md b/.changeset/strong-bulldogs-jam.md new file mode 100644 index 0000000000..24c9525be2 --- /dev/null +++ b/.changeset/strong-bulldogs-jam.md @@ -0,0 +1,6 @@ +--- +"@navikt/ds-react": minor +"@navikt/ds-css": minor +--- + +List: Changed List.Item to BodyLong, changed Item spacing from 1rem to 0.75rem. diff --git a/@navikt/core/react/src/list/list.stories.tsx b/@navikt/core/react/src/list/list.stories.tsx index ee97a259d5..8b268f4ef0 100644 --- a/@navikt/core/react/src/list/list.stories.tsx +++ b/@navikt/core/react/src/list/list.stories.tsx @@ -392,6 +392,10 @@ export const Chromatic: Story = {

Nested

+
+

Spacing

+ +
), parameters: { From 75377151e3946d9a0a98285fe56baaba83a07c53 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 5 Jun 2024 09:46:44 +0200 Subject: [PATCH 4/8] refactor: Changed to spacing-2 --- .changeset/strong-bulldogs-jam.md | 2 +- @navikt/core/css/list.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/strong-bulldogs-jam.md b/.changeset/strong-bulldogs-jam.md index 24c9525be2..ca9589cb13 100644 --- a/.changeset/strong-bulldogs-jam.md +++ b/.changeset/strong-bulldogs-jam.md @@ -3,4 +3,4 @@ "@navikt/ds-css": minor --- -List: Changed List.Item to BodyLong, changed Item spacing from 1rem to 0.75rem. +List: Changed List.Item to BodyLong, changed Item spacing from 1rem to 0.5rem. diff --git a/@navikt/core/css/list.css b/@navikt/core/css/list.css index 38b74a6cd2..3326df45c2 100644 --- a/@navikt/core/css/list.css +++ b/@navikt/core/css/list.css @@ -15,7 +15,7 @@ } .navds-list li { - margin-block-end: var(--a-spacing-3); + margin-block-end: var(--a-spacing-2); } .navds-list--small li { From 50c25aa75c528b3c379880e73b5a076b638906c1 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 5 Jun 2024 10:05:41 +0200 Subject: [PATCH 5/8] refactor: Updated nest list spacing --- @navikt/core/css/list.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/@navikt/core/css/list.css b/@navikt/core/css/list.css index 3326df45c2..44ff7e23b1 100644 --- a/@navikt/core/css/list.css +++ b/@navikt/core/css/list.css @@ -23,7 +23,7 @@ } .navds-list--nested li { - margin-block-end: var(--a-spacing-3); + margin-block-end: var(--a-spacing-2); } .navds-list:last-child > ul > li:last-child, @@ -34,7 +34,7 @@ .navds-list ul .navds-list__item { display: grid; grid-template-columns: auto 1fr; - gap: var(--a-spacing-3); + gap: var(--a-spacing-2); padding-left: 0; } From 476fc6c2eb48af190c12cdf8cf7f6b358d0ade5e Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 5 Jun 2024 10:06:12 +0200 Subject: [PATCH 6/8] bug: Reverted change in gap between icon and text --- @navikt/core/css/list.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/css/list.css b/@navikt/core/css/list.css index 44ff7e23b1..3d16dde14d 100644 --- a/@navikt/core/css/list.css +++ b/@navikt/core/css/list.css @@ -34,7 +34,7 @@ .navds-list ul .navds-list__item { display: grid; grid-template-columns: auto 1fr; - gap: var(--a-spacing-2); + gap: var(--a-spacing-3); padding-left: 0; } From e9d4381cb60d32aee9b76d2538e52b72e10d9a34 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 5 Jun 2024 13:49:30 +0200 Subject: [PATCH 7/8] bug: Fixed marker height --- @navikt/core/css/list.css | 20 ++++++-------------- @navikt/core/react/src/list/ListItem.tsx | 6 +++--- 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/@navikt/core/css/list.css b/@navikt/core/css/list.css index 3d16dde14d..f2848746cc 100644 --- a/@navikt/core/css/list.css +++ b/@navikt/core/css/list.css @@ -18,14 +18,6 @@ margin-block-end: var(--a-spacing-2); } -.navds-list--small li { - margin-block-end: var(--a-spacing-2); -} - -.navds-list--nested li { - margin-block-end: var(--a-spacing-2); -} - .navds-list:last-child > ul > li:last-child, .navds-list:last-child > ol > li:last-child { margin-bottom: 0; @@ -50,25 +42,25 @@ .navds-list .navds-list__item-marker--bullet { display: flex; align-items: center; - height: var(--a-font-line-height-large); + height: var(--a-font-line-height-xlarge); grid-column: 1 / 2; color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default))); } .navds-list--small .navds-list__item-marker--bullet { - height: var(--a-font-line-height-medium); + height: var(--a-font-line-height-large); } .navds-list__item-marker--icon { color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default))); display: flex; align-items: center; - height: var(--a-font-line-height-large); + height: var(--a-font-line-height-xlarge); padding-block-end: 1px; } .navds-list--small .navds-list__item-marker--icon { - height: var(--a-font-line-height-medium); + height: var(--a-font-line-height-large); } .navds-list__item-marker--icon svg { @@ -93,10 +85,10 @@ font-weight: var(--a-font-weight-bold); font-size: var(--a-font-size-large); color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default))); - line-height: var(--a-font-line-height-large); + line-height: var(--a-font-line-height-xlarge); } .navds-list--small ol li::marker { font-size: var(--a-font-size-small); - line-height: var(--a-font-line-height-medium); + line-height: var(--a-font-line-height-large); } diff --git a/@navikt/core/react/src/list/ListItem.tsx b/@navikt/core/react/src/list/ListItem.tsx index faf9f1f567..bd62b8a90d 100644 --- a/@navikt/core/react/src/list/ListItem.tsx +++ b/@navikt/core/react/src/list/ListItem.tsx @@ -1,6 +1,6 @@ import cl from "clsx"; import React, { forwardRef, useContext } from "react"; -import { BodyLong, Label } from "../typography"; +import { BodyLong } from "../typography"; import { ListContext } from "./context"; import { ListItemProps } from "./types"; @@ -47,9 +47,9 @@ export const ListItem = forwardRef( {title && ( - + )} {children} From aefcd158aa0471bfdd9ffadcb46a084e4aa9fccf Mon Sep 17 00:00:00 2001 From: Ken <26967723+KenAJoh@users.noreply.github.com> Date: Wed, 5 Jun 2024 14:57:48 +0200 Subject: [PATCH 8/8] Update .changeset/strong-bulldogs-jam.md --- .changeset/strong-bulldogs-jam.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/strong-bulldogs-jam.md b/.changeset/strong-bulldogs-jam.md index ca9589cb13..81c49e1454 100644 --- a/.changeset/strong-bulldogs-jam.md +++ b/.changeset/strong-bulldogs-jam.md @@ -1,6 +1,6 @@ --- -"@navikt/ds-react": minor -"@navikt/ds-css": minor +"@navikt/ds-react": patch +"@navikt/ds-css": patch --- List: Changed List.Item to BodyLong, changed Item spacing from 1rem to 0.5rem.