fix(button): Support anchor and button HTML attributes (#679) (#680)

material-components · Feb 19, 2019 · be8790e · be8790e
1 parent e66a267
commit be8790e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/packages/button/index.tsx b/packages/button/index.tsx
@@ -28,16 +28,17 @@ const BUTTON_CLASS_NAME = 'mdc-button__icon';
 
 type ButtonTypes = HTMLAnchorElement | HTMLButtonElement;
 
-export interface ButtonProps<T extends ButtonTypes> extends Ripple.InjectedProps<T>, React.HTMLAttributes<T> {
-  raised?: boolean;
-  unelevated?: boolean;
-  outlined?: boolean;
-  dense?: boolean;
-  disabled?: boolean;
-  className?: string;
-  icon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
-  href?: string;
-  trailingIcon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
+export interface ButtonProps<T extends ButtonTypes>
+  extends Ripple.InjectedProps<T>, React.AnchorHTMLAttributes<T>, React.ButtonHTMLAttributes<T> {
+    raised?: boolean;
+    unelevated?: boolean;
+    outlined?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    className?: string;
+    icon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
+    href?: string;
+    trailingIcon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
 }
 
 export const Button = <T extends ButtonTypes>(

diff --git a/test/unit/button/index.test.tsx b/test/unit/button/index.test.tsx
@@ -66,6 +66,16 @@ test('renders a button with an anchor tag', () => {
   assert.equal(wrapper.type(), 'a');
 });
 
+test('renders a button with a button attribute', () => {
+  const wrapper = shallow(<Button type='submit' />);
+  assert.equal(wrapper.prop('type'), 'submit');
+});
+
+test('renders a button with an anchor attribute', () => {
+  const wrapper = shallow(<Button download />);
+  assert.equal(wrapper.prop('download'), true);
+});
+
 test('default initRipple function', () => {
   const initRipple = coerceForTesting<(surface: HTMLButtonElement) => {}>(td.func());
   mount(<Button initRipple={initRipple} />);