feat(icon-button): add negative view (#635)

core-ds · May 7, 2021 · 7006116 · 7006116
1 parent d2f7edc
commit 7006116
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 5 deletions.
diff --git a/packages/icon-button/src/Component.stories.mdx b/packages/icon-button/src/Component.stories.mdx
@@ -23,7 +23,7 @@ import { name, version } from '../package.json';
 <Story name='IconButton'>
     <IconButton
         size={select('size', ['xxs', 'xs', 's'], 's')}
-        view={select('view', ['primary', 'secondary', 'transparent'], 'primary')}
+        view={select('view', ['primary', 'secondary', 'transparent', 'negative'], 'primary')}
         icon={StarMIcon}
     />
 </Story>
@@ -108,6 +108,21 @@ import { IconButton } from '@alfalab/core-components-icon-button';
     </Container>
 </Preview>
 
+- <b>Negative</b>
+
+<Preview>
+    <Container>
+        <Row>
+            <Col>
+                <IconButton view='negative' icon={StarMIcon} />
+            </Col>
+            <Col>
+                <IconButton view='negative' icon={BankAlfaXxlBlackIcon} />
+            </Col>
+        </Row>
+    </Container>
+</Preview>
+
 <Props of={IconButton} />
 
 ## Темы

diff --git a/packages/icon-button/src/Component.tsx b/packages/icon-button/src/Component.tsx
@@ -14,7 +14,7 @@ export type IconButtonProps = {
     /**
      * Тип кнопки
      */
-    view?: 'primary' | 'secondary' | 'transparent';
+    view?: 'primary' | 'secondary' | 'transparent' | 'negative';
 
     /**
      * Размер компонента

diff --git a/...es/icon-button/src/__image_snapshots__/icon-button-hover-view-3-size-0-snap.png b/...es/icon-button/src/__image_snapshots__/icon-button-hover-view-3-size-0-snap.png
diff --git a/...es/icon-button/src/__image_snapshots__/icon-button-press-view-3-size-0-snap.png b/...es/icon-button/src/__image_snapshots__/icon-button-press-view-3-size-0-snap.png
diff --git a/...mage_snapshots__/icon-button-screenshots-views-and-sizes-view-3-size-0-snap.png b/...mage_snapshots__/icon-button-screenshots-views-and-sizes-view-3-size-0-snap.png
diff --git a/...mage_snapshots__/icon-button-screenshots-views-and-sizes-view-3-size-1-snap.png b/...mage_snapshots__/icon-button-screenshots-views-and-sizes-view-3-size-1-snap.png
diff --git a/...mage_snapshots__/icon-button-screenshots-views-and-sizes-view-3-size-2-snap.png b/...mage_snapshots__/icon-button-screenshots-views-and-sizes-view-3-size-2-snap.png
diff --git a/packages/icon-button/src/component.screenshots.test.tsx b/packages/icon-button/src/component.screenshots.test.tsx
@@ -16,7 +16,7 @@ describe(
         cases: generateTestCases({
             componentName: 'IconButton',
             knobs: {
-                view: ['primary', 'secondary', 'transparent'],
+                view: ['primary', 'secondary', 'transparent', 'negative'],
                 size: ['xxs', 'xs', 's'],
             },
             testStory: false,
@@ -33,7 +33,7 @@ describe(
         cases: generateTestCases({
             componentName: 'IconButton',
             knobs: {
-                view: ['primary', 'secondary', 'transparent'],
+                view: ['primary', 'secondary', 'transparent', 'negative'],
                 size: ['s'],
             },
             testStory: false,
@@ -51,7 +51,7 @@ describe(
         cases: generateTestCases({
             componentName: 'IconButton',
             knobs: {
-                view: ['primary', 'secondary', 'transparent'],
+                view: ['primary', 'secondary', 'transparent', 'negative'],
                 size: ['s'],
             },
             testStory: false,

diff --git a/packages/icon-button/src/index.module.css b/packages/icon-button/src/index.module.css
@@ -36,6 +36,13 @@
     --icon-button-transparent-disabled-color: color-mod(
         var(--icon-button-transparent-base-color) alpha(40%)
     );
+
+    /* negative */
+    --icon-button-negative-base-color: var(--color-light-graphic-negative);
+    --icon-button-negative-hover-color: color-mod(var(--icon-button-negative-base-color) tint(30%));
+    --icon-button-negative-active-color: color-mod(
+        var(--icon-button-negative-base-color) tint(50%)
+    );
 }
 
 .primary {
@@ -74,6 +81,18 @@
     }
 }
 
+.negative {
+    color: var(--icon-button-negative-base-color);
+
+    &:hover {
+        color: var(--icon-button-negative-hover-color);
+    }
+
+    &:active {
+        color: var(--icon-button-negative-active-color);
+    }
+}
+
 .xxs {
     width: var(--icon-button-xss-size);
     height: var(--icon-button-xss-size);