Skip to content

Commit

Permalink
fix: fix controls css api (#1289)
Browse files Browse the repository at this point in the history
  • Loading branch information
@amje
amje authored Jan 30, 2024
1 parent 530f040 commit 2d49002
Show file tree
Hide file tree
Showing 12 changed files with 147 additions and 261 deletions.
15 changes: 0 additions & 15 deletions src/components/Select/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,18 +115,3 @@ const MyComponent = () => {
return <Select renderFilter={renderFilter}>/* Your options here */</Select>;
};
```

## CSS API

| Name | Description |
| :---------------------------------- | :------------------------------- |
| `--g-select-text-color` | Text color |
| `--g-select-placeholder-color` | Placeholder color |
| `--g-select-background-color` | Background color (when disabled) |
| `--g-select-background-color-hover` | Background color hovered |
| `--g-select-border-width` | Border width |
| `--g-select-border-radius` | Border radius |
| `--g-select-border-color` | Border color |
| `--g-select-border-color-hover` | Border color if hovered |
| `--g-select-border-color-active` | Border color if active |
| `--g-select-chevron-color` | Color of arrow |
5 changes: 0 additions & 5 deletions src/components/Select/__stories__/Select.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import type {Meta, StoryFn} from '@storybook/react';
import {Select} from '..';
import type {SelectProps} from '..';

import {CustomThemeShowcase} from './SelectCustomThemeShowcase';
import {SelectPopupWidthShowcase} from './SelectPopupWidthShowcase';
import {SelectShowcase} from './SelectShowcase';

Expand Down Expand Up @@ -40,7 +39,3 @@ Showcase.args = {
label: '',
hasClear: false,
};

const CustomThemeTemplate = () => <CustomThemeShowcase />;

export const CustomTheme: StoryFn = CustomThemeTemplate.bind({});
12 changes: 0 additions & 12 deletions src/components/Select/__stories__/SelectCustom.scss
View file

This file was deleted.

36 changes: 0 additions & 36 deletions src/components/Select/__stories__/SelectCustomThemeShowcase.tsx
View file

This file was deleted.

107 changes: 35 additions & 72 deletions src/components/Select/components/SelectControl/SelectControl.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,44 +8,28 @@ $blockButton: '.#{variables.$ns}select-control__button';

@mixin block_control($size: m) {
@if $size == 's' {
--_--options-text-right-padding: #{select-css-variables.$s-hor-padding};
--_--text-right-padding: #{select-css-variables.$s-hor-padding};
--_--border-radius: var(--g-border-radius-s);
height: #{variables.$s-height};
padding: 4px
calc(
var(--_--options-text-right-padding) +
var(--g-select-border-width, var(--_--border-width))
); // plus border-width
padding: 4px calc(var(--_--text-right-padding) + 1px); // plus border-width
}
@if $size == 'm' {
--_--options-text-right-padding: #{select-css-variables.$m-hor-padding};
--_--text-right-padding: #{select-css-variables.$m-hor-padding};
--_--border-radius: var(--g-border-radius-m);
height: #{variables.$m-height};
padding: 6px
calc(
var(--_--options-text-right-padding) +
var(--g-select-border-width, var(--_--border-width))
); // plus border-width
padding: 6px calc(var(--_--text-right-padding) + 1px); // plus border-width
}
@if $size == 'l' {
--_--options-text-right-padding: #{select-css-variables.$l-hor-padding};
--_--text-right-padding: #{select-css-variables.$l-hor-padding};
--_--border-radius: var(--g-border-radius-l);
height: #{variables.$l-height};
padding: 10px
calc(
var(--_--options-text-right-padding) +
var(--g-select-border-width, var(--_--border-width))
); // plus border-width
padding: 10px calc(var(--_--text-right-padding) + 1px); // plus border-width
}
@if $size == 'xl' {
--_--options-text-right-padding: #{select-css-variables.$xl-hor-padding};
--_--text-right-padding: #{select-css-variables.$xl-hor-padding};
--_--border-radius: var(--g-border-radius-xl);
height: #{variables.$xl-height};
padding: 12px
calc(
var(--_--options-text-right-padding) +
var(--g-select-border-width, var(--_--border-width))
); // plus border-width
padding: 12px calc(var(--_--text-right-padding) + 1px); // plus border-width
}
}

Expand All @@ -67,45 +51,36 @@ $blockButton: '.#{variables.$ns}select-control__button';
@mixin block_clear_reserved_width() {
// reserving place for clear icon to fix width changing on displaying clear
#{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_s & {
padding-inline-end: calc(#{variables.$s-height} + var(--_--options-text-right-padding));
padding-inline-end: calc(#{variables.$s-height} + var(--_--text-right-padding));
}
#{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_m & {
padding-inline-end: calc(#{variables.$m-height} + var(--_--options-text-right-padding));
padding-inline-end: calc(#{variables.$m-height} + var(--_--text-right-padding));
}
#{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_l & {
padding-inline-end: calc(#{variables.$l-height} + var(--_--options-text-right-padding));
padding-inline-end: calc(#{variables.$l-height} + var(--_--text-right-padding));
}
#{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_xl & {
padding-inline-end: calc(#{variables.$xl-height} + var(--_--options-text-right-padding));
padding-inline-end: calc(#{variables.$xl-height} + var(--_--text-right-padding));
}
}

@mixin block_clear_reserved_disabled_width() {
// reserving place for clear icon to fix width changing on displaying clear for disabled select
#{$block}_has-clear#{$block}_size_s #{$blockButton}_disabled & {
padding-inline-end: calc(#{variables.$s-height} + var(--_--options-text-right-padding));
padding-inline-end: calc(#{variables.$s-height} + var(--_--text-right-padding));
}
#{$block}_has-clear#{$block}_size_m #{$blockButton}_disabled & {
padding-inline-end: calc(#{variables.$m-height} + var(--_--options-text-right-padding));
padding-inline-end: calc(#{variables.$m-height} + var(--_--text-right-padding));
}
#{$block}_has-clear#{$block}_size_l #{$blockButton}_disabled & {
padding-inline-end: calc(#{variables.$l-height} + var(--_--options-text-right-padding));
padding-inline-end: calc(#{variables.$l-height} + var(--_--text-right-padding));
}
#{$block}_has-clear#{$block}_size_xl #{$blockButton}_disabled & {
padding-inline-end: calc(#{variables.$xl-height} + var(--_--options-text-right-padding));
padding-inline-end: calc(#{variables.$xl-height} + var(--_--text-right-padding));
}
}

#{$block} {
--_--placeholder-color: var(--g-color-text-hint);
--_--background-color: var(--g-color-base-generic-accent-disabled);
--_--background-color-hover: var(--g-color-base-simple-hover);
--_--border-width: 1px;
--_--border-color: var(--g-color-line-generic);
--_--border-color-hover: var(--g-color-line-generic-hover);
--_--border-color-active: var(--g-color-line-generic-active);
--_--chevron-color: var(--g-color-text-secondary);

@include mixins.button-reset();

position: relative;
Expand Down Expand Up @@ -138,11 +113,7 @@ $blockButton: '.#{variables.$ns}select-control__button';

&__button {
@include mixins.button-reset();
@include mixins.pin(
$blockButton,
('::before', '::after'),
var(--g-select-border-radius, var(--_--border-radius))
);
@include mixins.pin($blockButton, ('::before', '::after'), var(--_--border-radius));

display: inline-flex;
align-items: center;
Expand All @@ -157,11 +128,8 @@ $blockButton: '.#{variables.$ns}select-control__button';
content: '';
position: absolute;
inset: 0;

border-width: var(--g-select-border-width, var(--_--border-width));
border-style: solid;
border-color: var(--g-select-border-color, var(--_--border-color));
border-radius: var(--g-select-border-radius, var(--_--border-radius));
border: 1px solid var(--g-color-line-generic);
border-radius: var(--_--border-radius);
}

&::after {
Expand All @@ -172,7 +140,9 @@ $blockButton: '.#{variables.$ns}select-control__button';
}

&_view_clear {
border-color: transparent;
&::before {
border-color: transparent;
}
}

&_size_s {
Expand All @@ -192,36 +162,33 @@ $blockButton: '.#{variables.$ns}select-control__button';
}

&_error::before {
border-color: var(--g-color-text-danger);
border-color: var(--g-color-line-danger);
}

&:hover::after {
background-color: var(
--g-select-background-color-hover,
var(--_--background-color-hover)
);
background-color: var(--g-color-base-simple-hover);
}

&_disabled {
color: var(--g-select-placeholder-color, var(--_--placeholder-color));
color: var(--g-color-text-hint);
pointer-events: none;

&::after {
background-color: var(--g-select-background-color, var(--_--background-color));
background-color: var(--g-color-base-generic-accent-disabled);
}

&::before {
border-color: transparent;
}
}

&:not(&_error):not(&_disabled):hover::before {
border-color: var(--g-select-border-color-hover, var(--_--border-color-hover));
&:not(&_error):not(&_disabled):not(&_view_clear):hover::before {
border-color: var(--g-color-line-generic-hover);
}

&_open:not(&_error)::before,
&:not(&_error):focus-visible::before {
border-color: var(--g-select-border-color-active, var(--_--border-color-active));
&_open:not(&_error):not(&_view_clear)::before,
&:not(&_error):not(&_view_clear):focus-visible::before {
border-color: var(--g-color-line-generic-active);
}
}

Expand All @@ -244,15 +211,11 @@ $blockButton: '.#{variables.$ns}select-control__button';
@include mixins.overflow-ellipsis();
@include block_clear_reserved_disabled_width();

padding-inline-end: var(--_--options-text-right-padding);
}

&__option-text {
color: var(--g-select-text-color, inherit);
padding-inline-end: var(--_--text-right-padding);
}

&__placeholder {
color: var(--g-select-placeholder-color, var(--_--placeholder-color));
color: var(--g-color-text-hint);

#{$blockButton}:not(#{$blockButton}_disabled) & {
@include block_clear_reserved_width();
Expand All @@ -262,8 +225,7 @@ $blockButton: '.#{variables.$ns}select-control__button';
&__chevron-icon {
flex: 0 0 16px;
margin-inline-start: auto;

color: var(--g-select-chevron-color, var(--_--chevron-color));
color: var(--g-color-text-secondary);

&_disabled {
color: var(--g-color-text-hint);
Expand All @@ -276,6 +238,7 @@ $blockButton: '.#{variables.$ns}select-control__button';

&__error {
@include mixins.text-body-1();

color: var(--g-color-text-danger);
margin-block-start: 2px;
}
Expand Down
20 changes: 10 additions & 10 deletions src/components/controls/TextArea/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,13 +217,13 @@ LANDING_BLOCK-->

## CSS API

| Name | Description |
| :---------------------------------- | :------------------------------- |
| `--g-text-area-text-color` | Text color |
| `--g-text-area-placeholder-color` | Placeholder color |
| `--g-text-area-background-color` | Background color (when disabled) |
| `--g-text-area-border-radius` | Border radius |
| `--g-text-area-border-width` | Border width |
| `--g-text-area-border-color` | Border color |
| `--g-text-area-border-color-hover` | Border color if hovered |
| `--g-text-area-border-color-active` | Border color if active |
| Name | Description |
| :---------------------------------- | :---------------------- |
| `--g-text-area-text-color` | Text color |
| `--g-text-area-placeholder-color` | Placeholder color |
| `--g-text-area-background-color` | Background color |
| `--g-text-area-border-radius` | Border radius |
| `--g-text-area-border-width` | Border width |
| `--g-text-area-border-color` | Border color |
| `--g-text-area-border-color-hover` | Border color if hovered |
| `--g-text-area-border-color-active` | Border color if active |
Loading

0 comments on commit 2d49002

Please sign in to comment.