fix: #button with href (anchor) had a broken style on active/focus state

dnbexperience · Feb 15, 2019 · a3e263d · a3e263d
1 parent ad0ca4e
commit a3e263d
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 2 deletions.
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js b/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js
@@ -94,6 +94,7 @@ class Example extends PureComponent {
   title="This is a link"
   icon_position="right"
   icon="chevron_right"
+  data-dnb-test="button-anchor"
 />
 <Button
   variant="secondary"
@@ -105,7 +106,7 @@ class Example extends PureComponent {
 />
           `}
         </ComponentBox>
-        <ComponentBox scope={{ question }}>
+        <ComponentBox scope={{ question }} caption="Button with Icon only">
           {/* @jsx */ `
 <Button
   title="Disabled Icon only Button"
@@ -123,7 +124,6 @@ class Example extends PureComponent {
   title="Button with custom, Secondary Icon only"
   icon={question}
 />
-<p className="example-caption">Button with Icon only</p>
           `}
         </ComponentBox>
         <ComponentBox

diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/Button.screenshot.test.js b/packages/dnb-ui-lib/src/components/button/__tests__/Button.screenshot.test.js
@@ -43,4 +43,10 @@ describe('Button screenshot', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+  it('have to match primary button with href', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-dnb-test="button-anchor"]'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -783,5 +783,7 @@ a.dnb-button {
     transform: translateY(0); }
   a.dnb-button .dnb-button__text {
     transform: translateY(1px); }
+  a.dnb-button:active, a.dnb-button:focus {
+    border-radius: var(--button-border-radius); }
 "
 `;
diff --git a/...st-js-button-screenshot-have-to-match-primary-button-with-href-1-600d4.snap.png b/...st-js-button-screenshot-have-to-match-primary-button-with-href-1-600d4.snap.png
diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss
@@ -209,4 +209,9 @@ a.dnb-button {
   .dnb-button__text {
     transform: translateY(1px);
   }
+
+  &:active,
+  &:focus {
+    border-radius: var(--button-border-radius);
+  }
 }
diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -536,6 +536,8 @@ a.dnb-button {
     transform: translateY(0); }
   a.dnb-button .dnb-button__text {
     transform: translateY(1px); }
+  a.dnb-button:active, a.dnb-button:focus {
+    border-radius: var(--button-border-radius); }
 
 /*
 * DNB FormLabel

diff --git a/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -393,6 +393,8 @@ a.dnb-button {
     transform: translateY(0); }
   a.dnb-button .dnb-button__text {
     transform: translateY(1px); }
+  a.dnb-button:active, a.dnb-button:focus {
+    border-radius: var(--button-border-radius); }
 
 /*
 * DNB FormLabel

diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -582,6 +582,8 @@ a.dnb-button {
     transform: translateY(0); }
   a.dnb-button .dnb-button__text {
     transform: translateY(1px); }
+  a.dnb-button:active, a.dnb-button:focus {
+    border-radius: var(--button-border-radius); }
 
 /*
 * DNB FormLabel

diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -772,6 +772,8 @@ a.dnb-button {
     transform: translateY(0); }
   a.dnb-button .dnb-button__text {
     transform: translateY(1px); }
+  a.dnb-button:active, a.dnb-button:focus {
+    border-radius: var(--button-border-radius); }
 
 .dnb-modal {
   font-family: sans-serif;

diff --git a/packages/dnb-ui-lib/stories/componentsStories.js b/packages/dnb-ui-lib/stories/componentsStories.js
@@ -36,6 +36,7 @@ stories.push([
           text="Secondary button with href"
           href="?no-cache=1"
           icon="add"
+          onClick={e => e.preventDefault()}
         />
       </Box>
       <Box>