Skip to content

Commit

Permalink
Merge d02308d into cb304d0
Browse files Browse the repository at this point in the history
  • Loading branch information
@KenAJoh
KenAJoh authored Jun 19, 2024
2 parents cb304d0 + d02308d commit 794b15f
Show file tree
Hide file tree
Showing 16 changed files with 569 additions and 247 deletions.
6 changes: 6 additions & 0 deletions .changeset/silly-shrimps-peel.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@navikt/ds-react": minor
"@navikt/ds-css": minor
---

Primitives: Added support for padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink to Box, HGrid and Stack.
104 changes: 100 additions & 4 deletions @navikt/core/css/primitives/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@
--__ac-r-pi-lg: var(--__ac-r-pi-md);
--__ac-r-pi-xl: var(--__ac-r-pi-lg);
--__ac-r-pi-2xl: var(--__ac-r-pi-xl);
--__ac-r-pi: var(--__ac-r-p-xs);
--__ac-r-pi: var(--__ac-r-pi-xs);

padding-inline: var(--__ac-r-pi);
padding-inline: var(--__ac-r-pi, var(--__ac-r-padding));
}

.navds-r-pb {
Expand All @@ -29,9 +29,45 @@
--__ac-r-pb-lg: var(--__ac-r-pb-md);
--__ac-r-pb-xl: var(--__ac-r-pb-lg);
--__ac-r-pb-2xl: var(--__ac-r-pb-xl);
--__ac-r-pb: var(--__ac-r-p-xs);
--__ac-r-pb: var(--__ac-r-pb-xs);

padding-block: var(--__ac-r-pb);
padding-block: var(--__ac-r-pb, var(--__ac-r-padding));
}

.navds-r-m {
--__ac-r-m-xs: initial;
--__ac-r-m-sm: var(--__ac-r-m-xs);
--__ac-r-m-md: var(--__ac-r-m-sm);
--__ac-r-m-lg: var(--__ac-r-m-md);
--__ac-r-m-xl: var(--__ac-r-m-lg);
--__ac-r-m-2xl: var(--__ac-r-m-xl);
--__ac-r-margin: var(--__ac-r-m-xs);

margin: var(--__ac-r-margin);
}

.navds-r-mi {
--__ac-r-mi-xs: initial;
--__ac-r-mi-sm: var(--__ac-r-mi-xs);
--__ac-r-mi-md: var(--__ac-r-mi-sm);
--__ac-r-mi-lg: var(--__ac-r-mi-md);
--__ac-r-mi-xl: var(--__ac-r-mi-lg);
--__ac-r-mi-2xl: var(--__ac-r-mi-xl);
--__ac-r-mi: var(--__ac-r-mi-xs);

margin-inline: var(--__ac-r-mi, var(--__ac-r-margin));
}

.navds-r-mb {
--__ac-r-mb-xs: initial;
--__ac-r-mb-sm: var(--__ac-r-mb-xs);
--__ac-r-mb-md: var(--__ac-r-mb-sm);
--__ac-r-mb-lg: var(--__ac-r-mb-md);
--__ac-r-mb-xl: var(--__ac-r-mb-lg);
--__ac-r-mb-2xl: var(--__ac-r-mb-xl);
--__ac-r-mb: var(--__ac-r-mb-xs);

margin-block: var(--__ac-r-mb, var(--__ac-r-margin));
}

.navds-r-w {
Expand Down Expand Up @@ -263,6 +299,18 @@
--__ac-r-pb: var(--__ac-r-pb-sm);
}

.navds-r-m {
--__ac-r-margin: var(--__ac-r-m-sm);
}

.navds-r-mi {
--__ac-r-mi: var(--__ac-r-mi-sm);
}

.navds-r-mb {
--__ac-r-mb: var(--__ac-r-mb-sm);
}

.navds-r-w {
--__ac-r-w: var(--__ac-r-w-sm);
}
Expand Down Expand Up @@ -349,6 +397,18 @@
--__ac-r-pb: var(--__ac-r-pb-md);
}

.navds-r-m {
--__ac-r-margin: var(--__ac-r-m-md);
}

