feat(Label): implement css api

gravity-ui · Nov 15, 2024 · 68f6a07 · 68f6a07
1 parent f9d75e8
commit 68f6a07
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 14 deletions.
diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss
@@ -9,14 +9,15 @@ $transition-timing-function: ease-in-out;
     --_--bg-color: none;
     --_--bg-color-hover: none;
     --_--text-color: none;
+    --_--font-size: var(--g-text-body-1-font-size);
 
     display: inline-flex;
     align-items: center;
     position: relative;
-    height: var(--_--height);
-    border-radius: var(--_--border-radius);
-    color: var(--_--text-color);
-    background-color: var(--_--bg-color);
+    height: var(--g-label-height, var(--_--height));
+    border-radius: var(--g-label-border-radius, var(--_--border-radius));
+    color: var(--g-label-text-color, var(--_--text-color));
+    background-color: var(--g-label-background-color, var(--_--bg-color));
     transition-property: opacity, color, background-color;
     transition-duration: $transition-duration;
     transition-timing-function: $transition-timing-function;
@@ -25,12 +26,14 @@ $transition-timing-function: ease-in-out;
     isolation: isolate;
 
     &__text {
-        @include mixins.text-body-1();
         display: flex;
         align-items: baseline;
-        margin: 0 var(--_--margin-inline);
+        margin: 0 var(--g-label-margin-inline, var(--_--margin-inline));
         width: 100%;
-        line-height: var(--_--height);
+        font-family: var(--g-text-body-font-family);
+        font-weight: var(--g-text-body-font-weight);
+        font-size: var(--g-label-font-size, var(--_--font-size));
+        line-height: var(--g-label-height, var(--_--height));
         text-align: center;
         white-space: nowrap;
         overflow: hidden;
@@ -67,9 +70,9 @@ $transition-timing-function: ease-in-out;
         display: flex;
         align-items: center;
         justify-content: center;
-        width: var(--_--height);
-        height: var(--_--height);
-        border-radius: var(--_--border-radius);
+        width: var(--g-label-height, var(--_--height));
+        height: var(--g-label-height, var(--_--height));
+        border-radius: var(--g-label-border-radius, var(--_--border-radius));
 
         &_side_start,
         &_side_end {
@@ -93,7 +96,7 @@ $transition-timing-function: ease-in-out;
             @include mixins.button-reset();
             z-index: 2;
             cursor: pointer;
-            color: var(--_--text-color);
+            color: var(--g-label-text-color, var(--_--text-color));
             background-color: transparent;
             transition:
                 color $transition-duration $transition-timing-function,
@@ -189,7 +192,8 @@ $transition-timing-function: ease-in-out;
             --_--bg-color-hover: var(--g-color-base-simple-hover);
             --_--text-color: var(--g-color-text-complementary);
 
-            box-shadow: inset 0 0 0 1px var(--g-color-line-generic);
+            box-shadow: inset 0 0 0 var(--g-label-border-width, 1px)
+                var(--g-label-border-color, var(--g-color-line-generic));
         }
     }
 
@@ -204,12 +208,14 @@ $transition-timing-function: ease-in-out;
     // hover styles
     &_interactive:hover:not(:has(#{$block}__addon_type_button:hover)),
     &__addon_type_button:hover {
-        background-color: var(--_--bg-color-hover);
+        background-color: var(--g-label-background-color-hover, var(--_--bg-color-hover));
     }
 
     // focus styles
     &__main-button:focus-visible,
     &__addon_type_button:focus-visible {
-        outline: 2px solid var(--g-color-line-focus);
+        outline: var(--g-label-focus-outline-width, 2px) var(--g-label-focus-outline-style, solid)
+            var(--g-label-focus-outline-color, var(--g-color-line-focus));
+        outline-offset: var(--g-label-focus-outline-offset, 0);
     }
 }
diff --git a/src/components/Label/README.md b/src/components/Label/README.md
@@ -270,3 +270,21 @@ LANDING_BLOCK-->
 | value            | Label value (displayed as "children : value") |            `string`            |             |
 | title            | HTML `title` attribute                        |            `string`            |             |
 | qa               | HTML `data-qa` attribute, used in tests       |            `string`            |             |
+
+## CSS API
+
+| Name                               | Description               |
+| :--------------------------------- | :------------------------ |
+| `--g-label-text-color`             | Text color                |
+| `--g-label-background-color`       | Background color          |
+| `--g-label-background-color-hover` | Background color on hover |
+| `--g-label-border-width`           | Border width              |
+| `--g-label-border-color`           | Border color              |
+| `--g-label-focus-outline-width`    | Focus outline color       |
+| `--g-label-focus-outline-color`    | Focus outline color       |
+| `--g-label-focus-outline-style`    | Focus outline style       |
+| `--g-label-focus-outline-offset`   | Focus outline offset      |
+| `--g-label-height`                 | Height, line-height       |
+| `--g-label-border-radius`          | Border radius             |
+| `--g-label-font-size`              | Text font size            |
+| `--g-label-margin-inline`          | Margin inline             |
diff --git a/src/components/Label/__stories__/Label.stories.tsx b/src/components/Label/__stories__/Label.stories.tsx
@@ -159,3 +159,30 @@ export const ShowcaseStory: Story = {
     render: () => <LabelShowcase />,
     name: 'Showcase',
 };
+
+export const Custom: Story = {
+    args: {
+        children: 'Custom label',
+    },
+    render: (args) => (
+        <React.Fragment>
+            <style>
+                {`.g-root {
+                    --g-label-text-color: #fff;
+                    --g-label-text-color-hover: #fff;
+                    --g-label-background-color: #9a2eff;
+                    --g-label-background-color-hover: #8526de;
+                    --g-label-border-width: 5px;
+                    --g-label-border-color: #8526de;
+                    --g-label-height: 60px;
+                    --g-label-padding: 36px;
+                    --g-label-font-size: 20px;
+                    --g-label-border-radius: 40px 20px;
+                    --g-label-focus-outline-color: #9a2eff;
+                    --g-label-focus-outline-offset: 4px;
+                }`}
+            </style>
+            <Label interactive theme="clear" type="close" {...args} />
+        </React.Fragment>
+    ),
+};