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

Refactor(web): Abstract spacing tools to generate any custom properties cascade #DS-1546 #1739

Merged
merged 1 commit into from
Nov 7, 2024
Merged

Refactor(web): Abstract spacing tools to generate any custom properties cascade #DS-1546 #1739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
27 changes: 7 additions & 20 deletions packages/web/src/scss/components/Flex/_Flex.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,42 +5,29 @@
@use '../../tools/breakpoint';
@use '../../tools/dictionaries';
@use '../../tools/reset';
@use '../../tools/spacing';
@use '../../tools/responsive-properties';
@use 'theme';

.Flex {
@include reset.list();
@include spacing.create(
$input-property-base-name: '--flex-spacing-x',
$output-property-name: '--flex-column-gap',
@include responsive-properties.create-cascade(
$property: 'column-gap',
$input-custom-property-base-name: 'flex-spacing-x',
$breakpoints: theme.$breakpoints,
$default-spacing: theme.$gap
$fallback-value: theme.$default-spacing
);
@include spacing.create(
$input-property-base-name: '--flex-spacing-y',
$output-property-name: '--flex-row-gap',
@include responsive-properties.create-cascade(
$property: 'row-gap',
$input-custom-property-base-name: 'flex-spacing-y',
$breakpoints: theme.$breakpoints,
$default-spacing: theme.$gap
$fallback-value: theme.$default-spacing
);
}

.Flex > svg {
flex: none; // 1.
}

// stylelint-disable-next-line selector-max-universal -- Let's be bold and tweak all direct descendants regardless of their type to avoid inheritance of spacing for nested Flex.
.Flex > * {
@include spacing.prevent-inheritance(
$input-property-base-names: (
'--flex-spacing-x',
'--flex-spacing-y',
),
$breakpoints: theme.$breakpoints
);
}

@each $breakpoint-name, $breakpoint-value in theme.$breakpoints {
$infix: breakpoint.get-modifier('infix', $breakpoint-name, $breakpoint-value);

Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/scss/components/Flex/_theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@
$alignment-x-dictionary: list.join(dictionaries.$alignments-x-extended, space-between);
$alignment-y-dictionary: list.join(dictionaries.$alignments-y-extended, baseline);
$breakpoints: tokens.$breakpoints;
$gap: tokens.$space-700;
$default-spacing: tokens.$space-700;
57 changes: 9 additions & 48 deletions packages/web/src/scss/components/Grid/_Grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,33 @@
// 1. For each breakpoint, generate:
//
// a) responsive alignment classes for both axes,
// b) `grid-template-columns` values for the equal-column Grid variant,
// c) responsive GridItem classes.

@use '../../tools/breakpoint';
@use '../../tools/dictionaries';
@use '../../tools/reset';
@use '../../tools/spacing';
@use '../../tools/responsive-properties';
@use 'theme';
@use 'tools';

.Grid {
display: grid;
grid-template-columns: repeat(theme.$grid-columns, 1fr);
grid-template-columns: repeat(theme.$columns, 1fr);
width: 100%;

@include reset.list();
@include spacing.create(
$input-property-base-name: '--grid-spacing-x',
$output-property-name: '--grid-column-gap',
@include responsive-properties.create-cascade(
$property: 'column-gap',
$input-custom-property-base-name: 'grid-spacing-x',
$breakpoints: theme.$breakpoints,
$default-spacing: theme.$grid-spacings
$fallback-value: theme.$default-spacings
);
@include spacing.create(
$input-property-base-name: '--grid-spacing-y',
$output-property-name: '--grid-row-gap',
@include responsive-properties.create-cascade(
$property: 'row-gap',
$input-custom-property-base-name: 'grid-spacing-y',
$breakpoints: theme.$breakpoints,
$default-spacing: theme.$grid-spacings
);
}

// stylelint-disable-next-line selector-max-universal -- Let's be bold and reset spacing for all direct descendants regardless of their type to avoid inheritance of spacing for nested Grid.
.Grid > * {
@include spacing.prevent-inheritance(
$input-property-base-names: (
'--grid-spacing-x',
'--grid-spacing-y',
),
$breakpoints: theme.$breakpoints
$fallback-value: theme.$default-spacings
);
}

// 1.
@each $breakpoint-name, $breakpoint-value in theme.$breakpoints {
$infix: breakpoint.get-modifier('infix', $breakpoint-name, $breakpoint-value);

@include breakpoint.up($breakpoint-value) {
// 1.a
@include dictionaries.generate-alignments(
$class-name: 'Grid',
$dictionary-values: theme.$alignment-x-dictionary,
Expand All @@ -64,27 +42,10 @@
$infix: $infix
);

// 1.b
@each $column in theme.$grid-equal-columns {
@each $column in theme.$equal-columns {
.Grid--#{breakpoint.get-modifier('infix', $breakpoint-name, $breakpoint-value)}cols-#{$column} {
grid-template-columns: repeat(#{$column}, 1fr);
}
}
}
}

// 1.c
@include tools.item(theme.$breakpoints);

// stylelint-disable-next-line selector-max-universal -- Let's be bold and reset spacing for all direct descendants regardless of their type to avoid inheritance of spacing for nested GridItem.
.GridItem > * {
@include spacing.prevent-inheritance(
$input-property-base-names: (
'--grid-item-column-start',
'--grid-item-column-end',
'--grid-item-row-start',
'--grid-item-row-end',
),
$breakpoints: theme.$breakpoints
);
}
29 changes: 29 additions & 0 deletions packages/web/src/scss/components/Grid/_GridItem.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
@use '../../tools/responsive-properties';
@use 'theme';

.GridItem {
@include responsive-properties.create-cascade(
$property: 'grid-column-start',
$input-custom-property-base-name: 'grid-item-column-start',
$breakpoints: theme.$breakpoints,
$fallback-value: 'initial'
);
@include responsive-properties.create-cascade(
$property: 'grid-column-end',
$input-custom-property-base-name: 'grid-item-column-end',
$breakpoints: theme.$breakpoints,
$fallback-value: 'initial'
);
@include responsive-properties.create-cascade(
$property: 'grid-row-start',
$input-custom-property-base-name: 'grid-item-row-start',
$breakpoints: theme.$breakpoints,
$fallback-value: 'initial'
);
@include responsive-properties.create-cascade(
$property: 'grid-row-end',
$input-custom-property-base-name: 'grid-item-row-end',
$breakpoints: theme.$breakpoints,
$fallback-value: 'initial'
);
}
6 changes: 3 additions & 3 deletions packages/web/src/scss/components/Grid/_theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@ $alignment-y-dictionary: dictionaries.$alignments-y-extended;

$breakpoints: tokens.$breakpoints;

$grid-columns: tokens.$grid-columns;
$grid-spacings: map.get(tokens.$grids, spacing);
$grid-equal-columns: 1, 2, 3, 4, 5, 6, 12;
$columns: tokens.$grid-columns;
$equal-columns: 1, 2, 3, 4, 5, 6, 12;
$default-spacings: map.get(tokens.$grids, spacing);
29 changes: 0 additions & 29 deletions packages/web/src/scss/components/Grid/_tools.scss
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions packages/web/src/scss/components/Grid/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
@forward 'Grid';
@forward 'GridItem';
27 changes: 10 additions & 17 deletions packages/web/src/scss/components/Stack/_Stack.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use '../../tools/reset';
@use '../../tools/spacing';
@use '../../tools/responsive-properties';
@use 'theme';

.Stack {
Expand All @@ -9,11 +9,11 @@
}

.Stack--hasSpacing {
@include spacing.create(
$input-property-base-name: '--stack-spacing',
$output-property-name: '--stack-gap',
@include responsive-properties.create-cascade(
$property: 'gap',
$input-custom-property-base-name: 'stack-spacing',
$breakpoints: theme.$breakpoints,
$default-spacing: theme.$spacing-fallback
$fallback-value: theme.$default-spacing
);
}

Expand All @@ -23,7 +23,7 @@
gap: 0;
}

// stylelint-disable selector-max-universal -- Let's be bold and tweak all direct descendants regardless of their type to avoid inheritance of spacing for nested Stack.
// stylelint-disable selector-max-universal -- Remove any margins from all direct descendants regardless of their type.
.Stack > * {
margin-block: 0;
}
Expand All @@ -32,20 +32,13 @@
border-block-start: theme.$border;
}

.Stack--hasSpacing > * {
@include spacing.prevent-inheritance(
$input-property-base-names: '--stack-spacing',
$breakpoints: theme.$breakpoints
);
}

.Stack--hasSpacing.Stack--hasStartDivider > *,
.Stack--hasSpacing.Stack--hasEndDivider > * {
padding-block: calc(var(--stack-gap) / 2);
padding-block: calc(var(--stack-spacing-internal) / 2);
}

.Stack--hasSpacing.Stack--hasIntermediateDividers > * {
padding-block: var(--stack-gap);
padding-block: var(--stack-spacing-internal);
}
// stylelint-enable

Expand Down Expand Up @@ -74,9 +67,9 @@
}

.Stack--hasSpacing.Stack--hasStartDivider > :first-child {
padding-block-start: var(--stack-gap);
padding-block-start: var(--stack-spacing-internal);
}

.Stack--hasSpacing.Stack--hasEndDivider > :last-child {
padding-block-end: var(--stack-gap);
padding-block-end: var(--stack-spacing-internal);
}
2 changes: 1 addition & 1 deletion packages/web/src/scss/components/Stack/_theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@

$breakpoints: tokens.$breakpoints;
$border: tokens.$border-width-100 solid tokens.$border-basic;
$spacing-fallback: tokens.$space-600;
$default-spacing: tokens.$space-600;
Loading
Loading