feat(button): add inverted (#649)

* feat(button): add inverted * feat(button): update default inverted colors * feat(toast-plate): remove inverted mixin, use prop * chore: update snapshots * feat: remove inverted themes * fix(button): inverted loading * feat(button): update screenshots * feat(icon-button): add inverted props, remove themes (#658) * feat(link): add inverted props, remove themes (#657) * feat: inverted -> colors=inverted * fix(button): update screenshot BREAKING CHANGE: remove inverted themes
core-ds · May 25, 2021 · be321b0 · be321b0
1 parent 7c480a2
commit be321b0
Show file tree

Hide file tree

Showing 133 changed files with 1,576 additions and 1,004 deletions.
diff --git a/.storybook/addons/theme-switcher/index.css b/.storybook/addons/theme-switcher/index.css
@@ -1,9 +1,6 @@
-@import '../../../packages/themes/src/mixins/default-inverted.css';
 @import '../../../packages/themes/src/mixins/click.css';
 @import '../../../packages/themes/src/mixins/site.css';
-@import '../../../packages/themes/src/mixins/site-inverted.css';
 @import '../../../packages/themes/src/mixins/corp.css';
-@import '../../../packages/themes/src/mixins/corp-inverted.css';
 @import '../../../packages/themes/src/mixins/mobile.css';
 
 .tool {
@@ -13,14 +10,10 @@
 
 .label {
     display: inline-block;
-    margin-right: 8px;
+    margin-right: var(--gap-xs);
     font-size: 13px;
 }
 
-[data-theme='default-inverted'] {
-    @mixin theme-default-inverted;
-}
-
 [data-theme='click'] {
     @mixin theme-click;
 }
@@ -29,18 +22,10 @@
     @mixin theme-site;
 }
 
-[data-theme='site-inverted'] {
-    @mixin theme-site-inverted;
-}
-
 [data-theme='corp'] {
     @mixin theme-corp;
 }
 
-[data-theme='corp-inverted'] {
-    @mixin theme-corp-inverted;
-}
-
 [data-theme='mobile'] {
     @mixin theme-mobile;
 }
diff --git a/packages/attach/src/__snapshots__/Component.test.tsx.snap b/packages/attach/src/__snapshots__/Component.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Attach Snapshots tests should match snapshot 1`] = `
     class="component s"
   >
     <button
-      class="component outlined s"
+      class="component outlined s component outlined"
       type="button"
     >
       <span

diff --git a/packages/button/package.json b/packages/button/package.json
@@ -26,7 +26,6 @@
         "react-merge-refs": "^1.1.0"
     },
     "buildThemes": [
-        "site",
-        "site-inverted"
+        "site"
     ]
 }
diff --git a/packages/button/src/Component.tsx b/packages/button/src/Component.tsx
@@ -12,6 +12,13 @@ import { useFocus } from '@alfalab/hooks';
 import { Loader } from '@alfalab/core-components-loader';
 
 import styles from './index.module.css';
+import defaultColors from './default.module.css';
+import invertedColors from './inverted.module.css';
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 
 export type ComponentProps = {
     /**
@@ -63,6 +70,11 @@ export type ComponentProps = {
      * Не переносить текст кнопки на новую строку
      */
     nowrap?: boolean;
+
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
 };
 
 type AnchorButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
@@ -90,6 +102,7 @@ export const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, Bu
             href,
             loading = false,
             nowrap = false,
+            colors = 'default',
             ...restProps
         },
         ref,
@@ -109,12 +122,15 @@ export const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, Bu
                 styles.component,
                 styles[view],
                 styles[size],
+                colorStyles[colors].component,
+                colorStyles[colors][view],
                 {
                     [styles.focused]: focused,
                     [styles.block]: block,
                     [styles.iconOnly]: !children,
                     [styles.nowrap]: nowrap,
                     [styles.loading]: showLoader,
+                    [colorStyles[colors].loading]: showLoader,
                 },
                 className,
             ),

