Skip to content

Commit

Permalink
[EuiButton] Remove element prop
Browse files Browse the repository at this point in the history
- the component will now automatically detect this
  • Loading branch information
cee-chen committed Feb 16, 2024
1 parent abac60c commit 3d3453d
Show file tree
Hide file tree
Showing 5 changed files with 6 additions and 45 deletions.
1 change: 1 addition & 0 deletions changelogs/upcoming/7533.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
**Breaking changes**

- Removed `EuiLinkType`, `EuiLinkAnchorProps`, and `EuiLinkButtonProps` types. Use `EuiLinkProps` instead
- Removed the `element` prop from `EuiButton`. All button components will automatically detect whether it should render a link or button based on the `href` prop.
1 change: 0 additions & 1 deletion src/components/button/button.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ const meta: Meta<EuiButtonProps> = {
},
args: {
// Component defaults
element: 'button',
type: 'button',
color: 'primary',
size: 'm',
Expand Down
39 changes: 0 additions & 39 deletions src/components/button/button_display/_button_display.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,45 +54,6 @@ describe('EuiButtonDisplay', () => {
});
});

describe('element', () => {
const elements = ['a', 'button', 'span'] as const;

const getButtonElement = (container: HTMLElement) =>
container.firstChild!.nodeName.toLowerCase();

elements.forEach((element) => {
test(element, () => {
const { container } = render(
<EuiButtonDisplay element={element} className="testing">
Content
</EuiButtonDisplay>
);

expect(getButtonElement(container)).toEqual(element);
});
});

it('always renders a `button` element if disabled', () => {
const { container } = render(
<EuiButtonDisplay element="a" isDisabled>
Content
</EuiButtonDisplay>
);

expect(getButtonElement(container)).toEqual('button');
});

it('always renders an `a` element if a href is passed', () => {
const { container } = render(
<EuiButtonDisplay element="span" href="#">
Content
</EuiButtonDisplay>
);

expect(getButtonElement(container)).toEqual('a');
});
});

describe('disabled behavior', () => {
it('disables hrefs with javascript in them and renders a button instead of a link', () => {
const { container } = render(
Expand Down
9 changes: 5 additions & 4 deletions src/components/button/button_display/_button_display.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ export type EuiButtonDisplaySizes = (typeof SIZES)[number];
export interface EuiButtonDisplayCommonProps
extends EuiButtonDisplayContentProps,
CommonProps {
element?: 'a' | 'button' | 'span';
children?: ReactNode;
size?: EuiButtonDisplaySizes;
/**
Expand Down Expand Up @@ -108,10 +107,12 @@ export function isButtonDisabled({
* EuiButtonDisplay is an internal-only component used for displaying
* any element as a button.
*/
export const EuiButtonDisplay = forwardRef<HTMLElement, EuiButtonDisplayProps>(
export const EuiButtonDisplay = forwardRef<
HTMLButtonElement | HTMLAnchorElement,
EuiButtonDisplayProps
>(
(
{
element: _element = 'button', // TODO: Not doing anything with this now
type = 'button',
children,
iconType,
Expand Down Expand Up @@ -159,7 +160,7 @@ export const EuiButtonDisplay = forwardRef<HTMLElement, EuiButtonDisplayProps>(
href={href}
target={target}
rel={rel}
isDisabled={buttonIsDisabled}
isDisabled={disabled || isDisabled || isLoading}
buttonProps={{
type,
'aria-pressed': isSelected,
Expand Down
1 change: 0 additions & 1 deletion src/components/facet/facet_button.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ const meta: Meta<EuiFacetButtonProps> = {
},
args: {
// Component defaults
element: 'button',
type: 'button',
size: 's',
iconSide: 'left',
Expand Down

0 comments on commit 3d3453d

Please sign in to comment.