fix(button): add custom properties and remove --ion-color overrides (#…

…15463) - adds custom properties - removes the overrides of `--ion-color-*` variables - documents the properties references #14808 references #14853 references #14850
ionic-team · Sep 5, 2018 · 3af4361 · 3af4361
1 parent 1f24370
commit 3af4361
Show file tree

Hide file tree

Showing 15 changed files with 489 additions and 156 deletions.
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -4011,7 +4011,7 @@ export namespace Components {
     * The text to display on the ok button. Default: `OK`.
     */
     'okText': string;
-    'open': (ev?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement>;
+    'open': (ev?: UIEvent | undefined) => Promise<HTMLIonPopoverElement | HTMLIonActionSheetElement | HTMLIonAlertElement>;
     /**
     * The text to display when the select is empty.
     */

diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss
@@ -31,12 +31,7 @@
   --opacity: #{$button-ios-opacity-hover};
 }
 
-:host(.button-solid.focused) {
-  --background: #{current-color(shade)};
-}
-
 :host(.button-solid.activated) {
-  --background: #{current-color(shade)};
   --opacity: #{$button-ios-opacity-activated};
 }
 
@@ -47,22 +42,16 @@
   --border-radius: #{$button-ios-outline-border-radius};
   --border-width: #{$button-ios-outline-border-width};
   --border-style: #{$button-ios-outline-border-style};
+  --background-activated: #{ion-color(primary, base)};
+  --background-focused: #{ion-color(primary, base, .1)};
+  --color-activated: #{ion-color(primary, contrast)};
 }
 
-:host(.button-outline.activated) {
-  --background: #{current-color(base)};
-
-  color: #{current-color(contrast)};
-}
-
-:host(.button-outline.focused) {
-  --background: #{current-color(base, .1)};
+:host(.button-outline.activated.ion-color) .button-native {
+  background: current-color(base);
+  color: current-color(contrast);
 }
 
-:host(.button-outline.activated.focused) {
-  --border-color: #{current-color(shade)};
-  --background: #{current-color(shade)};
-}
 
 // iOS Clear Button
 // --------------------------------------------------
@@ -75,8 +64,11 @@
   --opacity: #{$button-ios-clear-opacity-activated};
 }
 
-:host(.button-clear.focused) {
-  --background: #{current-color(base, .1)};
+:host(.button-clear) {
+  --background-activated: transparent;
+  --background-focused: #{ion-color(primary, base, .1)};
+  --color-activated: #{ion-color(primary, base)};
+  --color-focused: #{ion-color(primary, base)};
 }
 
 

diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss
@@ -5,9 +5,6 @@
 // --------------------------------------------------
 
 :host {
-  --transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function,
-              background-color $button-md-transition-duration $button-md-transition-timing-function,
-              color $button-md-transition-duration $button-md-transition-timing-function};
   --border-radius: #{$button-md-border-radius};
   --margin-top: #{$button-md-margin-top};
   --margin-bottom: #{$button-md-margin-bottom};
@@ -18,6 +15,9 @@
   --padding-start: #{$button-md-padding-start};
   --padding-end: #{$button-md-padding-end};
   --height: #{$button-md-height};
+  --transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function,
+                  background-color $button-md-transition-duration $button-md-transition-timing-function,
+                  color $button-md-transition-duration $button-md-transition-timing-function};
 
   font-size: #{$button-md-font-size};
   font-weight: #{$button-md-font-weight};
@@ -36,7 +36,6 @@
 
 :host(.button-solid.activated) {
   --box-shadow: #{$button-md-box-shadow-activated};
-  --background: #{current-color(shade)};
 }
 
 // Material Design Outline Button
@@ -46,14 +45,13 @@
   --border-width: 1px;
   --border-style: solid;
   --box-shadow: none;
+  --background-activated: transparent;
+  --background-focused: #{ion-color(primary, base, .1)};
+  --color-activated: #{ion-color(primary, base)};
 }
 
