fix: Update icon size on button tertiary

dnbexperience · Nov 15, 2021 · 8e8b8ab · 8e8b8ab
1 parent ff1a9c7
commit 8e8b8ab
Show file tree

Hide file tree

Showing 32 changed files with 84 additions and 59 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/button/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/button/Examples.js
@@ -99,14 +99,7 @@ export const ButtonTertiary = () => (
   text={<span>Text inside additional span</span>}
   icon_position="left"
   icon="chevron_left"
-  left
-/>
-<Button
-  variant="tertiary"
-  size="large"
-  text="Large tertiary button"
-  icon="chevron_right"
-  left
+  right="1rem"
 />
 `}
   </ComponentBox>
@@ -120,14 +113,6 @@ export const ButtonTertiaryTop = () => (
   icon_position="top"
   icon="close"
   text="Button text"
-  right="large"
-/>
-<Button
-  variant="tertiary"
-  icon_position="top"
-  icon="close"
-  size="large"
-  text="Button text"
 />
 `}
   </ComponentBox>

diff --git a/packages/dnb-eufemia-sandbox/stories/components/Button.js b/packages/dnb-eufemia-sandbox/stories/components/Button.js
@@ -269,6 +269,23 @@ export const ButtonSandbox = () => (
       <Button text="Signal" variant="signal" icon="add" />
       <Button text="Signal" variant="signal" icon="add" disabled />
     </Box>
+    <Box>
+      <Button variant="tertiary" text="Button text" icon="add" />
+
+      <Button
+        variant="tertiary"
+        text="Button text"
+        icon_position="top"
+        icon="add"
+      />
+
+      <Button
+        variant="tertiary"
+        text="Button text"
+        icon="add"
+        icon_position="left"
+      />
+    </Box>
   </Wrapper>
 )
 

diff --git a/...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
@@ -1634,6 +1634,8 @@ exports[`Autocomplete scss have to match snapshot 1`] = `
     padding-left: 1rem; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
     padding-right: 1rem; }
+  .dnb-button--tertiary .dnb-button__text {
+    margin: 0; }
   .dnb-button--has-text {
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {

diff --git a/packages/dnb-eufemia/src/components/button/Button.js b/packages/dnb-eufemia/src/components/button/Button.js
@@ -159,7 +159,7 @@ export default class Button extends React.PureComponent {
         usedSize = 'default'
       }
     }
-    if (!iconSize && variant === 'tertiary' && usedSize === 'large') {
+    if (!iconSize && variant === 'tertiary' && icon_position === 'top') {
       iconSize = 'medium'
     }
 

diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -1782,6 +1782,8 @@ exports[`Button scss have to match snapshot 1`] = `
     padding-left: 1rem; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
     padding-right: 1rem; }
+  .dnb-button--tertiary .dnb-button__text {
+    margin: 0; }
   .dnb-button--has-text {
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {

diff --git a/...-button-tertiary-screenshot-have-to-match-all-tertiary-buttons-1-81956.snap.png b/...-button-tertiary-screenshot-have-to-match-all-tertiary-buttons-1-81956.snap.png
diff --git a/...s-button-tertiary-screenshot-have-to-match-dnb-button-tertiary-1-85395.snap.png b/...s-button-tertiary-screenshot-have-to-match-dnb-button-tertiary-1-85395.snap.png
diff --git a/...screenshot-have-to-match-dnb-button-tertiary-with-active-state-1-32a3c.snap.png b/...screenshot-have-to-match-dnb-button-tertiary-with-active-state-1-32a3c.snap.png
diff --git a/...-screenshot-have-to-match-dnb-button-tertiary-with-focus-state-1-7fc7a.snap.png b/...-screenshot-have-to-match-dnb-button-tertiary-with-focus-state-1-7fc7a.snap.png
diff --git a/...-screenshot-have-to-match-dnb-button-tertiary-with-hover-state-1-cac6d.snap.png b/...-screenshot-have-to-match-dnb-button-tertiary-with-hover-state-1-cac6d.snap.png
diff --git a/...rtiary-screenshot-have-to-match-tertiary-button-with-text-wrap-1-6d941.snap.png b/...rtiary-screenshot-have-to-match-tertiary-button-with-text-wrap-1-6d941.snap.png
diff --git a/...utton-tertiary-screenshot-have-to-match-tertiary-with-top-icon-1-210ac.snap.png b/...utton-tertiary-screenshot-have-to-match-tertiary-with-top-icon-1-210ac.snap.png
diff --git a/packages/dnb-eufemia/src/components/button/style/_button.scss b/packages/dnb-eufemia/src/components/button/style/_button.scss
@@ -169,6 +169,10 @@
     padding-right: 1rem;
   }
 
+  &--tertiary &__text {
+    margin: 0;
+  }
+
   // size default
 
   /* stylelint-disable-next-line */

diff --git a/...es/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/...es/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -2199,6 +2199,8 @@ exports[`DatePicker scss have to match snapshot 1`] = `
     padding-left: 1rem; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
     padding-right: 1rem; }
+  .dnb-button--tertiary .dnb-button__text {
+    margin: 0; }
   .dnb-button--has-text {
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {

diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -1753,6 +1753,8 @@ exports[`Dropdown scss have to match snapshot 1`] = `
     padding-left: 1rem; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
     padding-right: 1rem; }
