Skip to content

Commit

Permalink
feat(Button): added new views (#805)
Browse files Browse the repository at this point in the history
  • Loading branch information
@amje
amje authored Jul 11, 2023
1 parent 2766cd4 commit d338ff9
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 40 deletions.
131 changes: 95 additions & 36 deletions src/components/Button/Button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ $iconWidth: 16px;

#{$block} {
--yc-button-background-color: transparent;
--yc-button-background-color-hover: transparent;
--yc-button-background-color-hover: var(--g-color-base-simple-hover);
--yc-button-outline-color: var(--g-color-line-misc);
--yc-button-icon-space: calc(
var(--yc-button-padding) + var(--yc-button-icon-size) + var(--yc-button-icon-offset)
);
Expand Down Expand Up @@ -64,11 +65,11 @@ $iconWidth: 16px;
}

&:focus::before {
box-shadow: 0 0 0 2px var(--g-color-line-misc);
outline: 2px solid var(--yc-button-outline-color);
}

&:focus:not(:focus-visible)::before {
box-shadow: none;
outline: none;
}

&::after {
Expand Down Expand Up @@ -159,13 +160,6 @@ $iconWidth: 16px;
@include button-text-color(var(--g-color-text-brand-contrast));
}

&_outlined,
&_outlined-info,
&_outlined-danger {
--yc-button-background-color: transparent;
--yc-button-background-color-hover: var(--g-color-base-simple-hover);
}

&_outlined {
@include button-text-color(var(--g-color-text-primary));

Expand All @@ -182,6 +176,22 @@ $iconWidth: 16px;
}
}

&_outlined-success {
@include button-text-color(var(--g-color-text-positive));

&::before {
border: 1px solid var(--g-color-line-positive);
}
}

&_outlined-warning {
@include button-text-color(var(--g-color-text-warning));

&::before {
border: 1px solid var(--g-color-line-warning);
}
}

&_outlined-danger {
@include button-text-color(var(--g-color-text-danger));

Expand All @@ -190,6 +200,14 @@ $iconWidth: 16px;
}
}

&_outlined-action {
@include button-text-color(var(--g-color-text-brand));

&::before {
border: 1px solid var(--g-color-line-brand);
}
}

&_raised {
--yc-button-background-color: var(--g-color-base-float);
--yc-button-background-color-hover: var(--g-color-base-float-hover);
Expand All @@ -200,57 +218,51 @@ $iconWidth: 16px;
box-shadow: 0 3px 5px var(--g-color-sfx-shadow);
}

&:focus:not(:focus-visible)::before {
box-shadow: 0 3px 5px var(--g-color-sfx-shadow);
}

&:active::before {
box-shadow: 0 1px 2px var(--g-color-sfx-shadow);
}

&:active:focus::before {
box-shadow: 0 0 0 2px var(--g-color-line-misc);
}

&:active:focus:not(:focus-visible)::before {
box-shadow: 0 1px 2px var(--g-color-sfx-shadow);
}
}

&_flat,
&_flat-info,
&_flat-danger,
&_flat-secondary {
--yc-button-background-color: transparent;
--yc-button-background-color-hover: var(--g-color-base-simple-hover);
}

&_flat {
@include button-text-color(var(--g-color-text-primary));
}

&_flat-secondary {
@include button-text-color(var(--g-color-text-secondary), var(--g-color-text-primary));
}

&_flat-info {
@include button-text-color(var(--g-color-text-info));
}

&_flat-success {
@include button-text-color(var(--g-color-text-positive));
}

&_flat-warning {
@include button-text-color(var(--g-color-text-warning));
}

&_flat-danger {
@include button-text-color(var(--g-color-text-danger));
}

