Skip to content

Commit

Permalink
feat!: add CSS API instead of --yc-* variables (#1127)
Browse files Browse the repository at this point in the history
  • Loading branch information
@amje
amje committed Dec 6, 2023
1 parent 4160547 commit d0eac41
Show file tree
Hide file tree
Showing 25 changed files with 231 additions and 215 deletions.
6 changes: 1 addition & 5 deletions src/components/Alert/Alert.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,8 @@
$block: '.#{variables.$ns}alert';

#{$block} {
--yc-alert-border-radius: var(--yc-card-border-radius, 8px);

border-radius: var(--yc-alert-border-radius);

&_corners_square {
--yc-alert-border-radius: 0px;
--g-card-border-radius: 0;
}

&__text-content {
Expand Down
143 changes: 69 additions & 74 deletions src/components/Card/Card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,69 @@
$block: '.#{variables.$ns}card';

#{$block} {
--yc-card-box-shadow: none;
--yc-card-border-radius: 8px;
background-color: transparent;
box-shadow: var(--yc-card-box-shadow);
--_--background-color: transparent;
--_--border-color: transparent;
--_--border-width: 0;

box-shadow: var(--g-card-box-shadow, var(--_--box-shadow));
box-sizing: border-box;
border-radius: var(--yc-card-border-radius);
background-color: var(--g-card-background-color, var(--_--background-color));
border: var(--g-card-border-width, var(--_--border-width)) solid
var(--g-card-border-color, var(--_--border-color));
border-radius: var(--g-card-border-radius, var(--_--border-radius));
outline: none;

&_theme {
&_normal {
--_--border-color: var(--g-color-line-generic);
--_--background-color: var(--g-color-base-generic);
}

&_info {
--_--border-color: var(--g-color-line-info);
--_--background-color: var(--g-color-base-info-light);
}

&_success {
--_--border-color: var(--g-color-line-positive);
--_--background-color: var(--g-color-base-positive-light);
}

&_warning {
--_--border-color: var(--g-color-line-warning);
--_--background-color: var(--g-color-base-warning-light);
}

&_danger {
--_--border-color: var(--g-color-line-danger);
--_--background-color: var(--g-color-base-danger-light);
}

&_utility {
--_--border-color: var(--g-color-line-utility);
--_--background-color: var(--g-color-base-utility-light);
}
}

&_view {
&_clear {
--_--background-color: transparent;
}

&_outlined {
--_--background-color: transparent;
--_--border-width: 1px;
}
}

&_type_action {
background-color: var(--g-color-base-float);
--yc-card-box-shadow: 0px 1px 5px var(--g-color-sfx-shadow);
--_--background-color: var(--g-color-base-float);
--_--box-shadow: 0px 1px 5px var(--g-color-sfx-shadow);

&::after {
position: absolute;
inset: 0;
border-radius: var(--yc-card-border-radius);
border-radius: var(--g-card-border-radius, var(--_--border-radius));
pointer-events: none;
}

Expand All @@ -27,7 +74,7 @@ $block: '.#{variables.$ns}card';
position: relative;

&:hover {
--yc-card-box-shadow: 0px 3px 10px var(--g-color-sfx-shadow);
--_--box-shadow: 0px 3px 10px var(--g-color-sfx-shadow);
}

&:focus-visible::after {
Expand All @@ -38,28 +85,29 @@ $block: '.#{variables.$ns}card';
}

&_type_selection {
--_--border-width: 1px;
--_--border-color: var(--g-color-line-generic);
position: relative;
border: 1px solid var(--g-color-line-generic);

&::before {
position: absolute;
inset: -1px;
border-radius: var(--yc-card-border-radius);
border-radius: var(--g-card-border-radius, var(--_--border-radius));
pointer-events: none;
}

&::after {
position: absolute;
inset: 0;
border-radius: var(--yc-card-border-radius);
border-radius: var(--g-card-border-radius, var(--_--border-radius));
pointer-events: none;
}

&#{$block}_clickable {
cursor: pointer;

&:hover {
border-color: transparent;
--_--border-color: transparent;

&::before {
content: '';
Expand All @@ -79,7 +127,7 @@ $block: '.#{variables.$ns}card';
}

&#{$block}_selected:not(#{$block}_disabled) {
border-color: transparent;
--_--border-color: transparent;

&::before {
content: '';
Expand All @@ -88,84 +136,31 @@ $block: '.#{variables.$ns}card';
}

&#{$block}_view_clear {
border-color: transparent;
--_--border-color: transparent;
}
}

&_type_container {
&#{$block}_theme_normal {
&#{$block}_view_outlined {
border: 1px solid var(--g-color-line-generic);
}
&#{$block}_view_filled {
background-color: var(--g-color-base-generic);
}
}

&#{$block}_theme_info {
&#{$block}_view_outlined {
border: 1px solid var(--g-color-line-info);
}
&#{$block}_view_filled {
background-color: var(--g-color-base-info-light);
}
}

