Wrap EuiHorizontalStep titles instead of truncating them. (#653)

* Wrap EuiHorizontalStep titles instead of truncating them. * Disallow clicks on disabled steps. * Remove focusability from disabled steps. * Add comments to explain flexbox styles.
elastic · Apr 11, 2018 · 2785f19 · 2785f19
1 parent 64144da
commit 2785f19
Show file tree

Hide file tree

Showing 9 changed files with 184 additions and 75 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,11 @@
 - Added support for `<pre>` and `<code>` tags to `<EuiText>` ([#654](https://github.com/elastic/eui/pull/654))
 - Added export of SASS theme variables in JSON format during compilation ([#642](https://github.com/elastic/eui/pull/642))
 - Close `EuiComboBox` `singleSelection` options list when option is choosen ([#645](https://github.com/elastic/eui/pull/645))
+- Wrap `EuiHorizontalStep` text instead of truncating it ([#653](https://github.com/elastic/eui/pull/653))
+
+**Breaking changes**
+
+- `EuiHorizontalSteps` now requires an `onClick` prop be provided for each step configuration object ([#653](https://github.com/elastic/eui/pull/653))
 
 ## [`0.0.40`](https://github.com/elastic/eui/tree/v0.0.40)
 

diff --git a/src-docs/src/views/steps/steps_horizontal.js b/src-docs/src/views/steps/steps_horizontal.js
@@ -13,13 +13,16 @@ const horizontalSteps = [
   {
     title: 'Selected Step 2',
     isSelected: true,
+    onClick: () => window.alert('Step 2 clicked')
   },
   {
-    title: 'Incomplete Step 3',
+    title: 'Incomplete Step 3 which will wrap to the next line',
+    onClick: () => window.alert('Step 3 clicked')
   },
   {
     title: 'Disabled Step 4',
     disabled: true,
+    onClick: () => window.alert('Step 4 clicked')
   },
 ];
 

diff --git a/src/components/steps/__snapshots__/step_horizontal.test.js.snap b/src/components/steps/__snapshots__/step_horizontal.test.js.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiStepHorizontal is rendered 1`] = `
+<div
+  aria-disabled="false"
+  aria-label="aria-label"
+  aria-selected="false"
+  class="euiStepHorizontal testClass1 testClass2 euiStepHorizontal-isIncomplete"
+  data-test-subj="test subject string"
+  role="tab"
+  tabindex="0"
+  title="Step 1: First step"
+>
+  <div
+    class="euiScreenReaderOnly"
+  >
+    Step
+  </div>
+  <div
+    class="euiStepHorizontal__number"
+  >
+    1
+  </div>
+  <div
+    class="euiStepHorizontal__title"
+  >
+    First step
+  </div>
+</div>
+`;
diff --git a/src/components/steps/__snapshots__/steps_horizontal.test.js.snap b/src/components/steps/__snapshots__/steps_horizontal.test.js.snap
@@ -7,18 +7,19 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
   data-test-subj="test subject string"
   role="tablist"
 >
-  <button
+  <div
+    aria-disabled="false"
     aria-selected="false"
     class="euiStepHorizontal euiStepHorizontal-isComplete"
     role="tab"
+    tabindex="0"
     title="Step 1: Completed Step 1 is complete"
-    type="button"
   >
-    <span
+    <div
       class="euiScreenReaderOnly"
     >
       Step
-    </span>
+    </div>
     <div
       class="euiStepHorizontal__number"
     >
@@ -41,81 +42,83 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
         />
       </svg>
     </div>
-    <span
+    <div
       class="euiStepHorizontal__title"
     >
       Completed Step 1
-    </span>
-  </button>
-  <button
+    </div>
+  </div>
+  <div
+    aria-disabled="false"
     aria-selected="true"
     class="euiStepHorizontal euiStepHorizontal-isSelected"
     role="tab"
+    tabindex="0"
     title="Step 2: Selected Step 2"
-    type="button"
   >
-    <span
+    <div
       class="euiScreenReaderOnly"
     >
       Step
-    </span>
+    </div>
     <div
       class="euiStepHorizontal__number"
     >
       2
     </div>
-    <span
+    <div
       class="euiStepHorizontal__title"
     >
       Selected Step 2
-    </span>
-  </button>
-  <button
+    </div>
+  </div>
+  <div
+    aria-disabled="false"
     aria-selected="false"
     class="euiStepHorizontal euiStepHorizontal-isIncomplete"
     role="tab"
+    tabindex="0"
     title="Step 3: Incomplete Step 3"
-    type="button"
   >
-    <span
+    <div
       class="euiScreenReaderOnly"
     >
       Step
-    </span>
+    </div>
     <div
       class="euiStepHorizontal__number"
     >
       3
     </div>
-    <span
+    <div
       class="euiStepHorizontal__title"
     >
       Incomplete Step 3
-    </span>
-  </button>
-  <button
+    </div>
+  </div>
+  <div
+    aria-disabled="true"
     aria-selected="false"
     class="euiStepHorizontal euiStepHorizontal-isIncomplete euiStepHorizontal-isDisabled"
-    disabled=""
     role="tab"
+    tabindex="-1"
     title="Step 4: Disabled Step 4 is disabled"
-    type="button"
   >
-    <span
+    <div
       class="euiScreenReaderOnly"
     >
       Step
-    </span>
+    </div>
     <div
       class="euiStepHorizontal__number"
     >
       4
     </div>
-    <span
+    <div
       class="euiStepHorizontal__title"
     >
       Disabled Step 4
-    </span>
-  </button>
+    </div>
+  </div>
 </div>
 `;
diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss
@@ -4,8 +4,10 @@
 }
 
 /**
- * 1. Ensure the title truncates instead of wraps
- * 2. Ensure the connecting lines stays behind the number
+ * 1. Ensure the connecting lines stays behind the number
+ * 2. Make each step the same width
+ * 3. Make the content of each step align to the top, even if the steps are of varying heights,
+ *    e.g. due to some of their titles wrapping to multiple lines
  */
 
 .euiStepsHorizontal {
@@ -17,14 +19,18 @@
 
 // Button containing item
 .euiStepHorizontal {
-  flex-grow: 1;
-  flex-basis: 0%;
+  flex-grow: 1; /* 2 */
+  flex-basis: 0%; /* 2 */
   padding: $euiSizeL $euiSize $euiSize;
-  overflow: hidden; /* 1 */
+  display: flex; /* 3 */
+  flex-direction: column; /* 3 */
+  align-items: center; /* 3 */
+  justify-content: flex-start; /* 3 */
+  cursor: pointer;
 
   // focus & hover state
-  &:focus,
-  &:hover:not(:disabled) {
+  &:focus:not(.euiStepHorizontal-isDisabled),
+  &:hover:not(.euiStepHorizontal-isDisabled) {
     .euiStepHorizontal__number {
       background: $euiColorPrimary;
       color: $euiColorEmptyShade;
@@ -39,7 +45,7 @@
   }
 
   // disabled state
-  &[disabled] {
+  &.euiStepHorizontal-isDisabled {
     cursor: not-allowed;
   }
 
@@ -51,9 +57,9 @@
     position: absolute;
     width: 50%;
     height: 1px;
-    top: $euiSizeL + $euiStepNumberSize/2;
+    top: $euiSizeL + ($euiStepNumberSize / 2);
     background-color: $euiColorLightShade;
-    z-index: $euiZLevel0; /* 2 */
+    z-index: $euiZLevel0; /* 1 */
   }
 
   &::before {
@@ -76,8 +82,8 @@
 
 .euiStepHorizontal__number {
   @include createStepsNumber;
-  position: relative; /* 2 */
-  z-index: $euiZLevel1; /* 2 */
+  position: relative; /* 1 */
+  z-index: $euiZLevel1; /* 1 */
   transition: all $euiAnimSpeedFast ease-in-out;
 
   // if it contains an icon, it needs to shift up a couple px
@@ -88,17 +94,12 @@
 }
 
 .euiStepHorizontal__title {
-  display: block;
   @include euiTitle("xs");
   margin-top: $euiSizeS;
   font-weight: $euiFontWeightRegular;
+  text-align: center;
 
-  // truncate
-  white-space: nowrap;  /* 1 */
-  overflow: hidden;  /* 1 */
-  text-overflow: ellipsis;  /* 1 */
-
-  .euiStepHorizontal:disabled & {
+  .euiStepHorizontal-isDisabled & {
     color: $euiColorDarkShade;
   }
 }

diff --git a/src/components/steps/step.test.js b/src/components/steps/step.test.js
@@ -6,18 +6,17 @@ import { EuiStep } from './step';
 
 describe('EuiStep', () => {
   test('is rendered', () => {
-    const stepContent = (<p>Do this</p>);
     const component = render(
       <EuiStep
         {...requiredProps}
         headingElement={'h3'}
         step={1}
         title={'First step'}
-        children={stepContent}
-      />
+      >
+        <p>Do this</p>
+      </EuiStep>
     );
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/src/components/steps/step_horizontal.js b/src/components/steps/step_horizontal.js
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import {
   EuiScreenReaderOnly,
+  EuiKeyboardAccessible,
 } from '../accessibility';
 
 import { EuiIcon } from '../icon';
@@ -40,38 +41,46 @@ export const EuiStepHorizontal = ({
     numberNode = step;
   }
 
+  const onStepClick = e => {
+    if (disabled) {
+      return;
+    }
+
+    onClick(e);
+  }
+
   const buttonTitle = `Step ${step}: ${title}${titleAppendix}`;
 
   return (
-    <button
-      role="tab"
-      aria-selected={!!isSelected}
-      type="button"
-      className={classes}
-      onClick={onClick}
-      disabled={disabled}
-      title={buttonTitle}
-      {...rest}
-    >
+    <EuiKeyboardAccessible>
+      <div
+        role="tab"
+        aria-selected={!!isSelected}
+        aria-disabled={!!disabled}
+        className={classes}
+        onClick={onStepClick}
+        tabIndex={disabled ? '-1' : '0'}
+        title={buttonTitle}
+        {...rest}
+      >
+        <EuiScreenReaderOnly><div>Step</div></EuiScreenReaderOnly>
 
-      <EuiScreenReaderOnly><span>Step</span></EuiScreenReaderOnly>
+        <div className="euiStepHorizontal__number">
+          {numberNode}
+        </div>
 
-      <div className="euiStepHorizontal__number">
-        {numberNode}
+        <div className="euiStepHorizontal__title">
+          {title}
+        </div>
       </div>
-
-      <span className="euiStepHorizontal__title">
-        {title}
-      </span>
-
-    </button>
+    </EuiKeyboardAccessible>
   );
 };
 
 EuiStepHorizontal.propTypes = {
   isSelected: PropTypes.bool,
   isComplete: PropTypes.bool,
-  onClick: PropTypes.func,
+  onClick: PropTypes.func.isRequired,
   step: PropTypes.number.isRequired,
   title: PropTypes.node,
   className: PropTypes.string,