Merge pull request #117 from macandcheese/update/radiogroup

Adds scale prop to radio group, updates style

Author: paulcpederson

CHANGELOG.md

@@ -8,6 +8,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### [Unreleased][HEAD]
 
 ### Added
+- adds scale prop to `calcite-radio-group`
+- updates style of  `calcite-radio-group`
 - adds transparent appearance style for `calcite-button`
 - adds `iconposition` prop to `calcite-button`
 - updates dark theme style for `calcite-button`

src/components/calcite-radio-group-item/calcite-radio-group-item.scss

@@ -3,7 +3,7 @@
   background-color: var(--calcite-radio-group-color);
   color: var(--calcite-radio-group-text-color);
   cursor: pointer;
-  padding: 0.5rem 1rem;
+  padding: var(--calcite-radio-group-padding);
   line-height: 1.25;
   margin: 0.25rem -1px 0 0px;
   border: 1px solid var(--calcite-radio-group-border-color);
@@ -12,6 +12,18 @@
   cursor: pointer;
 }
 
+:host([scale="s"]) {
+  @include font-size(-3);
+}
+
+:host([scale="m"]) {
+  @include font-size(-1);
+}
+
+:host([scale="l"]) {
+  @include font-size(0);
+}
+
 :host(:hover) {
   background-color: var(--calcite-radio-group-color-hover);
 }

src/components/calcite-radio-group-item/calcite-radio-group-item.tsx

@@ -8,7 +8,7 @@ import {
   Host,
   Watch
 } from "@stencil/core";
