Add labels to fields to make inspection easier

JedWatson · Mar 30, 2019 · 35d636d · 35d636d
1 parent 71df767
commit 35d636d
Show file tree

Hide file tree

Showing 14 changed files with 28 additions and 10 deletions.
diff --git a/src/__tests__/__snapshots__/Async.test.js.snap b/src/__tests__/__snapshots__/Async.test.js.snap
@@ -161,7 +161,7 @@ exports[`defaults - snapshot 1`] = `
         }
       >
         <div
-          className="css-10nd86i"
+          className="css-1pcexqc-container"
           onKeyDown={[Function]}
         >
           <Control
@@ -264,7 +264,7 @@ exports[`defaults - snapshot 1`] = `
             }
           >
             <div
-              className="css-vj8t7z"
+              className="css-bg1rzq-control"
               onMouseDown={[Function]}
               onTouchEnd={[Function]}
             >
@@ -454,7 +454,7 @@ exports[`defaults - snapshot 1`] = `
                     }
                   >
                     <div
-                      className="css-1492t68"
+                      className="css-151xaom-placeholder"
                     >
                       Select...
                     </div>
@@ -574,6 +574,7 @@ exports[`defaults - snapshot 1`] = `
                             "border": 0,
                             "color": "inherit",
                             "fontSize": "inherit",
+                            "label": "input",
                             "opacity": 1,
                             "outline": 0,
                             "padding": 0,
@@ -614,6 +615,7 @@ exports[`defaults - snapshot 1`] = `
                                 "boxSizing": "content-box",
                                 "color": "inherit",
                                 "fontSize": "inherit",
+                                "label": "input",
                                 "opacity": 1,
                                 "outline": 0,
                                 "padding": 0,
@@ -828,7 +830,7 @@ exports[`defaults - snapshot 1`] = `
                     }
                   >
                     <span
-                      className="css-d8oujb"
+                      className="css-bgvzuu-indicatorSeparator"
                     />
                   </IndicatorSeparator>
                   <DropdownIndicator
@@ -931,7 +933,7 @@ exports[`defaults - snapshot 1`] = `
                   >
                     <div
                       aria-hidden="true"
-                      className="css-1ep9fjw"
+                      className="css-16pqwjk-indicatorContainer"
                       onMouseDown={[Function]}
                       onTouchEnd={[Function]}
                     >

diff --git a/src/__tests__/__snapshots__/AsyncCreatable.test.js.snap b/src/__tests__/__snapshots__/AsyncCreatable.test.js.snap
@@ -190,7 +190,7 @@ exports[`defaults - snapshot 1`] = `
           }
         >
           <div
-            className="css-10nd86i"
+            className="css-1pcexqc-container"
             onKeyDown={[Function]}
           >
             <Control
@@ -298,7 +298,7 @@ exports[`defaults - snapshot 1`] = `
               }
             >
               <div
-                className="css-vj8t7z"
+                className="css-bg1rzq-control"
                 onMouseDown={[Function]}
                 onTouchEnd={[Function]}
               >
@@ -498,7 +498,7 @@ exports[`defaults - snapshot 1`] = `
                       }
                     >
                       <div
-                        className="css-1492t68"
+                        className="css-151xaom-placeholder"
                       >
                         Select...
                       </div>
@@ -623,6 +623,7 @@ exports[`defaults - snapshot 1`] = `
                               "border": 0,
                               "color": "inherit",
                               "fontSize": "inherit",
+                              "label": "input",
                               "opacity": 1,
                               "outline": 0,
                               "padding": 0,
@@ -663,6 +664,7 @@ exports[`defaults - snapshot 1`] = `
                                   "boxSizing": "content-box",
                                   "color": "inherit",
                                   "fontSize": "inherit",
+                                  "label": "input",
                                   "opacity": 1,
                                   "outline": 0,
                                   "padding": 0,
@@ -887,7 +889,7 @@ exports[`defaults - snapshot 1`] = `
                       }
                     >
                       <span
-                        className="css-d8oujb"
+                        className="css-bgvzuu-indicatorSeparator"
                       />
                     </IndicatorSeparator>
                     <DropdownIndicator
@@ -995,7 +997,7 @@ exports[`defaults - snapshot 1`] = `
                     >
                       <div
                         aria-hidden="true"
-                        className="css-1ep9fjw"
+                        className="css-16pqwjk-indicatorContainer"
                         onMouseDown={[Function]}
                         onTouchEnd={[Function]}
                       >