diff --git a/...utton/src/__image_snapshots__/button-inverted-views-themes-click-theme-snap.png b/...utton/src/__image_snapshots__/button-inverted-views-themes-click-theme-snap.png
diff --git a/...button/src/__image_snapshots__/button-inverted-views-themes-corp-theme-snap.png b/...button/src/__image_snapshots__/button-inverted-views-themes-corp-theme-snap.png
diff --git a/...ton/src/__image_snapshots__/button-inverted-views-themes-default-theme-snap.png b/...ton/src/__image_snapshots__/button-inverted-views-themes-default-theme-snap.png
diff --git a/...tton/src/__image_snapshots__/button-inverted-views-themes-mobile-theme-snap.png b/...tton/src/__image_snapshots__/button-inverted-views-themes-mobile-theme-snap.png
diff --git a/...button/src/__image_snapshots__/button-inverted-views-themes-site-theme-snap.png b/...button/src/__image_snapshots__/button-inverted-views-themes-site-theme-snap.png
diff --git a/...tton/src/__image_snapshots__/button-screenshots-views-and-block-sprite-snap.png b/...tton/src/__image_snapshots__/button-screenshots-views-and-block-sprite-snap.png
diff --git a/...on/src/__image_snapshots__/button-screenshots-views-and-loading-view-2-snap.png b/...on/src/__image_snapshots__/button-screenshots-views-and-loading-view-2-snap.png
diff --git a/...on/src/__image_snapshots__/button-screenshots-views-and-loading-view-4-snap.png b/...on/src/__image_snapshots__/button-screenshots-views-and-loading-view-4-snap.png
diff --git a/...on/src/__image_snapshots__/button-screenshots-views-and-loading-view-5-snap.png b/...on/src/__image_snapshots__/button-screenshots-views-and-loading-view-5-snap.png
diff --git a/...ages/button/src/__image_snapshots__/button-views-sizes-disabled-sprite-snap.png b/...ages/button/src/__image_snapshots__/button-views-sizes-disabled-sprite-snap.png
diff --git a/packages/button/src/__image_snapshots__/button-views-sizes-sprite-snap.png b/packages/button/src/__image_snapshots__/button-views-sizes-sprite-snap.png
diff --git a/packages/button/src/__image_snapshots__/button-views-themes-click-theme-snap.png b/packages/button/src/__image_snapshots__/button-views-themes-click-theme-snap.png
diff --git a/packages/button/src/__image_snapshots__/button-views-themes-corp-theme-snap.png b/packages/button/src/__image_snapshots__/button-views-themes-corp-theme-snap.png
diff --git a/packages/button/src/__image_snapshots__/button-views-themes-default-theme-snap.png b/packages/button/src/__image_snapshots__/button-views-themes-default-theme-snap.png
diff --git a/packages/button/src/__image_snapshots__/button-views-themes-mobile-theme-snap.png b/packages/button/src/__image_snapshots__/button-views-themes-mobile-theme-snap.png
diff --git a/packages/button/src/__image_snapshots__/button-views-themes-site-theme-snap.png b/packages/button/src/__image_snapshots__/button-views-themes-site-theme-snap.png
diff --git a/...n-screenshots-hover-state-view-0-snap.png → ...hots-hover-state-view-0-colors-0-snap.png b/...n-screenshots-hover-state-view-0-snap.png → ...hots-hover-state-view-0-colors-0-snap.png
diff --git a/...image_snapshots__/hover-button-screenshots-hover-state-view-0-colors-1-snap.png b/...image_snapshots__/hover-button-screenshots-hover-state-view-0-colors-1-snap.png
diff --git a/...n-screenshots-hover-state-view-1-snap.png → ...hots-hover-state-view-1-colors-0-snap.png b/...n-screenshots-hover-state-view-1-snap.png → ...hots-hover-state-view-1-colors-0-snap.png
diff --git a/...image_snapshots__/hover-button-screenshots-hover-state-view-1-colors-1-snap.png b/...image_snapshots__/hover-button-screenshots-hover-state-view-1-colors-1-snap.png
diff --git a/...image_snapshots__/hover-button-screenshots-hover-state-view-2-colors-0-snap.png b/...image_snapshots__/hover-button-screenshots-hover-state-view-2-colors-0-snap.png
diff --git a/...image_snapshots__/hover-button-screenshots-hover-state-view-2-colors-1-snap.png b/...image_snapshots__/hover-button-screenshots-hover-state-view-2-colors-1-snap.png
diff --git a/...on/src/__image_snapshots__/hover-button-screenshots-hover-state-view-2-snap.png b/...on/src/__image_snapshots__/hover-button-screenshots-hover-state-view-2-snap.png
diff --git a/...n-screenshots-hover-state-view-3-snap.png → ...hots-hover-state-view-3-colors-0-snap.png b/...n-screenshots-hover-state-view-3-snap.png → ...hots-hover-state-view-3-colors-0-snap.png
diff --git a/...image_snapshots__/hover-button-screenshots-hover-state-view-3-colors-1-snap.png b/...image_snapshots__/hover-button-screenshots-hover-state-view-3-colors-1-snap.png
diff --git a/...image_snapshots__/hover-button-screenshots-hover-state-view-4-colors-0-snap.png b/...image_snapshots__/hover-button-screenshots-hover-state-view-4-colors-0-snap.png
diff --git a/...image_snapshots__/hover-button-screenshots-hover-state-view-4-colors-1-snap.png b/...image_snapshots__/hover-button-screenshots-hover-state-view-4-colors-1-snap.png
diff --git a/...on/src/__image_snapshots__/hover-button-screenshots-hover-state-view-4-snap.png b/...on/src/__image_snapshots__/hover-button-screenshots-hover-state-view-4-snap.png
diff --git a/...n-screenshots-hover-state-view-5-snap.png → ...hots-hover-state-view-5-colors-0-snap.png b/...n-screenshots-hover-state-view-5-snap.png → ...hots-hover-state-view-5-colors-0-snap.png
diff --git a/...image_snapshots__/hover-button-screenshots-hover-state-view-5-colors-1-snap.png b/...image_snapshots__/hover-button-screenshots-hover-state-view-5-colors-1-snap.png
diff --git a/...screenshots-pressed-state-view-0-snap.png → ...ts-pressed-state-view-0-colors-0-snap.png b/...screenshots-pressed-state-view-0-snap.png → ...ts-pressed-state-view-0-colors-0-snap.png
diff --git a/...age_snapshots__/hover-button-screenshots-pressed-state-view-0-colors-1-snap.png b/...age_snapshots__/hover-button-screenshots-pressed-state-view-0-colors-1-snap.png
diff --git a/...screenshots-pressed-state-view-1-snap.png → ...ts-pressed-state-view-1-colors-0-snap.png b/...screenshots-pressed-state-view-1-snap.png → ...ts-pressed-state-view-1-colors-0-snap.png
diff --git a/...age_snapshots__/hover-button-screenshots-pressed-state-view-1-colors-1-snap.png b/...age_snapshots__/hover-button-screenshots-pressed-state-view-1-colors-1-snap.png
diff --git a/...age_snapshots__/hover-button-screenshots-pressed-state-view-2-colors-0-snap.png b/...age_snapshots__/hover-button-screenshots-pressed-state-view-2-colors-0-snap.png
diff --git a/...age_snapshots__/hover-button-screenshots-pressed-state-view-2-colors-1-snap.png b/...age_snapshots__/hover-button-screenshots-pressed-state-view-2-colors-1-snap.png
diff --git a/.../src/__image_snapshots__/hover-button-screenshots-pressed-state-view-2-snap.png b/.../src/__image_snapshots__/hover-button-screenshots-pressed-state-view-2-snap.png
diff --git a/...screenshots-pressed-state-view-3-snap.png → ...ts-pressed-state-view-3-colors-0-snap.png b/...screenshots-pressed-state-view-3-snap.png → ...ts-pressed-state-view-3-colors-0-snap.png
diff --git a/...age_snapshots__/hover-button-screenshots-pressed-state-view-3-colors-1-snap.png b/...age_snapshots__/hover-button-screenshots-pressed-state-view-3-colors-1-snap.png
diff --git a/...age_snapshots__/hover-button-screenshots-pressed-state-view-4-colors-0-snap.png b/...age_snapshots__/hover-button-screenshots-pressed-state-view-4-colors-0-snap.png
diff --git a/...age_snapshots__/hover-button-screenshots-pressed-state-view-4-colors-1-snap.png b/...age_snapshots__/hover-button-screenshots-pressed-state-view-4-colors-1-snap.png
diff --git a/.../src/__image_snapshots__/hover-button-screenshots-pressed-state-view-4-snap.png b/.../src/__image_snapshots__/hover-button-screenshots-pressed-state-view-4-snap.png
diff --git a/...screenshots-pressed-state-view-5-snap.png → ...ts-pressed-state-view-5-colors-0-snap.png b/...screenshots-pressed-state-view-5-snap.png → ...ts-pressed-state-view-5-colors-0-snap.png
diff --git a/...age_snapshots__/hover-button-screenshots-pressed-state-view-5-colors-1-snap.png b/...age_snapshots__/hover-button-screenshots-pressed-state-view-5-colors-1-snap.png
diff --git a/packages/button/src/__snapshots__/Component.test.tsx.snap b/packages/button/src/__snapshots__/Component.test.tsx.snap
@@ -6,14 +6,14 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="component secondary m iconOnly"
+        class="component secondary m component secondary iconOnly"
         type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