.navds-r-mi {
--__ac-r-mi: var(--__ac-r-mi-md);
}

.navds-r-mb {
--__ac-r-mb: var(--__ac-r-mb-md);
}

.navds-r-w {
--__ac-r-w: var(--__ac-r-w-md);
}
Expand Down Expand Up @@ -435,6 +495,18 @@
--__ac-r-pb: var(--__ac-r-pb-lg);
}

.navds-r-m {
--__ac-r-margin: var(--__ac-r-m-lg);
}

.navds-r-mi {
--__ac-r-mi: var(--__ac-r-mi-lg);
}

.navds-r-mb {
--__ac-r-mb: var(--__ac-r-mb-lg);
}

.navds-r-w {
--__ac-r-w: var(--__ac-r-w-lg);
}
Expand Down Expand Up @@ -521,6 +593,18 @@
--__ac-r-pb: var(--__ac-r-pb-xl);
}

.navds-r-m {
--__ac-r-margin: var(--__ac-r-m-xl);
}

.navds-r-mi {
--__ac-r-mi: var(--__ac-r-mi-xl);
}

.navds-r-mb {
--__ac-r-mb: var(--__ac-r-mb-xl);
}

.navds-r-w {
--__ac-r-w: var(--__ac-r-w-xl);
}
Expand Down Expand Up @@ -607,6 +691,18 @@
--__ac-r-pb: var(--__ac-r-pb-2xl);
}

.navds-r-m {
--__ac-r-margin: var(--__ac-r-m-2xl);
}

.navds-r-mi {
--__ac-r-mi: var(--__ac-r-mi-2xl);
}

.navds-r-mb {
--__ac-r-mb: var(--__ac-r-mb-2xl);
}

.navds-r-w {
--__ac-r-w: var(--__ac-r-w-2xl);
}
Expand Down
76 changes: 27 additions & 49 deletions @navikt/core/css/primitives/box.css
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,23 @@
.navds-box {
--__ac-box-padding-xs: initial;
--__ac-box-padding-sm: var(--__ac-box-padding-xs);
--__ac-box-padding-md: var(--__ac-box-padding-sm);
--__ac-box-padding-lg: var(--__ac-box-padding-md);
--__ac-box-padding-xl: var(--__ac-box-padding-lg);
--__ac-box-padding-2xl: var(--__ac-box-padding-xl);
--__ac-box-padding-inline-xs: initial;
--__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
--__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
--__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
--__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
--__ac-box-padding-inline-2xl: var(--__ac-box-padding-inline-xl);
--__ac-box-padding-block-xs: initial;
--__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
--__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
--__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
--__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
--__ac-box-padding-block-2xl: var(--__ac-box-padding-block-xl);
--__ac-box-padding: var(--__ac-box-padding-xs);
--__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
--__ac-box-padding-block: var(--__ac-box-padding-block-xs);
.navds-box-bg {
--__ac-box-background: initial;

background-color: var(--__ac-box-background);
}

.navds-box-border-color {
--__ac-box-border-color: initial;
--__ac-box-shadow: initial;

border-color: var(--__ac-box-border-color);
}

.navds-box-border-width {
--__ac-box-border-width: initial;

border-style: solid;
border-width: var(--__ac-box-border-width, 0);
}

.navds-box-border-radius {
--__ac-box-border-radius-xs: initial;
--__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs);
--__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
Expand All @@ -32,57 +26,41 @@
--__ac-box-border-radius-2xl: var(--__ac-box-border-radius-xl);
--__ac-box-border-radius: var(--__ac-box-border-radius-xs);

padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding));
background-color: var(--__ac-box-background);
border-style: solid;
border-color: var(--__ac-box-border-color);
border-radius: var(--__ac-box-border-radius);
}

.navds-box-shadow {
--__ac-box-shadow: initial;

box-shadow: var(--__ac-box-shadow);
border-width: var(--__ac-box-border-width, 0);
}