&#{$block}_theme_success {
&#{$block}_view_outlined {
border: 1px solid var(--g-color-line-positive);
}
&#{$block}_view_filled {
background-color: var(--g-color-base-positive-light);
}
}

&#{$block}_theme_warning {
&#{$block}_view_outlined {
border: 1px solid var(--g-color-line-warning);
}
&#{$block}_view_filled {
background-color: var(--g-color-base-warning-light);
}
}

&#{$block}_theme_danger {
&#{$block}_view_outlined {
border: 1px solid var(--g-color-line-danger);
}
&#{$block}_view_filled {
background-color: var(--g-color-base-danger-light);
}
}

&#{$block}_theme_utility {
&#{$block}_view_outlined {
border: 1px solid var(--g-color-line-utility);
}
&#{$block}_view_filled {
background-color: var(--g-color-base-utility-light);
}
}

&#{$block}_view_raised {
background-color: var(--g-color-base-float);
--_--background-color: var(--g-color-base-float);

@at-root &#{$block}_size_m {
--yc-card-box-shadow: 0px 1px 5px var(--g-color-sfx-shadow);
--_--box-shadow: 0px 1px 5px var(--g-color-sfx-shadow);
}
@at-root &#{$block}_size_l {
--yc-card-box-shadow: 0px 1px 6px var(--g-color-sfx-shadow-light),
--_--box-shadow: 0px 1px 6px var(--g-color-sfx-shadow-light),
1px 3px 13px var(--g-color-sfx-shadow-light);
}
}
}

&_size {
&_m {
--yc-card-border-radius: 8px;
--_--border-radius: 8px;
}

&_l {
--yc-card-border-radius: 16px;
--_--border-radius: 16px;
}
}
}
10 changes: 10 additions & 0 deletions src/components/Card/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,3 +145,13 @@ LANDING_BLOCK-->
| selected | Selected card. Available for type: `"selection"` | `Boolean` | |
| disabled | Disabled card. Available for type: `"selection"`, `"action"` | `Boolean` | |
| qa | HTML `data-qa` attribute, used in tests | `string` | |

## CSS API

| Name | Description |
| :-------------------------- | :--------------- |
| `--g-card-background-color` | Background color |
| `--g-card-border-width` | Border width |
| `--g-card-border-color` | Border color |
| `--g-card-border-radius` | Border radius |
| `--g-card-box-shadow` | Shadow |
2 changes: 2 additions & 0 deletions src/components/Card/__stories__/Card.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ export const ActionType: Story = {
args: {
...Default.args,
type: 'action',
onClick: () => alert('Click!'),
},
name: 'Action Type',
};
Expand All @@ -140,6 +141,7 @@ export const SelectionType: Story = {
args: {
...Default.args,
type: 'selection',
onClick: () => alert('Click!'),
},
name: 'Selection Type',
};
9 changes: 2 additions & 7 deletions src/components/Modal/Modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@ $block: '.#{variables.$ns}modal';

&__content {
display: inline-block;
margin: var(--yc-modal-margin);
margin: var(--g-modal-margin, 20px);
text-align: start;
background-color: var(--g-color-base-modal);
border-radius: var(--yc-modal-border-radius);
border-radius: var(--g-modal-border-radius, 5px);
}

