Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

List spacing #2979

Merged
merged 8 commits into from
Jun 7, 2024
Merged

List spacing #2979

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1d33237
WIP: List spacing
KenAJoh Jun 4, 2024
16146fd
test: Added spacing-story test for list
KenAJoh Jun 5, 2024
0c6261a
feat: Updated List with new spacing and Typo-elemenet
KenAJoh Jun 5, 2024
7537715
refactor: Changed to spacing-2
KenAJoh Jun 5, 2024
50c25aa
refactor: Updated nest list spacing
KenAJoh Jun 5, 2024
476fc6c
bug: Reverted change in gap between icon and text
KenAJoh Jun 5, 2024
e9d4381
bug: Fixed marker height
KenAJoh Jun 5, 2024
aefcd15
Update .changeset/strong-bulldogs-jam.md
KenAJoh Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/strong-bulldogs-jam.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@navikt/ds-react": minor
"@navikt/ds-css": minor
KenAJoh marked this conversation as resolved.
Show resolved Hide resolved
KenAJoh marked this conversation as resolved.
Show resolved Hide resolved
---

List: Changed List.Item to BodyLong, changed Item spacing from 1rem to 0.5rem.
6 changes: 3 additions & 3 deletions @navikt/core/css/list.css
View file
Open in desktop
HalvorHaugan marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@
}

.navds-list li {
margin-block-end: var(--a-spacing-4);
margin-block-end: var(--a-spacing-2);
}

.navds-list--small li {
margin-block-end: var(--a-spacing-3);
margin-block-end: var(--a-spacing-2);
}

.navds-list--nested li {
margin-block-end: var(--a-spacing-3);
margin-block-end: var(--a-spacing-2);
}
HalvorHaugan marked this conversation as resolved.
Show resolved Hide resolved

.navds-list:last-child > ul > li:last-child,
Expand Down
6 changes: 3 additions & 3 deletions @navikt/core/react/src/list/ListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -45,14 +45,14 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
</div>
)}

<BodyShort as="div" size={size} className="navds-list__item-content">
<BodyLong as="div" size={size} className="navds-list__item-content">
{title && (
<Label as="p" size={size}>
{title}
</Label>
)}
{children}
</BodyShort>
</BodyLong>
</li>
);
},
Expand Down
81 changes: 79 additions & 2 deletions @navikt/core/react/src/list/list.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -29,8 +30,17 @@ export const Default = {
<List.Item title="Consectetur Adipiscing Elit">
Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
</List.Item>
<List.Item title="Sed Do Eiusmod Tempor Incididunt">
Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
<List.Item>
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.
</List.Item>
<List.Item>
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.
</List.Item>
</List>
);
Expand Down Expand Up @@ -284,6 +294,69 @@ export const Nested = {
},
};

export const Spacing = {
render: () => {
return (
<>
<h2>Medium</h2>
<BodyLong spacing>
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.
</BodyLong>
<List>
<List.Item>
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.
</List.Item>
<List.Item>
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.
</List.Item>
</List>
<BodyLong spacing>
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.
</BodyLong>
<h2>Small</h2>
<BodyLong size="small" spacing>
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.
</BodyLong>
<List size="small">
<List.Item>
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.
</List.Item>
<List.Item>
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.
</List.Item>
</List>
<BodyLong size="small" spacing>
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.
</BodyLong>
</>
);
},
};

export const Chromatic: Story = {
render: () => (
<VStack gap="2">
Expand Down Expand Up @@ -319,6 +392,10 @@ export const Chromatic: Story = {
<h2>Nested</h2>
<Nested.render />
</div>
<div>
<h2>Spacing</h2>
<Spacing.render />
</div>
</VStack>
),
parameters: {
Expand Down
Loading