A few quick fixes (#2585)

* Use a span instead of p tag for EuiSwitch label * Fix layout for form row doc example for switch - Consider how `hasChildLabel` is handled since it seems to be set to the opposite * Fix layout of EuiSwitch with long label * [Docs] Add `hasChildLabel={false}` to EuiSwitches within form rows - And compressed to DisplayToggles * Add the same padding from EuiSelectableListItem to the header
elastic · Dec 3, 2019 · 6d3829a · 6d3829a
1 parent 489ca6a
commit 6d3829a
Show file tree

Hide file tree

Showing 17 changed files with 51 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,15 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `16.2.0`.
+**Bug fixes**
+
+- Fixed label wrapping of `EuiSwitch` ([#2585](https://github.com/elastic/eui/pull/2585))
+- Replaced `<p>` tag surrounding the label with a `<span>` tag in `EuiSwitch` to fix any inherited margin ([#2585](https://github.com/elastic/eui/pull/2585))
+- Add the same padding from `EuiSelectableListItem` to the heading to fix alignment ([#2585](https://github.com/elastic/eui/pull/2585))
 
 ## [`16.2.0`](https://github.com/elastic/eui/tree/v16.2.0)
 
 - Added `EuiCheckableCard` component, for radio buttons or checkboxes with complex child content ([#2555](https://github.com/elastic/eui/pull/2555))
-- Updated `EuiCheckbox` and `EuiCheckboxGroup` to TypeScript. ([#2555](https://github.com/elastic/eui/pull/2555))
+- Updated `EuiCheckbox` and `EuiCheckboxGroup` to TypeScript ([#2555](https://github.com/elastic/eui/pull/2555))
 
 **Bug fixes**
 

diff --git a/src-docs/src/components/guide_locale_selector/guide_locale_selector.js b/src-docs/src/components/guide_locale_selector/guide_locale_selector.js
@@ -19,7 +19,7 @@ import { EuiSwitch, EuiFormRow } from '../../../../src/components';
 
 export const GuideLocaleSelector = ({ selectedLocale, onToggleLocale }) => {
   return (
-    <EuiFormRow label="Translations for development">
+    <EuiFormRow label="Translations for development" hasChildLabel={false}>
       <EuiSwitch
         label="Activate babelfish"
         checked={selectedLocale === 'en-xa'}

diff --git a/src-docs/src/views/context_menu/context_menu.js b/src-docs/src/views/context_menu/context_menu.js
@@ -74,7 +74,9 @@ export default class extends Component {
                   title: 'Embed code',
                   content: (
                     <div style={{ padding: 16 }}>
-                      <EuiFormRow label="Generate a public snapshot?">
+                      <EuiFormRow
+                        label="Generate a public snapshot?"
+                        hasChildLabel={false}>
                         <EuiSwitch
                           name="switch"
                           id="asdf"
@@ -83,7 +85,9 @@ export default class extends Component {
                           onChange={() => {}}
                         />
                       </EuiFormRow>
-                      <EuiFormRow label="Include the following in the embed">
+                      <EuiFormRow
+                        label="Include the following in the embed"
+                        hasChildLabel={false}>
                         <EuiSwitch
                           name="switch"
                           id="asdf2"

diff --git a/src-docs/src/views/form_compressed/form_compressed.js b/src-docs/src/views/form_compressed/form_compressed.js
@@ -122,7 +122,10 @@ export default class extends Component {
           />
         </EuiFormRow>
 
-        <EuiFormRow label="Switch" display="rowCompressed">
+        <EuiFormRow
+          label="Switch"
+          display="rowCompressed"
+          hasChildLabel={false}>
           <EuiSwitch
             label="Should we do this?"
             name="switch"

diff --git a/src-docs/src/views/form_compressed/form_horizontal.js b/src-docs/src/views/form_compressed/form_horizontal.js
@@ -89,7 +89,7 @@ export default class extends Component {
           />
         </EuiFormRow>
 
-        <EuiFormRow display="columnCompressedSwitch" label="Swtich">
+        <EuiFormRow display="columnCompressedSwitch" label="Switch">
           <EuiSwitch
             showLabel={false}
             label="Switch"

diff --git a/src-docs/src/views/form_controls/display_toggles.js b/src-docs/src/views/form_controls/display_toggles.js
@@ -68,6 +68,7 @@ export class DisplayToggles extends Component {
         {cloneElement(children, canProps)}
         <EuiSpacer />
         <EuiPopover
+          panelPaddingSize="s"
           isOpen={this.state.isPopoverOpen}
           closePopover={() => {
             this.setState({ isPopoverOpen: false });
@@ -87,6 +88,7 @@ export class DisplayToggles extends Component {
               {(canDisabled || canIsDisabled) && (
                 <EuiFlexItem grow={false}>
                   <EuiSwitch
+                    compressed
                     label={'disabled'}
                     checked={this.state.disabled}
                     onChange={e =>
@@ -98,6 +100,7 @@ export class DisplayToggles extends Component {
               {canReadOnly && (
                 <EuiFlexItem grow={false}>
                   <EuiSwitch
+                    compressed
                     label={'readOnly'}
                     checked={this.state.readOnly}
                     onChange={e =>
@@ -109,6 +112,7 @@ export class DisplayToggles extends Component {
               {canLoading && (
                 <EuiFlexItem grow={false}>
                   <EuiSwitch
+                    compressed
                     label={'loading'}
                     checked={this.state.loading}
                     onChange={e =>
@@ -120,6 +124,7 @@ export class DisplayToggles extends Component {
               {canInvalid && (
                 <EuiFlexItem grow={false}>
                   <EuiSwitch
+                    compressed
                     label={'invalid'}
                     checked={this.state.invalid}
                     onChange={e =>
@@ -131,6 +136,7 @@ export class DisplayToggles extends Component {
               {canFullWidth && (
                 <EuiFlexItem grow={false}>
                   <EuiSwitch
+                    compressed
                     label={'fullWidth'}
                     checked={this.state.fullWidth}
                     onChange={e =>
@@ -142,6 +148,7 @@ export class DisplayToggles extends Component {
               {canCompressed && (
                 <EuiFlexItem grow={false}>
                   <EuiSwitch
+                    compressed
                     label={
                       <span>
                         compressed{' '}
@@ -162,6 +169,7 @@ export class DisplayToggles extends Component {
               {canPrepend && (
                 <EuiFlexItem grow={false}>
                   <EuiSwitch
+                    compressed
                     label={'prepend'}
                     checked={this.state.prepend}
                     onChange={e =>
@@ -173,6 +181,7 @@ export class DisplayToggles extends Component {
               {canAppend && (
                 <EuiFlexItem grow={false}>
                   <EuiSwitch
+                    compressed
                     label={'append'}
                     checked={this.state.append}
                     onChange={e =>

diff --git a/src-docs/src/views/form_controls/file_picker.js b/src-docs/src/views/form_controls/file_picker.js
@@ -54,6 +54,7 @@ export class FilePicker extends Component {
               canReadOnly={false}
               extras={[
                 <EuiSwitch
+                  compressed
                   label={'large'}
                   checked={this.state.large}
                   onChange={e => {

diff --git a/src-docs/src/views/form_layouts/described_form_group.js b/src-docs/src/views/form_layouts/described_form_group.js
@@ -158,6 +158,7 @@ export default class extends Component {
           fullWidth>
           <EuiFormRow
             label="Use a switch instead of a single checkbox"
+            hasChildLabel={false}
             fullWidth>
             <EuiSwitch
               name="switch"

diff --git a/src-docs/src/views/form_layouts/form_rows.js b/src-docs/src/views/form_layouts/form_rows.js
@@ -118,8 +118,7 @@ export default class extends Component {
         </EuiFormRow>
 
         <EuiFormRow
-          label="Use a switch instead of a single checkbox"
-          labelAppend="Some inputs also render their own labels, such as the switch, so they need the row label turned off because multiple labels break screen readers. "
+          label="Use a switch instead of a single checkbox and set 'hasChildLabel' to false"
           hasChildLabel={false}>
           <EuiSwitch
             name="switch"

diff --git a/src-docs/src/views/popover/trap_focus.js b/src-docs/src/views/popover/trap_focus.js
@@ -47,7 +47,10 @@ export default class extends Component {
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover.bind(this)}
         initialFocus="[id=asdf2]">
-        <EuiFormRow label="Generate a public snapshot?" id="asdf">
+        <EuiFormRow
+          label="Generate a public snapshot?"
+          id="asdf"
+          hasChildLabel={false}>
           <EuiSwitch
             name="switch"
             label="Snapshot data"

diff --git a/src/components/form/form_row/_form_row.scss b/src/components/form/form_row/_form_row.scss
@@ -72,6 +72,10 @@
 
     .euiFormRow__fieldWrapper {
       width: auto;
+
+      .euiSwitch--compressed {
+        margin-top: $euiSizeXS / 2; // Better vertical alignment of a compressed switch to the horizontal label
+      }
     }
 
     + .euiFormRow--horizontal {

diff --git a/src/components/form/switch/__snapshots__/switch.test.tsx.snap b/src/components/form/switch/__snapshots__/switch.test.tsx.snap
@@ -40,12 +40,12 @@ exports[`EuiSwitch assigns automatically generated ID to label 1`] = `
       </span>
     </span>
   </button>
-  <p
+  <span
     class="euiSwitch__label"
     id="generated-id"
   >
     Label
-  </p>
+  </span>
 </div>
 `;
 
@@ -91,11 +91,11 @@ exports[`EuiSwitch is rendered 1`] = `
       </span>
     </span>
   </button>
-  <p
+  <span
     class="euiSwitch__label"
     id="generated-id"
   >
     Label
-  </p>
+  </span>
 </div>
 `;
diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss
@@ -1,6 +1,7 @@
 .euiSwitch {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: flex-start;
   min-height: $euiSwitchHeight;
 
   .euiSwitch__label {
@@ -13,6 +14,7 @@
   }
 
   .euiSwitch__button {
+    flex-shrink: 0; // ensures the button doesn't lose width because of a long label
     line-height: 0; // ensures button takes height of switch inside
 
     &:focus .euiSwitch__thumb {

diff --git a/src/components/form/switch/switch.tsx b/src/components/form/switch/switch.tsx
@@ -112,9 +112,9 @@ export const EuiSwitch: FunctionComponent<EuiSwitchProps> = ({
         // <button> + <label> has poor screen reader support.
         // Click handler added to simulate natural, secondary <label> interactivity.
         // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-        <p className="euiSwitch__label" id={labelId} onClick={onClick}>
+        <span className="euiSwitch__label" id={labelId} onClick={onClick}>
           {label}
-        </p>
+        </span>
       )}
     </div>
   );

diff --git a/src/components/selectable/selectable_list/_selectable_list.scss b/src/components/selectable/selectable_list/_selectable_list.scss
@@ -19,4 +19,5 @@
   display: flex;
   align-items: center;
   border-bottom: $euiSelectableListItemBorder;
+  padding: $euiSelectableListItemPadding;
 }
diff --git a/src/components/selectable/selectable_list/_selectable_list_item.scss b/src/components/selectable/selectable_list/_selectable_list_item.scss
@@ -1,7 +1,6 @@
 .euiSelectableListItem {
   @include euiFontSizeS;
-
-  padding: $euiSizeXS $euiSizeM;
+  padding: $euiSelectableListItemPadding;
   display: block; // Necessary to make sure it doesn't force the whole popover to be too wide
   width: 100%;
   text-align: left;

diff --git a/src/components/selectable/selectable_list/_variables.scss b/src/components/selectable/selectable_list/_variables.scss
@@ -1 +1,2 @@
-    $euiSelectableListItemBorder: 1px solid darken($euiColorLightestShade, 2%);
+$euiSelectableListItemBorder: 1px solid darken($euiColorLightestShade, 2%);
+$euiSelectableListItemPadding: $euiSizeXS $euiSizeM;