Browse Source

[frontend] Add Fluid styling to the HueButton component

Johan Ahlen 5 years ago
parent
commit
1755905992

+ 127 - 4
desktop/core/src/desktop/js/components/HueButton.vue

@@ -18,9 +18,16 @@
 
 
 <template>
 <template>
   <button
   <button
-    class="btn"
+    class="hue-btn"
     type="button"
     type="button"
-    :class="{ 'btn-primary': primary, 'btn-xs': small }"
+    :class="{
+      'hue-btn-primary': primary,
+      'hue-btn-alert': alert,
+      'hue-btn-borderless': borderless,
+      'hue-btn-small': small,
+      'hue-btn-large': large
+    }"
+    :disabled="disabled"
     @click="$emit('click')"
     @click="$emit('click')"
   >
   >
     <slot />
     <slot />
@@ -37,12 +44,128 @@
     @Prop({ required: false })
     @Prop({ required: false })
     primary?: boolean;
     primary?: boolean;
     @Prop({ required: false })
     @Prop({ required: false })
+    alert?: boolean;
+    @Prop({ required: false })
+    borderless?: boolean;
+    @Prop({ required: false })
     small?: boolean;
     small?: boolean;
+    @Prop({ required: false })
+    large?: boolean;
+    @Prop({ required: false })
+    disabled?: boolean;
   }
   }
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
-  .btn {
-    border-radius: 3px;
+  @import './styles/colors';
+  @import './styles/variables';
+
+  .hue-btn {
+    height: 32px;
+    border-radius: $fluid-border-radius;
+    border: solid 1px $fluid-gray-300;
+    background-color: $fluid-white;
+    color: $fluid-blue-500;
+    padding: 0 12px;
+
+    &.hue-btn-small {
+      font-size: 12px;
+      height: 24px;
+      padding: 0 8px;
+    }
+
+    &.hue-btn-large {
+      font-size: 16px;
+      height: 40px;
+      padding: 0 20px;
+    }
+
+    &:hover {
+      border: solid 1px $fluid-blue-700;
+    }
+
+    &:active {
+      border: solid 1px $fluid-blue-800;
+    }
+
+    &[disabled] {
+      cursor: default;
+      color: $fluid-gray-400;
+      border: solid 1px $fluid-gray-200;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      border: solid 1px $fluid-blue-800;
+      outline: $fluid-blue-100 auto 4px;
+    }
+
+    &.hue-btn-primary:not([disabled]) {
+      color: $fluid-white;
+      background-color: $fluid-blue-500;
+      border: solid 1px $fluid-blue-500;
+
+      &:hover {
+        background-color: $fluid-blue-700;
+        border: solid 1px $fluid-blue-700;
+      }
+
+      &.active {
+        background-color: $fluid-blue-800;
+        border: solid 1px $fluid-blue-800;
+      }
+
+      &:focus-visible {
+        border: solid 1px $fluid-gray-900;
+      }
+    }
+
+    &.hue-btn-alert:not([disabled]) {
+      color: $fluid-white;
+      background-color: $fluid-red-500;
+      border: solid 1px $fluid-red-500;
+
+      &:hover {
+        background-color: $fluid-red-700;
+        border: solid 1px $fluid-red-700;
+      }
+
+      &:active {
+        background-color: $fluid-red-800;
+        border: solid 1px $fluid-red-800;
+      }
+
+      &:focus-visible {
+        border: solid 1px $fluid-red-800;
+        outline-color: $fluid-red-100;
+        outline-width: 4px;
+      }
+    }
+
+    &.hue-btn-borderless:not([disabled]) {
+      border: solid 1px transparent;
+
+      &:hover {
+        border: solid 1px $fluid-gray-300;
+      }
+
+      &:active {
+        border: solid 1px $fluid-gray-400;
+      }
+    }
+
+    &.hue-btn-borderless[disabled] {
+      border: solid 1px transparent;
+      color: $fluid-gray-400;
+    }
+
+    &.hue-btn-alert[disabled],
+    &.hue-btn-primary[disabled] {
+      background-color: $fluid-gray-200;
+      border: solid 1px $fluid-gray-200;
+    }
   }
   }
 </style>
 </style>

+ 1 - 1
desktop/core/src/desktop/js/components/__snapshots__/DateRangePicker.test.ts.snap

@@ -5,7 +5,7 @@ exports[`DateRangePicker.vue should render 1`] = `
   class="hue-dropdown-panel"
   class="hue-dropdown-panel"
 >
 >
   <button
   <button
-    class="btn"
+    class="hue-btn"
     type="button"
     type="button"
   >
   >
     
     

+ 1 - 1
desktop/core/src/desktop/js/components/__snapshots__/HueButton.test.ts.snap

@@ -2,7 +2,7 @@
 
 
 exports[`HueButton.vue should render 1`] = `
 exports[`HueButton.vue should render 1`] = `
 <button
 <button
-  class="btn"
+  class="hue-btn"
   type="button"
   type="button"
 />
 />
 `;
 `;

+ 2 - 2
desktop/core/src/desktop/js/components/dropdown/__snapshots__/DropdownMenu.test.ts.snap

@@ -5,7 +5,7 @@ exports[`DropdownMenu.vue should render dropdown with slots 1`] = `
   class="hue-dropdown-panel hue-dropdown-menu"
   class="hue-dropdown-panel hue-dropdown-menu"
 >
 >
   <button
   <button
-    class="btn"
+    class="hue-btn"
     type="button"
     type="button"
   >
   >
     
     
@@ -40,7 +40,7 @@ exports[`DropdownMenu.vue should render empty dropdown 1`] = `
   class="hue-dropdown-panel hue-dropdown-menu"
   class="hue-dropdown-panel hue-dropdown-menu"
 >
 >
   <button
   <button
-    class="btn"
+    class="hue-btn"
     type="button"
     type="button"
   >
   >