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

Jump to bottom

[EuiBetaBadge] Add alignment prop #6361

Merged
merged 6 commits into from
Nov 18, 2022
Merged

[EuiBetaBadge] Add alignment prop #6361

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ebeb142
[EuiBetaBadge] Add alignment prop
miukimiu Nov 15, 2022
1443c20
Adding CL entry
miukimiu Nov 16, 2022
4cc099c
Fixing comment
miukimiu Nov 16, 2022
40ab7c5
Removinf `super` option
miukimiu Nov 18, 2022
37fa2a7
Merge remote-tracking branch 'upstream/main' into beta-badge-alignment
miukimiu Nov 18, 2022
29c5507
Removing unnecessary style
miukimiu Nov 18, 2022
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
51 changes: 42 additions & 9 deletions src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`EuiBetaBadge is rendered 1`] = `
<span>
<span
aria-label="aria-label"
class="euiBetaBadge testClass1 testClass2 emotion-euiBetaBadge-hollow-m"
class="euiBetaBadge testClass1 testClass2 emotion-euiBetaBadge-hollow-m-baseline"
data-test-subj="test subject string"
title="Beta"
>
Expand All @@ -13,10 +13,43 @@ exports[`EuiBetaBadge is rendered 1`] = `
</span>
`;

exports[`EuiBetaBadge props alignement baseline is rendered 1`] = `
<span>
<span
class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
title="Beta"
>
Beta
</span>
</span>
`;

exports[`EuiBetaBadge props alignement middle is rendered 1`] = `
<span>
<span
class="euiBetaBadge emotion-euiBetaBadge-hollow-m-middle"
title="Beta"
>
Beta
</span>
</span>
`;

exports[`EuiBetaBadge props alignement super is rendered 1`] = `
<span>
<span
class="euiBetaBadge emotion-euiBetaBadge-hollow-m-super"
title="Beta"
>
Beta
</span>
</span>
`;

exports[`EuiBetaBadge props color accent is rendered 1`] = `
<span>
<span
class="euiBetaBadge emotion-euiBetaBadge-accent-m"
class="euiBetaBadge emotion-euiBetaBadge-accent-m-baseline"
title="Beta"
>
Beta
Expand All @@ -27,7 +60,7 @@ exports[`EuiBetaBadge props color accent is rendered 1`] = `
exports[`EuiBetaBadge props color hollow is rendered 1`] = `
<span>
<span
class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
title="Beta"
>
Beta
Expand All @@ -38,7 +71,7 @@ exports[`EuiBetaBadge props color hollow is rendered 1`] = `
exports[`EuiBetaBadge props color subdued is rendered 1`] = `
<span>
<span
class="euiBetaBadge emotion-euiBetaBadge-subdued-m"
class="euiBetaBadge emotion-euiBetaBadge-subdued-m-baseline"
title="Beta"
>
Beta
Expand All @@ -49,7 +82,7 @@ exports[`EuiBetaBadge props color subdued is rendered 1`] = `
exports[`EuiBetaBadge props iconType 1`] = `
<span>
<span
class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
title="Beta"
>
<span
Expand All @@ -65,7 +98,7 @@ exports[`EuiBetaBadge props iconType 1`] = `
exports[`EuiBetaBadge props single letter 1`] = `
<span>
<span
class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
title="B"
>
B
Expand All @@ -76,7 +109,7 @@ exports[`EuiBetaBadge props single letter 1`] = `
exports[`EuiBetaBadge props size m is rendered 1`] = `
<span>
<span
class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
title="Beta"
>
Beta
Expand All @@ -87,7 +120,7 @@ exports[`EuiBetaBadge props size m is rendered 1`] = `
exports[`EuiBetaBadge props size s is rendered 1`] = `
<span>
<span
class="euiBetaBadge emotion-euiBetaBadge-hollow-s"
class="euiBetaBadge emotion-euiBetaBadge-hollow-s-baseline"
title="Beta"
>
Beta
Expand All @@ -101,7 +134,7 @@ exports[`EuiBetaBadge props tooltip and anchorProps are rendered 1`] = `
data-test-subj="DTS"
>
<span
class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
role="button"
tabindex="0"
>
Expand Down
11 changes: 10 additions & 1 deletion 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 @@ -22,7 +22,6 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => {
return {
euiBetaBadge: css`
display: inline-block;
vertical-align: super; // if displayed inline with text
border-radius: ${euiTheme.size.l};
cursor: default;

Expand Down Expand Up @@ -85,6 +84,16 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => {
position: relative;
transform: translate(0, -1px);
`,
// Alignments
baseline: css`
vertical-align: baseline;
`,
middle: css`
vertical-align: middle;
`,
super: css`
vertical-align: super;
`,
};
};

Expand Down
14 changes: 13 additions & 1 deletion src/components/badge/beta_badge/beta_badge.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { render } from 'enzyme';
import { requiredProps } from '../../../test';
import { shouldRenderCustomStyles } from '../../../test/internal';

import { EuiBetaBadge, COLORS, SIZES } from './beta_badge';
import { EuiBetaBadge, COLORS, SIZES, ALIGNMENTS } from './beta_badge';

describe('EuiBetaBadge', () => {
shouldRenderCustomStyles(
Expand Down Expand Up @@ -72,5 +72,17 @@ describe('EuiBetaBadge', () => {

expect(component).toMatchSnapshot();
});

describe('alignement', () => {
ALIGNMENTS.forEach((alignment) => {
test(`${alignment} is rendered`, () => {
const component = render(
<EuiBetaBadge label="Beta" alignment={alignment} />
);

expect(component).toMatchSnapshot();
});
});
});
});
});
9 changes: 9 additions & 0 deletions src/components/badge/beta_badge/beta_badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ export type BetaBadgeColor = typeof COLORS[number];
export const SIZES = ['s', 'm'] as const;
export type BetaBadgeSize = typeof SIZES[number];

export const ALIGNMENTS = ['baseline', 'middle', 'super'] as const;
export type BetaBadgeAlignment = typeof ALIGNMENTS[number];
Copy link
Member

@cee-chen cee-chen Nov 16, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Personally I like/prefer limiting the options here, but just wanted to throw this out there - do we anticipate wanting to support all values of vertical-align (e.g. sub, top, text-bottom, etc...)?

Just thinking out loud, but if we see that kind of wildcard support being a possible future usecase, what we could also do instead of setting an enum is to make it an inline style instead of an Emotion class 🤷

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think most of the users will never change this. I think the main issue here was the super was not looking as before because of that overflow: hidden.

But I see a possibility of some consumers aligning in the middle. But the super option.. Not sure... I'm even thinking if it should be here. It doesn't look good. 😬


type WithButtonProps = {
/**
* Will apply an onclick to the badge itself
Expand Down Expand Up @@ -112,6 +115,10 @@ type BadgeProps = {
*/
color?: BetaBadgeColor;
size?: BetaBadgeSize;
/**
* Sets the `vertical-align` CSS property
*/
alignment?: BetaBadgeAlignment;
} & ExclusiveUnion<LabelAsNode, LabelAsString>;

export type EuiBetaBadgeProps = CommonProps &
Expand All @@ -136,6 +143,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
rel,
target,
size = 'm',
alignment = 'baseline',
...rest
}) => {
const euiTheme = useEuiTheme();
Expand All @@ -150,6 +158,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
styles.euiBetaBadge,
styles[color],
styles[size],
styles[alignment],
isCircular
? styles.badgeSizes.circle[size]
: styles.badgeSizes.default[size],
Expand Down
2 changes: 1 addition & 1 deletion src/components/card/__snapshots__/card.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ exports[`EuiCard betaBadgeProps renders href 1`] = `
class="emotion-euiCard__betaBadgeAnchor"
>
<a
class="euiBetaBadge emotion-euiBetaBadge-hollow-m-euiCard__betaBadge"
class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline-euiCard__betaBadge"
href="http://www.elastic.co/"
id="generated-idBetaBadge"
rel=""
Expand Down
8 changes: 4 additions & 4 deletions src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders 1`] = `
<span>
<span
aria-hidden="true"
class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline"
title="B"
>
B
Expand Down Expand Up @@ -142,7 +142,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders extra betaBadgeTooltipProps 1
<span>
<span
aria-hidden="true"
class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline"
title="B"
>
B
Expand Down Expand Up @@ -177,7 +177,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeIconType 1`] =
<span>
<span
aria-hidden="true"
class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline"
title="B"
>
<span
Expand Down Expand Up @@ -217,7 +217,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeTooltipContent
<span>
<span
aria-hidden="true"
class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline"
title="B"
>
B
Expand Down
1 change: 1 addition & 0 deletions upcoming_changelogs/6361.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Added `alignment` prop to `EuiBetaBadge`