-
+import { getElementProp } from "../../utils/dom";
 @Component({
   tag: "calcite-radio-group-item",
   styleUrl: "calcite-radio-group-item.scss",
@@ -72,7 +72,9 @@ export class CalciteRadioGroupItem {
     this.inputProxy = inputProxy;
 
     const futureSlotted = Array.from(this.el.childNodes);
-    this.hasLabel = futureSlotted.some((child) => child.nodeType === Node.TEXT_NODE);
+    this.hasLabel = futureSlotted.some(
+      child => child.nodeType === Node.TEXT_NODE
+    );
   }
 
   disconnectedCallback() {
@@ -81,9 +83,9 @@ export class CalciteRadioGroupItem {
 
   render() {
     const { checked, value } = this;
-
+    const scale = getElementProp(this.el, "scale", "m");
     return (
-      <Host role="radio" aria-checked={checked ? "true" : "false"}>
+      <Host role="radio" aria-checked={checked ? "true" : "false"} scale={scale}>
         <label>
           {this.hasLabel ? <slot /> : value}
           <slot name="input" />
@@ -111,7 +113,9 @@ export class CalciteRadioGroupItem {
 
   private inputProxy: HTMLInputElement;
 
-  private mutationObserver = new MutationObserver(() => this.syncFromExternalInput());
+  private mutationObserver = new MutationObserver(() =>
+    this.syncFromExternalInput()
+  );
 
   //--------------------------------------------------------------------------
   //
@@ -124,7 +128,7 @@ export class CalciteRadioGroupItem {
       this.value = this.inputProxy.value;
       this.checked = this.inputProxy.checked;
     }
-  };
+  }
 
   private syncToExternalInput(): void {
     if (!this.inputProxy) {

src/components/calcite-radio-group/calcite-radio-group.scss

@@ -1,19 +1,29 @@
 :host {
   display: flex;
-
   --calcite-radio-group-color: #{$blk-000};
-  --calcite-radio-group-border-color: #{$blk-130};
+  --calcite-radio-group-border-color: #{$blk-040};
   --calcite-radio-group-color-active: #{$ui-blue};
   --calcite-radio-group-text-color: #{$blk-240};
   --calcite-radio-group-text-color-active: #{$blk-000};
   --calcite-radio-group-color-hover: #{$blk-005};
+  --calcite-radio-group-padding: 0.5rem 1rem;
+}
+
+:host([scale="s"]) {
+  --calcite-radio-group-padding: 0.25rem 0.75rem;
+}
 
-  @include font-size(-1);
+:host([scale="m"]) {
+  --calcite-radio-group-padding: 0.4rem 1rem;
+}
+
+:host([scale="l"]) {
+  --calcite-radio-group-padding: 0.5rem 1.5rem;
 }
 
 :host([theme="dark"]) {
   --calcite-radio-group-color: #{$blk-200};
-  --calcite-radio-group-border-color: #{$blk-210};
+  --calcite-radio-group-border-color: #{$blk-190};
   --calcite-radio-group-color-active: #{$v-bb-160};
   --calcite-radio-group-text-color: #{$blk-000};
   --calcite-radio-group-text-color-active: #{$blk-000};
@@ -24,4 +34,3 @@
 ::slotted(calcite-radio-group-item:focus) {
   z-index: 0;
 }
-

src/components/calcite-radio-group/calcite-radio-group.tsx

@@ -59,10 +59,9 @@ export class CalciteRadioGroup {
   selectedItem: HTMLCalciteRadioGroupItemElement;
 
   @Watch("selectedItem")
-  protected handleSelectedItemChange<T extends HTMLCalciteRadioGroupItemElement>(
-    newItem: T,
-    oldItem: T
-  ) {
+  protected handleSelectedItemChange<
+    T extends HTMLCalciteRadioGroupItemElement
+  >(newItem: T, oldItem: T) {
     if (newItem === oldItem) {
       return;
     }
@@ -87,13 +86,11 @@ export class CalciteRadioGroup {
     }
   }
 
-  /**
-   * The component's theme.
-   */
-  @Prop({
-    reflect: true
-  })
-  theme: "light" | "dark" = "light";
+  /** The component's theme. */
+  @Prop({ reflect: true }) theme: "light" | "dark" = "light";
+
+  /** The scale of the button */
+  @Prop({ reflect: true }) scale: "s" | "m" | "l" = "m";
 
   //--------------------------------------------------------------------------
   //
@@ -102,6 +99,14 @@ export class CalciteRadioGroup {
   //--------------------------------------------------------------------------
 
   connectedCallback() {
+
+    // prop validations
+    let scale = ["s", "m", "l"];
+    if (!scale.includes(this.scale)) this.scale = "m";
+
+    let theme = ["dark", "light"];
+    if (!theme.includes(this.theme)) this.theme = "light";
+
     const items = this.getItems();
     let lastChecked: HTMLCalciteRadioGroupItemElement;
 
@@ -179,9 +184,9 @@ export class CalciteRadioGroup {
     const { el, selectedItem } = this;
     const dir = getElementDir(el);
     const moveBackwardKey =
-            (dir === "rtl"
-             ? key === navigationKeys.right
-             : key === navigationKeys.left) || key === navigationKeys.up;
+      (dir === "rtl"
+        ? key === navigationKeys.right
+        : key === navigationKeys.left) || key === navigationKeys.up;
     const items = this.getItems();
 
     let selectedIndex = -1;
@@ -194,23 +199,23 @@ export class CalciteRadioGroup {
 
     if (moveBackwardKey) {
       const previous =
-              selectedIndex === -1 || selectedIndex === 0
-              ? items.item(items.length - 1)
-              : items.item(selectedIndex - 1);
+        selectedIndex === -1 || selectedIndex === 0
+          ? items.item(items.length - 1)
+          : items.item(selectedIndex - 1);
       this.selectItem(previous);
       return;
     }
 
     const moveForwardKey =
-            (dir === "rtl"
-             ? key === navigationKeys.left
-             : key === navigationKeys.right) || key === navigationKeys.down;
+      (dir === "rtl"
+        ? key === navigationKeys.left
+        : key === navigationKeys.right) || key === navigationKeys.down;
 
     if (moveForwardKey) {
       const next =
-              selectedIndex === -1
-              ? items.item(1)
-              : items.item(selectedIndex + 1) || items.item(0);
+        selectedIndex === -1
+          ? items.item(1)
+          : items.item(selectedIndex + 1) || items.item(0);
       this.selectItem(next);
       return;
     }

src/index.html

@@ -8,7 +8,7 @@
 
   <style>
     .demo-background-dark {
-      background: #2b2b2b;
+      background: #202020;
       color: white;
       padding: 1rem;
     }
@@ -517,6 +517,30 @@ <h3 class="leader-1">Simple</h3>
             <calcite-radio-group-item value="vue">Vue</calcite-radio-group-item>
           </calcite-radio-group>
 
+          <h3 class="leader-1">Scale s</h3>
+
+          <calcite-radio-group scale="s">
+            <calcite-radio-group-item value="react" checked>React</calcite-radio-group-item>
+            <calcite-radio-group-item value="ember">Ember</calcite-radio-group-item>
+            <calcite-radio-group-item value="angular">Angular</calcite-radio-group-item>
+          </calcite-radio-group>
+
+          <h3 class="leader-1">Scale m</h3>
+
+          <calcite-radio-group scale="m">
+            <calcite-radio-group-item value="react" checked>React</calcite-radio-group-item>
+            <calcite-radio-group-item value="ember">Ember</calcite-radio-group-item>
+            <calcite-radio-group-item value="angular">Angular</calcite-radio-group-item>
+          </calcite-radio-group>
+
+          <h3 class="leader-1">Scale l</h3>
+
+          <calcite-radio-group scale="l">
+            <calcite-radio-group-item value="react" checked>React</calcite-radio-group-item>
+            <calcite-radio-group-item value="ember">Ember</calcite-radio-group-item>
+            <calcite-radio-group-item value="angular">Angular</calcite-radio-group-item>
+          </calcite-radio-group>
+
           <h3 class="leader-1">With labels</h3>
 
           <calcite-radio-group>
@@ -548,15 +572,38 @@ <h3 class="leader-1">Only one selected value (last wins)</h3>
             <calcite-radio-group-item value="2" checked></calcite-radio-group-item>
             <calcite-radio-group-item value="3" checked></calcite-radio-group-item>
           </calcite-radio-group>
-
-          <h3 class="leader-1">Dark theme</h3>
-
-          <calcite-radio-group theme="dark">
-            <calcite-radio-group-item value="1" checked></calcite-radio-group-item>
-            <calcite-radio-group-item value="2" checked></calcite-radio-group-item>
-            <calcite-radio-group-item value="3" checked></calcite-radio-group-item>
-          </calcite-radio-group>
-
+          <br />
+          <br />
+          <div class="demo-background-dark">
+            <h3 class="leader-1">Dark theme</h3>
+
+            <calcite-radio-group theme="dark">
+              <calcite-radio-group-item value="1" checked></calcite-radio-group-item>
+              <calcite-radio-group-item value="2" checked></calcite-radio-group-item>
+              <calcite-radio-group-item value="3" checked></calcite-radio-group-item>
+            </calcite-radio-group>
+
+            <h3 class="leader-1">Scale s</h3>
+            <calcite-radio-group theme="dark" scale="s">
+              <calcite-radio-group-item value="react" checked>React</calcite-radio-group-item>
+              <calcite-radio-group-item value="ember">Ember</calcite-radio-group-item>
+              <calcite-radio-group-item value="angular">Angular</calcite-radio-group-item>
+            </calcite-radio-group>
+
+            <h3 class="leader-1">Scale m</h3>
+            <calcite-radio-group theme="dark" scale="m">
+              <calcite-radio-group-item value="react" checked>React</calcite-radio-group-item>
+              <calcite-radio-group-item value="ember">Ember</calcite-radio-group-item>
+              <calcite-radio-group-item value="angular">Angular</calcite-radio-group-item>
+            </calcite-radio-group>
+
+            <h3 class="leader-1">Scale l</h3>
+            <calcite-radio-group theme="dark" scale="l">
+              <calcite-radio-group-item value="react" checked>React</calcite-radio-group-item>
+              <calcite-radio-group-item value="ember">Ember</calcite-radio-group-item>
+              <calcite-radio-group-item value="angular">Angular</calcite-radio-group-item>
+            </calcite-radio-group>
+          </div>
           <h3 class="leader-1">RTL</h3>
 
           <calcite-radio-group>
@@ -610,6 +657,7 @@ <h3>"Precise" handle</h3>
         <h3>"Precise" Range</h3>
         <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"
           max-label="Temperature range (upper)" precise></calcite-slider>
+
         <div class="demo-background-dark">
           <h3>Dark Theme</h3>
           <calcite-slider min="0" max="100" min-value="50" max-value="85" step="1" min-label="Temperature range (lower)"