Skip to content
This repository was archived by the owner on Jul 29, 2025. It is now read-only.

Commit be8790e

Browse files
Ben McKernanMatt Goo
authored andcommitted
fix(button): Support anchor and button HTML attributes (#679) (#680)
1 parent e66a267 commit be8790e

File tree

2 files changed

+21
-10
lines changed

2 files changed

+21
-10
lines changed

packages/button/index.tsx

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,17 @@ const BUTTON_CLASS_NAME = 'mdc-button__icon';
2828

2929
type ButtonTypes = HTMLAnchorElement | HTMLButtonElement;
3030

31-
export interface ButtonProps<T extends ButtonTypes> extends Ripple.InjectedProps<T>, React.HTMLAttributes<T> {
32-
raised?: boolean;
33-
unelevated?: boolean;
34-
outlined?: boolean;
35-
dense?: boolean;
36-
disabled?: boolean;
37-
className?: string;
38-
icon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
39-
href?: string;
40-
trailingIcon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
31+
export interface ButtonProps<T extends ButtonTypes>
32+
extends Ripple.InjectedProps<T>, React.AnchorHTMLAttributes<T>, React.ButtonHTMLAttributes<T> {
33+
raised?: boolean;
34+
unelevated?: boolean;
35+
outlined?: boolean;
36+
dense?: boolean;
37+
disabled?: boolean;
38+
className?: string;
39+
icon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
40+
href?: string;
41+
trailingIcon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
4142
}
4243

4344
export const Button = <T extends ButtonTypes>(

test/unit/button/index.test.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,16 @@ test('renders a button with an anchor tag', () => {
6666
assert.equal(wrapper.type(), 'a');
6767
});
6868

69+
test('renders a button with a button attribute', () => {
70+
const wrapper = shallow(<Button type='submit' />);
71+
assert.equal(wrapper.prop('type'), 'submit');
72+
});
73+
74+
test('renders a button with an anchor attribute', () => {
75+
const wrapper = shallow(<Button download />);
76+
assert.equal(wrapper.prop('download'), true);
77+
});
78+
6979
test('default initRipple function', () => {
7080
const initRipple = coerceForTesting<(surface: HTMLButtonElement) => {}>(td.func());
7181
mount(<Button initRipple={initRipple} />);

0 commit comments

Comments
 (0)