Removed isHollow prop from EuiStep

elastic · May 4, 2022 · e070e27 · e070e27
1 parent 90bc8c1
commit e070e27
Show file tree

Hide file tree

Showing 8 changed files with 6 additions and 48 deletions.
diff --git a/src/components/steps/__snapshots__/step.test.tsx.snap b/src/components/steps/__snapshots__/step.test.tsx.snap
@@ -228,7 +228,7 @@ exports[`EuiStep props status incomplete is rendered 1`] = `
     class="euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle"
+      class="euiStepNumber euiStepNumber--incomplete euiStep__circle"
     >
       <span
         class="euiScreenReaderOnly"

diff --git a/src/components/steps/__snapshots__/step_number.test.tsx.snap b/src/components/steps/__snapshots__/step_number.test.tsx.snap
@@ -36,24 +36,6 @@ exports[`EuiStepNumber props has titleSize is rendered 1`] = `
 </span>
 `;
 
-exports[`EuiStepNumber props isHollow is rendered 1`] = `
-<span
-  class="euiStepNumber euiStepNumber-isHollow"
->
-  <span
-    class="euiScreenReaderOnly"
-  >
-    Step 1
-  </span>
-  <span
-    aria-hidden="true"
-    class="euiStepNumber__number"
-  >
-    1
-  </span>
-</span>
-`;
-
 exports[`EuiStepNumber props status complete is rendered 1`] = `
 <span
   class="euiStepNumber euiStepNumber--complete"

diff --git a/src/components/steps/__snapshots__/steps.test.tsx.snap b/src/components/steps/__snapshots__/steps.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
       class="euiStep__titleWrapper"
     >
       <span
-        class="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle"
+        class="euiStepNumber euiStepNumber--incomplete euiStep__circle"
       >
         <span
           class="euiScreenReaderOnly"
@@ -197,7 +197,7 @@ exports[`EuiSteps renders steps 1`] = `
       class="euiStep__titleWrapper"
     >
       <span
-        class="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle"
+        class="euiStepNumber euiStepNumber--incomplete euiStep__circle"
       >
         <span
           class="euiScreenReaderOnly"
@@ -311,7 +311,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
       class="euiStep__titleWrapper"
     >
       <span
-        class="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle"
+        class="euiStepNumber euiStepNumber--incomplete euiStep__circle"
       >
         <span
           class="euiScreenReaderOnly"
@@ -425,7 +425,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `
       class="euiStep__titleWrapper"
     >
       <span
-        class="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle euiStepNumber--small"
+        class="euiStepNumber euiStepNumber--incomplete euiStep__circle euiStepNumber--small"
       >
         <span
           class="euiScreenReaderOnly"

diff --git a/src/components/steps/_step_number.scss b/src/components/steps/_step_number.scss
@@ -35,15 +35,6 @@
     background: transparent;
   }
 
-  &.euiStepNumber-isHollow {
-    background-color: transparent;
-    border: 2px solid $euiColorPrimary;
-
-    .euiStepNumber__number {
-      display: none;
-    }
-  }
-
   // Create modifiers based upon the map
   @each $name, $color in $euiStepStatusColorsToFade {
     &--#{$name} {

diff --git a/src/components/steps/step.tsx b/src/components/steps/step.tsx
@@ -75,7 +75,6 @@ export const EuiStep: FunctionComponent<EuiStepProps> = ({
           number={step}
           status={status}
           titleSize={titleSize}
-          isHollow={status === 'incomplete'}
         />
         <EuiTitle size={titleSize as EuiTitleSize} className="euiStep__title">
           {createElement(headingElement, null, title)}

diff --git a/src/components/steps/step_number.test.tsx b/src/components/steps/step_number.test.tsx
@@ -20,14 +20,6 @@ describe('EuiStepNumber', () => {
   });
 
   describe('props', () => {
-    describe('isHollow', () => {
-      it('is rendered', () => {
-        const component = render(<EuiStepNumber number={1} isHollow />);
-
-        expect(component).toMatchSnapshot();
-      });
-    });
-
     describe('has titleSize', () => {
       it('is rendered', () => {
         const component = render(<EuiStepNumber titleSize="xs" number={1} />);

diff --git a/src/components/steps/step_number.tsx b/src/components/steps/step_number.tsx
@@ -45,11 +45,6 @@ export interface EuiStepNumberProps
    */
   status?: EuiStepStatus;
   number?: number;
-  /**
-   * **DEPRECATED IN AMSTERDAM**
-   * Uses a border and removes the step number.
-   */
-  isHollow?: boolean;
   /**
    * Title sizing equivalent to EuiTitle, but only `m`, `s` and `xs`. Defaults to `s`
    */
@@ -60,7 +55,6 @@ export const EuiStepNumber: FunctionComponent<EuiStepNumberProps> = ({
   className,
   status,
   number,
-  isHollow,
   titleSize,
   ...rest
 }) => {
@@ -76,7 +70,6 @@ export const EuiStepNumber: FunctionComponent<EuiStepNumberProps> = ({
   const classes = classNames(
     'euiStepNumber',
     status ? statusToClassNameMap[status] : undefined,
-    { 'euiStepNumber-isHollow': isHollow },
     className
   );
 

diff --git a/upcoming_changelogs/5868.md b/upcoming_changelogs/5868.md
@@ -5,3 +5,4 @@
 - Removed `data-grid-cell-id` attribute from `EuiDataGrid` cells - use separate `data-gridcell-column-id` & `data-gridcell-row-index` attributes instead
 - Removed `noDivider` prop from `EuiFilterButton` - use `withNext` prop instead
 - Removed `isSelected` and `isComplete` props from `EuiHorizontalStep` - use `status` prop instead
+- Removed `isHollow` prop from `EuiStep` - this visual appearance is no longer used in Amsterdam