kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Configurable bleed for buttons

Browse Source
This commit is contained in:
Kuba Orlik 2026-08-19 22:59:39 +02:00
parent b462cbb310
commit ca8e4438bc
2 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/back/jdd-components/buttons/buttons.css
View File

@ -25,6 +25,18 @@
gap: 24px;
}
&.buttons--bleed-none {
grid-column: content !important;
}
&.buttons--bleed-bleed {
grid-column: bleed !important;
}
&.buttons--bleed-screen {
grid-column: 1/-1 !important;
}
.button {
margin: 0;
}

6
src/back/jdd-components/buttons/buttons.jdd.tsx
View File

@ -6,6 +6,9 @@ import { button, button_variants } from "src/back/elements/button.js";
const component_arguments = {
mode: new ComponentArguments.Enum(["column", "row"]),
gap: new ComponentArguments.Enum(["none", "narrow", "medium", "wide"]),
bleed: new ComponentArguments.Enum(["none", "bleed", "screen"]).setDefaultValue(
"none"
),
buttons: new ComponentArguments.List(
new ComponentArguments.Structured({
variant: new ComponentArguments.Enum(button_variants),
@ -21,7 +24,7 @@ export class Buttons extends Component<typeof component_arguments> {
}
async toHTML({
args: { buttons, mode, gap },
args: { buttons, mode, gap, bleed },
classes,
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
return (
@ -30,6 +33,7 @@ export class Buttons extends Component<typeof component_arguments> {
"buttons",
`buttons--mode-${mode}`,
`buttons--gap-${gap}`,
`buttons--bleed-${bleed}`,
...classes,
]}
>