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.

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

Primitives bleed #2331

Merged
merged 23 commits into from
Sep 27, 2023
Merged
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
8a18123
:sparkles: add Bleed
JulianNymark Sep 13, 2023
6639529
:construction: WIP on Bleed
JulianNymark Sep 14, 2023
9dde205
:construction: fix the weirdness of margin-block-end by adding padding
JulianNymark Sep 14, 2023
bb308d1
:construction: wip for bleed calculation of "full"
JulianNymark Sep 15, 2023
04484e0
Bleed working "full" horizontal margin
JulianNymark Sep 18, 2023
990834f
Merge branch 'main' into primitives-bleed
JulianNymark Sep 18, 2023
e8d7e16
:construction: wip on reflectivePadding
JulianNymark Sep 18, 2023
9c3c0ae
:construction: wip breakpoints for bleed reflectivePadding
JulianNymark Sep 19, 2023
a327b9a
working reflectivePadding
JulianNymark Sep 20, 2023
779990a
:memo: add jsdoc
JulianNymark Sep 20, 2023
60820ae
Merge branch 'main' into primitives-bleed
JulianNymark Sep 21, 2023
25c9faf
:recycle: refactor css.ts
JulianNymark Sep 25, 2023
0455d58
:recycle: refactor style for Bleed
JulianNymark Sep 25, 2023
45b29bd
improve jsdoc, remove unused CSS
JulianNymark Sep 25, 2023
ff69e91
:memo: fix docs for px story
JulianNymark Sep 25, 2023
8778a2c
:sparkles: add asChild prop
JulianNymark Sep 25, 2023
0c79369
:memo: add changeset
JulianNymark Sep 25, 2023
86a85eb
:memo: add jsdoc
JulianNymark Sep 25, 2023
2861f12
:recycle: refactor stories
JulianNymark Sep 25, 2023
175e625
:memo: fix erroneous story text
JulianNymark Sep 26, 2023
b8de090
Merge branch 'main' into primitives-bleed
JulianNymark Sep 27, 2023
1488f01
export bleed from barrel file
JulianNymark Sep 27, 2023
f90eb8c
:memo: add eksempler docs
JulianNymark Sep 27, 2023
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
Prev Previous commit
Next Next commit
✨ add asChild prop
JulianNymark committed Sep 25, 2023

Verified

This commit was signed with the committer’s verified signature.
snyk-bot Snyk bot
commit 8778a2c747341a7e23cb36f3099e324ff6da44e0
63 changes: 63 additions & 0 deletions @navikt/core/react/src/layout/bleed/Bleed.stories.tsx
Original file line number Diff line number Diff line change
@@ -70,6 +70,69 @@ export const Default = {
</>
),
};

export const AsChild = {
render: () => (
<>
<style>
{`
.p {
padding: 1rem;
}
.centered {
height: auto;
width: auto;
}
.testbox {
width: auto;
height: auto;
}
`}
</style>
<VStack gap="2">
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginInline="10 0" asChild>
<Box className="p" background="surface-success-subtle">
<BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
</Box>
</Bleed>
</Box>
</Box>
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginInline="0 10" asChild>
<Box className="p" background="surface-success-subtle">
<BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
</Box>
</Bleed>
</Box>
</Box>
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginBlock="10 0" asChild>
<Box className="p" background="surface-success-subtle">
<BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
</Box>
</Bleed>
</Box>
</Box>
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginBlock="0 10" asChild>
<Box className="p" background="surface-success-subtle">
<HStack className="centered" justify="center" align="center">
<Box className="testbox">marginBlock=&quot;0 10&quot;</Box>
</HStack>
</Box>
</Bleed>
</Box>
</Box>
</VStack>
</>
),
};

export const Breakpoints = {
render: () => (
<>
8 changes: 7 additions & 1 deletion @navikt/core/react/src/layout/bleed/Bleed.tsx
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ import {
SpacingScale,
getResponsiveProps,
} from "../utilities/css";
import { Slot } from "../../util/Slot";

export type BleedSpacingInline = "0" | "full" | "px" | SpacingScale;
export type BleedSpacingBlock = "0" | "px" | SpacingScale;
@@ -36,6 +37,8 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
* When this is used with `asChild`, it will overwrite the padding of the child.
*/
reflectivePadding?: boolean;

asChild?: boolean;
}

/**
@@ -60,6 +63,7 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
marginBlock,
reflectivePadding,
style: _style,
asChild,
...rest
},
ref
@@ -107,8 +111,10 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
};
}

const Comp = asChild ? Slot : "div";

return (
<div
<Comp
{...rest}
className={cl("navds-bleed", className, {
["navds-bleed--padding"]: reflectivePadding,