diff --git a/src/components/Control.js b/src/components/Control.js
@@ -29,6 +29,7 @@ export const css = ({
   isFocused,
   theme: { colors, borderRadius, spacing },
 }: ControlProps) => ({
+  label: 'control',
   alignItems: 'center',
   backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
   borderColor: isDisabled

diff --git a/src/components/Group.js b/src/components/Group.js
@@ -55,6 +55,7 @@ const Group = (props: GroupProps) => {
 };
 
 export const groupHeadingCSS = ({ theme: { spacing } }: GroupProps) => ({
+  label: 'group',
   color: '#999',
   cursor: 'default',
   display: 'block',

diff --git a/src/components/Input.js b/src/components/Input.js
@@ -24,6 +24,7 @@ export const inputCSS = ({ isDisabled, theme: { spacing, colors } }: InputProps)
   color: colors.neutral80,
 });
 const inputStyle = isHidden => ({
+  label: 'input',
   background: 0,
   border: 0,
   fontSize: 'inherit',

diff --git a/src/components/Menu.js b/src/components/Menu.js
@@ -245,6 +245,7 @@ export const menuCSS = ({
   placement,
   theme: { borderRadius, spacing, colors },
 }: MenuStateWithProps) => ({
+  label: 'menu',
   [alignToControl(placement)]: '100%',
   backgroundColor: colors.neutral0,
   borderRadius: borderRadius,

diff --git a/src/components/MultiValue.js b/src/components/MultiValue.js
@@ -22,6 +22,7 @@ export type MultiValueProps = CommonProps & {
 export const multiValueCSS = ({
   theme: { spacing, borderRadius, colors },
 }: MultiValueProps) => ({
+  label: 'multiValue',
   backgroundColor: colors.neutral10,
   borderRadius: borderRadius / 2,
   display: 'flex',

diff --git a/src/components/Option.js b/src/components/Option.js
@@ -42,6 +42,7 @@ export const optionCSS = ({
   isSelected,
   theme: { spacing, colors },
 }: OptionProps) => ({
+  label: 'option',
   backgroundColor: isSelected
     ? colors.primary
     : isFocused ? colors.primary25 : 'transparent',

diff --git a/src/components/Placeholder.js b/src/components/Placeholder.js
@@ -11,6 +11,7 @@ export type PlaceholderProps = CommonProps & {
 };
 
 export const placeholderCSS = ({ theme: { spacing, colors } }: PlaceholderProps) => ({
+  label: 'placeholder',
   color: colors.neutral50,
   marginLeft: spacing.baseUnit / 2,
   marginRight: spacing.baseUnit / 2,

diff --git a/src/components/SingleValue.js b/src/components/SingleValue.js
@@ -18,6 +18,7 @@ type ValueProps = {
 export type SingleValueProps = CommonProps & ValueProps & State;
 
 export const css = ({ isDisabled, theme: { spacing, colors } }: SingleValueProps) => ({
+  label: 'singleValue',
   color: isDisabled ? colors.neutral40 : colors.neutral80,
   marginLeft: spacing.baseUnit / 2,
   marginRight: spacing.baseUnit / 2,

diff --git a/src/components/containers.js b/src/components/containers.js
@@ -22,6 +22,7 @@ export type ContainerProps = CommonProps &
     innerProps: { onKeyDown: KeyboardEventHandler },
   };
 export const containerCSS = ({ isDisabled, isRtl }: ContainerState) => ({
+  label: 'container',
   direction: isRtl ? 'rtl' : null,
   pointerEvents: isDisabled ? 'none' : null, // cancel mouse events when disabled
   position: 'relative',

diff --git a/src/components/indicators.js b/src/components/indicators.js
@@ -57,6 +57,7 @@ const baseCSS = ({
   isFocused,
   theme: { spacing: { baseUnit }, colors },
 }: IndicatorProps) => ({
+  label: 'indicatorContainer',
   color: isFocused ? colors.neutral60 : colors.neutral20,
   display: 'flex',
   padding: baseUnit * 2,
@@ -116,6 +117,7 @@ export const indicatorSeparatorCSS = ({
   isDisabled,
   theme: { spacing: { baseUnit }, colors },
 }: (CommonProps & SeparatorState)) => ({
+  label: 'indicatorSeparator',
   alignSelf: 'stretch',
   backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
   marginBottom: baseUnit * 2,
@@ -153,6 +155,7 @@ export const loadingIndicatorCSS = ({
   size: number,
   theme: Theme,
 }) => ({
+  label: 'loadingIndicator',
   color: isFocused ? colors.neutral60 : colors.neutral20,
   display: 'flex',
   padding: baseUnit * 2,

diff --git a/src/internal/A11yText.js b/src/internal/A11yText.js
@@ -6,6 +6,7 @@ import { css } from 'emotion';
 const A11yText = (props: ElementConfig<'span'>) => (
   <span
     className={css({
+      label: 'a11yText',
       zIndex: 9999,
       border: 0,
       clip: 'rect(1px, 1px, 1px, 1px)',

diff --git a/src/internal/DummyInput.js b/src/internal/DummyInput.js
@@ -11,6 +11,7 @@ export default class DummyInput extends Component<any> {
         ref={innerRef}
         {...props}
         className={css({
+          label: 'dummyInput',
           // get rid of any default styles
           background: 0,
           border: 0,