-      class="component secondary m iconOnly"
+      class="component secondary m component secondary iconOnly"
       type="button"
     />
   </div>,
@@ -77,14 +77,14 @@ Object {
   "baseElement": <body>
     <div>
       <a
-        class="component secondary m iconOnly"
+        class="component secondary m component secondary iconOnly"
         href="https://some-url"
       />
     </div>
   </body>,
   "container": <div>
     <a
-      class="component secondary m iconOnly"
+      class="component secondary m component secondary iconOnly"
       href="https://some-url"
     />
   </div>,
@@ -148,14 +148,14 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="component secondary m iconOnly"
+        class="component secondary m component secondary iconOnly"
         type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
-      class="component secondary m iconOnly"
+      class="component secondary m component secondary iconOnly"
       type="button"
     />
   </div>,
@@ -219,7 +219,7 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="component secondary m iconOnly"
+        class="component secondary m component secondary iconOnly"
         type="button"
       >
         <span
@@ -234,7 +234,7 @@ Object {
   </body>,
   "container": <div>
     <button
-      class="component secondary m iconOnly"
+      class="component secondary m component secondary iconOnly"
       type="button"
     >
       <span
@@ -306,7 +306,7 @@ Object {
   "baseElement": <body>
     <div>
       <a
-        class="component secondary m iconOnly loading"
+        class="component secondary m component secondary iconOnly loading"
         href="https://some-url"
       >
         <svg
@@ -336,7 +336,7 @@ Object {
   </body>,
   "container": <div>
     <a
-      class="component secondary m iconOnly loading"
+      class="component secondary m component secondary iconOnly loading"
       href="https://some-url"
     >
       <svg
@@ -423,7 +423,7 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="component secondary m iconOnly loading"
+        class="component secondary m component secondary iconOnly loading"
         disabled=""
         type="button"
       >
@@ -454,7 +454,7 @@ Object {
   </body>,
   "container": <div>
     <button
-      class="component secondary m iconOnly loading"
+      class="component secondary m component secondary iconOnly loading"
       disabled=""
       type="button"
     >
@@ -542,7 +542,7 @@ Object {
   "baseElement": <body>
     <div>
       <button
-        class="component secondary m iconOnly"
+        class="component secondary m component secondary iconOnly"
         type="button"
       >
         <span
@@ -557,7 +557,7 @@ Object {
   </body>,
   "container": <div>
     <button
-      class="component secondary m iconOnly"
+      class="component secondary m component secondary iconOnly"
       type="button"
     >
       <span