+  .dnb-button--tertiary .dnb-button__text {
+    margin: 0; }
   .dnb-button--has-text {
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {

diff --git a/.../dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap b/.../dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap
@@ -370,6 +370,8 @@ exports[`GlobalError scss have to match snapshot 1`] = `
     padding-left: 1rem; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
     padding-right: 1rem; }
+  .dnb-button--tertiary .dnb-button__text {
+    margin: 0; }
   .dnb-button--has-text {
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {

diff --git a/...nb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap b/...nb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap
@@ -429,6 +429,8 @@ exports[`GlobalStatus scss have to match snapshot 1`] = `
     padding-left: 1rem; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
     padding-right: 1rem; }
+  .dnb-button--tertiary .dnb-button__text {
+    margin: 0; }
   .dnb-button--has-text {
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {
@@ -725,10 +727,8 @@ html[data-visual-test] .dnb-global-status__shell {
 .dnb-global-status__close-button, .dnb-global-status__close-button.dnb-button--tertiary {
   position: absolute;
   z-index: 1;
-  top: -0.25rem;
   right: 1rem;
-  left: auto;
-  margin-top: 0.75rem; }
+  left: auto; }
 
 .dnb-modal__content__inner .dnb-global-status__close-button {
   right: 0; }
@@ -942,7 +942,7 @@ exports[`GlobalStatus snapshot have to match component snapshot 1`] = `
                     wrap={null}
                   >
                     <button
-                      className="dnb-button dnb-button--tertiary dnb-button--has-text dnb-modal__close-button dnb-global-status__close-button dnb-button--icon-position-left dnb-button--has-icon dnb-button--icon-size-medium dnb-button--size-large"
+                      className="dnb-button dnb-button--tertiary dnb-button--has-text dnb-modal__close-button dnb-global-status__close-button dnb-button--icon-position-left dnb-button--has-icon dnb-button--size-large"
                       disabled={false}
                       onClick={[Function]}
                       title="close_text"
@@ -962,7 +962,7 @@ exports[`GlobalStatus snapshot have to match component snapshot 1`] = `
                         href={null}
                         icon="close"
                         icon_position="left"
-                        icon_size="medium"
+                        icon_size={null}
                         id={null}
                         innerRef={null}
                         inner_ref={null}
@@ -1007,34 +1007,34 @@ exports[`GlobalStatus snapshot have to match component snapshot 1`] = `
                           inherit_color={true}
                           key="button-icon"
                           modifier={null}
-                          size="medium"
+                          size={null}
                           skeleton={false}
                           title={null}
                           width={null}
                         >
                           <span
                             aria-hidden={true}
-                            className="dnb-icon dnb-icon--medium dnb-button__icon dnb-icon--inherit-color"
+                            className="dnb-icon dnb-icon--default dnb-button__icon dnb-icon--inherit-color"
                             data-test-id="close icon"
                             role="presentation"
                           >
-                            <close_medium>
+                            <close>
                               <svg
                                 fill="none"
-                                height={24}
-                                viewBox="0 0 24 24"
-                                width={24}
+                                height={16}
+                                viewBox="0 0 16 16"
+                                width={16}
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M5 19L19 5M19 19L5 5"
+                                  d="M3 13L13 3M13 13L3 3"
                                   stroke="black"
                                   strokeLinecap="round"
                                   strokeLinejoin="round"
                                   strokeWidth={1.5}
                                 />
                               </svg>
-                            </close_medium>
+                            </close>
                           </span>
                         </IconPrimary>
                       </Content>
@@ -1325,7 +1325,7 @@ Array [
                       wrap={null}
                     >
                       <button
-                        className="dnb-button dnb-button--tertiary dnb-button--has-text dnb-modal__close-button dnb-global-status__close-button dnb-button--icon-position-left dnb-button--has-icon dnb-button--icon-size-medium dnb-button--size-large"
+                        className="dnb-button dnb-button--tertiary dnb-button--has-text dnb-modal__close-button dnb-global-status__close-button dnb-button--icon-position-left dnb-button--has-icon dnb-button--size-large"
                         disabled={false}
                         onClick={[Function]}
                         title="Lukk"
@@ -1345,7 +1345,7 @@ Array [
                           href={null}
                           icon="close"
                           icon_position="left"
-                          icon_size="medium"
+                          icon_size={null}
                           id={null}
                           innerRef={null}
                           inner_ref={null}
@@ -1390,34 +1390,34 @@ Array [
                             inherit_color={true}
                             key="button-icon"
                             modifier={null}
-                            size="medium"
+                            size={null}
                             skeleton={false}
                             title={null}
                             width={null}
                           >
                             <span
                               aria-hidden={true}
-                              className="dnb-icon dnb-icon--medium dnb-button__icon dnb-icon--inherit-color"
+                              className="dnb-icon dnb-icon--default dnb-button__icon dnb-icon--inherit-color"
                               data-test-id="close icon"
                               role="presentation"
                             >
-                              <close_medium>
+                              <close>
                                 <svg
                                   fill="none"
-                                  height={24}
-                                  viewBox="0 0 24 24"
-                                  width={24}
+                                  height={16}
+                                  viewBox="0 0 16 16"
+                                  width={16}
                                   xmlns="http://www.w3.org/2000/svg"
                                 >
                                   <path
-                                    d="M5 19L19 5M19 19L5 5"
+                                    d="M3 13L13 3M13 13L3 3"
                                     stroke="black"
                                     strokeLinecap="round"
                                     strokeLinejoin="round"
                                     strokeWidth={1.5}
                                   />
                                 </svg>
-                              </close_medium>
+                              </close>
                             </span>
                           </IconPrimary>
                         </Content>

diff --git a/...tatus-screenshot-have-to-match-the-close-button-in-focus-state-1-fe2ef.snap.png b/...tatus-screenshot-have-to-match-the-close-button-in-focus-state-1-fe2ef.snap.png
diff --git a/packages/dnb-eufemia/src/components/global-status/style/_global-status.scss b/packages/dnb-eufemia/src/components/global-status/style/_global-status.scss
@@ -96,11 +96,8 @@
   &__close-button.dnb-button--tertiary {
     position: absolute;
     z-index: 1;
-    top: -0.25rem;
     right: 1rem; // also because of the focus-ring
     left: auto;
-
-    margin-top: 0.75rem;
   }
   .dnb-modal__content__inner &__close-button {
     right: 0;

diff --git a/.../dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/.../dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -595,6 +595,8 @@ exports[`InputMasked scss have to match snapshot 1`] = `
     padding-left: 1rem; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
     padding-right: 1rem; }
+  .dnb-button--tertiary .dnb-button__text {
+    margin: 0; }
   .dnb-button--has-text {
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {

diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -1189,6 +1189,8 @@ exports[`Input scss have to match snapshot 1`] = `
     padding-left: 1rem; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
     padding-right: 1rem; }
+  .dnb-button--tertiary .dnb-button__text {
+    margin: 0; }
   .dnb-button--has-text {
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {

diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -941,7 +941,7 @@ exports[`Modal component have to match snapshot 1`] = `
                             class="dnb-modal__header__bar__close"
                           >
                             <button
-                              class="dnb-button dnb-button--tertiary dnb-button--has-text dnb-modal__close-button dnb-button--icon-position-left dnb-button--has-icon dnb-button--icon-size-medium dnb-button--size-large"
+                              class="dnb-button dnb-button--tertiary dnb-button--has-text dnb-modal__close-button dnb-button--icon-position-left dnb-button--has-icon dnb-button--size-large"
                               type="button"
                             >
                               <span
@@ -956,19 +956,19 @@ exports[`Modal component have to match snapshot 1`] = `
                               </span>
                               <span
                                 aria-hidden="true"
-                                class="dnb-icon dnb-icon--medium dnb-button__icon dnb-icon--inherit-color"
+                                class="dnb-icon dnb-icon--default dnb-button__icon dnb-icon--inherit-color"
                                 data-test-id="close icon"
                                 role="presentation"
                               >
                                 <svg
                                   fill="none"
-                                  height="24"
-                                  viewBox="0 0 24 24"
-                                  width="24"
+                                  height="16"
+                                  viewBox="0 0 16 16"
+                                  width="16"
                                   xmlns="http://www.w3.org/2000/svg"
                                 >
                                   <path
-                                    d="M5 19L19 5M19 19L5 5"
+                                    d="M3 13L13 3M13 13L3 3"
                                     stroke="black"
                                     stroke-linecap="round"
                                     stroke-linejoin="round"
@@ -1034,7 +1034,7 @@ exports[`Modal component have to match snapshot 1`] = `
                             wrap={null}
                           >
                             <button
-                              className="dnb-button dnb-button--tertiary dnb-button--has-text dnb-modal__close-button dnb-button--icon-position-left dnb-button--has-icon dnb-button--icon-size-medium dnb-button--size-large"
+                              className="dnb-button dnb-button--tertiary dnb-button--has-text dnb-modal__close-button dnb-button--icon-position-left dnb-button--has-icon dnb-button--size-large"
                               disabled={false}
                               onClick={[Function]}
                               type="button"
@@ -1053,7 +1053,7 @@ exports[`Modal component have to match snapshot 1`] = `
                                 href={null}
                                 icon="close"
                                 icon_position="left"
-                                icon_size="medium"
+                                icon_size={null}
                                 id={null}
                                 innerRef={null}
                                 inner_ref={null}
@@ -1098,34 +1098,34 @@ exports[`Modal component have to match snapshot 1`] = `
                                   inherit_color={true}
                                   key="button-icon"
                                   modifier={null}
-                                  size="medium"
+                                  size={null}
                                   skeleton={false}
                                   title={null}
                                   width={null}
                                 >
                                   <span
                                     aria-hidden={true}
-                                    className="dnb-icon dnb-icon--medium dnb-button__icon dnb-icon--inherit-color"
+                                    className="dnb-icon dnb-icon--default dnb-button__icon dnb-icon--inherit-color"
                                     data-test-id="close icon"
                                     role="presentation"
                                   >
-                                    <close_medium>
+                                    <close>
                                       <svg
                                         fill="none"
-                                        height={24}
-                                        viewBox="0 0 24 24"
-                                        width={24}
+                                        height={16}
+                                        viewBox="0 0 16 16"
+                                        width={16}
                                         xmlns="http://www.w3.org/2000/svg"
                                       >
                                         <path
-                                          d="M5 19L19 5M19 19L5 5"
+                                          d="M3 13L13 3M13 13L3 3"
                                           stroke="black"
                                           strokeLinecap="round"
                                           strokeLinejoin="round"
                                           strokeWidth={1.5}
                                         />
                                       </svg>
-                                    </close_medium>
+                                    </close>
                                   </span>
                                 </IconPrimary>
                               </Content>
@@ -1570,6 +1570,8 @@ exports[`Modal scss have to match snapshot 1`] = `
     padding-left: 1rem; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
     padding-right: 1rem; }
+  .dnb-button--tertiary .dnb-button__text {
+    margin: 0; }
   .dnb-button--has-text {
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {

diff --git a/...s-additional-modal-screenshot-have-to-match-a-fullscreen-modal-1-eb31e.snap.png b/...s-additional-modal-screenshot-have-to-match-a-fullscreen-modal-1-eb31e.snap.png
diff --git a/...t-js-drawer-screenshot-have-to-match-the-default-drawer-window-1-03237.snap.png b/...t-js-drawer-screenshot-have-to-match-the-default-drawer-window-1-03237.snap.png
diff --git a/...js-drawer-without-spacing-have-to-match-drawer-without-spacing-1-afcd4.snap.png b/...js-drawer-without-spacing-have-to-match-drawer-without-spacing-1-afcd4.snap.png
diff --git a/...est-js-modal-screenshot-have-to-match-the-default-modal-window-1-b836a.snap.png b/...est-js-modal-screenshot-have-to-match-the-default-modal-window-1-b836a.snap.png
diff --git a/...l-screenshot-have-to-match-the-default-modal-window-with-title-1-8e313.snap.png b/...l-screenshot-have-to-match-the-default-modal-window-with-title-1-8e313.snap.png