fix(button): set type button by default (#564)

core-ds · Mar 14, 2021 · 59fdefd · 59fdefd
1 parent 8ac81ae
commit 59fdefd
Show file tree

Hide file tree

Showing 10 changed files with 168 additions and 2 deletions.
diff --git a/packages/attach/src/__snapshots__/Component.test.tsx.snap b/packages/attach/src/__snapshots__/Component.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`Attach Snapshots tests should match snapshot 1`] = `
   >
     <button
       class="component outlined s"
+      type="button"
     >
       <span
         class="addons"

diff --git a/packages/button/src/Component.test.tsx b/packages/button/src/Component.test.tsx
@@ -35,7 +35,7 @@ describe('Button', () => {
     });
 
     describe('Attributes tests', () => {
-        it('should set `data-test-id` atribute', () => {
+        it('should set `data-test-id` attribute', () => {
             const dataTestId = 'test-id';
             const { getByTestId } = render(<Button dataTestId={dataTestId} />);
 
@@ -49,6 +49,17 @@ describe('Button', () => {
 
             expect(relAttr).toBe('noreferrer noopener');
         });
+
+        it('should set type="button" by default', () => {
+            const { container } = render(<Button />);
+            expect(container.firstElementChild).toHaveAttribute('type', 'button');
+        });
+
+        it('should set type attribute', () => {
+            const type = 'submit';
+            const { container } = render(<Button type={type} />);
+            expect(container.firstElementChild).toHaveAttribute('type', type);
+        });
     });
 
     describe('Classes tests', () => {

diff --git a/packages/button/src/Component.tsx b/packages/button/src/Component.tsx
@@ -135,7 +135,7 @@ export const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, Bu
             );
         }
 
-        const { disabled, ...restButtonProps } = restProps as ButtonHTMLAttributes<
+        const { disabled, type = 'button', ...restButtonProps } = restProps as ButtonHTMLAttributes<
             HTMLButtonElement
         >;
 
@@ -144,6 +144,8 @@ export const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, Bu
             <button
                 {...componentProps}
                 {...restButtonProps}
+                // eslint-disable-next-line react/button-has-type
+                type={type}
                 disabled={disabled || loading}
                 ref={mergeRefs([buttonRef, ref])}
             >

diff --git a/packages/button/src/__snapshots__/Component.test.tsx.snap b/packages/button/src/__snapshots__/Component.test.tsx.snap
@@ -7,12 +7,14 @@ Object {
     <div>
       <button
         class="component secondary m iconOnly"
+        type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
       class="component secondary m iconOnly"
+      type="button"
     />
   </div>,
   "debug": [Function],
@@ -147,12 +149,14 @@ Object {
     <div>
       <button
         class="component secondary m iconOnly"
+        type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
       class="component secondary m iconOnly"
+      type="button"
     />
   </div>,
   "debug": [Function],
@@ -216,6 +220,7 @@ Object {
     <div>
       <button
         class="component secondary m iconOnly"
+        type="button"
       >
         <span
           class="addons"
@@ -230,6 +235,7 @@ Object {
   "container": <div>
     <button
       class="component secondary m iconOnly"
+      type="button"
     >
       <span
         class="addons"
@@ -419,6 +425,7 @@ Object {
       <button
         class="component secondary m iconOnly loading"
         disabled=""
+        type="button"
       >
         <svg
           class="component loader"
@@ -449,6 +456,7 @@ Object {
     <button
       class="component secondary m iconOnly loading"
       disabled=""
+      type="button"
     >
       <svg
         class="component loader"
@@ -535,6 +543,7 @@ Object {
     <div>
       <button
         class="component secondary m iconOnly"
+        type="button"
       >
         <span
           class="addons"
@@ -549,6 +558,7 @@ Object {
   "container": <div>
     <button
       class="component secondary m iconOnly"
+      type="button"
     >
       <span
         class="addons"

diff --git a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
@@ -55,6 +55,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
               <button
                 aria-label="Предыдущий месяц"
                 class="component ghost m iconOnly arrow"
+                type="button"
               />
               <span
                 class="button month"
@@ -622,6 +623,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                 <button
                   aria-label="Следующий месяц"
                   class="component ghost m iconOnly arrow"
+                  type="button"
                 />
               </div>
             </div>