fix(Button): align large icon size to be same as in Figma (#2239)

packages/dnb-design-system-portal/src/docs/uilib/components/button/Examples.tsx

@@ -173,29 +173,31 @@ export const ButtonSignalLarge = () => (
 )
 
 export const ButtonIcon = () => (
-  <ComponentBox scope={{ question }}>
-    <Button title="Disabled Icon only Button" icon="calendar" disabled />
+  <ComponentBox scope={{ question }} data-visual-test="button-icons">
     <Button
-      title="Button with Icon only"
+      title="Disabled Icon only Button"
       icon="calendar"
-      data-visual-test="button-icon"
+      disabled
+      right
     />
     <Button
-      title="Small sized button with default Icon"
-      icon="add"
-      icon_size="default"
-      size="small"
+      title="Button with Icon only"
+      icon="calendar"
+      data-visual-test="button-icon"
     />
+    <Button title="Small sized icon button" icon="add" size="small" left />
     <Button
-      title="Default sized Button with medium Icon"
-      icon="calendar"
-      size="default"
+      title="Large sized icon button"
+      icon={question}
+      size="large"
+      left
     />
     <Button
-      title="Button with custom, Secondary Icon only"
+      title="Icon button with status"
       icon={question}
+      status="error"
+      left
     />
-    <Button title="Button with status" icon={question} status="error" />
   </ComponentBox>
 )
 
@@ -397,17 +399,11 @@ export const IconButtonSizes = () => {
         size="small"
       />
       <Button
-        title="Medium sized button with add icon"
+        title="Medium sized button with add icon (default)"
         icon="add"
         size="medium"
         left
       />
-      <Button
-        title="Default sized button with add icon"
-        icon="add"
-        size="default"
-        left
-      />
       <Button
         title="Large sized button with add icon"
         icon="add"

packages/dnb-eufemia/src/components/button/__tests__/Button.screenshot.test.ts

@@ -93,6 +93,13 @@ describe('Button', () => {
   })
 
   describe('icon', () => {
+    it('have to match icon buttons', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="button-icons"]',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+
     it('have to match icon button', async () => {
       const screenshot = await makeScreenshot({
         selector: '[data-visual-test="button-icon"]',

packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -1053,6 +1053,10 @@ html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
+.dnb-button--secondary:not(.dnb-button--has-text):not(.dnb-button--input-button).dnb-button--size-large {
+  width: calc(var(--button-width--large) - 0.5rem);
+  line-height: calc(var(--button-height--large) - 0.5rem);
+}
 .dnb-button--active {
   --border-color: var(--color-emerald-green);
   --border-width: 0.125rem;

packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss

@@ -78,14 +78,19 @@
   }
 
   // Icon button
-  &--secondary:not(.dnb-button--has-text) {
+  &--secondary:not(#{&}--has-text) {
     @include buttonHover(var(--color-emerald-green), var(--color-white));
     @include buttonFocus(var(--color-emerald-green), var(--color-white));
     @include buttonActive(
       var(--color-emerald-green),
       var(--color-mint-green-50)
     );
   }
+  &--secondary:not(#{&}--has-text):not(#{&}--input-button)#{&}--size-large {
+    // Make exception for icon button as it should be smaller than the original large button
+    width: calc(var(--button-width--large) - 0.5rem);
+    line-height: calc(var(--button-height--large) - 0.5rem);
+  }
 
   // simulate active state
   &--active {