diff --git a/src/components/text/__snapshots__/text.styles.test.ts.snap b/src/components/text/__snapshots__/text.styles.test.ts.snap index 597942fd593..23acf9107b3 100644 --- a/src/components/text/__snapshots__/text.styles.test.ts.snap +++ b/src/components/text/__snapshots__/text.styles.test.ts.snap @@ -134,11 +134,11 @@ exports[`euiTextStyles sizes m 1`] = ` kbd::after { content: ''; - border-bottom: 1px solid #343741; + border-block-end: 1px solid #343741; position: absolute; - bottom: 2px; - left: 0; - width: 100%; + inset-block-end: 2px; + inset-inline-start: 0; + inline-size: 100%; } ;;label:m;" `; diff --git a/src/components/text/text.styles.ts b/src/components/text/text.styles.ts index 1fa9fafe0cc..96948c1103b 100644 --- a/src/components/text/text.styles.ts +++ b/src/components/text/text.styles.ts @@ -10,6 +10,7 @@ import { css } from '@emotion/react'; import { UseEuiTheme } from '../../services'; import { logicalCSS, + logicalTextAlignCSS, euiFontSize, euiBackgroundColor, _FontScaleOptions, @@ -190,18 +191,19 @@ const euiScaleText = ( ${logicalCSS('padding-bottom', euiTheme.size.xs)} // ensures when only one character the shape looks like a square ${logicalCSS('min-width', euiTheme.size.l)} - text-align: center; + ${logicalTextAlignCSS('center')} } kbd::after { content: ''; - border-bottom: ${euiTheme.border.width.thin} solid ${ - euiTheme.colors.text - }; + ${logicalCSS( + 'border-bottom', + `${euiTheme.border.width.thin} solid ${euiTheme.colors.text}` + )} position: absolute; - bottom: ${euiTheme.size.xxs}; - left: 0; - width: 100%; + ${logicalCSS('bottom', euiTheme.size.xxs)} + ${logicalCSS('left', 0)} + ${logicalCSS('width', '100%')} }` : '' } @@ -242,33 +244,33 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => { blockquote:not(.euiMarkdownFormat__blockquote) { position: relative; - text-align: center; + ${logicalTextAlignCSS('center')} ${logicalCSS('margin-horizontal', 'auto')} font-family: ${euiTheme.font.familySerif}; font-style: italic; letter-spacing: normal; p:last-child { - margin-bottom: 0; + ${logicalCSS('margin-bottom', '0')} } &:before, &:after { position: absolute; content: ''; - height: ${euiTheme.border.width.thick}; - width: 50%; - right: 0; - transform: translateX(-50%); + ${logicalCSS('height', euiTheme.border.width.thick)} + ${logicalCSS('width', '50%')} + ${logicalCSS('left', '25%')} + ${logicalCSS('right', '25%')} background: ${euiTheme.colors.darkShade}; } &:before { - top: 0; + ${logicalCSS('top', '0')} } &:after { - bottom: 0; + ${logicalCSS('bottom', '0')} } } @@ -324,7 +326,7 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => { } > :last-child { - margin-bottom: 0 !important; + ${logicalCSS('margin-bottom', '0 !important')} } kbd { @@ -338,7 +340,7 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => { } `, constrainedWidth: css` - max-width: ${euiTextConstrainedMaxWidth}; + ${logicalCSS('max-width', euiTextConstrainedMaxWidth)} `, // Sizes m: css` diff --git a/upcoming_changelogs/6059.md b/upcoming_changelogs/6059.md new file mode 100644 index 00000000000..db268d44178 --- /dev/null +++ b/upcoming_changelogs/6059.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fixed multiple missing CSS logical properties within `EuiText` children