&,
Expand Down Expand Up @@ -95,8 +95,3 @@ $block: '.#{variables.$ns}modal';
transform: scale(1);
}
}

:root {
--yc-modal-border-radius: 5px;
--yc-modal-margin: 20px;
}
7 changes: 7 additions & 0 deletions src/components/Modal/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,10 @@ const [open, setOpen] = React.useState(false);
| style | HTML `style` atribute for root node | `string` | |
| aria-label | HTML `aria-label` attribute to describe the `Modal` | `string` | |
| aria-labelledby | Id of the visible `Modal` caption element | `string` | |

## CSS API

| Name | Description |
| :------------------------ | :---------------------------- |
| `--g-modal-margin` | Margin around Modal's content |
| `--g-modal-border-radius` | Modal's content border radius |
39 changes: 14 additions & 25 deletions src/components/Popover/Popover.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,17 @@ $block: '.#{variables.$ns}popover';
&__tooltip {
$tooltip_block: &;

--yc-popover-padding: 16px;
--yc-popover-close-margin: 8px;
--yc-popover-close-size: 24px;
--_--padding: 16px;
--_--close-offset: 8px;
--_--close-size: 24px;

$buttonGap: 5px;

&-popup-content {
box-sizing: border-box;
min-height: 40px;
max-width: var(--yc-popover-max-width);
padding: var(--yc-popover-padding);
max-width: var(--g-popover-max-width, 300px);
padding: var(--g-popover-padding, var(--_--padding));
cursor: default;
}

Expand Down Expand Up @@ -58,8 +58,8 @@ $block: '.#{variables.$ns}popover';

&-close {
position: absolute;
inset-block-start: var(--yc-popover-close-margin);
inset-inline-end: var(--yc-popover-close-margin);
inset-block-start: var(--_--close-offset);
inset-inline-end: var(--_--close-offset);
}

&-content {
Expand Down Expand Up @@ -111,20 +111,14 @@ $block: '.#{variables.$ns}popover';
}

&_announcement {
// Increasing specificity for overrides
&#{&} {
--yc-popup-background-color: var(--g-color-base-simple-hover-solid);
--yc-popup-border-color: var(--g-color-base-simple-hover-solid);
}
--g-popup-background-color: var(--g-color-base-simple-hover-solid);
--g-popup-border-color: var(--g-color-base-simple-hover-solid);
}

&_special {
// Increasing specificity for overrides
&#{&} {
--yc-popup-background-color: var(--g-color-base-brand);
--yc-popup-border-color: var(--g-color-base-brand);
color: var(--g-color-text-light-primary);
}
--g-popup-background-color: var(--g-color-base-brand);
--g-popup-border-color: var(--g-color-base-brand);
color: var(--g-color-text-light-primary);

#{$class}__tooltip-content a:not(.yc-button) {
@include mixins.text-accent;
Expand All @@ -147,7 +141,7 @@ $block: '.#{variables.$ns}popover';

&_size {
&_l {
--yc-popover-padding: 24px;
--_--padding: 24px;

#{$class}__tooltip-title {
@include mixins.text-header-1();
Expand All @@ -163,14 +157,9 @@ $block: '.#{variables.$ns}popover';
#{$class}__tooltip-title,
#{$class}__tooltip-content {
padding-inline-end: calc(
var(--yc-popover-close-margin) + var(--yc-popover-close-size) -
var(--yc-popover-padding)
var(--_--close-offset) + var(--_--close-size) - var(--_--padding)
);
}
}
}
}

.g-root {
--yc-popover-max-width: 300px;
}
5 changes: 5 additions & 0 deletions src/components/Popover/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,3 +293,8 @@ const close = () => {
| ------- | ----------------------------------------------------------------------------- | :--------: | :-----: |
| text | Button's text | `string` | |
| onClick | Button's click handler `(event: React.MouseEvent<HTMLButtonElement>) => void` | `Function` | |

| Name | Description |
| :---------------------- | :---------------- |
| `--g-popover-padding` | Content padding |
| `--g-popover-max-width` | Content max width |
Loading

0 comments on commit d0eac41

Please sign in to comment.