refactor(toggle-group): replace prop _colorScheme_ with _variant_ (#663)

* refactor(toggle-group): replace prop 'colorScheme' by 'variant'

* refactor(toggle-group, toggle-button): use JSDoc @deprecated syntax;

Co-authored-by: Arturo Castillo Delgado <ac@iconstorm.com>

packages/components/src/components/toggle-button/__snapshots__/toggle-button.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`Toggle Button snapshots black color scheme 1`] = `
 <scale-toggle-button color-scheme="black" icon-position="before" toggle-button-id="toggle-button-2">
   <mock:shadow-root>
-    <button aria-description="deselected" class="toggle-button toggle-button--black toggle-button--border toggle-button--icon-before toggle-button--regular toggle-button--secondary" id="toggle-button-2" part="toggle-button regular secondary toggle-button--icon-before black border" type="button">
+    <button aria-description="deselected" class="toggle-button toggle-button--black toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--secondary" id="toggle-button-2" part="toggle-button regular secondary toggle-button--icon-before black color border" type="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -14,7 +14,7 @@ exports[`Toggle Button snapshots black color scheme 1`] = `
 exports[`Toggle Button snapshots default props 1`] = `
 <scale-toggle-button icon-position="before" toggle-button-id="toggle-button-0">
   <mock:shadow-root>
-    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--secondary" id="toggle-button-0" part="toggle-button regular secondary toggle-button--icon-before color border" type="button">
+    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--secondary" id="toggle-button-0" part="toggle-button regular secondary toggle-button--icon-before color color border" type="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -25,7 +25,7 @@ exports[`Toggle Button snapshots default props 1`] = `
 exports[`Toggle Button snapshots disabled 1`] = `
 <scale-toggle-button disabled="" icon-position="before" size="large" toggle-button-id="toggle-button-3">
   <mock:shadow-root>
-    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--large toggle-button--secondary" disabled="" id="toggle-button-3" part="toggle-button large secondary toggle-button--icon-before color border" type="button">
+    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--large toggle-button--secondary" disabled="" id="toggle-button-3" part="toggle-button large secondary toggle-button--icon-before color color border" type="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -39,7 +39,7 @@ exports[`Toggle Button snapshots iconAfter 1`] = `
     <style>
       color:red
     </style>
-    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-after toggle-button--left toggle-button--regular toggle-button--secondary" id="toggle-button-7" part="toggle-button regular secondary toggle-button--icon-after left color border" type="button">
+    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-after toggle-button--left toggle-button--regular toggle-button--secondary" id="toggle-button-7" part="toggle-button regular secondary toggle-button--icon-after left color color border" type="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -51,7 +51,7 @@ exports[`Toggle Button snapshots iconAfter 1`] = `
 exports[`Toggle Button snapshots iconBefore 1`] = `
 <scale-toggle-button icon-position="before" radius="right" toggle-button-id="toggle-button-6">
   <mock:shadow-root>
-    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--right toggle-button--secondary" id="toggle-button-6" part="toggle-button regular secondary toggle-button--icon-before right color border" type="button">
+    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--right toggle-button--secondary" id="toggle-button-6" part="toggle-button regular secondary toggle-button--icon-before right color color border" type="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -63,7 +63,7 @@ exports[`Toggle Button snapshots iconBefore 1`] = `
 exports[`Toggle Button snapshots iconOnly 1`] = `
 <scale-toggle-button icon-position="after" radius="both" selected="" toggle-button-id="toggle-button-5">
   <mock:shadow-root>
