Spring 18 to Summer 18 (#3049)

* chore(checkbox-button-group): Add test (#3023) * chore(checkbox-button-group): Add test * chore(checkbox-button-group): skip tests * chore(checkbox-toggle): Add test (#3029) * chore(checkbox-toggle): Add test * chore(checkbox-toggle): skip tests until min/max height issue is fixed * chore(checkbox-toggle): change component names * chore(tokens): add scope flag to components (#3044)
salesforce-ux · Jan 30, 2018 · 6de28b6 · 6de28b6
1 parent 57f3bd0
commit 6de28b6
Show file tree

Hide file tree

Showing 83 changed files with 311 additions and 7 deletions.
diff --git a/ui/components/badges/tokens/background-color.yml b/ui/components/badges/tokens/background-color.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   type: color
   category: background-color
   cssProperties:

diff --git a/ui/components/brand-band/tokens/background-color.yml b/ui/components/brand-band/tokens/background-color.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   type: color
   category: background-color
   cssProperties:

diff --git a/ui/components/brand-band/tokens/sizing.yml b/ui/components/brand-band/tokens/sizing.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   type: size
   category: sizing
   cssProperties:

diff --git a/ui/components/brand-band/tokens/spacing.yml b/ui/components/brand-band/tokens/spacing.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   category: spacing
   type: size
   cssProperties:

diff --git a/ui/components/buttons/tokens/border-color.yml b/ui/components/buttons/tokens/border-color.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   type: color
   category: border-color
   cssProperties:

diff --git a/ui/components/buttons/tokens/border-radius.yml b/ui/components/buttons/tokens/border-radius.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   type: size
   category: radius
   cssProperties:

diff --git a/ui/components/buttons/tokens/color.yml b/ui/components/buttons/tokens/color.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   type: color
   category: background-color
   cssProperties:

diff --git a/ui/components/buttons/tokens/line-height.yml b/ui/components/buttons/tokens/line-height.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   category: "line-height"
   type: number
   cssProperties:

diff --git a/ui/components/buttons/tokens/text-color.yml b/ui/components/buttons/tokens/text-color.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   type: color
   category: text-color
   cssProperties:

diff --git a/ui/components/cards/tokens/background-color.yml b/ui/components/cards/tokens/background-color.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   type: color
   category: background-color
   cssProperties:

diff --git a/ui/components/cards/tokens/border-color.yml b/ui/components/cards/tokens/border-color.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   type: color
   category: border-color
   cssProperties:

diff --git a/ui/components/cards/tokens/box-shadow.yml b/ui/components/cards/tokens/box-shadow.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   type: box-shadow
   category: shadow
   cssProperties:

diff --git a/ui/components/cards/tokens/font-weight.yml b/ui/components/cards/tokens/font-weight.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   category: font
   type: font-weight
   cssProperties:

diff --git a/ui/components/cards/tokens/spacing.yml b/ui/components/cards/tokens/spacing.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   category: spacing
   type: size
   comment: ''

diff --git a/ui/components/cards/tokens/text-align.yml b/ui/components/cards/tokens/text-align.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   category: text
   type: text-align
   cssProperties:

diff --git a/ui/components/carousel/tokens/background-color.yml b/ui/components/carousel/tokens/background-color.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   type: color
   category: background-color
   cssProperties:

diff --git a/ui/components/carousel/tokens/sizing.yml b/ui/components/carousel/tokens/sizing.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   type: size
   category: sizing
   cssProperties:

diff --git a/ui/components/chat/tokens/background-color.yml b/ui/components/chat/tokens/background-color.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   type: color
   category: background-color
   cssProperties:

diff --git a/...heckbox-button-group/__tests__/__snapshots__/renders_a_default_checkbox_button_group.json b/...heckbox-button-group/__tests__/__snapshots__/renders_a_default_checkbox_button_group.json
diff --git a/...ton-group/__tests__/__snapshots__/renders_a_default_checkbox_button_group_with_error.json b/...ton-group/__tests__/__snapshots__/renders_a_default_checkbox_button_group_with_error.json
diff --git a/...eckbox-button-group/__tests__/__snapshots__/renders_a_disabled_checkbox_button_group.json b/...eckbox-button-group/__tests__/__snapshots__/renders_a_disabled_checkbox_button_group.json
diff --git a/ui/components/checkbox-button-group/__tests__/index.spec.js b/ui/components/checkbox-button-group/__tests__/index.spec.js
@@ -0,0 +1,69 @@
+/* eslint-env jest */
+import React from 'react';
+import { Checkbox, CheckboxGroup, Fieldset } from '../base/example';
+
+import createHelpers from '../../../../jest.setup';
+
+const { matchesMarkupAndStyle } = createHelpers(__dirname);
+
+xit('renders a default checkbox button group', () =>
+  matchesMarkupAndStyle(
+    <Fieldset>
+      <CheckboxGroup>
+        <Checkbox id="monday">Mon</Checkbox>
+        <Checkbox id="tuesday">Tue</Checkbox>
+        <Checkbox id="wednesday">Wed</Checkbox>
+        <Checkbox id="thursday">Thu</Checkbox>
+        <Checkbox id="friday">Fri</Checkbox>
+      </CheckboxGroup>
+    </Fieldset>
+  ));
+
+xit('renders a default checkbox button group with error', () =>
+  matchesMarkupAndStyle(
+    <Fieldset className="slds-has-error">
+      <CheckboxGroup>
+        <Checkbox errorId="error_01" id="monday">
+          Mon
+        </Checkbox>
+        <Checkbox errorId="error_01" id="tuesday">
+          Tue
+        </Checkbox>
+        <Checkbox errorId="error_01" id="wednesday">
+          Wed
+        </Checkbox>
+        <Checkbox errorId="error_01" id="thursday">
+          Thu
+        </Checkbox>
+        <Checkbox errorId="error_01" id="friday">
+          Fri
+        </Checkbox>
+      </CheckboxGroup>
+      <div id="error_01" className="slds-form-element__help">
+        This field is required
+      </div>
+    </Fieldset>
+  ));
+
+xit('renders a disabled checkbox button group', () =>
+  matchesMarkupAndStyle(
+    <Fieldset>
+      <CheckboxGroup>
+        <Checkbox id="monday" disabled="true">
+          Mon
+        </Checkbox>
+        <Checkbox id="tuesday" disabled="true">
+          Tue
+        </Checkbox>
+        <Checkbox id="wednesday" disabled="true">
+          Wed
+        </Checkbox>
+        <Checkbox id="thursday" disabled="true">
+          Thu
+        </Checkbox>
+        <Checkbox id="friday" disabled="true">
+          Fri
+        </Checkbox>
+      </CheckboxGroup>
+    </Fieldset>
+  ));
diff --git a/ui/components/checkbox-button-group/base/example.jsx b/ui/components/checkbox-button-group/base/example.jsx
@@ -8,7 +8,7 @@ import classNames from 'classnames';
 // Partial(s)
 /// ////////////////////////////////////////
 
-let Fieldset = props => (
+export let Fieldset = props => (
   <fieldset className={classNames('slds-form-element', props.className)}>
     <legend className="slds-form-element__legend slds-form-element__label">
       Scheduled Day(s)

diff --git a/ui/components/checkbox-toggle/__tests__/__snapshots__/renders_a_checked_checkbox_toggle.json b/ui/components/checkbox-toggle/__tests__/__snapshots__/renders_a_checked_checkbox_toggle.json
diff --git a/ui/components/checkbox-toggle/__tests__/__snapshots__/renders_a_default_checkbox_toggle.json b/ui/components/checkbox-toggle/__tests__/__snapshots__/renders_a_default_checkbox_toggle.json
diff --git a/...omponents/checkbox-toggle/__tests__/__snapshots__/renders_a_disabled_checkbox_toggle.json b/...omponents/checkbox-toggle/__tests__/__snapshots__/renders_a_disabled_checkbox_toggle.json
diff --git a/ui/components/checkbox-toggle/__tests__/index.spec.js b/ui/components/checkbox-toggle/__tests__/index.spec.js
@@ -0,0 +1,20 @@
+/* eslint-env jest */
+import React from 'react';
+import {
+  CheckboxToggle,
+  CheckboxToggleChecked,
+  CheckboxToggleDisabled
+} from '../base/example';
+
+import createHelpers from '../../../../jest.setup';
+
+const { matchesMarkupAndStyle } = createHelpers(__dirname);
+
+xit('renders a default checkbox toggle', () =>
+  matchesMarkupAndStyle(<CheckboxToggle />));
+
+xit('renders a checked checkbox toggle', () =>
+  matchesMarkupAndStyle(<CheckboxToggleChecked />));
+
+xit('renders a disabled checkbox toggle', () =>
+  matchesMarkupAndStyle(<CheckboxToggleDisabled />));
diff --git a/ui/components/checkbox-toggle/base/example.jsx b/ui/components/checkbox-toggle/base/example.jsx
@@ -75,7 +75,7 @@ export let Toggle = props => (
 /// ////////////////////////////////////////
 // State Constructor(s)
 /// ////////////////////////////////////////
-let StateA = props => (
+export let CheckboxToggle = props => (
   <Demo>
     <LabelWrapper>
       <Label>
@@ -87,7 +87,7 @@ let StateA = props => (
   </Demo>
 );
 
-let StateB = props => (
+export let CheckboxToggleChecked = props => (
   <Demo>
     <LabelWrapper>
       <Label>
@@ -99,7 +99,7 @@ let StateB = props => (
   </Demo>
 );
 
-let StateC = props => (
+export let CheckboxToggleDisabled = props => (
   <Demo>
     <LabelWrapper>
       <Label>
@@ -115,17 +115,17 @@ let StateC = props => (
 // Export
 /// ////////////////////////////////////////
 
-export default <StateA />;
+export default <CheckboxToggle />;
 
 export let states = [
   {
     id: 'checkbox-toggle-checked',
     label: 'Checked',
-    element: <StateB />
+    element: <CheckboxToggleChecked />
   },
   {
     id: 'checkbox-toggle-disabled',
     label: 'Disabled',
-    element: <StateC />
+    element: <CheckboxToggleDisabled />
   }
 ];
diff --git a/ui/components/checkbox-toggle/tokens/line-height.yml b/ui/components/checkbox-toggle/tokens/line-height.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   category: line-height
   type: number
   cssProperties:

diff --git a/ui/components/checkbox-toggle/tokens/sizing.yml b/ui/components/checkbox-toggle/tokens/sizing.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   type: size
   category: sizing
   cssProperties:

diff --git a/ui/components/color-picker/tokens/background-color.yml b/ui/components/color-picker/tokens/background-color.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   type: color
   category: background-color
   cssProperties:

diff --git a/ui/components/color-picker/tokens/border-color.yml b/ui/components/color-picker/tokens/border-color.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   type: color
   category: border-color
   cssProperties:

diff --git a/ui/components/color-picker/tokens/font-size.yml b/ui/components/color-picker/tokens/font-size.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   category: font-size
   type: font-size
   cssProperties:

diff --git a/ui/components/color-picker/tokens/sizing.yml b/ui/components/color-picker/tokens/sizing.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   category: sizing
   type: size
   cssProperties:

diff --git a/ui/components/data-tables/tokens/background-color.yml b/ui/components/data-tables/tokens/background-color.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   type: color
   category: background-color
   cssProperties:

diff --git a/ui/components/data-tables/tokens/border-radius.yml b/ui/components/data-tables/tokens/border-radius.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   type: size
   category: radius
   cssProperties:

diff --git a/ui/components/data-tables/tokens/spacing.yml b/ui/components/data-tables/tokens/spacing.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   category: spacing
   type: size
   comment: ''

diff --git a/ui/components/data-tables/tokens/text-color.yml b/ui/components/data-tables/tokens/text-color.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   type: color
   category: text-color
   cssProperties:

diff --git a/ui/components/docked-composer/tokens/color.yml b/ui/components/docked-composer/tokens/color.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   type: color
   category: background-color
   cssProperties:

diff --git a/ui/components/docked-composer/tokens/sizing.yml b/ui/components/docked-composer/tokens/sizing.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   type: size
   category: sizing
   cssProperties:

diff --git a/ui/components/docked-utility-bar/tokens/background-color.yml b/ui/components/docked-utility-bar/tokens/background-color.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   type: color
   category: background-color
   cssProperties:

diff --git a/ui/components/dynamic-icons/tokens/background-color.yml b/ui/components/dynamic-icons/tokens/background-color.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   type: color
   category: background-color
   cssProperties:

diff --git a/ui/components/dynamic-icons/tokens/fill.yml b/ui/components/dynamic-icons/tokens/fill.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   category: fill
   type: color
   cssProperties:

diff --git a/ui/components/dynamic-icons/tokens/size.yml b/ui/components/dynamic-icons/tokens/size.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 global:
+  scope: component
   category: sizing
   type: size
   cssProperties:

diff --git a/ui/components/einstein-header/tokens/background-color.yml b/ui/components/einstein-header/tokens/background-color.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   type: color
   category: background-color
   cssProperties:

diff --git a/ui/components/einstein-header/tokens/text-shadow.yml b/ui/components/einstein-header/tokens/text-shadow.yml
@@ -1,4 +1,5 @@
 global:
+  scope: component
   type: shadow
   category: text-shadow
   cssProperties: