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

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Beta badge inner visual alignment #8255

Changes from all commits
Commits
Show all changes
10 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
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: 14 additions & 6 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 @@ -20,14 +20,18 @@ 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`
display: inline-block;
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 @@ -53,19 +57,23 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => {
// Font sizes
m: css`
font-size: ${euiFontSizeFromScale('xs', euiTheme)};
line-height: ${euiTheme.size.l};
line-height: ${badgeSizes.m};
`,
s: css`
font-size: 0.625rem;
line-height: ${mathWithUnits(euiTheme.size.xs, (x) => x + euiTheme.base)};
font-size: 0.7rem;
line-height: ${badgeSizes.s};
`,
// Padding/width sizes
badgeSizes: {
default: {
m: `
${logicalCSS('padding-horizontal', euiTheme.size.base)}`,
${logicalCSS('height', badgeSizes.m)}
${logicalCSS('padding-horizontal', euiTheme.size.base)}
`,
s: `
${logicalCSS('padding-horizontal', euiTheme.size.m)}`,
${logicalCSS('height', badgeSizes.s)}
${logicalCSS('padding-horizontal', euiTheme.size.m)}
`,
},
// When it's just an icon or a single letter, make the badge a circle
circle: {
Expand Down
Loading