-    <button aria-description="selected" aria-pressed="" class="toggle-button toggle-button--border toggle-button--both toggle-button--color toggle-button--icon-after toggle-button--regular toggle-button--secondary toggle-button--selected" id="toggle-button-5" part="toggle-button regular secondary toggle-button--icon-after selected both color border" type="button">
+    <button aria-description="selected" aria-pressed="" class="toggle-button toggle-button--border toggle-button--both toggle-button--color toggle-button--icon-after toggle-button--regular toggle-button--secondary toggle-button--selected" id="toggle-button-5" part="toggle-button regular secondary toggle-button--icon-after selected both color color border" type="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -74,7 +74,7 @@ exports[`Toggle Button snapshots iconOnly 1`] = `
 exports[`Toggle Button snapshots regular size secondary 1`] = `
 <scale-toggle-button icon-position="before" size="regular" toggle-button-id="toggle-button-1" variant="secondary">
   <mock:shadow-root>
-    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--secondary" id="toggle-button-1" part="toggle-button regular secondary toggle-button--icon-before color border" type="button">
+    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--secondary" id="toggle-button-1" part="toggle-button regular secondary toggle-button--icon-before color secondary border" type="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -85,7 +85,7 @@ exports[`Toggle Button snapshots regular size secondary 1`] = `
 exports[`Toggle Button snapshots selected 1`] = `
 <scale-toggle-button icon-position="before" selected="" size="xs" toggle-button-id="toggle-button-4">
   <mock:shadow-root>
-    <button aria-description="selected" aria-pressed="" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--secondary toggle-button--selected toggle-button--xs" id="toggle-button-4" part="toggle-button xs secondary toggle-button--icon-before selected color border" type="button">
+    <button aria-description="selected" aria-pressed="" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--secondary toggle-button--selected toggle-button--xs" id="toggle-button-4" part="toggle-button xs secondary toggle-button--icon-before selected color color border" type="button">
       <slot></slot>
     </button>
   </mock:shadow-root>

packages/components/src/components/toggle-button/readme.md

@@ -14,7 +14,7 @@
 | `ariaLangDeselected`         | `aria-lang-deselected`         | (optional) translation of 'deselected                                                                                                                  | `string`                                   | `'deselected'` |
 | `ariaLangSelected`           | `aria-lang-selected`           | (optional) translation of 'selected                                                                                                                    | `string`                                   | `'selected'`   |
 | `background`                 | `background`                   | (optional) Button background                                                                                                                           | `"grey" \| "white"`                        | `'white'`      |
-| `colorScheme`                | `color-scheme`                 | (optional) background color scheme of a selected button                                                                                                | `"color" \| "monochrome"`                  | `'color'`      |
+| `colorScheme`                | `color-scheme`                 | <span style="color:red">**[DEPRECATED]**</span> - variant should replace colorScheme<br/><br/>                                                         | `"color" \| "monochrome"`                  | `'color'`      |
 | `disabled`                   | `disabled`                     | (optional) If `true`, the button is disabled                                                                                                           | `boolean`                                  | `false`        |
 | `hideBorder`                 | `hide-border`                  | (optional) set the border-radius left, right or both                                                                                                   | `boolean`                                  | `undefined`    |
 | `iconOnly`                   | `icon-only`                    | (optional) Button type                                                                                                                                 | `boolean`                                  | `false`        |
@@ -25,6 +25,7 @@
 | `size`                       | `size`                         | (optional) The size of the button                                                                                                                      | `"large" \| "regular" \| "small" \| "xs"`  | `'regular'`    |
 | `styles`                     | `styles`                       | (optional) Injected CSS styles                                                                                                                         | `string`                                   | `undefined`    |
 | `toggleButtonId`             | `toggle-button-id`             | (optional) toggle button's id                                                                                                                          | `string`                                   | `undefined`    |
+| `variant`                    | `variant`                      | (optional) background variant of a selected toggle-button                                                                                              | `"color" \| "monochrome"`                  | `'color'`      |
 
 
 ## Events

packages/components/src/components/toggle-button/toggle-button.tsx

@@ -41,8 +41,10 @@ export class ToggleButton {
   @Prop() size?: 'large' | 'regular' | 'small' | 'xs' = 'regular';
   /** (optional) Button background */
   @Prop() background?: 'grey' | 'white' = 'white';
-  /** (optional) background color scheme of a selected button */
+  /** @deprecated - variant should replace colorScheme */
   @Prop() colorScheme?: 'monochrome' | 'color' = 'color';
+  /** (optional) background variant of a selected toggle-button */
+  @Prop() variant?: 'monochrome' | 'color' = 'color';
   /** (optional) If `true`, the button is disabled */
   @Prop() disabled?: boolean = false;
   /** (optional) If `true`, the button is selected */
@@ -212,6 +214,7 @@ export class ToggleButton {
       !this.disabled && this.selected && `${prefix}selected`,
       this.radius && `${prefix}${this.radius}`,
       this.colorScheme && `${prefix}${this.colorScheme}`,
+      this.variant && `${prefix}${this.variant}`,
       !this.hideBorder && `${prefix}border`
     );
   }

packages/components/src/components/toggle-group/__snapshots__/toggle-group.spec.ts.snap

@@ -7,13 +7,13 @@ exports[`Toggle Group snapshots default props 1`] = `
       <slot></slot>
     </div>
   </mock:shadow-root>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="1" radius="left" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="1" radius="left" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="2" radius="neither" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="2" radius="neither" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="3" radius="right" selected="" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="3" radius="right" selected="" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
 </scale-toggle-group>
@@ -26,13 +26,13 @@ exports[`Toggle Group snapshots disabled 1`] = `
       <slot></slot>
     </div>
   </mock:shadow-root>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="disabled" hide-border="false" position="1" radius="left" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="disabled" hide-border="false" position="1" radius="left" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="disabled" hide-border="false" position="2" radius="neither" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="disabled" hide-border="false" position="2" radius="neither" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="disabled" hide-border="false" position="3" radius="right" selected="" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="disabled" hide-border="false" position="3" radius="right" selected="" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
 </scale-toggle-group>
@@ -45,13 +45,13 @@ exports[`Toggle Group snapshots size small, multi false 1`] = `
       <slot></slot>
     </div>
   </mock:shadow-root>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="1" radius="left" size="small">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="1" radius="left" size="small" variant="color">
     Click Me!
   </scale-toggle-button>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="2" radius="neither" size="small">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="2" radius="neither" size="small" variant="color">
     Click Me!
   </scale-toggle-button>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="3" radius="right" selected="" size="small">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="3" radius="right" selected="" size="small" variant="color">
     Click Me!
   </scale-toggle-button>
 </scale-toggle-group>
@@ -67,13 +67,13 @@ exports[`Toggle Group snapshots styles 1`] = `
       <slot></slot>
     </div>
   </mock:shadow-root>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="1" radius="left" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="1" radius="left" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="2" radius="neither" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="2" radius="neither" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="3" radius="right" selected="" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="3" radius="right" selected="" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
 </scale-toggle-group>