feat(button): handle scss backward compatibility

lumapps · Aug 21, 2019 · ecbf7ea · ecbf7ea
1 parent 0e7c617
commit ecbf7ea
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 199 deletions.
diff --git a/core/scss/_lumx.scss → core/scss/_lumx-lumapps.scss b/core/scss/_lumx.scss → core/scss/_lumx-lumapps.scss
@@ -1,12 +1,10 @@
-///* ========================================================================
-//   #FRAMEWORK
-//   ======================================================================== */
-
 $mdi-font-path: '../../node_modules/@mdi/font/fonts' !default;
 
 @import 'bourbon';
 @import 'materialdesignicons';
 @import 'mq';
+@import 'core-lumapps';
+@import 'components-lumapps';
 @import 'settings/settings.color-palette';
 @import 'settings/settings.colors';
 @import 'settings/settings.core';

diff --git a/core/scss/_lumx-material.scss b/core/scss/_lumx-material.scss
@@ -0,0 +1,3 @@
+@import 'core-material';
+@import 'components-material';
+@import 'lumx-lumapps';
diff --git a/demo/index.html b/demo/index.html
@@ -52,6 +52,7 @@
         <script src="node_modules/jquery/dist/jquery.js"></script>
         <script src="node_modules/velocity-animate/velocity.js"></script>
         <script src="node_modules/moment/min/moment-with-locales.js"></script>
+        <script src="node_modules/focus-visible/dist/focus-visible.js" type="text/javascript"></script>
 
         <!-- Angular -->
         <script src="node_modules/angular/angular.js"></script>

diff --git a/demo/scss/base/_page.scss b/demo/scss/base/_page.scss
@@ -4,14 +4,13 @@
 
 // body
 body {
-    font-family: Roboto;
     background-color: $grey-200;
 }
 
 code {
     padding: 2px 4px;
-    border-radius: $base-round;
     background-color: $indigo-50;
-    font-size: 90%;
+    border-radius: $base-round;
     color: $primary;
+    font-size: 90%;
 }
diff --git a/demo/scss/lumx.scss b/demo/scss/lumx.scss
@@ -2,7 +2,7 @@
 //    #LUMX
 //\*------------------------------------*/
 
-@import '../../core/scss/lumx';
+@import '../../core/scss/lumx-material';
 @import 'tools/mixins';
 @import 'base/page';
 @import 'layout/header';

diff --git a/modules/button/js/button_directive.js b/modules/button/js/button_directive.js
@@ -36,7 +36,12 @@ function ButtonDirective() {
     }
 
     function link(scope, el, attrs) {
-        if (!attrs.lxVariant || attrs.lxVariant === 'button') {
+        if (
+            (!attrs.lxVariant && !attrs.lxType) ||
+            attrs.lxVariant === 'button' ||
+            attrs.lxType === 'raised' ||
+            attrs.lxType === 'flat'
+        ) {
             const leftIcon = el.find('i:first-child');
             const rightIcon = el.find('i:last-child');
             const label = el.find('span');
@@ -101,7 +106,6 @@ function ButtonDirective() {
                 return;
             }
 
-            // Backward compatibility.
             const sizeFallback = {
                 xs: 's',
                 s: 's',
@@ -143,16 +147,6 @@ function ButtonDirective() {
             }).addClass(`${CSS_PREFIX}-button--variant-${variant}`);
         });
 
-        scope.$watch(attrs.lxIsSelected, (isSelected) => {
-            if (isSelected) {
-                el.addClass(`${CSS_PREFIX}-button--is-selected`);
-            } else {
-                el.removeClass(`${CSS_PREFIX}-button--is-selected`);
-            }
-        });
-
-        // Backward compatibility.
-
         attrs.$observe('lxType', (type) => {
             if (!type) {
                 return;
@@ -175,6 +169,14 @@ function ButtonDirective() {
                 }).addClass(`${CSS_PREFIX}-button--variant-icon`);
             }
         });
