From 3dfa45d1fbe02edaa80ddcf25d857ec1b726940c Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 26 Jan 2023 19:38:39 +0000 Subject: [PATCH 01/23] Initial conversion --- src/components/steps/_index.scss | 12 +- src/components/steps/_mixins.scss | 22 +- src/components/steps/_step_number.scss | 104 +++++----- src/components/steps/_steps.scss | 106 +++++----- src/components/steps/_steps_horizontal.scss | 192 +++++++++--------- src/components/steps/_sub_steps.scss | 26 +-- src/components/steps/_variables.scss | 20 +- src/components/steps/step.styles.ts | 82 ++++++++ src/components/steps/step.tsx | 31 ++- .../steps/step_horizontal.styles.ts | 159 +++++++++++++++ src/components/steps/step_horizontal.tsx | 44 ++-- src/components/steps/step_number.styles.ts | 128 ++++++++++++ src/components/steps/step_number.tsx | 42 ++-- .../steps/steps_horizontal.styles.ts | 20 ++ src/components/steps/steps_horizontal.tsx | 7 +- src/components/steps/sub_steps.styles.ts | 30 +++ src/components/steps/sub_steps.tsx | 7 +- src/global_styling/utility/animations.ts | 16 ++ src/services/color/manipulation.ts | 7 + src/services/index.ts | 1 + src/themes/amsterdam/overrides/_index.scss | 1 - src/themes/amsterdam/overrides/_steps.scss | 101 --------- 22 files changed, 777 insertions(+), 381 deletions(-) create mode 100644 src/components/steps/step.styles.ts create mode 100644 src/components/steps/step_horizontal.styles.ts create mode 100644 src/components/steps/step_number.styles.ts create mode 100644 src/components/steps/steps_horizontal.styles.ts create mode 100644 src/components/steps/sub_steps.styles.ts delete mode 100644 src/themes/amsterdam/overrides/_steps.scss diff --git a/src/components/steps/_index.scss b/src/components/steps/_index.scss index 68803f97cf9..76f82108c88 100644 --- a/src/components/steps/_index.scss +++ b/src/components/steps/_index.scss @@ -1,7 +1,7 @@ -@import 'variables'; -@import 'mixins'; +// @import 'variables'; +// @import 'mixins'; -@import 'step_number'; -@import 'steps'; -@import 'sub_steps'; -@import 'steps_horizontal'; +// @import 'step_number'; +// @import 'steps'; +// @import 'sub_steps'; +// @import 'steps_horizontal'; diff --git a/src/components/steps/_mixins.scss b/src/components/steps/_mixins.scss index 86f291b0ada..7d88e1c3cb7 100644 --- a/src/components/steps/_mixins.scss +++ b/src/components/steps/_mixins.scss @@ -1,12 +1,12 @@ -@mixin createStepsNumber($size: $euiStepNumberSize, $fontSize: $euiFontSize) { - @include size($size); +// @mixin createStepsNumber($size: $euiStepNumberSize, $fontSize: $euiFontSize) { +// @include size($size); - display: inline-block; - line-height: $size; - border-radius: $size; - text-align: center; - color: $euiColorEmptyShade; - background-color: $euiColorPrimary; - font-size: $fontSize; - font-weight: $euiFontWeightMedium; -} +// display: inline-block; +// line-height: $size; +// border-radius: $size; +// text-align: center; +// color: $euiColorEmptyShade; +// background-color: $euiColorPrimary; +// font-size: $fontSize; +// font-weight: $euiFontWeightMedium; +// } diff --git a/src/components/steps/_step_number.scss b/src/components/steps/_step_number.scss index 7f046deb41a..68f2af8c964 100644 --- a/src/components/steps/_step_number.scss +++ b/src/components/steps/_step_number.scss @@ -1,52 +1,52 @@ -.euiStepNumber { - @include createStepsNumber; - - .euiStepNumber__icon { - vertical-align: middle; - position: relative; - top: -2px; - } - - &--small { - @include createStepsNumber($euiStepNumberSmallSize, $euiFontSizeXS); - - .euiStepNumber__icon { - top: -1px; - } - } - - &--complete { - // Thicken the checkmark by adding a slight stroke. - .euiStepNumber__icon { - stroke: currentColor; - stroke-width: .5px; - } - } - - @include euiCanAnimate { - &--complete, - &--warning, - &--danger { - animation: euiGrow $euiAnimSpeedFast $euiAnimSlightBounce; - } - } - - &--loading { - background: transparent; - } - - // Create modifiers based upon the map - @each $name, $color in $euiStepStatusColorsToFade { - &--#{$name} { - $backgroundColor: $color; - @if (saturation($color) > 0%) { - $backgroundColor: tintOrShade($color, 90%, 70%); - } - - $textColor: makeHighContrastColor($color, $backgroundColor); - - color: $textColor; - background-color: $backgroundColor; - } - } -} +// .euiStepNumber { +// @include createStepsNumber; + +// .euiStepNumber__icon { +// vertical-align: middle; +// position: relative; +// top: -2px; +// } + +// &--small { +// @include createStepsNumber($euiStepNumberSmallSize, $euiFontSizeXS); + +// .euiStepNumber__icon { +// top: -1px; +// } +// } + +// &--complete { +// // Thicken the checkmark by adding a slight stroke. +// .euiStepNumber__icon { +// stroke: currentColor; +// stroke-width: .5px; +// } +// } + +// @include euiCanAnimate { +// &--complete, +// &--warning, +// &--danger { +// animation: euiGrow $euiAnimSpeedFast $euiAnimSlightBounce; +// } +// } + +// &--loading { +// background: transparent; +// } + +// Create modifiers based upon the map +// @each $name, $color in $euiStepStatusColorsToFade { +// &--#{$name} { +// // $backgroundColor: $color; +// // @if (saturation($color) > 0%) { +// // $backgroundColor: tintOrShade($color, 90%, 70%); +// // } + +// $textColor: makeHighContrastColor($color, $backgroundColor); + +// color: $textColor; +// background-color: $backgroundColor; +// } +// } +// } diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss index 084afb6ea72..9b1dd600c71 100644 --- a/src/components/steps/_steps.scss +++ b/src/components/steps/_steps.scss @@ -2,56 +2,56 @@ * 1. Ensure that the step number vertically aligns with the title text */ -.euiStep { - // Create border on all but the last step - &:not(:last-of-type) { - // stylelint-disable indentation - background-image: linear-gradient( - to right, - transparent 0, - transparent ($euiSize - 1), - $euiBorderColor ($euiSize - 1), - $euiBorderColor ($euiSize + 1), - transparent ($euiSize + 1), - transparent 100% - ); - // stylelint-enable indentation - background-repeat: no-repeat; - background-position: left $euiSizeXXL; - } - - &--small { - &:not(:last-of-type) { - background-position: left -#{$euiSizeXS} top $euiSizeXL; - } - - .euiStep__content { - // Align the content's contents with the title - padding-left: ($euiStepNumberSmallSize / 2) + $euiStepNumberMargin; - - // Align content border to horizontal center of step number - margin-left: ($euiStepNumberSmallSize / 2); - } - } -} - -.euiStep__titleWrapper { - display: flex; -} - -.euiStep__circle { - flex-shrink: 0; - margin-right: $euiStepNumberMargin; - vertical-align: top; /* 1 */ -} - -.euiStep__content { - padding: $euiSize $euiSize $euiSizeXL; - margin: $euiSizeS 0; - - // Align the content's contents with the title - padding-left: ($euiStepNumberSize / 2) + $euiStepNumberMargin; - - // Align content border to horizontal center of step number - margin-left: ($euiStepNumberSize / 2); -} +// .euiStep { +// // Create border on all but the last step +// &:not(:last-of-type) { +// // stylelint-disable indentation +// background-image: linear-gradient( +// to right, +// transparent 0, +// transparent ($euiSize - 1), +// $euiBorderColor ($euiSize - 1), +// $euiBorderColor ($euiSize + 1), +// transparent ($euiSize + 1), +// transparent 100% +// ); +// // stylelint-enable indentation +// background-repeat: no-repeat; +// background-position: left $euiSizeXXL; +// } + +// &--small { +// &:not(:last-of-type) { +// background-position: left -#{$euiSizeXS} top $euiSizeXL; +// } + +// .euiStep__content { +// // Align the content's contents with the title +// padding-left: ($euiStepNumberSmallSize / 2) + $euiStepNumberMargin; + +// // Align content border to horizontal center of step number +// margin-left: ($euiStepNumberSmallSize / 2); +// } +// } +// } + +// .euiStep__titleWrapper { +// display: flex; +// } + +// .euiStep__circle { +// flex-shrink: 0; +// margin-right: $euiStepNumberMargin; +// vertical-align: top; /* 1 */ +// } + +// .euiStep__content { +// padding: $euiSize $euiSize $euiSizeXL; +// margin: $euiSizeS 0; + +// // Align the content's contents with the title +// padding-left: ($euiStepNumberSize / 2) + $euiStepNumberMargin; + +// // Align content border to horizontal center of step number +// margin-left: ($euiStepNumberSize / 2); +// } diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss index 32d2326003b..6d6d4270548 100644 --- a/src/components/steps/_steps_horizontal.scss +++ b/src/components/steps/_steps_horizontal.scss @@ -1,7 +1,7 @@ -@mixin makeLineProgress { - height: 2px; - background-color: $euiColorPrimary; -} +// @mixin makeLineProgress { +// height: 2px; +// background-color: $euiColorPrimary; +// } /** * 1. Ensure the connecting lines stays behind the number @@ -10,111 +10,111 @@ * e.g. due to some of their titles wrapping to multiple lines */ -.euiStepsHorizontal { - display: flex; - align-items: stretch; - background: transparentize($euiColorLightestShade, .5); -} +// .euiStepsHorizontal { +// display: flex; +// align-items: stretch; +// background: transparentize($euiColorLightestShade, .5); +// } -.euiStepHorizontal__item { - flex-grow: 1; /* 2 */ - flex-basis: 0%; /* 2 */ +// .euiStepHorizontal__item { +// flex-grow: 1; /* 2 */ +// flex-basis: 0%; /* 2 */ - // Remove the respective lines if the first or last child - &:first-of-type > .euiStepHorizontal::before, - &:last-of-type > .euiStepHorizontal::after { - display: none; - } -} +// // Remove the respective lines if the first or last child +// &:first-of-type > .euiStepHorizontal::before, +// &:last-of-type > .euiStepHorizontal::after { +// display: none; +// } +// } // Button containing item .euiStepHorizontal { - padding: $euiSizeL $euiSize $euiSize; - display: flex; /* 3 */ - flex-direction: column; /* 3 */ - align-items: center; /* 3 */ - justify-content: flex-start; /* 3 */ - cursor: pointer; - position: relative; - width: 100%; - - // focus & hover state - &:focus:not(.euiStepHorizontal-isDisabled), - &:hover:not(.euiStepHorizontal-isDisabled) { - .euiStepHorizontal__title { - text-decoration: underline; - } - } - - &:focus:not(.euiStepHorizontal-isDisabled) { - outline: none; - - .euiStepHorizontal__number { - @include euiFocusRing(large); - } - } - - // disabled state - &.euiStepHorizontal-isDisabled { - cursor: not-allowed; - } - - // create the connecting lines - &::before, - &::after { - content: ''; - position: absolute; - width: calc(50% - #{$euiStepNumberSize / 2}); - height: 1px; - top: $euiSizeL + ($euiStepNumberSize / 2); - background-color: $euiColorLightShade; - z-index: $euiZLevel0; /* 1 */ - } - - &::before { - left: 0; - } - - &::after { - right: 0; - } + // padding: $euiSizeL $euiSize $euiSize; + // display: flex; /* 3 */ + // flex-direction: column; /* 3 */ + // align-items: center; /* 3 */ + // justify-content: flex-start; /* 3 */ + // cursor: pointer; + // position: relative; + // width: 100%; + + // // focus & hover state + // &:focus:not(.euiStepHorizontal-isDisabled), + // &:hover:not(.euiStepHorizontal-isDisabled) { + // .euiStepHorizontal__title { + // text-decoration: underline; + // } + // } + + // &:focus:not(.euiStepHorizontal-isDisabled) { + // outline: none; + + // .euiStepHorizontal__number { + // @include euiFocusRing(large); + // } + // } + + // // disabled state + // &.euiStepHorizontal-isDisabled { + // cursor: not-allowed; + // } + + // // create the connecting lines + // &::before, + // &::after { + // content: ''; + // position: absolute; + // width: calc(50% - #{$euiStepNumberSize / 2}); + // height: 1px; + // top: $euiSizeL + ($euiStepNumberSize / 2); + // background-color: $euiColorLightShade; + // z-index: $euiZLevel0; /* 1 */ + // } + + // &::before { + // left: 0; + // } + + // &::after { + // right: 0; + // } } -.euiStepHorizontal__number { - position: relative; /* 1 */ - z-index: $euiZLevel0 + 1; /* 1 */ - transition: all $euiAnimSpeedFast ease-in-out; -} +// .euiStepHorizontal__number { +// position: relative; /* 1 */ +// z-index: $euiZLevel0 + 1; /* 1 */ +// transition: all $euiAnimSpeedFast ease-in-out; +// } -.euiStepHorizontal__title { - @include euiTitle('xs'); - margin-top: $euiSizeS; - font-weight: $euiFontWeightRegular; - text-align: center; +// .euiStepHorizontal__title { +// @include euiTitle('xs'); +// margin-top: $euiSizeS; +// font-weight: $euiFontWeightRegular; +// text-align: center; - .euiStepHorizontal-isDisabled & { - color: $euiColorDarkShade; - } -} +// .euiStepHorizontal-isDisabled & { +// color: $euiColorDarkShade; +// } +// } // Complete state -.euiStepHorizontal-isComplete { - &::before, - &::after { - @include makeLineProgress; - } -} +// .euiStepHorizontal-isComplete { +// &::before, +// &::after { +// @include makeLineProgress; +// } +// } // Selected state -.euiStepHorizontal-isSelected { - .euiStepHorizontal__number:not([class*='danger']):not([class*='warning']):not([class*='loading']) { - @include euiSlightShadow(desaturate($euiColorPrimary, 20%)); - } - - &::before { - @include makeLineProgress; - } -} +// .euiStepHorizontal-isSelected { +// .euiStepHorizontal__number:not([class*='danger']):not([class*='warning']):not([class*='loading']) { +// @include euiSlightShadow(desaturate($euiColorPrimary, 20%)); +// } + +// &::before { +// @include makeLineProgress; +// } +// } // RESPONSIVE @include euiBreakpoint('xs', 's') { diff --git a/src/components/steps/_sub_steps.scss b/src/components/steps/_sub_steps.scss index 97829c3ec59..6a19b59c55d 100644 --- a/src/components/steps/_sub_steps.scss +++ b/src/components/steps/_sub_steps.scss @@ -1,15 +1,15 @@ -.euiSubSteps { - padding: $euiSize; - background-color: $euiColorLightestShade; - margin-bottom: $euiSize; +// .euiSubSteps { +// padding: $euiSize; +// background-color: $euiColorLightestShade; +// margin-bottom: $euiSize; - > *:last-child { - margin-bottom: 0; - } +// > *:last-child { +// margin-bottom: 0; +// } - // change ordered list from numbers to lowercase letters - .euiText & ol, - & ol { - list-style-type: lower-alpha; - } -} +// // change ordered list from numbers to lowercase letters +// .euiText & ol, +// & ol { +// list-style-type: lower-alpha; +// } +// } diff --git a/src/components/steps/_variables.scss b/src/components/steps/_variables.scss index dfb923411b4..f39be33e355 100644 --- a/src/components/steps/_variables.scss +++ b/src/components/steps/_variables.scss @@ -1,11 +1,11 @@ -$euiStepNumberSize: $euiSizeXL !default; -$euiStepNumberSmallSize: $euiSizeL !default; -$euiStepNumberMargin: $euiSize !default; +// $euiStepNumberSize: $euiSizeXL !default; +// $euiStepNumberSmallSize: $euiSizeL !default; +// $euiStepNumberMargin: $euiSize !default; -// Modifier naming and colors. -$euiStepStatusColorsToFade: ( - warning: $euiColorWarning, - danger: $euiColorDanger, - disabled: $euiColorDarkShade, - incomplete: $euiColorDarkShade, -) !default; +// // Modifier naming and colors. +// $euiStepStatusColorsToFade: ( +// warning: $euiColorWarning, +// danger: $euiColorDanger, +// disabled: $euiColorDarkShade, +// incomplete: $euiColorDarkShade, +// ) !default; diff --git a/src/components/steps/step.styles.ts b/src/components/steps/step.styles.ts new file mode 100644 index 00000000000..78e532015a1 --- /dev/null +++ b/src/components/steps/step.styles.ts @@ -0,0 +1,82 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { UseEuiTheme } from '../../services'; +import { mathWithUnits, logicalShorthandCSS } from '../../global_styling'; + +export const euiStepVariables = (euiThemeContext: UseEuiTheme) => { + return { + numberSmallSize: euiThemeContext.euiTheme.size.l, + numberSize: euiThemeContext.euiTheme.size.xl, + numberMargin: euiThemeContext.euiTheme.size.base, + }; +}; + +export const euiStepStyles = (euiThemeContext: UseEuiTheme) => { + const euiTheme = euiThemeContext.euiTheme; + const euiStep = euiStepVariables(euiThemeContext); + + const linerGradient = `linear-gradient(to right, transparent 0, transparent 15px, ${euiTheme.border.color} 15px, ${euiTheme.border.color} 17px, transparent 17px, transparent 100%)`; + + return { + euiStep: css` + // Create border on all but the last step &:not(:last-of-type) { + background-image: ${linerGradient}; + background-repeat: no-repeat; + + &:not(:last-of-type) { + background-position: left ${euiTheme.size.xl}; + } + `, + small: css` + &:not(:last-of-type) { + background-position: left -${euiTheme.size.xs} ${euiTheme.size.l}; + } + `, + euiStep__titleWrapper: css` + display: flex; + `, + euiStep__circle: css` + flex-shrink: 0; + margin-inline-end: ${euiStep.numberMargin}; + // Ensure that the step number vertically aligns with the title text + vertical-align: top; + `, + euiStep__content: { + small: css` + ${logicalShorthandCSS( + 'padding', + `${euiTheme.size.base} ${euiTheme.size.base} ${euiTheme.size.xl}` + )} + ${logicalShorthandCSS('margin', `${euiTheme.size.s} 0`)} + // Align the content's contents with the title + padding-inline-start: ${mathWithUnits( + [euiStep.numberSize, euiStep.numberMargin], + (x, y) => x / 2 + y + )}; + + // Align content border to horizontal center of step number + margin-inline-start: ${mathWithUnits(euiStep.numberSize, (x) => x / 2)}; + `, + regular: css` + // Align the content's contents with the title + padding-inline-start: ${mathWithUnits( + [euiStep.numberSmallSize, euiStep.numberMargin], + (x, y) => x / 2 + y + )}; + + // Align content border to horizontal center of step number + margin-inline-start: ${mathWithUnits( + euiStep.numberSmallSize, + (x) => x / 2 + )}; + `, + }, + }; +}; diff --git a/src/components/steps/step.tsx b/src/components/steps/step.tsx index eab5f4e4b95..271937ad193 100644 --- a/src/components/steps/step.tsx +++ b/src/components/steps/step.tsx @@ -16,6 +16,8 @@ import React, { import { CommonProps } from '../common'; import { EuiTitle, EuiTitleProps, EuiTitleSize } from '../title'; import { EuiStepNumber, EuiStepStatus } from './step_number'; +import { useEuiTheme } from '../../services'; +import { euiStepStyles } from './step.styles'; export interface EuiStepInterface { /** @@ -58,30 +60,45 @@ export const EuiStep: FunctionComponent = ({ const classes = classNames( 'euiStep', { - 'euiStep--small': titleSize === 'xs', 'euiStep-isDisabled': status === 'disabled', }, className ); - const numberClasses = classNames('euiStep__circle', { - 'euiStepNumber--small': titleSize === 'xs', - }); + const numberClasses = classNames('euiStep__circle', {}); + + const isSmall = titleSize === 'xs'; + + const euiTheme = useEuiTheme(); + const styles = euiStepStyles(euiTheme); + const cssStyles = [styles.euiStep, isSmall && styles.small]; + + const contentStyles = [ + isSmall && styles.euiStep__content.small, + !isSmall && styles.euiStep__content.regular, + ]; + + const titleWrapperStyles = styles.euiStep__titleWrapper; + + const circleStyles = [styles.euiStep__circle]; return ( -
-
+
+
{createElement(headingElement, null, title)}
-
{children}
+
+ {children} +
); }; diff --git a/src/components/steps/step_horizontal.styles.ts b/src/components/steps/step_horizontal.styles.ts new file mode 100644 index 00000000000..3dde0bb34fa --- /dev/null +++ b/src/components/steps/step_horizontal.styles.ts @@ -0,0 +1,159 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { UseEuiTheme } from '../../services'; +import { + euiBreakpoint, + logicalShorthandCSS, + euiFocusRing, + euiCanAnimate, + mathWithUnits, +} from '../../global_styling/'; +import { euiShadowXSmall } from '../../themes/amsterdam/global_styling/mixins'; +import { euiTitle } from '../title/title.styles'; +import { euiStepVariables } from './step.styles'; + +const makeLineProgress = (euiTheme: UseEuiTheme['euiTheme']) => { + return css` + block-size: 2px; + background-color: ${euiTheme.colors.primary}; + `; +}; + +export const euiStepHorizontalStyles = ( + euiThemeContext: UseEuiTheme, + isDisabled: boolean +) => { + const euiTheme = euiThemeContext.euiTheme; + const euiStep = euiStepVariables(euiThemeContext); + + /** + * 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 + */ + + return { + euiStepHorizontal: css` + ${logicalShorthandCSS( + 'padding', + `${euiTheme.size.l} ${euiTheme.size.base} ${euiTheme.size.base}` + )} + display: flex; /* 3 */ + flex-direction: column; /* 3 */ + align-items: center; /* 3 */ + justify-content: flex-start; /* 3 */ + cursor: pointer; + position: relative; + inline-size: 100%; + + // focus & hover state + ${!isDisabled && + ` + &:focus, + &:hover { + .euiStepHorizontal__title { + text-decoration: underline; + } + } + `} + + &:focus:not(.euiStepHorizontal-isDisabled) { + outline: none; + + .euiStepHorizontal__number { + ${euiFocusRing(euiThemeContext)} + } + } + + // disabled state + &.euiStepHorizontal-isDisabled { + cursor: not-allowed; + } + + // create the connecting lines + &::before, + &::after { + content: ''; + position: absolute; + inline-size: calc(50% - (${euiStep.numberSize} / 2)); + block-size: 1px; + inset-block-start: ${mathWithUnits( + [euiTheme.size.l, euiStep.numberSize], + (x, y) => x + y / 2 + )}; + background-color: ${euiTheme.colors.lightShade}; + z-index: ${euiTheme.levels.content}; /* 1 */ + } + + &::before { + inset-inline-start: 0; + } + + &::after { + inset-inline-end: 0; + } + + ${euiBreakpoint(euiThemeContext, ['xs', 's'])} { + display: inline-block !important; + } + `, + isComplete: css` + &::before, + &::after { + ${makeLineProgress(euiTheme)} + } + `, + isIncomplete: css``, + isDisabled: css``, + isSelected: css` + .euiStepHorizontal__number:not([class*='danger']):not([class*='warning']):not([class*='loading']) { + ${euiShadowXSmall(euiThemeContext)} + } + + &::before { + ${makeLineProgress(euiTheme)} + } + `, + euiStepHorizontal__item: css` + flex-grow: 1; /* 2 */ + flex-basis: 0%; /* 2 */ + + // Remove the respective lines if the first or last child + &:first-of-type > .euiStepHorizontal::before, + &:last-of-type > .euiStepHorizontal::after { + display: none; + } + `, + euiStepHorizontal__number: css` + position: relative; /* 1 */ + z-index: ${euiTheme.levels.content} + 1; /* 1 */ + + ${euiCanAnimate} { + transition: all ${euiTheme.animation.fast} ease-in-out; + } + `, + euiStepHorizontal__title: css` + ${euiTitle(euiThemeContext, 'xs')}; + margin-block-start: ${euiTheme.size.s}; + font-weight: ${euiTheme.font.weight.regular}; + text-align: center; + + .euiStepHorizontal-isDisabled & { + color: ${euiTheme.colors.darkShade}; + } + + // hide titles on small screens + ${euiBreakpoint(euiThemeContext, ['xs', 's'])} { + display: none; + } + `, + }; +}; diff --git a/src/components/steps/step_horizontal.tsx b/src/components/steps/step_horizontal.tsx index f137ba6e3e1..e122684887f 100644 --- a/src/components/steps/step_horizontal.tsx +++ b/src/components/steps/step_horizontal.tsx @@ -23,6 +23,8 @@ import { useI18nStep, useI18nWarningStep, } from './step_strings'; +import { useEuiTheme } from '../../services'; +import { euiStepHorizontalStyles } from './step_horizontal.styles'; export interface EuiStepHorizontalProps extends Omit, 'onClick'>, @@ -63,19 +65,33 @@ export const EuiStepHorizontal: FunctionComponent = ({ if (disabled) status = 'disabled'; - const classes = classNames('euiStepHorizontal', className, { - 'euiStepHorizontal-isSelected': status === 'current', - 'euiStepHorizontal-isComplete': status === 'complete', - 'euiStepHorizontal-isIncomplete': status === 'incomplete', - 'euiStepHorizontal-isDisabled': status === 'disabled', - }); + const classes = classNames('euiStepHorizontal', className); + + const isSelected = status === 'current'; + const isComplete = status === 'complete'; + const isIncomplete = status === 'incomplete'; + const isDisabled = status === 'disabled'; + const isWarning = status === 'warning'; + + const euiTheme = useEuiTheme(); + const styles = euiStepHorizontalStyles(euiTheme, isDisabled); + const cssStyles = [ + styles.euiStepHorizontal, + isSelected && styles.isSelected, + isComplete && styles.isComplete, + isIncomplete && styles.isIncomplete, + isDisabled && styles.isDisabled, + ]; + + const cssNumberStyles = styles.euiStepHorizontal__number; + const cssTitleStyles = styles.euiStepHorizontal__title; let stepTitle = buttonTitle; - if (status === 'disabled') stepTitle = disabledTitle; - if (status === 'complete') stepTitle = completeTitle; - if (status === 'incomplete') stepTitle = incompleteTitle; - if (status === 'warning') stepTitle = warningTitle; - if (status === 'current') stepTitle = currentTitle; + if (isDisabled) stepTitle = disabledTitle; + if (isComplete) stepTitle = completeTitle; + if (isIncomplete) stepTitle = incompleteTitle; + if (isWarning) stepTitle = warningTitle; + if (isSelected) stepTitle = currentTitle; const onStepClick = ( event: ReactMouseEvent @@ -89,15 +105,19 @@ export const EuiStepHorizontal: FunctionComponent = ({ title={stepTitle} onClick={onStepClick} disabled={disabled} + css={cssStyles} {...rest} > - {title} + + {title} + ); }; diff --git a/src/components/steps/step_number.styles.ts b/src/components/steps/step_number.styles.ts new file mode 100644 index 00000000000..581430bb7a4 --- /dev/null +++ b/src/components/steps/step_number.styles.ts @@ -0,0 +1,128 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { + logicalCSS, + euiFontSizeFromScale, + euiCanAnimate, + euiAnimScale, +} from '../../global_styling'; +import { + UseEuiTheme, + shade, + tint, + getSaturation, + makeHighContrastColor, +} from '../../services'; +import { euiStepVariables } from './step.styles'; + +const createStepsNumber = ( + euiTheme: UseEuiTheme['euiTheme'], + size: string, + fontSize: string +) => { + return css` + display: inline-block; + line-height: ${size}; + border-radius: ${size}; + ${logicalCSS('width', size)}; + ${logicalCSS('height', size)}; + text-align: center; + color: ${euiTheme.colors.emptyShade}; + background-color: ${euiTheme.colors.primary}; + font-size: ${fontSize}; + font-weight: ${euiTheme.font.weight.bold}; + `; +}; + +const getBackground = (euiThemeContext: UseEuiTheme, color: string) => { + const { euiTheme, colorMode } = euiThemeContext; + + const isDarkMode = colorMode === 'DARK'; + const backgroundForSaturation = isDarkMode + ? shade(color, 0.9) + : tint(color, 0.7); + + const backgroundColor = + getSaturation(color) > 0.5 ? backgroundForSaturation : color; + + return css` + color: ${makeHighContrastColor(euiTheme.colors.text)(backgroundColor)}; + background-color: ${backgroundColor}; + `; +}; + +export const euiStepNumberStyles = ( + euiThemeContext: UseEuiTheme, + statusIsComplete?: boolean +) => { + const euiTheme = euiThemeContext.euiTheme; + const euiStep = euiStepVariables(euiThemeContext); + + return { + euiStepNumber: css` + ${createStepsNumber( + euiTheme, + euiStep.numberSize, + euiFontSizeFromScale('m', euiTheme) + )} + `, + small: css` + ${createStepsNumber( + euiTheme, + euiStep.numberSmallSize, + euiFontSizeFromScale('s', euiTheme) + )} + `, + // status + incomplete: css` + ${getBackground(euiThemeContext, euiTheme.colors.darkShade)} + `, + disabled: css` + ${getBackground(euiThemeContext, euiTheme.colors.darkShade)} + `, + loading: css` + background: transparent; + `, + warning: css` + ${getBackground(euiThemeContext, euiTheme.colors.warning)} + + ${euiCanAnimate} { + animation: ${euiAnimScale} ${euiTheme.animation.fast} + ${euiTheme.animation.bounce}; + } + `, + danger: css` + ${getBackground(euiThemeContext, euiTheme.colors.danger)} + ${euiCanAnimate} { + animation: ${euiAnimScale} ${euiTheme.animation.fast} + ${euiTheme.animation.bounce}; + } + `, + complete: css` + ${euiCanAnimate} { + animation: ${euiAnimScale} ${euiTheme.animation.fast} + ${euiTheme.animation.bounce}; + } + `, + current: css``, + euiStepNumber__icon: css` + vertical-align: middle; + position: relative; + inset-block-start: -2px; + + // Thicken the checkmark by adding a slight stroke. + ${statusIsComplete && + ` + stroke: currentColor; + stroke-width: 0.5px; + `} + `, + }; +}; diff --git a/src/components/steps/step_number.tsx b/src/components/steps/step_number.tsx index bebfbe17f35..9ad4a0c29b3 100644 --- a/src/components/steps/step_number.tsx +++ b/src/components/steps/step_number.tsx @@ -9,7 +9,7 @@ import classNames from 'classnames'; import React, { FunctionComponent, HTMLAttributes } from 'react'; import { EuiScreenReaderOnly } from '../accessibility'; -import { CommonProps, keysOf } from '../common'; +import { CommonProps } from '../common'; import { EuiIcon } from '../icon'; import { EuiStepProps } from './step'; import { @@ -24,17 +24,18 @@ import { } from './step_strings'; import { EuiLoadingSpinner } from '../loading'; -const statusToClassNameMap = { - incomplete: 'euiStepNumber--incomplete', - disabled: 'euiStepNumber--disabled', - loading: 'euiStepNumber--loading', - warning: 'euiStepNumber--warning', - danger: 'euiStepNumber--danger', - complete: 'euiStepNumber--complete', - current: null, // Current displays the same as the default (undefined) -}; +import { useEuiTheme } from '../../services'; +import { euiStepNumberStyles } from './step_number.styles'; -export const STATUS = keysOf(statusToClassNameMap); +export const STATUS = [ + 'incomplete', + 'disabled', + 'loading', + 'warning', + 'danger', + 'complete', + 'current', +] as const; export type EuiStepStatus = typeof STATUS[number]; export interface EuiStepNumberProps @@ -67,11 +68,15 @@ export const EuiStepNumber: FunctionComponent = ({ const loadingAriaLabel = useI18nLoadingStep({ number }); const currentAriaLabel = useI18nCurrentStep({ number }); - const classes = classNames( - 'euiStepNumber', - status ? statusToClassNameMap[status] : undefined, - className - ); + const classes = classNames('euiStepNumber', className); + + const statusIsComplete = status === 'complete'; + + const euiTheme = useEuiTheme(); + const styles = euiStepNumberStyles(euiTheme, statusIsComplete); + const cssStyles = [styles.euiStepNumber, status && styles[status]]; + + const cssIconStyles = styles.euiStepNumber__icon; const iconSize = titleSize === 'xs' ? 's' : 'm'; let screenReaderText = stepAriaLabel; @@ -98,6 +103,7 @@ export const EuiStepNumber: FunctionComponent = ({ className="euiStepNumber__icon" size={iconSize} aria-label={completeAriaLabel} + css={cssIconStyles} /> ); } else if (status === 'warning') { @@ -107,6 +113,7 @@ export const EuiStepNumber: FunctionComponent = ({ className="euiStepNumber__icon" size={iconSize} aria-label={warningAriaLabel} + css={cssIconStyles} /> ); } else if (status === 'danger') { @@ -116,6 +123,7 @@ export const EuiStepNumber: FunctionComponent = ({ className="euiStepNumber__icon" size={iconSize} aria-label={errorsAriaLabel} + css={cssIconStyles} /> ); } else if (status === 'loading') { @@ -133,7 +141,7 @@ export const EuiStepNumber: FunctionComponent = ({ } return ( - + {numberOrIcon} ); diff --git a/src/components/steps/steps_horizontal.styles.ts b/src/components/steps/steps_horizontal.styles.ts new file mode 100644 index 00000000000..85627970005 --- /dev/null +++ b/src/components/steps/steps_horizontal.styles.ts @@ -0,0 +1,20 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { UseEuiTheme, transparentize } from '../../services'; + +export const euiStepsHorizontalStyles = ({ euiTheme }: UseEuiTheme) => { + return { + euiStepsHorizontal: css` + display: flex; + align-items: stretch; + background: ${transparentize(euiTheme.colors.lightestShade, 0.5)}; + `, + }; +}; diff --git a/src/components/steps/steps_horizontal.tsx b/src/components/steps/steps_horizontal.tsx index c25de521db2..968efc35d43 100644 --- a/src/components/steps/steps_horizontal.tsx +++ b/src/components/steps/steps_horizontal.tsx @@ -10,6 +10,8 @@ import classNames from 'classnames'; import React, { FunctionComponent, OlHTMLAttributes } from 'react'; import { CommonProps } from '../common'; import { EuiStepHorizontal, EuiStepHorizontalProps } from './step_horizontal'; +import { useEuiTheme } from '../../services'; +import { euiStepsHorizontalStyles } from './steps_horizontal.styles'; export interface EuiStepsHorizontalProps extends OlHTMLAttributes, @@ -26,9 +28,12 @@ export const EuiStepsHorizontal: FunctionComponent = ({ ...rest }) => { const classes = classNames('euiStepsHorizontal', className); + const euiTheme = useEuiTheme(); + const styles = euiStepsHorizontalStyles(euiTheme); + const cssStyles = [styles.euiStepsHorizontal]; return ( -
    +
      {steps.map((stepProps, index) => { const isCurrent = stepProps.status === 'current' diff --git a/src/components/steps/sub_steps.styles.ts b/src/components/steps/sub_steps.styles.ts new file mode 100644 index 00000000000..c794f595b5d --- /dev/null +++ b/src/components/steps/sub_steps.styles.ts @@ -0,0 +1,30 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { UseEuiTheme } from '../../services'; + +export const euiSubStepsStyles = ({ euiTheme }: UseEuiTheme) => { + return { + euiSubSteps: css` + padding: ${euiTheme.size.base}; + background-color: ${euiTheme.colors.lightestShade}; + margin-block-end: ${euiTheme.size.base}; + + > *:last-child { + margin-block-end: 0; + } + + // change ordered list from numbers to lowercase letters + .euiText & ol, + & ol { + list-style-type: lower-alpha; + } + `, + }; +}; diff --git a/src/components/steps/sub_steps.tsx b/src/components/steps/sub_steps.tsx index 4e1f2a3ae78..915b88fe2b7 100644 --- a/src/components/steps/sub_steps.tsx +++ b/src/components/steps/sub_steps.tsx @@ -9,6 +9,8 @@ import React, { HTMLAttributes, FunctionComponent } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../common'; +import { useEuiTheme } from '../../services'; +import { euiSubStepsStyles } from './sub_steps.styles'; export type EuiSubStepsProps = FunctionComponent< HTMLAttributes & CommonProps @@ -20,9 +22,12 @@ export const EuiSubSteps: EuiSubStepsProps = ({ ...rest }) => { const classes = classNames('euiSubSteps', className); + const euiTheme = useEuiTheme(); + const styles = euiSubStepsStyles(euiTheme); + const cssStyles = [styles.euiSubSteps]; return ( -
      +
      {children}
      ); diff --git a/src/global_styling/utility/animations.ts b/src/global_styling/utility/animations.ts index 397ce13a9fd..5a48cf2974f 100644 --- a/src/global_styling/utility/animations.ts +++ b/src/global_styling/utility/animations.ts @@ -29,3 +29,19 @@ export const euiAnimSlideInUp = (size: string) => keyframes` transform: translateY(0); } `; + +export const euiAnimScale = keyframes` + 0% { + opacity: 0; + } + + 1% { + opacity: 0; + transform: scale(0); + } + + 100% { + opacity: 1; + transform: scale(1); + } +`; diff --git a/src/services/color/manipulation.ts b/src/services/color/manipulation.ts index c40849ca58b..6cee76e290f 100644 --- a/src/services/color/manipulation.ts +++ b/src/services/color/manipulation.ts @@ -111,3 +111,10 @@ export const darken = (color: string, amount: number) => */ export const brighten = (color: string, amount: number) => chroma(color).brighten(amount).hex(); + +/** + * Returns the saturation value of a color. 0-100 + * @param color + * @returns + */ +export const getSaturation = (color: string) => chroma(color).get('hsl.s'); diff --git a/src/services/index.ts b/src/services/index.ts index eb18a0e8adc..3d878da847c 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -46,6 +46,7 @@ export { euiPaletteNegative, euiPalettePositive, euiPaletteWarm, + getSaturation, getSteppedGradient, hexToHsv, hexToRgb, diff --git a/src/themes/amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss index c1c351891fe..f3c16fa9c2f 100644 --- a/src/themes/amsterdam/overrides/_index.scss +++ b/src/themes/amsterdam/overrides/_index.scss @@ -12,4 +12,3 @@ @import 'key_pad_menu'; @import 'markdown_editor'; @import 'side_nav'; -@import 'steps'; diff --git a/src/themes/amsterdam/overrides/_steps.scss b/src/themes/amsterdam/overrides/_steps.scss deleted file mode 100644 index c716b022c4e..00000000000 --- a/src/themes/amsterdam/overrides/_steps.scss +++ /dev/null @@ -1,101 +0,0 @@ -// Make the disabled step title the same disabled text color -.euiStepHorizontal-isDisabled .euiStepHorizontal__title, -.euiStep-isDisabled .euiStep__title { - color: $euiColorDisabledText; -} - -// STEP NUMBER CHANGES - -.euiStepNumber { - outline-color: $euiColorPrimary; - - .euiStepNumber__icon { - position: relative; - top: -1px; - } - - &--small { - .euiStepNumber__icon { - top: -1px; - } - } - - &--complete, - &--danger { - // Thicken the checkmark by adding a slight stroke. - .euiStepNumber__icon { - stroke: currentColor; - stroke-width: .5px; - } - } - - // Create modifiers based upon the map - @each $name, $color in $euiStepStatusColors { - &--#{$name} { - background-color: $color; - color: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk); - outline-color: chooseLightOrDarkText($color, $color, $euiColorInk) !important; // stylelint-disable-line declaration-no-important - } - } - - &.euiStepNumber--incomplete { - background-color: transparent; - color: $euiTextColor; - border: $euiBorderThick; - - // Don't hide the step number when "hollow" - .euiStepNumber__number { - display: unset; - position: relative; - top: -2px; - } - } -} - -.euiStepNumber--disabled { - $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiButtonColorDisabled, 90%); - background-color: transparentize($euiButtonColorDisabled, .9); - color: makeDisabledContrastColor($euiButtonColorDisabled, $backgroundColorSimulated); -} - -.euiStepHorizontal__title { - font-weight: $euiFontWeightBold; -} - -.euiStepHorizontal { - // create the connecting lines - &::before, - &::after { - @include makeLineProgress; - background-color: $euiBorderColor; - } -} - -// Make the line connect to the numbers - -.euiStep { - &:not(:last-of-type) { - background-position: left $euiSizeXL; - } - - &--small { - &:not(:last-of-type) { - background-position: -#{$euiSizeXS} $euiSizeL; - } - } -} - -.euiStep__content { - padding-bottom: ($euiSizeXL + $euiSizeS); - margin-bottom: 0; -} - -// Remove forced background from horizontal steps -.euiStepsHorizontal { - background: none; -} - -// Fix outline in Chrome for horizontal steps -.euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__number:not(:focus-visible) { - outline: $euiFocusRingSize solid $euiColorPrimary; -} From eb566172d9a6bbc0e618b3bebd66b5974e7bde29 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 30 Jan 2023 17:56:48 +0000 Subject: [PATCH 02/23] WIP --- src/components/index.scss | 1 - src/components/steps/_index.scss | 7 - src/components/steps/_mixins.scss | 12 -- src/components/steps/_step_number.scss | 52 ------- src/components/steps/_steps.scss | 57 -------- src/components/steps/_steps_horizontal.scss | 135 ------------------ src/components/steps/_sub_steps.scss | 15 -- src/components/steps/_variables.scss | 11 -- src/components/steps/step.styles.ts | 82 +++++++---- src/components/steps/step.tsx | 41 +++--- .../steps/step_horizontal.styles.ts | 45 +++--- src/components/steps/step_number.styles.ts | 63 ++++---- src/components/steps/step_number.tsx | 9 +- .../steps/steps_horizontal.styles.ts | 15 +- src/components/steps/steps_horizontal.tsx | 12 +- src/services/color/manipulation.ts | 15 ++ src/services/index.ts | 1 + .../global_styling/variables/_index.scss | 1 - .../global_styling/variables/_steps.scss | 8 -- 19 files changed, 169 insertions(+), 413 deletions(-) delete mode 100644 src/components/steps/_index.scss delete mode 100644 src/components/steps/_mixins.scss delete mode 100644 src/components/steps/_step_number.scss delete mode 100644 src/components/steps/_steps.scss delete mode 100644 src/components/steps/_steps_horizontal.scss delete mode 100644 src/components/steps/_sub_steps.scss delete mode 100644 src/components/steps/_variables.scss delete mode 100644 src/themes/amsterdam/global_styling/variables/_steps.scss diff --git a/src/components/index.scss b/src/components/index.scss index 12c8908501b..f305e36b174 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -25,6 +25,5 @@ @import 'side_nav/index'; @import 'search_bar/index'; @import 'selectable/index'; -@import 'steps/index'; @import 'suggest/index'; @import 'table/index'; diff --git a/src/components/steps/_index.scss b/src/components/steps/_index.scss deleted file mode 100644 index 76f82108c88..00000000000 --- a/src/components/steps/_index.scss +++ /dev/null @@ -1,7 +0,0 @@ -// @import 'variables'; -// @import 'mixins'; - -// @import 'step_number'; -// @import 'steps'; -// @import 'sub_steps'; -// @import 'steps_horizontal'; diff --git a/src/components/steps/_mixins.scss b/src/components/steps/_mixins.scss deleted file mode 100644 index 7d88e1c3cb7..00000000000 --- a/src/components/steps/_mixins.scss +++ /dev/null @@ -1,12 +0,0 @@ -// @mixin createStepsNumber($size: $euiStepNumberSize, $fontSize: $euiFontSize) { -// @include size($size); - -// display: inline-block; -// line-height: $size; -// border-radius: $size; -// text-align: center; -// color: $euiColorEmptyShade; -// background-color: $euiColorPrimary; -// font-size: $fontSize; -// font-weight: $euiFontWeightMedium; -// } diff --git a/src/components/steps/_step_number.scss b/src/components/steps/_step_number.scss deleted file mode 100644 index 68f2af8c964..00000000000 --- a/src/components/steps/_step_number.scss +++ /dev/null @@ -1,52 +0,0 @@ -// .euiStepNumber { -// @include createStepsNumber; - -// .euiStepNumber__icon { -// vertical-align: middle; -// position: relative; -// top: -2px; -// } - -// &--small { -// @include createStepsNumber($euiStepNumberSmallSize, $euiFontSizeXS); - -// .euiStepNumber__icon { -// top: -1px; -// } -// } - -// &--complete { -// // Thicken the checkmark by adding a slight stroke. -// .euiStepNumber__icon { -// stroke: currentColor; -// stroke-width: .5px; -// } -// } - -// @include euiCanAnimate { -// &--complete, -// &--warning, -// &--danger { -// animation: euiGrow $euiAnimSpeedFast $euiAnimSlightBounce; -// } -// } - -// &--loading { -// background: transparent; -// } - -// Create modifiers based upon the map -// @each $name, $color in $euiStepStatusColorsToFade { -// &--#{$name} { -// // $backgroundColor: $color; -// // @if (saturation($color) > 0%) { -// // $backgroundColor: tintOrShade($color, 90%, 70%); -// // } - -// $textColor: makeHighContrastColor($color, $backgroundColor); - -// color: $textColor; -// background-color: $backgroundColor; -// } -// } -// } diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss deleted file mode 100644 index 9b1dd600c71..00000000000 --- a/src/components/steps/_steps.scss +++ /dev/null @@ -1,57 +0,0 @@ -/** - * 1. Ensure that the step number vertically aligns with the title text - */ - -// .euiStep { -// // Create border on all but the last step -// &:not(:last-of-type) { -// // stylelint-disable indentation -// background-image: linear-gradient( -// to right, -// transparent 0, -// transparent ($euiSize - 1), -// $euiBorderColor ($euiSize - 1), -// $euiBorderColor ($euiSize + 1), -// transparent ($euiSize + 1), -// transparent 100% -// ); -// // stylelint-enable indentation -// background-repeat: no-repeat; -// background-position: left $euiSizeXXL; -// } - -// &--small { -// &:not(:last-of-type) { -// background-position: left -#{$euiSizeXS} top $euiSizeXL; -// } - -// .euiStep__content { -// // Align the content's contents with the title -// padding-left: ($euiStepNumberSmallSize / 2) + $euiStepNumberMargin; - -// // Align content border to horizontal center of step number -// margin-left: ($euiStepNumberSmallSize / 2); -// } -// } -// } - -// .euiStep__titleWrapper { -// display: flex; -// } - -// .euiStep__circle { -// flex-shrink: 0; -// margin-right: $euiStepNumberMargin; -// vertical-align: top; /* 1 */ -// } - -// .euiStep__content { -// padding: $euiSize $euiSize $euiSizeXL; -// margin: $euiSizeS 0; - -// // Align the content's contents with the title -// padding-left: ($euiStepNumberSize / 2) + $euiStepNumberMargin; - -// // Align content border to horizontal center of step number -// margin-left: ($euiStepNumberSize / 2); -// } diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss deleted file mode 100644 index 6d6d4270548..00000000000 --- a/src/components/steps/_steps_horizontal.scss +++ /dev/null @@ -1,135 +0,0 @@ -// @mixin makeLineProgress { -// height: 2px; -// background-color: $euiColorPrimary; -// } - -/** - * 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 { -// display: flex; -// align-items: stretch; -// background: transparentize($euiColorLightestShade, .5); -// } - -// .euiStepHorizontal__item { -// flex-grow: 1; /* 2 */ -// flex-basis: 0%; /* 2 */ - -// // Remove the respective lines if the first or last child -// &:first-of-type > .euiStepHorizontal::before, -// &:last-of-type > .euiStepHorizontal::after { -// display: none; -// } -// } - -// Button containing item -.euiStepHorizontal { - // padding: $euiSizeL $euiSize $euiSize; - // display: flex; /* 3 */ - // flex-direction: column; /* 3 */ - // align-items: center; /* 3 */ - // justify-content: flex-start; /* 3 */ - // cursor: pointer; - // position: relative; - // width: 100%; - - // // focus & hover state - // &:focus:not(.euiStepHorizontal-isDisabled), - // &:hover:not(.euiStepHorizontal-isDisabled) { - // .euiStepHorizontal__title { - // text-decoration: underline; - // } - // } - - // &:focus:not(.euiStepHorizontal-isDisabled) { - // outline: none; - - // .euiStepHorizontal__number { - // @include euiFocusRing(large); - // } - // } - - // // disabled state - // &.euiStepHorizontal-isDisabled { - // cursor: not-allowed; - // } - - // // create the connecting lines - // &::before, - // &::after { - // content: ''; - // position: absolute; - // width: calc(50% - #{$euiStepNumberSize / 2}); - // height: 1px; - // top: $euiSizeL + ($euiStepNumberSize / 2); - // background-color: $euiColorLightShade; - // z-index: $euiZLevel0; /* 1 */ - // } - - // &::before { - // left: 0; - // } - - // &::after { - // right: 0; - // } -} - -// .euiStepHorizontal__number { -// position: relative; /* 1 */ -// z-index: $euiZLevel0 + 1; /* 1 */ -// transition: all $euiAnimSpeedFast ease-in-out; -// } - -// .euiStepHorizontal__title { -// @include euiTitle('xs'); -// margin-top: $euiSizeS; -// font-weight: $euiFontWeightRegular; -// text-align: center; - -// .euiStepHorizontal-isDisabled & { -// color: $euiColorDarkShade; -// } -// } - -// Complete state -// .euiStepHorizontal-isComplete { -// &::before, -// &::after { -// @include makeLineProgress; -// } -// } - -// Selected state -// .euiStepHorizontal-isSelected { -// .euiStepHorizontal__number:not([class*='danger']):not([class*='warning']):not([class*='loading']) { -// @include euiSlightShadow(desaturate($euiColorPrimary, 20%)); -// } - -// &::before { -// @include makeLineProgress; -// } -// } - -// RESPONSIVE -@include euiBreakpoint('xs', 's') { - .euiStepHorizontal { - // reduce top padding and shift lines - padding-top: $euiSize; - - &::before, - &::after { - top: $euiSize + $euiStepNumberSize / 2; - } - } - - // hide titles - .euiStepHorizontal__title { - display: none; - } -} diff --git a/src/components/steps/_sub_steps.scss b/src/components/steps/_sub_steps.scss deleted file mode 100644 index 6a19b59c55d..00000000000 --- a/src/components/steps/_sub_steps.scss +++ /dev/null @@ -1,15 +0,0 @@ -// .euiSubSteps { -// padding: $euiSize; -// background-color: $euiColorLightestShade; -// margin-bottom: $euiSize; - -// > *:last-child { -// margin-bottom: 0; -// } - -// // change ordered list from numbers to lowercase letters -// .euiText & ol, -// & ol { -// list-style-type: lower-alpha; -// } -// } diff --git a/src/components/steps/_variables.scss b/src/components/steps/_variables.scss deleted file mode 100644 index f39be33e355..00000000000 --- a/src/components/steps/_variables.scss +++ /dev/null @@ -1,11 +0,0 @@ -// $euiStepNumberSize: $euiSizeXL !default; -// $euiStepNumberSmallSize: $euiSizeL !default; -// $euiStepNumberMargin: $euiSize !default; - -// // Modifier naming and colors. -// $euiStepStatusColorsToFade: ( -// warning: $euiColorWarning, -// danger: $euiColorDanger, -// disabled: $euiColorDarkShade, -// incomplete: $euiColorDarkShade, -// ) !default; diff --git a/src/components/steps/step.styles.ts b/src/components/steps/step.styles.ts index 78e532015a1..31883ef565a 100644 --- a/src/components/steps/step.styles.ts +++ b/src/components/steps/step.styles.ts @@ -18,7 +18,11 @@ export const euiStepVariables = (euiThemeContext: UseEuiTheme) => { }; }; -export const euiStepStyles = (euiThemeContext: UseEuiTheme) => { +export const euiStepStyles = ( + euiThemeContext: UseEuiTheme, + isDisabled: boolean, + isSmall: boolean +) => { const euiTheme = euiThemeContext.euiTheme; const euiStep = euiStepVariables(euiThemeContext); @@ -27,44 +31,52 @@ export const euiStepStyles = (euiThemeContext: UseEuiTheme) => { return { euiStep: css` // Create border on all but the last step &:not(:last-of-type) { - background-image: ${linerGradient}; - background-repeat: no-repeat; - + &:not(:last-of-type) { + background-image: ${linerGradient}; + background-repeat: no-repeat; + } + `, + // sizes + medium: css` &:not(:last-of-type) { background-position: left ${euiTheme.size.xl}; } `, small: css` &:not(:last-of-type) { - background-position: left -${euiTheme.size.xs} ${euiTheme.size.l}; + background-position: -${euiTheme.size.xs} ${euiTheme.size.l}; } `, + isDisabled: css``, + euiStep__title: css` + ${isDisabled && + ` + color: ${euiTheme.colors.disabledText}; + `} + `, euiStep__titleWrapper: css` display: flex; + gap: ${euiStep.numberMargin}; `, - euiStep__circle: css` - flex-shrink: 0; - margin-inline-end: ${euiStep.numberMargin}; - // Ensure that the step number vertically aligns with the title text - vertical-align: top; - `, - euiStep__content: { - small: css` - ${logicalShorthandCSS( - 'padding', - `${euiTheme.size.base} ${euiTheme.size.base} ${euiTheme.size.xl}` - )} - ${logicalShorthandCSS('margin', `${euiTheme.size.s} 0`)} - // Align the content's contents with the title - padding-inline-start: ${mathWithUnits( - [euiStep.numberSize, euiStep.numberMargin], - (x, y) => x / 2 + y - )}; + euiStep__content: css` + ${logicalShorthandCSS( + 'padding', + `${euiTheme.size.base} ${euiTheme.size.base} ${euiTheme.size.xl}` + )} + ${logicalShorthandCSS('margin', `${euiTheme.size.s} 0`)} + // Align the content's contents with the title + padding-inline-start: ${mathWithUnits( + [euiStep.numberSize, euiStep.numberMargin], + (x, y) => x / 2 + y + )}; + margin-block-end: 0; + padding-block-end: ${mathWithUnits( + [euiTheme.size.xl, euiTheme.size.s], + (x, y) => x + y + )}; - // Align content border to horizontal center of step number - margin-inline-start: ${mathWithUnits(euiStep.numberSize, (x) => x / 2)}; - `, - regular: css` + ${isSmall && + ` // Align the content's contents with the title padding-inline-start: ${mathWithUnits( [euiStep.numberSmallSize, euiStep.numberMargin], @@ -76,7 +88,19 @@ export const euiStepStyles = (euiThemeContext: UseEuiTheme) => { euiStep.numberSmallSize, (x) => x / 2 )}; - `, - }, + `} + + ${!isSmall && + ` + // Align the content's contents with the title + padding-inline-start: ${mathWithUnits( + [euiStep.numberSize, euiStep.numberMargin], + (x, y) => x / 2 + y + )}; + + // Align content border to horizontal center of step number + margin-inline-start: ${mathWithUnits(euiStep.numberSize, (x) => x / 2)}; + `} + `, }; }; diff --git a/src/components/steps/step.tsx b/src/components/steps/step.tsx index 271937ad193..b30d1369bd9 100644 --- a/src/components/steps/step.tsx +++ b/src/components/steps/step.tsx @@ -57,41 +57,34 @@ export const EuiStep: FunctionComponent = ({ status, ...rest }) => { - const classes = classNames( - 'euiStep', - { - 'euiStep-isDisabled': status === 'disabled', - }, - className - ); - const numberClasses = classNames('euiStep__circle', {}); + const isDisabled = status === 'disabled'; + const classes = classNames('euiStep', className); const isSmall = titleSize === 'xs'; const euiTheme = useEuiTheme(); - const styles = euiStepStyles(euiTheme); - const cssStyles = [styles.euiStep, isSmall && styles.small]; - - const contentStyles = [ - isSmall && styles.euiStep__content.small, - !isSmall && styles.euiStep__content.regular, + const styles = euiStepStyles(euiTheme, isDisabled, isSmall); + const cssStyles = [ + styles.euiStep, + isSmall && styles.small, + !isSmall && styles.medium, + isDisabled && styles.isDisabled, ]; - const titleWrapperStyles = styles.euiStep__titleWrapper; + const contentStyles = styles.euiStep__content; - const circleStyles = [styles.euiStep__circle]; + const euiStepTitleStyles = styles.euiStep__title; + const titleWrapperStyles = styles.euiStep__titleWrapper; return (
      - - + + {createElement(headingElement, null, title)}
      diff --git a/src/components/steps/step_horizontal.styles.ts b/src/components/steps/step_horizontal.styles.ts index 3dde0bb34fa..cd437f229e2 100644 --- a/src/components/steps/step_horizontal.styles.ts +++ b/src/components/steps/step_horizontal.styles.ts @@ -22,7 +22,7 @@ import { euiStepVariables } from './step.styles'; const makeLineProgress = (euiTheme: UseEuiTheme['euiTheme']) => { return css` block-size: 2px; - background-color: ${euiTheme.colors.primary}; + background-color: ${euiTheme.border.color}; `; }; @@ -35,8 +35,7 @@ export const euiStepHorizontalStyles = ( /** * 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, + * 2. 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 */ @@ -46,10 +45,10 @@ export const euiStepHorizontalStyles = ( 'padding', `${euiTheme.size.l} ${euiTheme.size.base} ${euiTheme.size.base}` )} - display: flex; /* 3 */ - flex-direction: column; /* 3 */ - align-items: center; /* 3 */ - justify-content: flex-start; /* 3 */ + display: flex; /* 2 */ + flex-direction: column; /* 2 */ + align-items: center; /* 2 */ + justify-content: flex-start; /* 2 */ cursor: pointer; position: relative; inline-size: 100%; @@ -73,23 +72,17 @@ export const euiStepHorizontalStyles = ( } } - // disabled state - &.euiStepHorizontal-isDisabled { - cursor: not-allowed; - } - // create the connecting lines &::before, &::after { + ${makeLineProgress(euiTheme)} content: ''; position: absolute; inline-size: calc(50% - (${euiStep.numberSize} / 2)); - block-size: 1px; inset-block-start: ${mathWithUnits( [euiTheme.size.l, euiStep.numberSize], (x, y) => x + y / 2 )}; - background-color: ${euiTheme.colors.lightShade}; z-index: ${euiTheme.levels.content}; /* 1 */ } @@ -112,7 +105,9 @@ export const euiStepHorizontalStyles = ( } `, isIncomplete: css``, - isDisabled: css``, + isDisabled: css` + cursor: not-allowed; + `, isSelected: css` .euiStepHorizontal__number:not([class*='danger']):not([class*='warning']):not([class*='loading']) { ${euiShadowXSmall(euiThemeContext)} @@ -122,19 +117,10 @@ export const euiStepHorizontalStyles = ( ${makeLineProgress(euiTheme)} } `, - euiStepHorizontal__item: css` - flex-grow: 1; /* 2 */ - flex-basis: 0%; /* 2 */ - - // Remove the respective lines if the first or last child - &:first-of-type > .euiStepHorizontal::before, - &:last-of-type > .euiStepHorizontal::after { - display: none; - } - `, euiStepHorizontal__number: css` position: relative; /* 1 */ z-index: ${euiTheme.levels.content} + 1; /* 1 */ + margin-inline-end: 0; ${euiCanAnimate} { transition: all ${euiTheme.animation.fast} ease-in-out; @@ -143,12 +129,13 @@ export const euiStepHorizontalStyles = ( euiStepHorizontal__title: css` ${euiTitle(euiThemeContext, 'xs')}; margin-block-start: ${euiTheme.size.s}; - font-weight: ${euiTheme.font.weight.regular}; + font-weight: ${euiTheme.font.weight.bold}; text-align: center; - .euiStepHorizontal-isDisabled & { - color: ${euiTheme.colors.darkShade}; - } + ${isDisabled && + ` + color: ${euiTheme.colors.disabledText}; + `} // hide titles on small screens ${euiBreakpoint(euiThemeContext, ['xs', 's'])} { diff --git a/src/components/steps/step_number.styles.ts b/src/components/steps/step_number.styles.ts index 581430bb7a4..aa53cf4af05 100644 --- a/src/components/steps/step_number.styles.ts +++ b/src/components/steps/step_number.styles.ts @@ -15,19 +15,18 @@ import { } from '../../global_styling'; import { UseEuiTheme, - shade, - tint, - getSaturation, - makeHighContrastColor, + chooseLightOrDarkText, + transparentize, } from '../../services'; import { euiStepVariables } from './step.styles'; +import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins'; const createStepsNumber = ( euiTheme: UseEuiTheme['euiTheme'], size: string, fontSize: string ) => { - return css` + return ` display: inline-block; line-height: ${size}; border-radius: ${size}; @@ -41,19 +40,18 @@ const createStepsNumber = ( `; }; -const getBackground = (euiThemeContext: UseEuiTheme, color: string) => { - const { euiTheme, colorMode } = euiThemeContext; - - const isDarkMode = colorMode === 'DARK'; - const backgroundForSaturation = isDarkMode - ? shade(color, 0.9) - : tint(color, 0.7); - - const backgroundColor = - getSaturation(color) > 0.5 ? backgroundForSaturation : color; +const getBackground = ( + euiThemeContext: UseEuiTheme, + backgroundColor: string +) => { + const { euiTheme } = euiThemeContext; - return css` - color: ${makeHighContrastColor(euiTheme.colors.text)(backgroundColor)}; + return ` + color: ${chooseLightOrDarkText( + backgroundColor, + euiTheme.colors.ghost, + euiTheme.colors.ink + )}; background-color: ${backgroundColor}; `; }; @@ -64,28 +62,44 @@ export const euiStepNumberStyles = ( ) => { const euiTheme = euiThemeContext.euiTheme; const euiStep = euiStepVariables(euiThemeContext); + const buttonColorDisabled = euiButtonColor(euiThemeContext, 'disabled') + .backgroundColor; return { euiStepNumber: css` + flex-shrink: 0; + `, + // sizes + small: css` ${createStepsNumber( euiTheme, - euiStep.numberSize, - euiFontSizeFromScale('m', euiTheme) + euiStep.numberSmallSize, + euiFontSizeFromScale('xs', euiTheme) )} `, - small: css` + medium: css` ${createStepsNumber( euiTheme, - euiStep.numberSmallSize, + euiStep.numberSize, euiFontSizeFromScale('s', euiTheme) )} `, // status incomplete: css` - ${getBackground(euiThemeContext, euiTheme.colors.darkShade)} + background-color: transparent; + color: ${euiTheme.colors.text}; + border: ${euiTheme.border.thick}; + + .euiStepNumber__number { + // adjusts position because of thicker border + display: unset; + position: relative; + inset-block-start: -2px; + } `, disabled: css` - ${getBackground(euiThemeContext, euiTheme.colors.darkShade)} + background-color: ${transparentize(buttonColorDisabled, 0.7)}; + color: ${euiTheme.colors.disabledText}; `, loading: css` background: transparent; @@ -106,6 +120,7 @@ export const euiStepNumberStyles = ( } `, complete: css` + ${getBackground(euiThemeContext, euiTheme.colors.success)} ${euiCanAnimate} { animation: ${euiAnimScale} ${euiTheme.animation.fast} ${euiTheme.animation.bounce}; @@ -115,7 +130,7 @@ export const euiStepNumberStyles = ( euiStepNumber__icon: css` vertical-align: middle; position: relative; - inset-block-start: -2px; + inset-block-start: -1px; // Thicken the checkmark by adding a slight stroke. ${statusIsComplete && diff --git a/src/components/steps/step_number.tsx b/src/components/steps/step_number.tsx index 9ad4a0c29b3..03b4d2671d2 100644 --- a/src/components/steps/step_number.tsx +++ b/src/components/steps/step_number.tsx @@ -68,13 +68,20 @@ export const EuiStepNumber: FunctionComponent = ({ const loadingAriaLabel = useI18nLoadingStep({ number }); const currentAriaLabel = useI18nCurrentStep({ number }); + const isSmall = titleSize === 'xs'; + const classes = classNames('euiStepNumber', className); const statusIsComplete = status === 'complete'; const euiTheme = useEuiTheme(); const styles = euiStepNumberStyles(euiTheme, statusIsComplete); - const cssStyles = [styles.euiStepNumber, status && styles[status]]; + const cssStyles = [ + styles.euiStepNumber, + isSmall && styles.small, + !isSmall && styles.medium, + status && styles[status], + ]; const cssIconStyles = styles.euiStepNumber__icon; diff --git a/src/components/steps/steps_horizontal.styles.ts b/src/components/steps/steps_horizontal.styles.ts index 85627970005..874cced4927 100644 --- a/src/components/steps/steps_horizontal.styles.ts +++ b/src/components/steps/steps_horizontal.styles.ts @@ -7,14 +7,23 @@ */ import { css } from '@emotion/react'; -import { UseEuiTheme, transparentize } from '../../services'; -export const euiStepsHorizontalStyles = ({ euiTheme }: UseEuiTheme) => { +// 1. Make each step the same width +export const euiStepsHorizontalStyles = () => { return { euiStepsHorizontal: css` display: flex; align-items: stretch; - background: ${transparentize(euiTheme.colors.lightestShade, 0.5)}; + `, + euiStepsHorizontal_item: css` + flex-grow: 1; /* 1 */ + flex-basis: 0%; /* 1 */ + + // Remove the respective lines if the first or last child + &:first-of-type > .euiStepHorizontal::before, + &:last-of-type > .euiStepHorizontal::after { + display: none; + } `, }; }; diff --git a/src/components/steps/steps_horizontal.tsx b/src/components/steps/steps_horizontal.tsx index 968efc35d43..4a43d7dbc66 100644 --- a/src/components/steps/steps_horizontal.tsx +++ b/src/components/steps/steps_horizontal.tsx @@ -10,7 +10,6 @@ import classNames from 'classnames'; import React, { FunctionComponent, OlHTMLAttributes } from 'react'; import { CommonProps } from '../common'; import { EuiStepHorizontal, EuiStepHorizontalProps } from './step_horizontal'; -import { useEuiTheme } from '../../services'; import { euiStepsHorizontalStyles } from './steps_horizontal.styles'; export interface EuiStepsHorizontalProps @@ -28,9 +27,9 @@ export const EuiStepsHorizontal: FunctionComponent = ({ ...rest }) => { const classes = classNames('euiStepsHorizontal', className); - const euiTheme = useEuiTheme(); - const styles = euiStepsHorizontalStyles(euiTheme); + const styles = euiStepsHorizontalStyles(); const cssStyles = [styles.euiStepsHorizontal]; + const cssItemStyles = styles.euiStepsHorizontal_item; return (
        @@ -41,7 +40,12 @@ export const EuiStepsHorizontal: FunctionComponent = ({ : {}; return ( -
      1. +
        3. ); diff --git a/src/services/color/manipulation.ts b/src/services/color/manipulation.ts index 6cee76e290f..59c61603b17 100644 --- a/src/services/color/manipulation.ts +++ b/src/services/color/manipulation.ts @@ -118,3 +118,18 @@ export const brighten = (color: string, amount: number) => * @returns */ export const getSaturation = (color: string) => chroma(color).get('hsl.s'); + +/** + * Returns the hue value of a color. 0-360 + * @param backgroundColor + * @param lightColor + * @param darkColor + */ +export const chooseLightOrDarkText = ( + backgroundColor: string, + lightColor: string, + darkColor: string +) => { + const lightnessValue = lightness(backgroundColor); + return lightnessValue > 50 ? darkColor : lightColor; +}; diff --git a/src/services/index.ts b/src/services/index.ts index 3d878da847c..d6e1580a09a 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -30,6 +30,7 @@ export { brighten, calculateContrast, calculateLuminance, + chooseLightOrDarkText, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, diff --git a/src/themes/amsterdam/global_styling/variables/_index.scss b/src/themes/amsterdam/global_styling/variables/_index.scss index 6a69af2e238..9cf2c083778 100644 --- a/src/themes/amsterdam/global_styling/variables/_index.scss +++ b/src/themes/amsterdam/global_styling/variables/_index.scss @@ -5,5 +5,4 @@ @import 'buttons'; @import 'header'; @import 'page'; -@import 'steps'; @import 'typography'; diff --git a/src/themes/amsterdam/global_styling/variables/_steps.scss b/src/themes/amsterdam/global_styling/variables/_steps.scss deleted file mode 100644 index c0535491a32..00000000000 --- a/src/themes/amsterdam/global_styling/variables/_steps.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Modifier naming and colors for step status' -// Disabled/Loading/Incomplete are handled manually -$euiStepStatusColors: ( - default: $euiColorPrimary, - complete: $euiColorSuccess, - warning: $euiColorWarning, - danger: $euiColorDanger, -); From 333dc1da1035c87ca112c072d6d042c45eea476d Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 30 Jan 2023 18:00:12 +0000 Subject: [PATCH 03/23] Align title --- src/components/steps/step.styles.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/steps/step.styles.ts b/src/components/steps/step.styles.ts index 31883ef565a..4603f3fdc9a 100644 --- a/src/components/steps/step.styles.ts +++ b/src/components/steps/step.styles.ts @@ -49,6 +49,8 @@ export const euiStepStyles = ( `, isDisabled: css``, euiStep__title: css` + padding-block-start: ${euiTheme.size.xxs}; + ${isDisabled && ` color: ${euiTheme.colors.disabledText}; From 9baca6d91794d3da12a5fcab03bd60e13d674efc Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 31 Jan 2023 13:25:28 +0000 Subject: [PATCH 04/23] Add CL --- upcoming_changelogs/6555.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 upcoming_changelogs/6555.md diff --git a/upcoming_changelogs/6555.md b/upcoming_changelogs/6555.md new file mode 100644 index 00000000000..4fdac727b29 --- /dev/null +++ b/upcoming_changelogs/6555.md @@ -0,0 +1,5 @@ +- Added padding to `EuiStep` title to better align with icon + +**CSS-in-JS conversions** + +- Converted `EuiSteps` to Emotion; Removed `$euiStepStatusColorsToFade` From ff203c82606709dfbb70da5eaa3ec4a6a7a94f6b Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 31 Jan 2023 14:07:27 +0000 Subject: [PATCH 05/23] Add `shouldRenderCustomStyles()` --- .../steps/__snapshots__/step.test.tsx.snap | 116 ++++++++--------- .../step_horizontal.test.tsx.snap | 72 +++++------ .../__snapshots__/step_number.test.tsx.snap | 24 ++-- .../steps/__snapshots__/steps.test.tsx.snap | 120 +++++++++--------- .../steps_horizontal.test.tsx.snap | 36 +++--- .../__snapshots__/sub_steps.test.tsx.snap | 2 +- src/components/steps/step.test.tsx | 7 + src/components/steps/step_horizontal.test.tsx | 15 ++- src/components/steps/step_number.test.tsx | 3 + src/components/steps/steps.test.tsx | 3 + .../steps/steps_horizontal.test.tsx | 5 + src/components/steps/sub_steps.test.tsx | 3 + 12 files changed, 215 insertions(+), 191 deletions(-) diff --git a/src/components/steps/__snapshots__/step.test.tsx.snap b/src/components/steps/__snapshots__/step.test.tsx.snap index 99f637fb5e7..d6938089662 100644 --- a/src/components/steps/__snapshots__/step.test.tsx.snap +++ b/src/components/steps/__snapshots__/step.test.tsx.snap @@ -3,14 +3,14 @@ exports[`EuiStep is rendered 1`] = `

        First step

        Do this @@ -42,13 +42,13 @@ exports[`EuiStep is rendered 1`] = ` exports[`EuiStep props headingElement 1`] = `

        First step

        Do this @@ -80,29 +80,29 @@ exports[`EuiStep props headingElement 1`] = ` exports[`EuiStep props status complete is rendered 1`] = `

        Step 1 is complete

        First step

        Do this @@ -113,13 +113,13 @@ exports[`EuiStep props status complete is rendered 1`] = ` exports[`EuiStep props status current is rendered 1`] = `

        First step

        Do this @@ -151,29 +151,29 @@ exports[`EuiStep props status current is rendered 1`] = ` exports[`EuiStep props status danger is rendered 1`] = `

        Step 1 has errors

        First step

        Do this @@ -184,13 +184,13 @@ exports[`EuiStep props status danger is rendered 1`] = ` exports[`EuiStep props status disabled is rendered 1`] = `

        First step

        Do this @@ -222,13 +222,13 @@ exports[`EuiStep props status disabled is rendered 1`] = ` exports[`EuiStep props status incomplete is rendered 1`] = `

        First step

        Do this @@ -260,13 +260,13 @@ exports[`EuiStep props status incomplete is rendered 1`] = ` exports[`EuiStep props status loading is rendered 1`] = `

        First step

        Do this @@ -297,29 +297,29 @@ exports[`EuiStep props status loading is rendered 1`] = ` exports[`EuiStep props status warning is rendered 1`] = `

        Step 1 has warnings

        First step

        Do this @@ -330,13 +330,13 @@ exports[`EuiStep props status warning is rendered 1`] = ` exports[`EuiStep props step 1`] = `

        First step

        Do this @@ -368,13 +368,13 @@ exports[`EuiStep props step 1`] = ` exports[`EuiStep props titleSize 1`] = `

        First step

        Do this diff --git a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap index 59812da720b..909c8a2b4e0 100644 --- a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap +++ b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap @@ -3,12 +3,12 @@ exports[`EuiStepHorizontal is rendered 1`] = ` `; exports[`EuiStepHorizontal props status complete is rendered 1`] = ` `; exports[`EuiStepHorizontal props status current is rendered 1`] = ` `; exports[`EuiStepHorizontal props status danger is rendered 1`] = ` `; exports[`EuiStepHorizontal props status disabled is rendered 1`] = ` `; exports[`EuiStepHorizontal props status disabled overrides the passed status 1`] = ` `; exports[`EuiStepHorizontal props status incomplete is rendered 1`] = ` `; exports[`EuiStepHorizontal props status loading is rendered 1`] = ` `; exports[`EuiStepHorizontal props status warning is rendered 1`] = ` `; exports[`EuiStepHorizontal props step 1`] = ` `; exports[`EuiStepHorizontal props title 1`] = `

        5. -
        +
        {children}
        diff --git a/src/components/steps/sub_steps.styles.ts b/src/components/steps/sub_steps.styles.ts index c794f595b5d..dbf0c3e770c 100644 --- a/src/components/steps/sub_steps.styles.ts +++ b/src/components/steps/sub_steps.styles.ts @@ -21,8 +21,8 @@ export const euiSubStepsStyles = ({ euiTheme }: UseEuiTheme) => { } // change ordered list from numbers to lowercase letters - .euiText & ol, - & ol { + & ol, + .euiText & ol { list-style-type: lower-alpha; } `, From 3376cec012b9d4c56c12581c98f8e84a288a5ed6 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 13 Feb 2023 13:06:07 +0000 Subject: [PATCH 12/23] Improve `linearGradient` to use variables --- .../steps/__snapshots__/step.test.tsx.snap | 22 ++++++++--------- .../steps/__snapshots__/steps.test.tsx.snap | 24 +++++++++---------- src/components/steps/step.styles.ts | 8 ++++++- 3 files changed, 30 insertions(+), 24 deletions(-) diff --git a/src/components/steps/__snapshots__/step.test.tsx.snap b/src/components/steps/__snapshots__/step.test.tsx.snap index d6938089662..f620be30585 100644 --- a/src/components/steps/__snapshots__/step.test.tsx.snap +++ b/src/components/steps/__snapshots__/step.test.tsx.snap @@ -31,7 +31,7 @@ exports[`EuiStep is rendered 1`] = `

        Do this @@ -69,7 +69,7 @@ exports[`EuiStep props headingElement 1`] = `

        Do this @@ -102,7 +102,7 @@ exports[`EuiStep props status complete is rendered 1`] = `

        Do this @@ -140,7 +140,7 @@ exports[`EuiStep props status current is rendered 1`] = `

        Do this @@ -173,7 +173,7 @@ exports[`EuiStep props status danger is rendered 1`] = `

        Do this @@ -211,7 +211,7 @@ exports[`EuiStep props status disabled is rendered 1`] = `

        Do this @@ -249,7 +249,7 @@ exports[`EuiStep props status incomplete is rendered 1`] = `

        Do this @@ -286,7 +286,7 @@ exports[`EuiStep props status loading is rendered 1`] = `

        Do this @@ -319,7 +319,7 @@ exports[`EuiStep props status warning is rendered 1`] = `

        Do this @@ -357,7 +357,7 @@ exports[`EuiStep props step 1`] = `

        Do this @@ -395,7 +395,7 @@ exports[`EuiStep props titleSize 1`] = `

        Do this diff --git a/src/components/steps/__snapshots__/steps.test.tsx.snap b/src/components/steps/__snapshots__/steps.test.tsx.snap index 94bc91a6344..4a6c18fb55c 100644 --- a/src/components/steps/__snapshots__/steps.test.tsx.snap +++ b/src/components/steps/__snapshots__/steps.test.tsx.snap @@ -34,7 +34,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `

        Do this first @@ -69,7 +69,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `

        Then this @@ -104,7 +104,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `

        And finally, do this @@ -148,7 +148,7 @@ exports[`EuiSteps renders steps 1`] = `

        Do this first @@ -183,7 +183,7 @@ exports[`EuiSteps renders steps 1`] = `

        Then this @@ -218,7 +218,7 @@ exports[`EuiSteps renders steps 1`] = `

        And finally, do this @@ -262,7 +262,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `

        Do this first @@ -297,7 +297,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `

        Then this @@ -332,7 +332,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `

        And finally, do this @@ -376,7 +376,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `

        Do this first @@ -411,7 +411,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `

        Then this @@ -446,7 +446,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `

        And finally, do this diff --git a/src/components/steps/step.styles.ts b/src/components/steps/step.styles.ts index 9824311adaf..e3f9810e7e9 100644 --- a/src/components/steps/step.styles.ts +++ b/src/components/steps/step.styles.ts @@ -25,7 +25,12 @@ export const euiStepStyles = ( const euiTheme = euiThemeContext.euiTheme; const euiStep = euiStepVariables(euiThemeContext); - const linerGradient = `linear-gradient(to right, transparent 0, transparent 15px, ${euiTheme.border.color} 15px, ${euiTheme.border.color} 17px, transparent 17px, transparent 100%)`; + // the vertical line is centered on the number, so we need to offset the line by half the number size + // and because the vertical line is 2px, we also need to offset the number by 1px to center it + const lineStartPosition = mathWithUnits(euiStep.numberSize, (x) => x / 2 - 1); + const lineEndPosition = mathWithUnits(euiStep.numberSize, (x) => x / 2 + 1); + + const linerGradient = `linear-gradient(to right, transparent 0, transparent ${lineStartPosition}, ${euiTheme.border.color} ${lineStartPosition}, ${euiTheme.border.color} ${lineEndPosition}, transparent ${lineEndPosition}, transparent 100%)`; return { euiStep: css` @@ -47,6 +52,7 @@ export const euiStepStyles = ( `, small: css` &:not(:last-of-type) { + // Adjust the line to be centered on the small number background-position: -${euiTheme.size.xs} ${euiTheme.size.l}; } `, From 21f484d633838c39ea728e71f25ef49233ef0690 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 13 Feb 2023 13:27:03 +0000 Subject: [PATCH 13/23] Avoid passing `isDisabled` as a style prop --- .../steps/__snapshots__/step.test.tsx.snap | 22 ++++++------- .../step_horizontal.test.tsx.snap | 4 +-- .../steps/__snapshots__/steps.test.tsx.snap | 24 +++++++------- .../steps_horizontal.test.tsx.snap | 2 +- src/components/steps/step.styles.ts | 14 +++----- src/components/steps/step.tsx | 13 +++++--- .../steps/step_horizontal.styles.ts | 33 +++++++++---------- src/components/steps/step_horizontal.tsx | 14 ++++++-- 8 files changed, 66 insertions(+), 60 deletions(-) diff --git a/src/components/steps/__snapshots__/step.test.tsx.snap b/src/components/steps/__snapshots__/step.test.tsx.snap index f620be30585..b5bc6b881d6 100644 --- a/src/components/steps/__snapshots__/step.test.tsx.snap +++ b/src/components/steps/__snapshots__/step.test.tsx.snap @@ -25,7 +25,7 @@ exports[`EuiStep is rendered 1`] = `

        First step

        @@ -63,7 +63,7 @@ exports[`EuiStep props headingElement 1`] = `

        First step

        @@ -96,7 +96,7 @@ exports[`EuiStep props status complete is rendered 1`] = `

        First step

        @@ -134,7 +134,7 @@ exports[`EuiStep props status current is rendered 1`] = `

        First step

        @@ -167,7 +167,7 @@ exports[`EuiStep props status danger is rendered 1`] = `

        First step

        @@ -205,7 +205,7 @@ exports[`EuiStep props status disabled is rendered 1`] = `

        First step

        @@ -243,7 +243,7 @@ exports[`EuiStep props status incomplete is rendered 1`] = `

        First step

        @@ -280,7 +280,7 @@ exports[`EuiStep props status loading is rendered 1`] = ` />

        First step

        @@ -313,7 +313,7 @@ exports[`EuiStep props status warning is rendered 1`] = `

        First step

        @@ -351,7 +351,7 @@ exports[`EuiStep props step 1`] = `

        First step

        @@ -389,7 +389,7 @@ exports[`EuiStep props titleSize 1`] = `

        First step

        diff --git a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap index 172a98ef676..0f63497bec0 100644 --- a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap +++ b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap @@ -117,7 +117,7 @@ exports[`EuiStepHorizontal props status disabled is rendered 1`] = ` `; @@ -144,7 +144,7 @@ exports[`EuiStepHorizontal props status disabled overrides the passed status 1`] `; diff --git a/src/components/steps/__snapshots__/steps.test.tsx.snap b/src/components/steps/__snapshots__/steps.test.tsx.snap index 4a6c18fb55c..10f3ab93d5d 100644 --- a/src/components/steps/__snapshots__/steps.test.tsx.snap +++ b/src/components/steps/__snapshots__/steps.test.tsx.snap @@ -28,7 +28,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `

        first title

        @@ -63,7 +63,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `

        second title

        @@ -98,7 +98,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `

        third title

        @@ -142,7 +142,7 @@ exports[`EuiSteps renders steps 1`] = `

        first title

        @@ -177,7 +177,7 @@ exports[`EuiSteps renders steps 1`] = `

        second title

        @@ -212,7 +212,7 @@ exports[`EuiSteps renders steps 1`] = `

        third title

        @@ -256,7 +256,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `

        first title

        @@ -291,7 +291,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `

        second title

        @@ -326,7 +326,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `

        third title

        @@ -370,7 +370,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `

        first title

        @@ -405,7 +405,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `

        second title

        @@ -440,7 +440,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `

        third title

        diff --git a/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap index 20d46b917aa..46e80c984c0 100644 --- a/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap +++ b/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap @@ -112,7 +112,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = ` Disabled Step 4 diff --git a/src/components/steps/step.styles.ts b/src/components/steps/step.styles.ts index e3f9810e7e9..0c383d3b906 100644 --- a/src/components/steps/step.styles.ts +++ b/src/components/steps/step.styles.ts @@ -18,10 +18,7 @@ export const euiStepVariables = (euiThemeContext: UseEuiTheme) => { }; }; -export const euiStepStyles = ( - euiThemeContext: UseEuiTheme, - isDisabled: boolean -) => { +export const euiStepStyles = (euiThemeContext: UseEuiTheme) => { const euiTheme = euiThemeContext.euiTheme; const euiStep = euiStepVariables(euiThemeContext); @@ -57,12 +54,11 @@ export const euiStepStyles = ( } `, isDisabled: css``, - euiStep__title: css` - ${isDisabled && - ` + euiStep__title: { + isDisabled: css` color: ${euiTheme.colors.disabledText}; - `} - `, + `, + }, euiStep__titleWrapper: css` display: flex; gap: ${euiStep.numberMargin}; diff --git a/src/components/steps/step.tsx b/src/components/steps/step.tsx index cbdf4c7bc76..f76c684af9d 100644 --- a/src/components/steps/step.tsx +++ b/src/components/steps/step.tsx @@ -63,7 +63,7 @@ export const EuiStep: FunctionComponent = ({ const isSmall = titleSize === 'xs'; const euiTheme = useEuiTheme(); - const styles = euiStepStyles(euiTheme, isDisabled); + const styles = euiStepStyles(euiTheme); const cssStyles = [ styles.euiStep, isSmall && styles.small, @@ -78,17 +78,20 @@ export const EuiStep: FunctionComponent = ({ !isSmall && contentStyles.medium, ]; - const euiStepTitleStyles = styles.euiStep__title; - const titleWrapperStyles = styles.euiStep__titleWrapper; + const cssStepTitleStyles = [ + styles.euiStep__title, + isDisabled && styles.euiStep__title.isDisabled, + ]; + const cssTitleWrapperStyles = styles.euiStep__titleWrapper; return (
        -
        +
        {createElement(headingElement, null, title)} diff --git a/src/components/steps/step_horizontal.styles.ts b/src/components/steps/step_horizontal.styles.ts index dd2d4b40a00..87529343fd4 100644 --- a/src/components/steps/step_horizontal.styles.ts +++ b/src/components/steps/step_horizontal.styles.ts @@ -26,10 +26,7 @@ const makeLineProgress = (euiTheme: UseEuiTheme['euiTheme']) => { `; }; -export const euiStepHorizontalStyles = ( - euiThemeContext: UseEuiTheme, - isDisabled: boolean -) => { +export const euiStepHorizontalStyles = (euiThemeContext: UseEuiTheme) => { const euiTheme = euiThemeContext.euiTheme; const euiStep = euiStepVariables(euiThemeContext); @@ -53,9 +50,7 @@ export const euiStepHorizontalStyles = ( position: relative; inline-size: 100%; - // focus & hover state - ${!isDisabled && - ` + &:not([class*='-isDisabled']) { &:focus, &:hover { .euiStepHorizontal__title { @@ -65,18 +60,17 @@ export const euiStepHorizontalStyles = ( &:focus { outline: none; - + .euiStepHorizontal__number { ${euiFocusRing(euiThemeContext)} } .euiStepHorizontal__number:not(:focus-visible) { - outline: ${euiTheme.focus.width} solid ${ - euiTheme.colors.darkestShade - }; + outline: ${euiTheme.focus.width} solid + ${euiTheme.colors.darkestShade}; } } - `} + } // create the connecting lines &::before, @@ -132,21 +126,26 @@ export const euiStepHorizontalStyles = ( transition: all ${euiTheme.animation.fast} ease-in-out; } `, + }; +}; + +export const euiStepHorizontalTitleStyles = (euiThemeContext: UseEuiTheme) => { + const euiTheme = euiThemeContext.euiTheme; + + return { euiStepHorizontal__title: css` ${euiTitle(euiThemeContext, 'xs')}; margin-block-start: ${euiTheme.size.s}; font-weight: ${euiTheme.font.weight.bold}; text-align: center; - ${isDisabled && - ` - color: ${euiTheme.colors.disabledText}; - `} - // hide titles on small screens ${euiBreakpoint(euiThemeContext, ['xs', 's'])} { display: none; } `, + isDisabled: css` + color: ${euiTheme.colors.disabledText}; + `, }; }; diff --git a/src/components/steps/step_horizontal.tsx b/src/components/steps/step_horizontal.tsx index e122684887f..f7f45f7addc 100644 --- a/src/components/steps/step_horizontal.tsx +++ b/src/components/steps/step_horizontal.tsx @@ -24,7 +24,10 @@ import { useI18nWarningStep, } from './step_strings'; import { useEuiTheme } from '../../services'; -import { euiStepHorizontalStyles } from './step_horizontal.styles'; +import { + euiStepHorizontalStyles, + euiStepHorizontalTitleStyles, +} from './step_horizontal.styles'; export interface EuiStepHorizontalProps extends Omit, 'onClick'>, @@ -74,7 +77,7 @@ export const EuiStepHorizontal: FunctionComponent = ({ const isWarning = status === 'warning'; const euiTheme = useEuiTheme(); - const styles = euiStepHorizontalStyles(euiTheme, isDisabled); + const styles = euiStepHorizontalStyles(euiTheme); const cssStyles = [ styles.euiStepHorizontal, isSelected && styles.isSelected, @@ -84,7 +87,12 @@ export const EuiStepHorizontal: FunctionComponent = ({ ]; const cssNumberStyles = styles.euiStepHorizontal__number; - const cssTitleStyles = styles.euiStepHorizontal__title; + + const titleStyles = euiStepHorizontalTitleStyles(euiTheme); + const cssTitleStyles = [ + titleStyles.euiStepHorizontal__title, + isDisabled && titleStyles.isDisabled, + ]; let stepTitle = buttonTitle; if (isDisabled) stepTitle = disabledTitle; From 06f6ab09b2d8c0aeecc39e043776cc8b0c33ceca Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 13 Feb 2023 13:58:12 -0800 Subject: [PATCH 14/23] Update changelog --- upcoming_changelogs/6555.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/upcoming_changelogs/6555.md b/upcoming_changelogs/6555.md index 4fdac727b29..4baccf9d42d 100644 --- a/upcoming_changelogs/6555.md +++ b/upcoming_changelogs/6555.md @@ -2,4 +2,4 @@ **CSS-in-JS conversions** -- Converted `EuiSteps` to Emotion; Removed `$euiStepStatusColorsToFade` +- Converted `EuiSteps` to Emotion; Removed `$euiStepStatusColorsToFade`, `$euiStepNumberSize`, `$euiStepNumberSmallSize`, and `$euiStepNumberMargin` From c869f2546ad6a661d03e1047a2d96e659d06ac7f Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 13 Feb 2023 14:14:47 -0800 Subject: [PATCH 15/23] [PR feedback] destructure euiTheme + simplify euiStepVariables --- src/components/steps/step.styles.ts | 16 ++++++++-------- src/components/steps/step_horizontal.styles.ts | 6 +++--- src/components/steps/step_number.styles.ts | 4 ++-- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/steps/step.styles.ts b/src/components/steps/step.styles.ts index 0c383d3b906..fa2784c8c7a 100644 --- a/src/components/steps/step.styles.ts +++ b/src/components/steps/step.styles.ts @@ -10,17 +10,17 @@ import { css } from '@emotion/react'; import { UseEuiTheme } from '../../services'; import { mathWithUnits, logicalShorthandCSS } from '../../global_styling'; -export const euiStepVariables = (euiThemeContext: UseEuiTheme) => { +export const euiStepVariables = (euiTheme: UseEuiTheme['euiTheme']) => { return { - numberSmallSize: euiThemeContext.euiTheme.size.l, - numberSize: euiThemeContext.euiTheme.size.xl, - numberMargin: euiThemeContext.euiTheme.size.base, + numberSmallSize: euiTheme.size.l, + numberSize: euiTheme.size.xl, + numberMargin: euiTheme.size.base, }; }; export const euiStepStyles = (euiThemeContext: UseEuiTheme) => { - const euiTheme = euiThemeContext.euiTheme; - const euiStep = euiStepVariables(euiThemeContext); + const { euiTheme } = euiThemeContext; + const euiStep = euiStepVariables(euiTheme); // the vertical line is centered on the number, so we need to offset the line by half the number size // and because the vertical line is 2px, we also need to offset the number by 1px to center it @@ -67,8 +67,8 @@ export const euiStepStyles = (euiThemeContext: UseEuiTheme) => { }; export const euiStepContentStyles = (euiThemeContext: UseEuiTheme) => { - const euiTheme = euiThemeContext.euiTheme; - const euiStep = euiStepVariables(euiThemeContext); + const { euiTheme } = euiThemeContext; + const euiStep = euiStepVariables(euiTheme); return { euiStep__content: css` diff --git a/src/components/steps/step_horizontal.styles.ts b/src/components/steps/step_horizontal.styles.ts index 87529343fd4..23d4c81532e 100644 --- a/src/components/steps/step_horizontal.styles.ts +++ b/src/components/steps/step_horizontal.styles.ts @@ -27,8 +27,8 @@ const makeLineProgress = (euiTheme: UseEuiTheme['euiTheme']) => { }; export const euiStepHorizontalStyles = (euiThemeContext: UseEuiTheme) => { - const euiTheme = euiThemeContext.euiTheme; - const euiStep = euiStepVariables(euiThemeContext); + const { euiTheme } = euiThemeContext; + const euiStep = euiStepVariables(euiTheme); /** * 1. Ensure the connecting lines stays behind the number @@ -130,7 +130,7 @@ export const euiStepHorizontalStyles = (euiThemeContext: UseEuiTheme) => { }; export const euiStepHorizontalTitleStyles = (euiThemeContext: UseEuiTheme) => { - const euiTheme = euiThemeContext.euiTheme; + const { euiTheme } = euiThemeContext; return { euiStepHorizontal__title: css` diff --git a/src/components/steps/step_number.styles.ts b/src/components/steps/step_number.styles.ts index 8b499a95e59..b0524c4e150 100644 --- a/src/components/steps/step_number.styles.ts +++ b/src/components/steps/step_number.styles.ts @@ -37,8 +37,8 @@ const createStepsNumber = ( }; export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => { - const euiTheme = euiThemeContext.euiTheme; - const euiStep = euiStepVariables(euiThemeContext); + const { euiTheme } = euiThemeContext; + const euiStep = euiStepVariables(euiTheme); return { euiStepNumber: css` From 94772fb3625543d3ab6136f1e4fa5b0842d58583 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 13 Feb 2023 15:12:36 -0800 Subject: [PATCH 16/23] [PR feedback] Clean up `step.styles.ts` - remove unnecessary `isDisabled` style - it's not doing anything - clean up lineGradient readability - add `euiStepTitleStyles` to avoid nesting CSS selectors - Remove ambiguous `small` vs `medium` sizes: pass the equivalent props instead, and rename the size variable to be clear that it's referring to the `xs` size, not the `s` size - use more logicalCSS (easier to read) and less logicalShorthandCSS (it's getting overridden anyway) + fix `medium` sized titles getting padding that they should not have been + bump up padding-top on `s` titles to center text a bit more - fix EuiStepNumber not actually having the default size that its props documentation claims it does --- .../steps/__snapshots__/step.test.tsx.snap | 88 ++++++------ .../step_horizontal.test.tsx.snap | 22 +-- .../__snapshots__/step_number.test.tsx.snap | 18 +-- .../steps/__snapshots__/steps.test.tsx.snap | 96 ++++++------- .../steps_horizontal.test.tsx.snap | 8 +- src/components/steps/step.styles.ts | 131 ++++++++++-------- src/components/steps/step.tsx | 27 ++-- src/components/steps/step_number.styles.ts | 15 +- src/components/steps/step_number.tsx | 7 +- 9 files changed, 218 insertions(+), 194 deletions(-) diff --git a/src/components/steps/__snapshots__/step.test.tsx.snap b/src/components/steps/__snapshots__/step.test.tsx.snap index b5bc6b881d6..8892c01b7b6 100644 --- a/src/components/steps/__snapshots__/step.test.tsx.snap +++ b/src/components/steps/__snapshots__/step.test.tsx.snap @@ -3,14 +3,14 @@ exports[`EuiStep is rendered 1`] = `

        First step

        Do this @@ -42,13 +42,13 @@ exports[`EuiStep is rendered 1`] = ` exports[`EuiStep props headingElement 1`] = `

        First step

        Do this @@ -80,13 +80,13 @@ exports[`EuiStep props headingElement 1`] = ` exports[`EuiStep props status complete is rendered 1`] = `

        First step

        Do this @@ -113,13 +113,13 @@ exports[`EuiStep props status complete is rendered 1`] = ` exports[`EuiStep props status current is rendered 1`] = `

        First step

        Do this @@ -151,13 +151,13 @@ exports[`EuiStep props status current is rendered 1`] = ` exports[`EuiStep props status danger is rendered 1`] = `

        First step

        Do this @@ -184,13 +184,13 @@ exports[`EuiStep props status danger is rendered 1`] = ` exports[`EuiStep props status disabled is rendered 1`] = `

        First step

        Do this @@ -222,13 +222,13 @@ exports[`EuiStep props status disabled is rendered 1`] = ` exports[`EuiStep props status incomplete is rendered 1`] = `

        First step

        Do this @@ -260,13 +260,13 @@ exports[`EuiStep props status incomplete is rendered 1`] = ` exports[`EuiStep props status loading is rendered 1`] = `

        First step

        Do this @@ -297,13 +297,13 @@ exports[`EuiStep props status loading is rendered 1`] = ` exports[`EuiStep props status warning is rendered 1`] = `

        First step

        Do this @@ -330,13 +330,13 @@ exports[`EuiStep props status warning is rendered 1`] = ` exports[`EuiStep props step 1`] = `

        First step

        Do this @@ -368,13 +368,13 @@ exports[`EuiStep props step 1`] = ` exports[`EuiStep props titleSize 1`] = `

        First step

        Do this diff --git a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap index 0f63497bec0..e6b1481e393 100644 --- a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap +++ b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap @@ -8,7 +8,7 @@ exports[`EuiStepHorizontal is rendered 1`] = ` title="Step 1 is incomplete" >

        first title

        Do this first @@ -42,13 +42,13 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `

        second title

        Then this @@ -77,13 +77,13 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `

        third title

        And finally, do this @@ -121,13 +121,13 @@ exports[`EuiSteps renders steps 1`] = ` data-test-subj="test subject string" >

        first title

        Do this first @@ -156,13 +156,13 @@ exports[`EuiSteps renders steps 1`] = `

        second title

        Then this @@ -191,13 +191,13 @@ exports[`EuiSteps renders steps 1`] = `

        third title

        And finally, do this @@ -235,13 +235,13 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = ` data-test-subj="test subject string" >

        first title

        Do this first @@ -270,13 +270,13 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `

        second title

        Then this @@ -305,13 +305,13 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `

        third title

        And finally, do this @@ -349,13 +349,13 @@ exports[`EuiSteps renders steps with titleSize 1`] = ` data-test-subj="test subject string" >

        first title

        Do this first @@ -384,13 +384,13 @@ exports[`EuiSteps renders steps with titleSize 1`] = `

        second title

        Then this @@ -419,13 +419,13 @@ exports[`EuiSteps renders steps with titleSize 1`] = `

        third title

        And finally, do this diff --git a/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap index 46e80c984c0..5837a6ed498 100644 --- a/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap +++ b/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap @@ -14,7 +14,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = ` title="Step 1: Completed Step 1 is complete" > { return { - numberSmallSize: euiTheme.size.l, numberSize: euiTheme.size.xl, + numberXSSize: euiTheme.size.l, numberMargin: euiTheme.size.base, }; }; @@ -27,42 +27,39 @@ export const euiStepStyles = (euiThemeContext: UseEuiTheme) => { const lineStartPosition = mathWithUnits(euiStep.numberSize, (x) => x / 2 - 1); const lineEndPosition = mathWithUnits(euiStep.numberSize, (x) => x / 2 + 1); - const linerGradient = `linear-gradient(to right, transparent 0, transparent ${lineStartPosition}, ${euiTheme.border.color} ${lineStartPosition}, ${euiTheme.border.color} ${lineEndPosition}, transparent ${lineEndPosition}, transparent 100%)`; + const lineGradient = `linear-gradient(to right, + transparent 0, + transparent ${lineStartPosition}, + ${euiTheme.border.color} ${lineStartPosition}, + ${euiTheme.border.color} ${lineEndPosition}, + transparent ${lineEndPosition}, + transparent 100%)`; return { euiStep: css` - // Create border on all but the last step &:not(:last-of-type) { + // Create border on all but the last step &:not(:last-of-type) { - background-image: ${linerGradient}; + background-image: ${lineGradient}; background-repeat: no-repeat; } `, - // sizes - medium: css` + // Sizes + m: css` &:not(:last-of-type) { background-position: left ${euiTheme.size.xl}; } - - .euiStep__title { - padding-block-start: ${euiTheme.size.xxs}; + `, + s: css` + &:not(:last-of-type) { + background-position: left ${euiTheme.size.xl}; } `, - small: css` + xs: css` &:not(:last-of-type) { - // Adjust the line to be centered on the small number + // Adjust the line to be centered on the smaller number background-position: -${euiTheme.size.xs} ${euiTheme.size.l}; } `, - isDisabled: css``, - euiStep__title: { - isDisabled: css` - color: ${euiTheme.colors.disabledText}; - `, - }, - euiStep__titleWrapper: css` - display: flex; - gap: ${euiStep.numberMargin}; - `, }; }; @@ -70,46 +67,72 @@ export const euiStepContentStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; const euiStep = euiStepVariables(euiTheme); - return { + const styles = { euiStep__content: css` - ${logicalShorthandCSS( - 'padding', - `${euiTheme.size.base} ${euiTheme.size.base} ${euiTheme.size.xl}` + ${logicalCSS('margin-top', euiTheme.size.s)} + ${logicalCSS('padding-top', euiTheme.size.base)} + ${logicalCSS( + 'padding-bottom', + mathWithUnits([euiTheme.size.xl, euiTheme.size.s], (x, y) => x + y) )} - ${logicalShorthandCSS('margin', `${euiTheme.size.s} 0`)} - // Align the content's contents with the title - padding-inline-start: ${mathWithUnits( - [euiStep.numberSize, euiStep.numberMargin], - (x, y) => x / 2 + y - )}; - margin-block-end: 0; - padding-block-end: ${mathWithUnits( - [euiTheme.size.xl, euiTheme.size.s], - (x, y) => x + y - )}; + ${logicalCSS('padding-right', euiTheme.size.base)} `, - small: css` + // Sizes + m: css` // Align the content's contents with the title - padding-inline-start: ${mathWithUnits( - [euiStep.numberSmallSize, euiStep.numberMargin], - (x, y) => x / 2 + y - )}; - + ${logicalCSS( + 'padding-left', + mathWithUnits( + [euiStep.numberSize, euiStep.numberMargin], + (x, y) => x / 2 + y + ) + )} // Align content border to horizontal center of step number - margin-inline-start: ${mathWithUnits( - euiStep.numberSmallSize, - (x) => x / 2 - )}; + ${logicalCSS( + 'margin-left', + mathWithUnits(euiStep.numberSize, (x) => x / 2) + )} `, - medium: css` + s: css``, // s is the same as m, so we'll programmatically duplicate it below + xs: css` // Align the content's contents with the title - padding-inline-start: ${mathWithUnits( - [euiStep.numberSize, euiStep.numberMargin], - (x, y) => x / 2 + y - )}; - + ${logicalCSS( + 'padding-left', + mathWithUnits( + [euiStep.numberXSSize, euiStep.numberMargin], + (x, y) => x / 2 + y + ) + )} // Align content border to horizontal center of step number - margin-inline-start: ${mathWithUnits(euiStep.numberSize, (x) => x / 2)}; + ${logicalCSS( + 'margin-left', + mathWithUnits(euiStep.numberXSSize, (x) => x / 2) + )} + `, + }; + styles.s = styles.m; + + return styles; +}; + +export const euiStepTitleStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + const euiStep = euiStepVariables(euiTheme); + + return { + euiStep__titleWrapper: css` + display: flex; + gap: ${euiStep.numberMargin}; + `, + euiStep__title: css``, + isDisabled: css` + color: ${euiTheme.colors.disabledText}; + `, + // Sizes + m: css``, + s: css` + ${logicalCSS('padding-top', euiTheme.size.xs)} `, + xs: css``, }; }; diff --git a/src/components/steps/step.tsx b/src/components/steps/step.tsx index f76c684af9d..b3b8bbe43e9 100644 --- a/src/components/steps/step.tsx +++ b/src/components/steps/step.tsx @@ -17,7 +17,11 @@ import { CommonProps } from '../common'; import { EuiTitle, EuiTitleProps, EuiTitleSize } from '../title'; import { EuiStepNumber, EuiStepStatus } from './step_number'; import { useEuiTheme } from '../../services'; -import { euiStepStyles, euiStepContentStyles } from './step.styles'; +import { + euiStepStyles, + euiStepContentStyles, + euiStepTitleStyles, +} from './step.styles'; export interface EuiStepInterface { /** @@ -57,32 +61,25 @@ export const EuiStep: FunctionComponent = ({ status, ...rest }) => { - const isDisabled = status === 'disabled'; const classes = classNames('euiStep', className); - const isSmall = titleSize === 'xs'; - const euiTheme = useEuiTheme(); const styles = euiStepStyles(euiTheme); - const cssStyles = [ - styles.euiStep, - isSmall && styles.small, - !isSmall && styles.medium, - isDisabled && styles.isDisabled, - ]; + const cssStyles = [styles.euiStep, styles[titleSize]]; const contentStyles = euiStepContentStyles(euiTheme); const cssContentStyles = [ contentStyles.euiStep__content, - isSmall && contentStyles.small, - !isSmall && contentStyles.medium, + contentStyles[titleSize], ]; + const titleStyles = euiStepTitleStyles(euiTheme); const cssStepTitleStyles = [ - styles.euiStep__title, - isDisabled && styles.euiStep__title.isDisabled, + titleStyles.euiStep__title, + status === 'disabled' && titleStyles.isDisabled, + titleStyles[titleSize], ]; - const cssTitleWrapperStyles = styles.euiStep__titleWrapper; + const cssTitleWrapperStyles = titleStyles.euiStep__titleWrapper; return (

        diff --git a/src/components/steps/step_number.styles.ts b/src/components/steps/step_number.styles.ts index b0524c4e150..045c97e455f 100644 --- a/src/components/steps/step_number.styles.ts +++ b/src/components/steps/step_number.styles.ts @@ -45,20 +45,27 @@ export const euiStepNumberStyles = (euiThemeContext: UseEuiTheme) => { flex-shrink: 0; `, // sizes - small: css` + m: css` ${createStepsNumber( euiTheme, - euiStep.numberSmallSize, - euiFontSizeFromScale('xs', euiTheme) + euiStep.numberSize, + euiFontSizeFromScale('s', euiTheme) )} `, - medium: css` + s: css` ${createStepsNumber( euiTheme, euiStep.numberSize, euiFontSizeFromScale('s', euiTheme) )} `, + xs: css` + ${createStepsNumber( + euiTheme, + euiStep.numberXSSize, + euiFontSizeFromScale('xs', euiTheme) + )} + `, // status incomplete: css` background-color: transparent; diff --git a/src/components/steps/step_number.tsx b/src/components/steps/step_number.tsx index 0e72dc56169..bf6df28fa7d 100644 --- a/src/components/steps/step_number.tsx +++ b/src/components/steps/step_number.tsx @@ -57,7 +57,7 @@ export const EuiStepNumber: FunctionComponent = ({ className, status, number, - titleSize, + titleSize = 's', ...rest }) => { const stepAriaLabel = useI18nStep({ number }); @@ -69,16 +69,13 @@ export const EuiStepNumber: FunctionComponent = ({ const loadingAriaLabel = useI18nLoadingStep({ number }); const currentAriaLabel = useI18nCurrentStep({ number }); - const isSmall = titleSize === 'xs'; - const classes = classNames('euiStepNumber', className); const euiTheme = useEuiTheme(); const styles = euiStepNumberStyles(euiTheme); const cssStyles = [ styles.euiStepNumber, - isSmall && styles.small, - !isSmall && styles.medium, + styles[titleSize], status && styles[status], ]; From 7fde6cb95d88f3e992b9dba586f924842cc39acd Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 13 Feb 2023 15:57:35 -0800 Subject: [PATCH 17/23] Clean up horizontal step styles - remove unnecessary repeated `makeLineProgress` - it's defined once in `euiStepHorizontal` and it doesn't need to be redefined again - remove `:not` isDisabled class selector in favor of an `enabled` style - remove unused isComplete/isIncomplete styles - pull out separate euiStepHorizontalNumberStyles fn and remove unnecessary selector nesting on box shadow application (if it's selected, it can't also be loading/disabled/warning) - make emotion classNames more closely match passed `status`es - fix BEM class naming - Remove old prop documentation to now-removed `isSelected` and `isComplete` props, + remove `isSelected` var naming in favor of `isCurrent` - clean up unnecessarily verbose `isCurrent` spread operator --- .../step_horizontal.test.tsx.snap | 39 ++++++--- .../steps_horizontal.test.tsx.snap | 24 +++--- .../steps/step_horizontal.styles.ts | 85 ++++++++----------- src/components/steps/step_horizontal.tsx | 21 +++-- .../steps/steps_horizontal.styles.ts | 2 +- src/components/steps/steps_horizontal.tsx | 11 +-- 6 files changed, 89 insertions(+), 93 deletions(-) diff --git a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap index e6b1481e393..47fcec9fb90 100644 --- a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap +++ b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap @@ -3,7 +3,8 @@ exports[`EuiStepHorizontal is rendered 1`] = ` `; exports[`EuiStepHorizontal props status disabled overrides the passed status 1`] = ` `; exports[`EuiStepHorizontal props status incomplete is rendered 1`] = `