feat(Label)!: new xs size and click action for more custom label (#380)

gravity-ui · Jan 26, 2023 · c9f7c36 · c9f7c36
1 parent a6db9f8
commit c9f7c36
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 17 deletions.
diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss
@@ -73,7 +73,7 @@ $transitionTimingFunction: ease-in-out;
     }
 
     &_size {
-        &_s {
+        &_xs {
             height: 20px;
 
             & #{$block}__text {
@@ -97,12 +97,48 @@ $transitionTimingFunction: ease-in-out;
             &#{$block}_style {
                 &_default,
                 &_rounded {
-                    border-radius: 4px;
+                    border-radius: var(--yc-border-radius-xs);
 
                     & #{$block}__addon {
                         &_interactive {
                             --yc-button-height: 20px;
-                            --yc-button-border-radius: 4px;
+                            --yc-button-border-radius: 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-icon #{$block}__text {
+                margin-right: 26px;
+            }
+
+            &#{$block}_has-left-icon #{$block}__text {
+                margin-left: 28px;
+            }
+
+            &#{$block}_style {
+                &_default,
+                &_rounded {
+                    border-radius: var(--yc-border-radius-s);
+
+                    & #{$block}__icon {
+                        &_interactive {
+                            --yc-button-height: 24px;
+                            --yc-button-border-radius: var(--yc-border-radius-s);
                         }
                     }
                 }
@@ -132,12 +168,12 @@ $transitionTimingFunction: ease-in-out;
 
             &#{$block}_style {
                 &_default {
-                    border-radius: 4px;
+                    border-radius: var(--yc-border-radius-m);
 
                     & #{$block}__addon {
                         &_interactive {
                             --yc-button-height: 28px;
-                            --yc-button-border-radius: 4px;
+                            --yc-button-border-radius: var(--yc-border-radius-m);
                         }
                     }
                 }

diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
@@ -4,15 +4,19 @@ import {CopyToClipboard, CopyToClipboardStatus} from '../CopyToClipboard';
 import {ClipboardIcon} from '../ClipboardIcon';
 import {Icon} from '../Icon';
 import {CrossIcon} from '../icons/CrossIcon';
-import {Button, ButtonProps} from '../Button';
+import {Button, ButtonProps, ButtonSize} from '../Button';
 import './Label.scss';
 
 const b = block('label');
 
-const sizeMap = {
-    s: {copyIconSize: 12, closeIconSize: 8},
-    m: {copyIconSize: 16, closeIconSize: 10},
+type SizeMapType = {copyIconSize: number; closeIconSize: number; buttonSize: ButtonSize};
+
+const sizeMap: Record<string, SizeMapType> = {
+    xs: {copyIconSize: 12, closeIconSize: 8, buttonSize: 's'},
+    s: {copyIconSize: 12, closeIconSize: 8, buttonSize: 's'},
+    m: {copyIconSize: 12, closeIconSize: 8, buttonSize: 'm'},
 };
+
 const commonActionButtonProps: ButtonProps = {
     pin: 'brick-round',
     className: b('addon', {
@@ -52,7 +56,7 @@ interface LabelDefaultProps {
     /** Label type (plain, with copy text button or with close button) */
     type: 'default' | 'copy' | 'close';
     /** Label size */
-    size: 's' | 'm';
+    size: 'xs' | 's' | 'm';
     /** Label appearance (with round corners or plain) */
     style: 'rounded' | 'default';
 }
@@ -63,7 +67,7 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
     const {
         type = 'default',
         theme = 'normal',
-        size = 's',
+        size = 'xs',
         style = 'default',
         icon,
         children,
@@ -80,27 +84,35 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
 
     const hasContent = Boolean(children !== '' && React.Children.count(children) > 0);
 
-    const typeDefault = type === 'default';
     const typeClose = type === 'close' && hasContent;
     const typeCopy = type === 'copy' && hasContent;
 
-    const hasOnClick = Boolean(onClick) && typeDefault;
+    const hasOnClick = Boolean(onClick);
     const hasCopy = Boolean(typeCopy && copyText);
     const isInteractive = hasOnClick || hasCopy || interactive;
-    const {copyIconSize, closeIconSize} = sizeMap[size];
+    const {copyIconSize, closeIconSize, buttonSize} = sizeMap[size];
 
     const leftIcon = icon && (
         <div className={b('addon', {side: hasContent ? 'left' : undefined})}>{icon}</div>
     );
     const content = hasContent && <div className={b('text')}>{children}</div>;
 
+    const handleCloseClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (hasOnClick) {
+            /* preventing event from bubbling */
+            event.stopPropagation();
+        }
+
+        if (onClose) onClose(event);
+    };
+
     const renderLabel = (status?: CopyToClipboardStatus) => {
         let actionButton: ReactNode;
 
         if (typeCopy) {
             actionButton = (
                 <Button
-                    size={size}
+                    size={buttonSize}
                     extraProps={{'aria-label': copyButtonLabel || undefined}}
                     {...commonActionButtonProps}
                 >
@@ -115,8 +127,8 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
         } else if (typeClose) {
             actionButton = (
                 <Button
-                    onClick={onClose}
-                    size={size}
+                    onClick={onClose ? handleCloseClick : undefined}
+                    size={buttonSize}
                     extraProps={{'aria-label': closeButtonLabel || undefined}}
                     {...commonActionButtonProps}
                 >

diff --git a/src/components/Label/__stories__/Label.stories.tsx b/src/components/Label/__stories__/Label.stories.tsx
@@ -68,6 +68,9 @@ export const Theme = ThemeTemplate.bind({});
 const SizeTemplate: Story<LabelProps> = (args) => {
     return (
         <div className="label-stories">
+            <Label {...args} size="xs">
+                xs
+            </Label>
             <Label {...args} size="s">
                 s
             </Label>
@@ -148,5 +151,20 @@ export const Interactions: Story<LabelProps> = (args) => (
                 </Label>
             </Link>
         </div>
+        <div>
+            <Label
+                {...args}
+                type={'close'}
+                theme={'unknown'}
+                onClick={() => {
+                    console.log('click');
+                }}
+                onClose={() => {
+                    console.log('close');
+                }}
+            >
+                Click and Close
+            </Label>
+        </div>
     </div>
 );
diff --git a/styles/brand.scss b/styles/brand.scss
@@ -1,6 +1,7 @@
 @mixin yc-brand {
     --yc-my-scrollbar-width: 12px;
 
+    --yc-my-border-radius-xs: 5px;
     --yc-my-border-radius-s: 5px;
     --yc-my-border-radius-m: 6px;
     --yc-my-border-radius-l: 8px;

diff --git a/styles/styles.scss b/styles/styles.scss
@@ -38,6 +38,7 @@
 
     --yc-scrollbar-width: var(--yc-my-scrollbar-width);
 
+    --yc-border-radius-xs: var(--yc-my-border-radius-xs);
     --yc-border-radius-s: var(--yc-my-border-radius-s);
     --yc-border-radius-m: var(--yc-my-border-radius-m);
     --yc-border-radius-l: var(--yc-my-border-radius-l);