@media (min-width: 480px) {
.navds-box {
--__ac-box-padding: var(--__ac-box-padding-sm);
--__ac-box-padding-inline: var(--__ac-box-padding-inline-sm);
--__ac-box-padding-block: var(--__ac-box-padding-block-sm);
.navds-box-border-radius {
--__ac-box-border-radius: var(--__ac-box-border-radius-sm);
}
}

@media (min-width: 768px) {
.navds-box {
--__ac-box-padding: var(--__ac-box-padding-md);
--__ac-box-padding-inline: var(--__ac-box-padding-inline-md);
--__ac-box-padding-block: var(--__ac-box-padding-block-md);
.navds-box-border-radius {
--__ac-box-border-radius: var(--__ac-box-border-radius-md);
}
}

@media (min-width: 1024px) {
.navds-box {
--__ac-box-padding: var(--__ac-box-padding-lg);
--__ac-box-padding-inline: var(--__ac-box-padding-inline-lg);
--__ac-box-padding-block: var(--__ac-box-padding-block-lg);
.navds-box-border-radius {
--__ac-box-border-radius: var(--__ac-box-border-radius-lg);
}
}

@media (min-width: 1280px) {
.navds-box {
--__ac-box-padding: var(--__ac-box-padding-xl);
--__ac-box-padding-inline: var(--__ac-box-padding-inline-xl);
--__ac-box-padding-block: var(--__ac-box-padding-block-xl);
.navds-box-border-radius {
--__ac-box-border-radius: var(--__ac-box-border-radius-xl);
}
}

@media (min-width: 1440px) {
.navds-box {
--__ac-box-padding: var(--__ac-box-padding-2xl);
--__ac-box-padding-inline: var(--__ac-box-padding-inline-2xl);
--__ac-box-padding-block: var(--__ac-box-padding-block-2xl);
.navds-box-border-radius {
--__ac-box-border-radius: var(--__ac-box-border-radius-2xl);
}
}
59 changes: 59 additions & 0 deletions @navikt/core/react/src/layout/base/BasePrimitive.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,56 @@ export const Padding = () => (
</VStack>
);

export const Margin = () => (
<VStack align="center" gap="2">
<Box background="surface-alt-3-subtle">
<BasePrimitive margin="20">
<Box borderWidth="1">Margin all around</Box>
</BasePrimitive>
</Box>
<Box background="surface-alt-3-subtle">
<BasePrimitive margin="1" marginBlock="20 0">
<Box borderWidth="1">Margin to the North</Box>
</BasePrimitive>
</Box>
<Box background="surface-alt-3-subtle">
<BasePrimitive margin="1" marginInline="0 20">
<Box borderWidth="1">Margin to the East</Box>
</BasePrimitive>
</Box>
<Box background="surface-alt-3-subtle">
<BasePrimitive margin="1" marginBlock="0 20">
<Box borderWidth="1">Margin to the South</Box>
</BasePrimitive>
</Box>
<Box background="surface-alt-3-subtle">
<BasePrimitive margin="1" marginInline="20 0">
<Box borderWidth="1">Margin to the West</Box>
</BasePrimitive>
</Box>
</VStack>
);

export const MarginAuto = () => (
<Box width="400px" background="surface-alt-3-subtle">
<BasePrimitive marginInline="auto">
<Box borderWidth="1" width="200px">
MarginInline: auto
</Box>
</BasePrimitive>
<BasePrimitive marginInline="auto 0" marginBlock="2">
<Box borderWidth="1" width="200px">
MarginInline: auto 0
</Box>
</BasePrimitive>
<BasePrimitive marginInline="0 auto" marginBlock="2">
<Box borderWidth="1" width="200px">
MarginInline: 0 auto
</Box>
</BasePrimitive>
</Box>
);

export const HeightWidth = () => (
<VStack align="center" gap="2">
<BasePrimitive height="4rem">
Expand Down Expand Up @@ -216,6 +266,15 @@ export const Chromatic: Story = {
<h2>Padding</h2>
<Padding />
</div>
<div>
<h2>Margin</h2>
<Margin />
</div>
<div>
<h2>MarginAuto</h2>
<MarginAuto />
</div>

<div>
<h2>Height & Width</h2>
<HeightWidth />
Expand Down
Loading

0 comments on commit 794b15f

Please sign in to comment.