From 44fe6f354f8dd322bec4b7ee65177d3ca7d01472 Mon Sep 17 00:00:00 2001 From: sunduckcow Date: Tue, 16 May 2023 09:38:39 +0300 Subject: [PATCH 01/14] refactor: moved styles for label sizes to @mixin themeState That also fixes bad display of left addon (icon) in 's' size --- src/components/Label/Label.scss | 150 +++++++++----------------------- 1 file changed, 41 insertions(+), 109 deletions(-) diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss index e63d82ae27..77727f76ae 100644 --- a/src/components/Label/Label.scss +++ b/src/components/Label/Label.scss @@ -26,6 +26,42 @@ $transitionTimingFunction: ease-in-out; } } +@mixin sizeState($margin, $mainSize, $rAddon, $lAddon, $borderRadius) { + --main-size-without-outline: calc(#{$mainSize} - var(--outline-size) * 2); + height: var(--main-size-without-outline); + & #{$block}__text { + line-height: var(--main-size-without-outline); + margin: 0 #{$margin}; + } + + & #{$block}__addon { + width: var(--main-size-without-outline); + height: var(--main-size-without-outline); + } + + &#{$block}_has-right-addon #{$block}__text { + margin-right: #{$rAddon}; + } + + &#{$block}_has-left-addon #{$block}__text { + margin-left: #{$lAddon}; + } + + &#{$block}_style { + &_default, + &_rounded { + border-radius: #{$borderRadius}; + + & #{$block}__addon { + &_interactive { + --yc-button-height: var(--main-size-without-outline); + --yc-button-border-radius: #{$borderRadius}; + } + } + } + } +} + #{$block} { display: inline-flex; align-items: center; @@ -34,6 +70,8 @@ $transitionTimingFunction: ease-in-out; transition-duration: $transitionDuration; transition-timing-function: $transitionTimingFunction; + --outline-size: 0px; + &__text { width: 100%; text-align: center; @@ -75,121 +113,15 @@ $transitionTimingFunction: ease-in-out; &_size { &_xs { - height: 20px; - - & #{$block}__text { - line-height: 20px; - margin: 0 8px; - } - - & #{$block}__addon { - width: 20px; - height: 20px; - } - - &#{$block}_has-right-addon #{$block}__text { - margin-right: 22px; - } - - &#{$block}_has-left-addon #{$block}__text { - margin-left: 24px; - } - - &#{$block}_style { - &_default, - &_rounded { - border-radius: var(--yc-border-radius-xs); - - & #{$block}__addon { - &_interactive { - --yc-button-height: 20px; - --yc-button-border-radius: var(--yc-border-radius-xs); - } - } - } - } + @include sizeState(8px, 20px, 22px, 24px, var(--yc-border-radius-xs)); } &_s { - height: 24px; - - & #{$block}__text { - line-height: 24px; - margin: 0 10px; - } - - & #{$block}__icon { - width: 24px; - height: 24px; - } - - &#{$block}_has-right-addon #{$block}__text { - margin-right: 26px; - } - - &#{$block}_has-left-addon #{$block}__text { - margin-left: 28px; - } - - &#{$block}_style { - &_default, - &_rounded { - border-radius: var(--yc-border-radius-s); - - & #{$block}__addon { - &_interactive { - --yc-button-height: 24px; - --yc-button-border-radius: var(--yc-border-radius-s); - } - } - } - } + @include sizeState(10px, 24px, 26px, 28px, var(--yc-border-radius-s)); } &_m { - height: 28px; - - & #{$block}__text { - line-height: 28px; - margin: 0 12px; - } - - & #{$block}__addon { - width: 28px; - height: 28px; - } - - &#{$block}_has-right-addon #{$block}__text { - margin-right: 32px; - } - - &#{$block}_has-left-addon #{$block}__text { - margin-left: 32px; - } - - &#{$block}_style { - &_default { - border-radius: var(--yc-border-radius-m); - - & #{$block}__addon { - &_interactive { - --yc-button-height: 28px; - --yc-button-border-radius: var(--yc-border-radius-m); - } - } - } - - &_rounded { - border-radius: 24px; - - & #{$block}__addon { - &_interactive { - --yc-button-height: 28px; - --yc-button-border-radius: 24px; - } - } - } - } + @include sizeState(12px, 28px, 32px, 32px, var(--yc-border-radius-m)); } } From e0daaa279a16784e9c32e75e895f93c26d7f8352 Mon Sep 17 00:00:00 2001 From: sunduckcow Date: Tue, 16 May 2023 09:57:04 +0300 Subject: [PATCH 02/14] feat: added value prop for label It allows you to use labels as pairs "key : value" --- src/components/Label/Label.scss | 10 ++++++++++ src/components/Label/Label.tsx | 21 +++++++++++++++++++-- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss index 77727f76ae..7f4829f105 100644 --- a/src/components/Label/Label.scss +++ b/src/components/Label/Label.scss @@ -73,6 +73,7 @@ $transitionTimingFunction: ease-in-out; --outline-size: 0px; &__text { + display: flex; width: 100%; text-align: center; white-space: nowrap; @@ -80,6 +81,15 @@ $transitionTimingFunction: ease-in-out; overflow: hidden; } + &__value { + display: flex; + opacity: 0.7; + } + + &__separator { + margin: 0 4px; + } + // & selector added to up priority over button styles & &__addon { display: flex; diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 4ca2ffe68a..16ae39f5ef 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -51,11 +51,13 @@ interface LabelOwnProps { children?: React.ReactNode; /** Display hover */ interactive?: boolean; + /** Label value (shows as "children : value") */ + value?: string; } interface LabelDefaultProps { /** Label color */ - theme: 'normal' | 'info' | 'danger' | 'warning' | 'success' | 'unknown'; + theme: 'normal' | 'info' | 'danger' | 'warning' | 'success' | 'unknown' | 'outline'; /** Label type (plain, with copy text button or with close button) */ type: 'default' | 'copy' | 'close'; /** Label size */ @@ -81,6 +83,7 @@ export const Label = React.forwardRef(function Label closeButtonLabel, copyButtonLabel, interactive = false, + value, onCopy, onClick, } = props; @@ -98,7 +101,21 @@ export const Label = React.forwardRef(function Label const leftIcon = icon && (
{icon}
); - const content = hasContent &&
{children}
; + const content = hasContent && ( +
+ <> +
{children}
+ {Boolean(value) && ( + <> +
+
:
+
{value}
+
+ + )} + +
+ ); const handleCloseClick = (event: React.MouseEvent) => { if (hasOnClick) { From a78a7a0c0667c40292a72fad372de754fd73bed4 Mon Sep 17 00:00:00 2001 From: sunduckcow Date: Tue, 16 May 2023 10:31:40 +0300 Subject: [PATCH 03/14] feat: added outline theme --- src/components/Label/Label.scss | 32 ++++++++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss index 7f4829f105..0df786ad94 100644 --- a/src/components/Label/Label.scss +++ b/src/components/Label/Label.scss @@ -2,18 +2,33 @@ $block: '.#{variables.$ns}label'; $disabled: #{$block}_disabled; -$transitionDuration: 0.3s; +$transitionDuration: 0.15s; $transitionTimingFunction: ease-in-out; -@mixin themeState($bgColor, $bgHoverColor, $textColor) { +@mixin themeState($bgColor, $bgHoverColor, $textColor, $BorderColor: none) { color: #{$textColor}; background-color: #{$bgColor}; - // hover on interactive label - &:not(#{$disabled})#{$block}_is-interactive:hover { + @if $BorderColor != none { + --outline-size: 1px; + outline: var(--outline-size) solid #{$BorderColor}; + // box-sizing: content-box; + } + + // .yc-label__content {} + + // hover on interactive label (excluding hover on addon) + &:not(#{$disabled})#{$block}_is-interactive:hover:not(:has(#{$block}__addon_interactive:hover)) { background-color: #{$bgHoverColor}; } + //fallback for old browsers + @supports not selector(:has(*)) { + &:not(#{$disabled})#{$block}_is-interactive:hover { + background-color: #{$bgHoverColor}; + } + } + // hover on action button &:not(#{$disabled}) #{$block}__addon_interactive { --yc-button-background-color-hover: #{$bgHoverColor}; @@ -192,5 +207,14 @@ $transitionTimingFunction: ease-in-out; var(--yc-color-text-complementary) ); } + + &_outline { + @include themeState( + none, + var(--yc-color-base-simple-hover-solid), + var(--yc-color-text-complementary), + var(--yc-color-line-generic) + ); + } } } From 27bdff5ba1a2e7c5ffd2c4314ee758743a16e63a Mon Sep 17 00:00:00 2001 From: sunduckcow Date: Tue, 16 May 2023 10:37:55 +0300 Subject: [PATCH 04/14] feat: added key:value dashboard to storybook --- .../Label/__stories__/Label.stories.scss | 14 +++++ .../Label/__stories__/Label.stories.tsx | 57 +++++++++++++++++++ 2 files changed, 71 insertions(+) diff --git a/src/components/Label/__stories__/Label.stories.scss b/src/components/Label/__stories__/Label.stories.scss index 91682f72b5..67ed2f6b98 100644 --- a/src/components/Label/__stories__/Label.stories.scss +++ b/src/components/Label/__stories__/Label.stories.scss @@ -3,4 +3,18 @@ .yc-label { margin-left: 10px; } + .grid { + display: grid; + // grid-template-columns: from js + gap: 30px; + } + .section { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + & > * { + width: min-content; + margin-left: unset; + } + } } diff --git a/src/components/Label/__stories__/Label.stories.tsx b/src/components/Label/__stories__/Label.stories.tsx index 820faf8326..6c17572e1c 100644 --- a/src/components/Label/__stories__/Label.stories.tsx +++ b/src/components/Label/__stories__/Label.stories.tsx @@ -32,6 +32,10 @@ export default { children: { control: {type: 'text'}, }, + copyText: { + control: {type: 'text'}, + defaultValue: '', + }, }, } as Meta; @@ -70,6 +74,59 @@ const ThemeTemplate: StoryFn = (args) => { export const Theme = ThemeTemplate.bind({}); +type WithKey = T & {key: React.Key}; + +const themes = ['normal', 'info', 'danger', 'warning', 'success', 'unknown', 'outline'] as const; +const sizes = ['xs', 's', 'm'] as const; + +const getLabel = ({...args}: WithKey) => ; + +const section = (args: LabelProps) => { + const cases: LabelProps[] = [ + {children: 'Label', icon: icons['TickIcon'], type: 'default'}, + {children: 'Label', type: 'default'}, + {children: 'Label', icon: icons['TickIcon'], type: 'copy'}, + {children: 'Label', type: 'copy'}, + {children: 'Label', icon: icons['TickIcon'], type: 'close'}, + {children: 'Label', type: 'close'}, + {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'default'}, + {children: 'Key', value: 'Value', type: 'default'}, + {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'copy'}, + {children: 'Key', value: 'Value', type: 'copy'}, + {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'close'}, + {children: 'Key', value: 'Value', type: 'close'}, + {icon: icons['TickIcon']}, + ]; + return cases.map((label, i) => getLabel({key: i, ...args, ...label})); +}; + +const keyValuesTemplate: StoryFn = (args) => ( +
+
+

+ {themes.map((theme) => ( +

{theme}

+ ))} + {sizes.map((size) => ( + +

{size}

+ {themes.map((theme) => ( +
+ {section({theme, size, ...args})} +
+ ))} + + ))} +
+
+); + +export const keyValues = keyValuesTemplate.bind({}); + +keyValues.args = { + interactive: true, +}; + const SizeTemplate: StoryFn = (args) => { return (
From 411ee8bb05303bdf105e0def900fa22cb7ea7caf Mon Sep 17 00:00:00 2001 From: sunduckcow Date: Tue, 16 May 2023 10:39:57 +0300 Subject: [PATCH 05/14] fix: cleanup comments --- src/components/Label/Label.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss index 0df786ad94..7f73df94d7 100644 --- a/src/components/Label/Label.scss +++ b/src/components/Label/Label.scss @@ -12,11 +12,8 @@ $transitionTimingFunction: ease-in-out; @if $BorderColor != none { --outline-size: 1px; outline: var(--outline-size) solid #{$BorderColor}; - // box-sizing: content-box; } - // .yc-label__content {} - // hover on interactive label (excluding hover on addon) &:not(#{$disabled})#{$block}_is-interactive:hover:not(:has(#{$block}__addon_interactive:hover)) { background-color: #{$bgHoverColor}; From a50c3d24bddc58f1931798b955972324234702e1 Mon Sep 17 00:00:00 2001 From: sunduckcow Date: Tue, 30 May 2023 13:11:24 +0300 Subject: [PATCH 06/14] fix: renamed theme outline -> clear; updated storybook --- src/components/Label/Label.scss | 2 +- src/components/Label/Label.tsx | 2 +- .../Label/__stories__/Label.stories.tsx | 109 +++++++++--------- 3 files changed, 58 insertions(+), 55 deletions(-) diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss index 7f73df94d7..32b83a8869 100644 --- a/src/components/Label/Label.scss +++ b/src/components/Label/Label.scss @@ -205,7 +205,7 @@ $transitionTimingFunction: ease-in-out; ); } - &_outline { + &_clear { @include themeState( none, var(--yc-color-base-simple-hover-solid), diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 16ae39f5ef..4e9004beeb 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -57,7 +57,7 @@ interface LabelOwnProps { interface LabelDefaultProps { /** Label color */ - theme: 'normal' | 'info' | 'danger' | 'warning' | 'success' | 'unknown' | 'outline'; + theme: 'normal' | 'info' | 'danger' | 'warning' | 'success' | 'unknown' | 'clear'; /** Label type (plain, with copy text button or with close button) */ type: 'default' | 'copy' | 'close'; /** Label size */ diff --git a/src/components/Label/__stories__/Label.stories.tsx b/src/components/Label/__stories__/Label.stories.tsx index 6c17572e1c..6019078dd2 100644 --- a/src/components/Label/__stories__/Label.stories.tsx +++ b/src/components/Label/__stories__/Label.stories.tsx @@ -68,65 +68,15 @@ const ThemeTemplate: StoryFn = (args) => { +
); }; export const Theme = ThemeTemplate.bind({}); -type WithKey = T & {key: React.Key}; - -const themes = ['normal', 'info', 'danger', 'warning', 'success', 'unknown', 'outline'] as const; -const sizes = ['xs', 's', 'm'] as const; - -const getLabel = ({...args}: WithKey) => ; - -const section = (args: LabelProps) => { - const cases: LabelProps[] = [ - {children: 'Label', icon: icons['TickIcon'], type: 'default'}, - {children: 'Label', type: 'default'}, - {children: 'Label', icon: icons['TickIcon'], type: 'copy'}, - {children: 'Label', type: 'copy'}, - {children: 'Label', icon: icons['TickIcon'], type: 'close'}, - {children: 'Label', type: 'close'}, - {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'default'}, - {children: 'Key', value: 'Value', type: 'default'}, - {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'copy'}, - {children: 'Key', value: 'Value', type: 'copy'}, - {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'close'}, - {children: 'Key', value: 'Value', type: 'close'}, - {icon: icons['TickIcon']}, - ]; - return cases.map((label, i) => getLabel({key: i, ...args, ...label})); -}; - -const keyValuesTemplate: StoryFn = (args) => ( -
-
-

- {themes.map((theme) => ( -

{theme}

- ))} - {sizes.map((size) => ( - -

{size}

- {themes.map((theme) => ( -
- {section({theme, size, ...args})} -
- ))} - - ))} -
-
-); - -export const keyValues = keyValuesTemplate.bind({}); - -keyValues.args = { - interactive: true, -}; - const SizeTemplate: StoryFn = (args) => { return (
@@ -230,3 +180,56 @@ export const Interactions: StoryFn = (args) => (
); + +type WithKey = T & {key: React.Key}; + +const themes = ['normal', 'info', 'danger', 'warning', 'success', 'unknown', 'clear'] as const; +const sizes = ['xs', 's', 'm'] as const; + +const getLabel = ({...args}: WithKey) => ; + +const section = (args: LabelProps) => { + const cases: LabelProps[] = [ + {children: 'Label', icon: icons['TickIcon'], type: 'default'}, + {children: 'Label', type: 'default'}, + {children: 'Label', icon: icons['TickIcon'], type: 'copy'}, + {children: 'Label', type: 'copy'}, + {children: 'Label', icon: icons['TickIcon'], type: 'close'}, + {children: 'Label', type: 'close'}, + {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'default'}, + {children: 'Key', value: 'Value', type: 'default'}, + {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'copy'}, + {children: 'Key', value: 'Value', type: 'copy'}, + {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'close'}, + {children: 'Key', value: 'Value', type: 'close'}, + {icon: icons['TickIcon']}, + ]; + return cases.map((label, i) => getLabel({key: i, ...args, ...label})); +}; + +const keyValuesTemplate: StoryFn = (args) => ( +
+
+

+ {themes.map((theme) => ( +

{theme}

+ ))} + {sizes.map((size) => ( + +

{size}

+ {themes.map((theme) => ( +
+ {section({theme, size, ...args})} +
+ ))} + + ))} +
+
+); + +export const showcase = keyValuesTemplate.bind({}); + +showcase.args = { + interactive: true, +}; From 7fe5d2090690be249a76f5a037a887f4d98cd435 Mon Sep 17 00:00:00 2001 From: sunduckcow Date: Wed, 7 Jun 2023 03:43:10 +0300 Subject: [PATCH 07/14] fix: turned template name to pascal case + removed empty header --- src/components/Label/__stories__/Label.stories.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Label/__stories__/Label.stories.tsx b/src/components/Label/__stories__/Label.stories.tsx index 6019078dd2..5d4f0cccc2 100644 --- a/src/components/Label/__stories__/Label.stories.tsx +++ b/src/components/Label/__stories__/Label.stories.tsx @@ -207,10 +207,10 @@ const section = (args: LabelProps) => { return cases.map((label, i) => getLabel({key: i, ...args, ...label})); }; -const keyValuesTemplate: StoryFn = (args) => ( +const KeyValuesTemplate: Story = (args) => (
-

+
{themes.map((theme) => (

{theme}

))} @@ -228,7 +228,7 @@ const keyValuesTemplate: StoryFn = (args) => (
); -export const showcase = keyValuesTemplate.bind({}); +export const showcase = KeyValuesTemplate.bind({}); showcase.args = { interactive: true, From 190d46cd8a9d66de1bad7881bcccaebaf1caaed2 Mon Sep 17 00:00:00 2001 From: sunduckcow Date: Wed, 7 Jun 2023 03:43:32 +0300 Subject: [PATCH 08/14] fix: removed redundant fragments --- src/components/Label/Label.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 4e9004beeb..9d35c8a2f0 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -103,17 +103,15 @@ export const Label = React.forwardRef(function Label ); const content = hasContent && (
- <> +
{children}
{Boolean(value) && ( - <> -
-
:
-
{value}
-
- +
+
:
+
{value}
+
)} - +
); From f1d2eaa1ba7f3be91914bfcde5b9783e24545232 Mon Sep 17 00:00:00 2001 From: sunduckcow Date: Wed, 7 Jun 2023 03:44:11 +0300 Subject: [PATCH 09/14] fix: changed outline to border --- src/components/Label/Label.scss | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss index 32b83a8869..0d96343cc1 100644 --- a/src/components/Label/Label.scss +++ b/src/components/Label/Label.scss @@ -10,8 +10,8 @@ $transitionTimingFunction: ease-in-out; background-color: #{$bgColor}; @if $BorderColor != none { - --outline-size: 1px; - outline: var(--outline-size) solid #{$BorderColor}; + --border-size: 1px; + border: var(--border-size) solid #{$BorderColor}; } // hover on interactive label (excluding hover on addon) @@ -39,16 +39,16 @@ $transitionTimingFunction: ease-in-out; } @mixin sizeState($margin, $mainSize, $rAddon, $lAddon, $borderRadius) { - --main-size-without-outline: calc(#{$mainSize} - var(--outline-size) * 2); - height: var(--main-size-without-outline); + height: #{$mainSize}; & #{$block}__text { - line-height: var(--main-size-without-outline); + line-height: #{$mainSize}; margin: 0 #{$margin}; } & #{$block}__addon { - width: var(--main-size-without-outline); - height: var(--main-size-without-outline); + --addon-size: calc(#{$mainSize} - var(--border-size) * 2); + width: var(--addon-size); + height: var(--addon-size); } &#{$block}_has-right-addon #{$block}__text { @@ -66,7 +66,7 @@ $transitionTimingFunction: ease-in-out; & #{$block}__addon { &_interactive { - --yc-button-height: var(--main-size-without-outline); + --yc-button-height: #{$mainSize}; --yc-button-border-radius: #{$borderRadius}; } } @@ -81,11 +81,13 @@ $transitionTimingFunction: ease-in-out; transition-property: opacity, color, background-color; transition-duration: $transitionDuration; transition-timing-function: $transitionTimingFunction; + box-sizing: border-box; - --outline-size: 0px; + --border-size: 0px; &__text { display: flex; + align-items: baseline; width: 100%; text-align: center; white-space: nowrap; @@ -207,7 +209,7 @@ $transitionTimingFunction: ease-in-out; &_clear { @include themeState( - none, + transparent, var(--yc-color-base-simple-hover-solid), var(--yc-color-text-complementary), var(--yc-color-line-generic) From 8df6595ec670e1bcdd908db45b6574b95524031d Mon Sep 17 00:00:00 2001 From: sunduckcow Date: Wed, 7 Jun 2023 03:50:55 +0300 Subject: [PATCH 10/14] fix: turned showcase name to pascal case --- src/components/Label/__stories__/Label.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Label/__stories__/Label.stories.tsx b/src/components/Label/__stories__/Label.stories.tsx index 5d4f0cccc2..be5bfe162e 100644 --- a/src/components/Label/__stories__/Label.stories.tsx +++ b/src/components/Label/__stories__/Label.stories.tsx @@ -228,8 +228,8 @@ const KeyValuesTemplate: Story = (args) => (
); -export const showcase = KeyValuesTemplate.bind({}); +export const Showcase = KeyValuesTemplate.bind({}); -showcase.args = { +Showcase.args = { interactive: true, }; From e493a74a51afdb9ea3616874aed0a48df2933cd9 Mon Sep 17 00:00:00 2001 From: sunduckcow Date: Wed, 7 Jun 2023 15:30:53 +0300 Subject: [PATCH 11/14] fix: updated addon border radius --- src/components/Label/Label.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss index 0d96343cc1..fe49aeea2d 100644 --- a/src/components/Label/Label.scss +++ b/src/components/Label/Label.scss @@ -67,7 +67,7 @@ $transitionTimingFunction: ease-in-out; & #{$block}__addon { &_interactive { --yc-button-height: #{$mainSize}; - --yc-button-border-radius: #{$borderRadius}; + --yc-button-border-radius: calc(#{$borderRadius} - var(--border-size)); } } } From 272e29ee29bdcd7ec28b775f86e57c5b9e83bb85 Mon Sep 17 00:00:00 2001 From: sunduckcow Date: Wed, 7 Jun 2023 16:01:34 +0300 Subject: [PATCH 12/14] fix: cleanup --- src/components/Label/Label.scss | 4 +++- src/components/Label/__stories__/Label.stories.tsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss index fe49aeea2d..933034a3c6 100644 --- a/src/components/Label/Label.scss +++ b/src/components/Label/Label.scss @@ -15,7 +15,9 @@ $transitionTimingFunction: ease-in-out; } // hover on interactive label (excluding hover on addon) - &:not(#{$disabled})#{$block}_is-interactive:hover:not(:has(#{$block}__addon_interactive:hover)) { + &:not(#{$disabled})#{$block}_is-interactive:hover:not( + :has(#{$block}__addon_interactive:hover) + ) { background-color: #{$bgHoverColor}; } diff --git a/src/components/Label/__stories__/Label.stories.tsx b/src/components/Label/__stories__/Label.stories.tsx index be5bfe162e..b2bfde4253 100644 --- a/src/components/Label/__stories__/Label.stories.tsx +++ b/src/components/Label/__stories__/Label.stories.tsx @@ -207,7 +207,7 @@ const section = (args: LabelProps) => { return cases.map((label, i) => getLabel({key: i, ...args, ...label})); }; -const KeyValuesTemplate: Story = (args) => ( +const KeyValuesTemplate: StoryFn = (args) => (
From 7549b767b454747a7a05837c830802a6b2c0361a Mon Sep 17 00:00:00 2001 From: sunduckcow Date: Thu, 8 Jun 2023 09:35:35 +0300 Subject: [PATCH 13/14] fix: changed case for borderColor --- src/components/Label/Label.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss index 933034a3c6..a176720ca5 100644 --- a/src/components/Label/Label.scss +++ b/src/components/Label/Label.scss @@ -5,13 +5,13 @@ $disabled: #{$block}_disabled; $transitionDuration: 0.15s; $transitionTimingFunction: ease-in-out; -@mixin themeState($bgColor, $bgHoverColor, $textColor, $BorderColor: none) { +@mixin themeState($bgColor, $bgHoverColor, $textColor, $borderColor: none) { color: #{$textColor}; background-color: #{$bgColor}; - @if $BorderColor != none { + @if $borderColor != none { --border-size: 1px; - border: var(--border-size) solid #{$BorderColor}; + border: var(--border-size) solid #{$borderColor}; } // hover on interactive label (excluding hover on addon) From 88adf54786d6030572c30803af20d7aa6daac2c7 Mon Sep 17 00:00:00 2001 From: sunduckcow Date: Thu, 8 Jun 2023 09:36:31 +0300 Subject: [PATCH 14/14] fix: removed redundant fragment --- src/components/Label/Label.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 9d35c8a2f0..af15f82839 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -103,15 +103,13 @@ export const Label = React.forwardRef(function Label ); const content = hasContent && (
- -
{children}
- {Boolean(value) && ( -
-
:
-
{value}
-
- )} - +
{children}
+ {Boolean(value) && ( +
+
:
+
{value}
+
+ )}
);