+
+        scope.$watch(attrs.lxIsSelected, (isSelected) => {
+            if (isSelected) {
+                el.addClass(`${CSS_PREFIX}-button--is-selected`);
+            } else {
+                el.removeClass(`${CSS_PREFIX}-button--is-selected`);
+            }
+        });
     }
 
     return {

diff --git a/modules/button/scss/_button.scss b/modules/button/scss/_button.scss
@@ -1,152 +1,85 @@
-///*------------------------------------*\
-//    #BUTTON
-//\*------------------------------------*/
+/* ==========================================================================
+   Button
+   ========================================================================== */
+
+$btn-emphasis-fallback: (
+    'raised': 'emphasis-high',
+    'flat': 'emphasis-low',
+    'fab': 'emphasis-high',
+    'icon': 'emphasis-low',
+);
+
+$btn-size-fallback: (
+    'xs': 's',
+    's': 's',
+    'm': 'm',
+    'l': 'm',
+    'xl': 'm',
+);
+
+$btn-variant-fallback: (
+    'raised': 'variant-button',
+    'flat': 'variant-button',
+    'fab': 'variant-icon',
+    'icon': 'variant-icon',
+);
 
-// Button vars
-$btn-font-size: ('xs': 10px, 's': 13px, 'm': 14px, 'l': 16px, 'xl': 16px);
-$btn-icon-size: ('xs': 14px, 's': 18px, 'm': 20px, 'l': 24px, 'xl': 24px);
-$btn-fab-size: ('xs': 14px, 's': 18px, 'm': 20px, 'l': 20px, 'xl': 24px);
-
-
-
-
-
-// Button mixins
 @mixin btn($size, $color, $type, $disabled: null) {
-    @include btn-reset();
-
-    @if $disabled {
-        @include btn-disabled($type);
-    }
-
+    @include lumx-button-base;
+    @include lumx-state-transition;
     @include btn-size($size, $type);
     @include btn-color($color, $type);
     @include btn-type($type);
 }
 
 @mixin btn-size($size, $type: null) {
-    line-height: map-get($sizes, $size);
-
-    @if $type == 'raised' or $type == 'flat' {
-        min-width: 64px;
-        @include font-size(map-get($btn-font-size, $size));
-    }
-
-    @if $type == 'raised' {
-        padding-left: $base-spacing-unit * 2;
-        padding-right: $base-spacing-unit * 2;
-    }
-
-    @if $type == 'flat' {
-        padding-left: $base-spacing-unit;
-        padding-right: $base-spacing-unit;
-    }
-
-    @if $type == 'icon' or $type == 'fab' {
-        @include size(map-get($sizes, $size));
+    @include lumx-button-size(
+        map-get($btn-emphasis-fallback, $type),
+        map-get($btn-variant-fallback, $type),
+        map-get($btn-size-fallback, $size)
+    );
+
+    @if (map-get($btn-variant-fallback, $type) == 'variant-button') {
+        @include lumx-button-text(map-get($btn-size-fallback, $size));
+        pointer-events: visible;
+    } @else {
+        i {
+            @include lumx-button-icon(variant-icon, position-left, map-get($btn-size-fallback, $size));
+        }
     }
 
-    @if $type == 'icon' {
-        @include font-size(map-get($btn-icon-size, $size));
+    @if (map-get($btn-variant-fallback, $type) == 'variant-button') {
+        @if (map-get($btn-emphasis-fallback, $type) == 'emphasis-high') {
+            @if (map-get($btn-size-fallback, $size) == 'm') {
+                padding: 0 $lumx-spacing-unit * 2;
+            } @else {
+                padding: 0 $lumx-spacing-unit * 1.5;
+            }
+        } @else {
+            padding: 0 $lumx-spacing-unit;
+        }
     }
 
-    @if $type == 'fab' {
-        @include font-size(map-get($btn-fab-size, $size));
+    .ripple {
+        display: none;
     }
 }
 
 @mixin btn-color($color, $type) {
-    @if $type == 'raised' or $type == 'fab' {
-        @if $color == 'white' or $color == 'light-blue' or $color == 'cyan' or $color == 'green' or $color == 'light-green' or $color == 'lime' or $color == 'yellow' or $color == 'amber' or $color == 'orange' or $color == 'grey' {
-            color: $black-1;
-        } @else {
-            color: $white-1;
-        }
-
-        background-color: map-get($colors, $color);
-
-        .ripple {
-            z-index: -1;
-            background-color: darken(map-get($colors, $color), 50%);
-        }
-    }
-
-    @if $type == 'flat' or $type == 'icon' {
-        color: map-get($colors, $color);
-
-        .ripple {
-            z-index: -1;
-            background-color: map-get($colors, $color);
-        }
-
-        &:hover {
-            background-color: rgba(map-get($colors, $color), 0.12);
-        }
-    }
+    @include lumx-button-color(map-get($btn-emphasis-fallback, $type), $color, dark);
 }
 
 @mixin btn-type($type) {
-    @if $type == 'raised' or $type == 'flat' {
-        border-radius: $base-round;
-        font-weight: 500;
-        text-transform: uppercase;
-    }
-
-    @if $type == 'raised' or $type == 'fab' {
-        @include transition-property(box-shadow);
-        @include transition-duration(0.2s);
-    }
-
-    @if $type == 'raised' {
-        @include elevation(2);
-
-        &:active {
-            @include elevation(8);
-        }
-    }
-
-    @if $type == 'fab' {
-        @include elevation(6);
-
-        &:active {
-            @include elevation(12);
-        }
-    }
-
-    @if $type == 'flat' or $type == 'icon' {
-        @include transition-property(background-color);
-        @include transition-duration(0.2s);
-    }
-
-    @if $type == 'icon' or $type == 'fab' {
-        border-radius: 50%;
-    }
 }
 
 @mixin btn-disabled($type) {
-    box-shadow: none !important;
-    cursor: not-allowed !important;
-    color: $black-3 !important;
-
-    @if $type == 'raised' or $type == 'fab' {
-        background-color: $grey-300 !important;
-    }
-
-    @if $type == 'flat' or $type == 'icon' {
-        background-color: transparent !important;
-    }
 }
 
-
-
-
-
-// Button base styles
 .btn {
-    @include btn-reset();
+    @include lumx-button-base;
+    @include lumx-state-transition;
 }
 
-// Size
 @each $key, $size in $sizes {
     .btn--raised.btn--#{$key} {
         @include btn-size($key, 'raised');
@@ -165,8 +98,7 @@ $btn-fab-size: ('xs': 14px, 's': 18px, 'm': 20px, 'l': 20px, 'xl': 24px);
     }
 }
 
-// Color
-@each $key, $color in $colors {
+@each $key, $color in $lumx-theme-color-palette {
     .btn--raised.btn--#{$key} {
         @include btn-color($key, 'raised');
     }
@@ -183,40 +115,3 @@ $btn-fab-size: ('xs': 14px, 's': 18px, 'm': 20px, 'l': 20px, 'xl': 24px);
         @include btn-color($key, 'fab');
     }
 }
-
-// Type
-.btn--raised {
-    @include btn-type('raised');
-
-    &[disabled],
-    &.btn--is-disabled {
-        @include btn-disabled('raised');
-    }
-}
-
-.btn--flat {
-    @include btn-type('flat');
-
-    &[disabled],
-    &.btn--is-disabled {
-        @include btn-disabled('flat');
-    }
-}
-
-.btn--icon {
-    @include btn-type('icon');
-
-    &[disabled],
-    &.btn--is-disabled {
-        @include btn-disabled('icon');
-    }
-}
-
-.btn--fab {
-    @include btn-type('fab');
-
-    &[disabled],
-    &.btn--is-disabled {
-        @include btn-disabled('fab');
-    }
-}
diff --git a/package.json b/package.json
@@ -47,9 +47,10 @@
     },
     "dependencies": {
         "@lumx/core": "0.6.19",
-        "@lumx/icons": "0.7.15",
+        "@lumx/icons": "0.7.16",
         "angular": "^1.5.11",
         "bourbon": "^4.2.7",
+        "focus-visible": "^4.1.5",
         "jquery": "^3.4.1",
         "moment": "^2.24.0",
         "sass-mq": "^5.0.1",