&_flat-secondary {
@include button-text-color(var(--g-color-text-secondary), var(--g-color-text-primary));
&_flat-action {
@include button-text-color(var(--g-color-text-brand));
}

&_normal-contrast {
--yc-button-background-color: var(--g-color-base-light);
--yc-button-background-color-hover: var(--g-color-base-light-hover);
--yc-button-outline-color: var(--g-color-line-light);

@include button-text-color(var(--g-color-text-dark-primary));
}

&_outlined-contrast {
--yc-button-background-color: transparent;
--yc-button-background-color-hover: var(--g-color-base-light-simple-hover);
--yc-button-outline-color: var(--g-color-line-light);

@include button-text-color(var(--g-color-text-light-primary));

Expand All @@ -262,13 +274,18 @@ $iconWidth: 16px;
&_flat-contrast {
--yc-button-background-color: transparent;
--yc-button-background-color-hover: var(--g-color-base-light-simple-hover);
--yc-button-outline-color: var(--g-color-line-light);

@include button-text-color(var(--g-color-text-light-primary));
}

&_flat,
&_flat-secondary,
&_flat-info,
&_flat-danger {
&_flat-success,
&_flat-warning,
&_flat-danger,
&_flat-action {
&#{$block}_disabled:not(#{$block}_loading),
&#{$block}_disabled:not(#{$block}_loading) {
--yc-button-background-color: transparent;
Expand Down Expand Up @@ -304,11 +321,11 @@ $iconWidth: 16px;
&_normal,
&_action,
&_outlined,
&_outlined-info,
&_outlined-action,
&_raised,
&_flat,
&_flat-secondary,
&_flat-info {
&_flat-action {
&#{$block}_selected {
--yc-button-background-color: var(--g-color-base-selection);
--yc-button-background-color-hover: var(--g-color-base-selection-hover);
Expand All @@ -321,13 +338,55 @@ $iconWidth: 16px;
}
}

&_outlined-info,
&_flat-info {
&#{$block}_selected {
--yc-button-background-color: var(--g-color-base-info-light);
--yc-button-background-color-hover: var(--g-color-base-info-light-hover);

@include button-text-color(var(--g-color-text-info-heavy));

&::before {
border: none;
}
}
}

&_outlined-success,
&_flat-success {
&#{$block}_selected {
--yc-button-background-color: var(--g-color-base-positive-light);
--yc-button-background-color-hover: var(--g-color-base-positive-light-hover);

@include button-text-color(var(--g-color-text-positive-heavy));

&::before {
border: none;
}
}
}

&_outlined-warning,
&_flat-warning {
&#{$block}_selected {
--yc-button-background-color: var(--g-color-base-warning-light);
--yc-button-background-color-hover: var(--g-color-base-warning-light-hover);

@include button-text-color(var(--g-color-text-warning-heavy));

&::before {
border: none;
}
}
}

&_outlined-danger,
&_flat-danger {
&#{$block}_selected {
--yc-button-background-color: var(--g-color-base-danger-light);
--yc-button-background-color-hover: var(--g-color-base-danger-light-hover);

@include button-text-color(var(--g-color-text-danger));
@include button-text-color(var(--g-color-text-danger-heavy));

&::before {
border: none;
Expand Down
8 changes: 7 additions & 1 deletion src/components/Button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,18 @@ export type ButtonView =
| 'action' // Branded background, no border
| 'outlined' // No background, grey border
| 'outlined-info' // No background, with info-type border color
| 'outlined-success' // No background, with success-type border color
| 'outlined-warning' // No background, with warning-type border color
| 'outlined-danger' // No background, with danger-type border color
| 'outlined-action' // No background, with branded border color
| 'raised' // With white background and shadow
| 'flat' // No background, no border
| 'flat-secondary' // No background, no border, secondary-type text color
| 'flat-info' // No background, no border, info-type text color
| 'flat-success' // No background, no border, success-type text color
| 'flat-warning' // No background, no border, warning-type text color
| 'flat-danger' // No background, no border, danger-type text color
| 'flat-secondary' // No background, no border, secondary-type text color
| 'flat-action' // No background, no border, branded text color
| 'normal-contrast' // normal button appearance with contrast background
| 'outlined-contrast' // outlined button appearance with contrast background
| 'flat-contrast'; // flat button appearance with contrast background
Expand Down
8 changes: 7 additions & 1 deletion src/components/Button/__stories__/Button.new.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,18 @@ export default {
'action',
'outlined',
'outlined-info',
'outlined-success',
'outlined-warning',
'outlined-danger',
'outlined-action',
'raised',
'flat',
'flat-secondary',
'flat-info',
'flat-success',
'flat-warning',
'flat-danger',
'flat-secondary',
'flat-action',
'normal-contrast',
'outlined-contrast',
'flat-contrast',
Expand Down
9 changes: 7 additions & 2 deletions src/components/Button/__stories__/ButtonShowcase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,17 @@ function renderViewGrid() {
'action',
'outlined',
'outlined-info',
'outlined-success',
'outlined-warning',
'outlined-danger',
'outlined-action',
'raised',
'flat',
'flat-info',
'flat-danger',
'flat-secondary',
'flat-info',
'flat-success',
'flat-warning',
'flat-action',
'normal-contrast',
'outlined-contrast',
'flat-contrast',
Expand Down

0 comments on commit d338ff9

Please sign in to comment.