fix(styles): fixed wrong BEM syntax on button and color classes

fix ZDS-268

fix ZDS-268

Author: byjs-dev

src/elements/button/_button.scss

@@ -16,8 +16,8 @@
     height: $height;
     padding: 0 1.125rem;
 
-    &.#{$prefix}button--primary {
-      $id: 'button--primary';
+    &.#{$prefix}button-primary {
+      $id: 'button-primary';
 
       color: map-get($theme-color-map, $id);
 
@@ -26,22 +26,22 @@
 
       &:hover,
       &:focus,
-      &.#{$prefix}button--primary__hover {
+      &.#{$prefix}button-primary--hover {
         background-color: lighten($bg-color, 10%);
       }
 
       &:disabled,
-      &.#{$prefix}button--primary__disabled {
-        color: map-get($theme-color-map, '#{$id}__disabled');
+      &.#{$prefix}button-primary--disabled {
+        color: map-get($theme-color-map, '#{$id}--disabled');
         background-color: map-get(
           $theme-background-color-map,
-          '#{$id}__disabled'
+          '#{$id}--disabled'
         );
       }
     }
 
-    &.#{$prefix}button--secondary {
-      $id: 'button--secondary';
+    &.#{$prefix}button-secondary {
+      $id: 'button-secondary';
 
       color: map-get($theme-color-map, $id);
 
@@ -52,26 +52,26 @@
 
       &:hover,
       &:focus,
-      &.#{$prefix}button--secondary__hover {
-        color: map-get($theme-color-map, '#{$id}__hover');
-        background-color: map-get($theme-background-color-map, '#{$id}__hover');
-        border-color: map-get($theme-background-color-map, '#{$id}__hover');
+      &.#{$prefix}button-secondary--hover {
+        color: map-get($theme-color-map, '#{$id}--hover');
+        background-color: map-get($theme-background-color-map, '#{$id}--hover');
+        border-color: map-get($theme-background-color-map, '#{$id}--hover');
       }
 
       &:disabled,
-      &.#{$prefix}button--secondary__disabled {
-        color: map-get($theme-color-map, '#{$id}__disabled');
+      &.#{$prefix}button-secondary--disabled {
+        color: map-get($theme-color-map, '#{$id}--disabled');
         background-color: map-get(
           $theme-background-color-map,
-          '#{$id}__disabled'
+          '#{$id}--disabled'
         );
-        border-color: map-get($theme-border-color-map, '#{$id}__disabled');
+        border-color: map-get($theme-border-color-map, '#{$id}--disabled');
         cursor: not-allowed;
       }
     }
   }
 
-  .#{$prefix}button__full {
+  .#{$prefix}button--full {
     display: block;
     width: 100%;
   }

src/elements/button/buttonData.js

@@ -5,18 +5,18 @@ const buttonData = {
     name: 'primary',
     js: `<button type="button" class="${helpers.classPrefix}button ${
       helpers.classPrefix
-    }button--primary" ${
+    }button-primary" ${
       helpers.htmlDataVarType
     }="button">Primary Button</button>`,
     react: false,
     angular: false,
     vue: false
   },
-  primary__disabled: {
-    name: 'primary__disabled',
+  primary_disabled: {
+    name: 'primary_disabled',
     js: `<button type="button" class="${helpers.classPrefix}button ${
       helpers.classPrefix
-    }button--primary ${helpers.classPrefix}button--primary__disabled" ${
+    }button-primary ${helpers.classPrefix}button-primary--disabled" ${
       helpers.htmlDataVarType
     }="button">Primary Button</button>`,
     react: false,
@@ -27,23 +27,34 @@ const buttonData = {
     name: 'secondary',
     js: `<a type="button" class="${helpers.classPrefix}button ${
       helpers.classPrefix
-    }button--secondary" ${
+    }button-secondary" ${
       helpers.htmlDataVarType
     }="button">Secondary Button</a>`,
     react: false,
     angular: false,
     vue: false
   },
-  secondary__disabled: {
-    name: 'secondary__disabled',
+  secondary_disabled: {
+    name: 'secondary_disabled',
     js: `<a type="button" class="${helpers.classPrefix}button ${
       helpers.classPrefix
-    }button--secondary ${helpers.classPrefix}button--secondary__disabled" ${
+    }button-secondary ${helpers.classPrefix}button-secondary--disabled" ${
       helpers.htmlDataVarType
     }="button">Secondary Button</a>`,
     react: false,
     angular: false,
     vue: false
+  },
+  full: {
+    name: 'full',
+    js: `<button type="button" class="${helpers.classPrefix}button ${
+      helpers.classPrefix
+    }button-primary ${helpers.classPrefix}button--full" ${
+      helpers.htmlDataVarType
+    }="button">Primary Button</button>`,
+    react: false,
+    angular: false,
+    vue: false
   }
 };
 

src/guidelines/_colors.scss

@@ -24,38 +24,38 @@ $additional-gray-1: #c1c7c9;
 
 /* FIXME: don 't use additional color in production */
 $theme-color-map: (
-  button--primary: map-get($colormap-base, white),
-  button--primary__disabled: $additional-gray-1,
-  button--secondary: map-get($colormap-base, grey-dark),
-  button--secondary__hover: map-get($colormap-base, white),
-  button--secondary__disabled: $additional-gray-1
+  button-primary: map-get($colormap-base, white),
+  button-primary--disabled: $additional-gray-1,
+  button-secondary: map-get($colormap-base, grey-dark),
+  button-secondary--hover: map-get($colormap-base, white),
+  button-secondary--disabled: $additional-gray-1
 );
 
 $theme-background-color-map: (
-  button--primary: map-get($colormap-base, indigo-blue),
-  button--primary__disabled: map-get($colormap-base, gray-lighter),
-  button--secondary: map-get($colormap-base, white),
-  button--secondary__hover: map-get($colormap-base, indigo-blue),
-  button--secondary__disabled: map-get($colormap-base, white)
+  button-primary: map-get($colormap-base, indigo-blue),
+  button-primary--disabled: map-get($colormap-base, gray-lighter),
+  button-secondary: map-get($colormap-base, white),
+  button-secondary--hover: map-get($colormap-base, indigo-blue),
+  button-secondary--disabled: map-get($colormap-base, white)
 );
 
 $theme-border-color-map: (
-  button--secondary: map-get($colormap-base, indigo-blue),
-  button--secondary__disabled: map-get($colormap-base, gray-lighter)
+  button-secondary: map-get($colormap-base, indigo-blue),
+  button-secondary--disabled: map-get($colormap-base, gray-lighter)
 );
 
 //use darken 15% on hover colors
 $hover-example: darken(map-get($colormap-base, indigo-blue), 15%);
 
 // create dummy color classes
 @each $name, $value in $colormap-base {
-  .#{$prefix}color__#{$name} {
+  .#{$prefix}color--#{$name} {
     color: $value;
   }
-  .#{$prefix}background-color__#{$name} {
+  .#{$prefix}background-color--#{$name} {
     background-color: $value;
   }
-  .#{$prefix}border-color__#{$name} {
+  .#{$prefix}border-color--#{$name} {
     border-color: $value;
   }
 }