-:host(.button-outline.activated) {
-  --background: transparent;
-}
-
-:host(.button-outline.focused) {
-  --background: #{current-color(base, .1)};
+:host(.button-outline.activated.ion-color) .button-native {
+  background: transparent;
 }
 
 
@@ -62,6 +60,10 @@
 
 :host(.button-clear) {
   --opacity: #{$button-md-clear-opacity};
+  --background-activated: transparent;
+  --background-focused: #{ion-color(primary, base, .1)};
+  --color-activated: #{ion-color(primary, base)};
+  --color-focused: #{ion-color(primary, base)};
 }
 
 

diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
@@ -4,9 +4,40 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{ion-color(primary, base)};
-  --ion-color-contrast: #{ion-color(primary, contrast)};
-  --ion-color-shade: #{ion-color(primary, shade)};
+  /**
+   * @prop --background: Background of the button
+   * @prop --background-activated: Background of the button when activated
+   * @prop --background-focused: Background of the button when focused
+   *
+   * @prop --color: Text color of the button
+   * @prop --color-activated: Text color of the button when activated
+   * @prop --color-focused: Text color of the button when focused
+   *
+   * @prop --width: Width of the button
+   * @prop --height: Height of the button
+   *
+   * @prop --transition: Transition of the button
+   *
+   * @prop --border-radius: Border radius of the button
+   * @prop --border-width: Border width of the button
+   * @prop --border-style: Border style of the button
+   * @prop --border-color: Border color of the button
+   *
+   * @prop --ripple-color: Color of the button ripple effect
+   *
+   * @prop --box-shadow: Box shadow of the button
+   * @prop --opacity: Opacity of the button
+   *
+   * @prop --margin-top: Margin top of the button
+   * @prop --margin-end: Margin end of the button
+   * @prop --margin-bottom: Margin bottom of the button
+   * @prop --margin-start: Margin start of the button
+   *
+   * @prop --padding-top: Padding top of the button
+   * @prop --padding-end: Padding end of the button
+   * @prop --padding-bottom: Padding bottom of the button
+   * @prop --padding-start: Padding start of the button
+   */
   --overflow: hidden;
   --ripple-color: currentColor;
 
@@ -35,32 +66,79 @@
 // Solid Button
 // --------------------------------------------------
 
+// Default Solid Color
 :host(.button-solid) {
-  --background: #{current-color(base)};
+  --background: #{ion-color(primary, base)};
+  --background-activated: #{ion-color(primary, shade)};
+  --background-focused: #{ion-color(primary, shade)};
+  --color: #{ion-color(primary, contrast)};
+  --color-activated: #{ion-color(primary, contrast)};
+  --color-focused: #{ion-color(primary, contrast)};
+}
+
+// Solid Button with Color
+:host(.button-solid.ion-color) .button-native {
+  background: current-color(base);
+  color: current-color(contrast);
+}
 
-  color: #{current-color(contrast)};
+// Focused/Activated Solid Button with Color
+:host(.button-solid.ion-color.focused) .button-native,
+:host(.button-solid.ion-color.activated) .button-native {
+  background: #{current-color(shade)};
 }
 
 
 // Outline Button
 // --------------------------------------------------
 
+// Default Outline Color
 :host(.button-outline) {
-  --border-color: #{current-color(base)};
+  --border-color: #{ion-color(primary, base)};
   --background: transparent;
+  --color: #{ion-color(primary, base)};
+  --color-focused: #{ion-color(primary, base)};
+}
+
+// Outline Button with Color
+:host(.button-outline.ion-color) .button-native {
+  border-color: current-color(base);
 
-  color: #{current-color(base)};
+  background: transparent;
+  color: current-color(base);
+}
+
+:host(.button-outline.focused.ion-color) .button-native {
+  background: current-color(base, .1);
+  color: current-color(base);
 }
 
 
 // Clear Button
 // --------------------------------------------------
 
+// Default Clear Color
 :host(.button-clear) {
   --border-width: 0;
   --background: transparent;
+  --color: #{ion-color(primary, base)};
+}
+
+// Clear Button with Color
+:host(.button-clear.ion-color) .button-native {
+  background: transparent;
+  color: current-color(base);
+}
 
-  color: #{current-color(base)};
+// Focused Clear Button with Color
+:host(.button-clear.focused.ion-color) .button-native {
+  background: current-color(base, .1);
+  color: current-color(base);
+}
+
+// Activated Clear Button with Color
+:host(.button-clear.activated.ion-color) .button-native {
+  background: transparent;
 }
 
 
@@ -112,17 +190,17 @@
   border-left-width: 0;
 }
 
-
 .button-native {
-  @include text-inherit();
   @include border-radius(var(--border-radius));
   @include font-smoothing();
   @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  @include text-inherit();
 
   display: block;
   position: relative;
 
+  width: var(--width);
   height: var(--height);
 
   transition: var(--transition);
@@ -134,6 +212,7 @@
   outline: none;
 
   background: var(--background);
+  color: var(--color);
 
   line-height: 1;
 
@@ -154,6 +233,17 @@
   pointer-events: none;
 }
 
+:host(.focused) .button-native {
+  background: var(--background-focused);
+  color: var(--color-focused);
+}
+
+:host(.activated) .button-native {
+  background: var(--background-activated);
+  color: var(--color-activated);
+}
+
+
 // .button > .button-container:hover {
 //   opacity: var(--opacity-hover);
 // }

diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
@@ -231,6 +231,7 @@ function getColorClassMap(buttonType: string, color: string | undefined, fill: s
     [`${className}-${mode}`]: true,
   };
   if (color !== undefined) {
+    map[`ion-color`] = true;
     map[`ion-color-${color}`] = true;
   }
   return map;

diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md
@@ -61,6 +61,36 @@ This attribute specifies the size of the button. Setting this attribute will cha
 | `ionFocus` | Emitted when the button has focus.   |
 
 
+## CSS Custom Properties
+
+| Name                     | Description                             |
+| ------------------------ | --------------------------------------- |
+| `--background`           | Background of the button                |
+| `--background-activated` | Background of the button when activated |
+| `--background-focused`   | Background of the button when focused   |
+| `--border-color`         | Border color of the button              |
+| `--border-radius`        | Border radius of the button             |
+| `--border-style`         | Border style of the button              |
+| `--border-width`         | Border width of the button              |
+| `--box-shadow`           | Box shadow of the button                |
+| `--color`                | Text color of the button                |
+| `--color-activated`      | Text color of the button when activated |
+| `--color-focused`        | Text color of the button when focused   |
+| `--height`               | Height of the button                    |
+| `--margin-bottom`        | Margin bottom of the button             |
+| `--margin-end`           | Margin end of the button                |
+| `--margin-start`         | Margin start of the button              |
+| `--margin-top`           | Margin top of the button                |
+| `--opacity`              | Opacity of the button                   |
+| `--padding-bottom`       | Padding bottom of the button            |
+| `--padding-end`          | Padding end of the button               |
+| `--padding-start`        | Padding start of the button             |
+| `--padding-top`          | Padding top of the button               |
+| `--ripple-color`         | Color of the button ripple effect       |
+| `--transition`           | Transition of the button                |
+| `--width`                | Width of the button                     |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*