Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Beta badge inner visual alignment #8255

Merged
merged 13 commits into from
Jan 9, 2025
Merged

Beta badge inner visual alignment #8255

Changes from 7 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0a92bd1
Badge spacing changes
ek-so Dec 30, 2024
b275d15
Slight update for bigger badge
ek-so Dec 30, 2024
368a487
Slight change for smaller badge
ek-so Dec 30, 2024
0ad802e
Update beta_badge.styles.ts
ek-so Jan 6, 2025
6a84fa9
Apply height property in a right place
ek-so Jan 6, 2025
9886cb7
Update beta_badge.styles.ts
ek-so Jan 6, 2025
2ffcf43
Merge branch 'main' into ekso-beta-badge
mgadewoll Jan 7, 2025
0223c75
Updated according to suggestions
ek-so Jan 8, 2025
99e0d71
Removed 1px padding
ek-so Jan 8, 2025
aefac66
Merge branch 'main' into ekso-beta-badge
ek-so Jan 8, 2025
960e954
Create 8255.md
ek-so Jan 9, 2025
434d200
Merge branch 'ekso-beta-badge' of https://github.com/ek-so/eui into e…
ek-so Jan 9, 2025
e0982e9
Update 8255.md
ek-so Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -50,22 +50,28 @@ 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: ${euiTheme.size.l};
line-height: ${mathWithUnits(euiTheme.size.l, (x) => x * 0.96)};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm really not a fan of using magic numbers or static values here 🙈
I do like that you're adding a height to the badge and with that the line-height is not really that important anymore, we could just use the same height.

What I'm thinking

// simplified code

const badgeSizes = {
    m: euiTheme.size.l,
    s: mathWithUnits(euiTheme.size.base, (x) => x * 1.25),
};

euiBetaBadge: {
  m: css`
      line-height: ${badgeSizes.m};
  `,
  s: css`
      line-height: ${badgeSizes.s};
  `,

...

  badgeSizes: {
    default: {
        m: `
          ${logicalCSS('height', badgeSizes.m)}
        `,
        s: `
          ${logicalCSS('height', badgeSizes.s)}
    },
   }
 }

`,
s: css`
font-size: 0.625rem;
line-height: ${mathWithUnits(euiTheme.size.xs, (x) => x + euiTheme.base)};
font-size: 0.7rem;
line-height: ${mathWithUnits('20px', (x) => x * 0.98)};
`,
// Padding/width sizes
badgeSizes: {
default: {
m: `
${logicalCSS('padding-horizontal', euiTheme.size.base)}`,
${logicalCSS('height', euiTheme.size.l)}
${logicalCSS('padding-horizontal', euiTheme.size.base)}
padding-block-start: ${mathWithUnits(euiTheme.size.l, (x) => x * 0.04)}
`,
s: `
${logicalCSS('padding-horizontal', euiTheme.size.m)}`,
${logicalCSS('height', '20px')}
${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
circle: {
Expand Down
Loading