Wrap EuiHorizontalStep titles instead of truncating them.

elastic · Apr 10, 2018 · 8a9fcfc · 8a9fcfc
1 parent e4ec1cd
commit 8a9fcfc
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 68 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,11 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-- add disabled prop to `EuiComboBoxOption` ([#650](https://github.com/elastic/eui/pull/650))
+- Added disabled prop to `EuiComboBoxOption` ([#650](https://github.com/elastic/eui/pull/650))
+- 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__/steps_horizontal.test.js.snap b/src/components/steps/__snapshots__/steps_horizontal.test.js.snap
@@ -7,18 +7,18 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
   data-test-subj="test subject string"
   role="tablist"
 >
-  <button
+  <div
     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 +41,80 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
         />
       </svg>
     </div>
-    <span
+    <div
       class="euiStepHorizontal__title"
     >
       Completed Step 1
-    </span>
-  </button>
-  <button
+    </div>
+  </div>
+  <div
     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-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-selected="false"
     class="euiStepHorizontal euiStepHorizontal-isIncomplete euiStepHorizontal-isDisabled"
-    disabled=""
     role="tab"
+    tabindex="0"
     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,7 @@
 }
 
 /**
- * 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
  */
 
 .euiStepsHorizontal {
@@ -20,11 +19,15 @@
   flex-grow: 1;
   flex-basis: 0%;
   padding: $euiSizeL $euiSize $euiSize;
-  overflow: hidden; /* 1 */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
 
   // focus & hover state
   &:focus,
-  &:hover:not(:disabled) {
+  &:hover:not(.euiStepHorizontal-isDisabled) {
     .euiStepHorizontal__number {
       background: $euiColorPrimary;
       color: $euiColorEmptyShade;
@@ -39,7 +42,7 @@
   }
 
   // disabled state
-  &[disabled] {
+  &.euiStepHorizontal-isDisabled {
     cursor: not-allowed;
   }
 
@@ -51,9 +54,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 +79,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 +91,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_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';
@@ -43,35 +44,33 @@ export const EuiStepHorizontal = ({
   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}
+        className={classes}
+        onClick={() => disabled ? onClick() : undefined}
+        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,

diff --git a/src/components/steps/steps_horizontal.test.js b/src/components/steps/steps_horizontal.test.js
@@ -8,18 +8,21 @@ const steps = [
   {
     title: 'Completed Step 1',
     isComplete: true,
-    onClick: () => window.alert('Step 1 clicked'),
+    onClick: () => {},
   },
   {
     title: 'Selected Step 2',
     isSelected: true,
+    onClick: () => {},
   },
   {
     title: 'Incomplete Step 3',
+    onClick: () => {},
   },
   {
     title: 'Disabled Step 4',
     disabled: true,
+    onClick: () => {},
   },
 ];