From 0a92bd19fc4a122ed5b89ab1424021cda93306fe Mon Sep 17 00:00:00 2001 From: ek-so Date: Mon, 30 Dec 2024 13:28:22 +0100 Subject: [PATCH 01/10] Badge spacing changes --- .../badge/beta_badge/beta_badge.styles.ts | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts index 625e21d99a5..408dcf10123 100644 --- a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts +++ b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts @@ -27,7 +27,7 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { border-radius: ${euiTheme.size.l}; cursor: default; - font-weight: ${euiTheme.font.weight.bold}; + font-weight: ${euiTheme.font.weight.semiBold}; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; @@ -53,19 +53,25 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { // Font sizes m: css` font-size: ${euiFontSizeFromScale('xs', euiTheme)}; - line-height: ${euiTheme.size.l}; + ${logicalCSS('height', euiTheme.size.l)} + line-height: ${mathWithUnits(euiTheme.size.l, (x) => x * 0.95)}; `, s: css` - font-size: 0.625rem; - line-height: ${mathWithUnits(euiTheme.size.xs, (x) => x + euiTheme.base)}; + font-size: 0.7rem; + ${logicalCSS('height', '20px')} + line-height: ${mathWithUnits('20px', (x) => x * 0.97)}; `, // Padding/width sizes badgeSizes: { default: { m: ` - ${logicalCSS('padding-horizontal', euiTheme.size.base)}`, + ${logicalCSS('padding-horizontal', euiTheme.size.base)} + padding-block-start: ${mathWithUnits(euiTheme.size.l, (x) => x * 0.05)} + `, s: ` - ${logicalCSS('padding-horizontal', euiTheme.size.m)}`, + ${logicalCSS('padding-horizontal', euiTheme.size.m)} + padding-block-start: ${mathWithUnits('20px', (x) => x * 0.03)}; + `, }, // When it's just an icon or a single letter, make the badge a circle circle: { @@ -82,7 +88,7 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { }, euiBetaBadge__icon: css` position: relative; - transform: translate(0, -1px); + transform: translate(0, -0.05em); `, // Alignments baseline: css` From b275d15270cf471a837d859caed55cc079c69489 Mon Sep 17 00:00:00 2001 From: ek-so Date: Mon, 30 Dec 2024 13:29:14 +0100 Subject: [PATCH 02/10] Slight update for bigger badge --- .../eui/src/components/badge/beta_badge/beta_badge.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts index 408dcf10123..0070bd77e41 100644 --- a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts +++ b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts @@ -54,7 +54,7 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { m: css` font-size: ${euiFontSizeFromScale('xs', euiTheme)}; ${logicalCSS('height', euiTheme.size.l)} - line-height: ${mathWithUnits(euiTheme.size.l, (x) => x * 0.95)}; + line-height: ${mathWithUnits(euiTheme.size.l, (x) => x * 0.96)}; `, s: css` font-size: 0.7rem; @@ -66,7 +66,7 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { default: { m: ` ${logicalCSS('padding-horizontal', euiTheme.size.base)} - padding-block-start: ${mathWithUnits(euiTheme.size.l, (x) => x * 0.05)} + padding-block-start: ${mathWithUnits(euiTheme.size.l, (x) => x * 0.04)} `, s: ` ${logicalCSS('padding-horizontal', euiTheme.size.m)} From 368a4870f1f937f7715a8816bd9a3c82c2ad779a Mon Sep 17 00:00:00 2001 From: ek-so Date: Mon, 30 Dec 2024 13:37:28 +0100 Subject: [PATCH 03/10] Slight change for smaller badge --- .../eui/src/components/badge/beta_badge/beta_badge.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts index 0070bd77e41..f11afe96d93 100644 --- a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts +++ b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts @@ -59,7 +59,7 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { s: css` font-size: 0.7rem; ${logicalCSS('height', '20px')} - line-height: ${mathWithUnits('20px', (x) => x * 0.97)}; + line-height: ${mathWithUnits('20px', (x) => x * 0.98)}; `, // Padding/width sizes badgeSizes: { @@ -70,7 +70,7 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { `, s: ` ${logicalCSS('padding-horizontal', euiTheme.size.m)} - padding-block-start: ${mathWithUnits('20px', (x) => x * 0.03)}; + padding-block-start: ${mathWithUnits('20px', (x) => x * 0.02)}; `, }, // When it's just an icon or a single letter, make the badge a circle From 0ad802ef8b8bd6c3959aee2af0f0262111734c6d Mon Sep 17 00:00:00 2001 From: ek-so Date: Mon, 6 Jan 2025 10:18:45 +0100 Subject: [PATCH 04/10] Update beta_badge.styles.ts --- .../eui/src/components/badge/beta_badge/beta_badge.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts index f11afe96d93..16a56eaac5f 100644 --- a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts +++ b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts @@ -88,7 +88,7 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { }, euiBetaBadge__icon: css` position: relative; - transform: translate(0, -0.05em); + transform: translate(0, -1px); `, // Alignments baseline: css` From 6a84fa9593b014659a6bafd33c98fafe2e03bcac Mon Sep 17 00:00:00 2001 From: ek-so Date: Mon, 6 Jan 2025 16:17:46 +0100 Subject: [PATCH 05/10] Apply height property in a right place --- .../eui/src/components/badge/beta_badge/beta_badge.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts index 16a56eaac5f..7751005f96a 100644 --- a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts +++ b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts @@ -53,22 +53,22 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { // Font sizes m: css` font-size: ${euiFontSizeFromScale('xs', euiTheme)}; - ${logicalCSS('height', euiTheme.size.l)} line-height: ${mathWithUnits(euiTheme.size.l, (x) => x * 0.96)}; `, s: css` font-size: 0.7rem; - ${logicalCSS('height', '20px')} line-height: ${mathWithUnits('20px', (x) => x * 0.98)}; `, // Padding/width sizes badgeSizes: { default: { m: ` + ${logicalCSS('height', euiTheme.size.l)} ${logicalCSS('padding-horizontal', euiTheme.size.base)} padding-block-start: ${mathWithUnits(euiTheme.size.l, (x) => x * 0.04)} `, s: ` + ${logicalCSS('height', '20px')} ${logicalCSS('padding-horizontal', euiTheme.size.m)} padding-block-start: ${mathWithUnits('20px', (x) => x * 0.02)}; `, From 9886cb7f76408749b644f26c08822596c4177e3f Mon Sep 17 00:00:00 2001 From: ek-so Date: Mon, 6 Jan 2025 16:21:15 +0100 Subject: [PATCH 06/10] Update beta_badge.styles.ts --- .../eui/src/components/badge/beta_badge/beta_badge.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts index 7751005f96a..ade85949aef 100644 --- a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts +++ b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts @@ -50,7 +50,7 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { ${badgeColors.hollow.borderColor}; `, warning: css(badgeColors.warning), - // Font sizes + // Font sizes (line height + padding-block-start = height of the badge) m: css` font-size: ${euiFontSizeFromScale('xs', euiTheme)}; line-height: ${mathWithUnits(euiTheme.size.l, (x) => x * 0.96)}; From 0223c7542e2825accb77e1e118d6a8100298ed13 Mon Sep 17 00:00:00 2001 From: ek-so Date: Wed, 8 Jan 2025 14:26:20 +0100 Subject: [PATCH 07/10] Updated according to suggestions --- .../badge/beta_badge/beta_badge.styles.ts | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts index ade85949aef..5fbd931b448 100644 --- a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts +++ b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts @@ -20,6 +20,10 @@ import { euiBadgeColors } from '../color_utils'; export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme, colorMode } = euiThemeContext; const badgeColors = euiBadgeColors(euiThemeContext); + const badgeSizes = { + m: euiTheme.size.l, + s: mathWithUnits(euiTheme.size.base, (x) => x * 1.25), + }; return { euiBetaBadge: css` @@ -50,27 +54,26 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { ${badgeColors.hollow.borderColor}; `, warning: css(badgeColors.warning), - // Font sizes (line height + padding-block-start = height of the badge) + // Font sizes m: css` font-size: ${euiFontSizeFromScale('xs', euiTheme)}; - line-height: ${mathWithUnits(euiTheme.size.l, (x) => x * 0.96)}; + line-height: ${badgeSizes.m}; `, s: css` font-size: 0.7rem; - line-height: ${mathWithUnits('20px', (x) => x * 0.98)}; + line-height: ${badgeSizes.s}; `, // Padding/width sizes badgeSizes: { default: { m: ` - ${logicalCSS('height', euiTheme.size.l)} + ${logicalCSS('height', badgeSizes.m)} ${logicalCSS('padding-horizontal', euiTheme.size.base)} - padding-block-start: ${mathWithUnits(euiTheme.size.l, (x) => x * 0.04)} + padding-block-start: 1px `, s: ` - ${logicalCSS('height', '20px')} + ${logicalCSS('height', badgeSizes.s)} ${logicalCSS('padding-horizontal', euiTheme.size.m)} - padding-block-start: ${mathWithUnits('20px', (x) => x * 0.02)}; `, }, // When it's just an icon or a single letter, make the badge a circle From 99e0d713e56694a4046e061781d25e74691f5901 Mon Sep 17 00:00:00 2001 From: ek-so Date: Wed, 8 Jan 2025 19:02:40 +0100 Subject: [PATCH 08/10] Removed 1px padding --- .../eui/src/components/badge/beta_badge/beta_badge.styles.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts index 5fbd931b448..32c1f4a5026 100644 --- a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts +++ b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts @@ -69,7 +69,6 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { m: ` ${logicalCSS('height', badgeSizes.m)} ${logicalCSS('padding-horizontal', euiTheme.size.base)} - padding-block-start: 1px `, s: ` ${logicalCSS('height', badgeSizes.s)} From 960e9545c4e96ceba1e0ac839a74f853f3bf4d0b Mon Sep 17 00:00:00 2001 From: ek-so Date: Thu, 9 Jan 2025 12:17:44 +0100 Subject: [PATCH 09/10] Create 8255.md --- packages/eui/changelogs/upcoming/8255.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 packages/eui/changelogs/upcoming/8255.md diff --git a/packages/eui/changelogs/upcoming/8255.md b/packages/eui/changelogs/upcoming/8255.md new file mode 100644 index 00000000000..096203e65b8 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8255.md @@ -0,0 +1,6 @@ +- Added/Updated ... + +**Accessibility** + +- Improved the accessibility experience of ... + From e0982e98cabcbc375dee07417684b7df456738b7 Mon Sep 17 00:00:00 2001 From: ek-so Date: Thu, 9 Jan 2025 13:33:15 +0100 Subject: [PATCH 10/10] Update 8255.md --- packages/eui/changelogs/upcoming/8255.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/eui/changelogs/upcoming/8255.md b/packages/eui/changelogs/upcoming/8255.md index 096203e65b8..f2df8d8351b 100644 --- a/packages/eui/changelogs/upcoming/8255.md +++ b/packages/eui/changelogs/upcoming/8255.md @@ -1,6 +1,2 @@ -- Added/Updated ... - -**Accessibility** - -- Improved the accessibility experience of ... +- Updated font-weight and font-size of `EuiBetaBadge`s to improve legibility