Merge pull request #1277 from dnbexperience/fix/avatar-border

Fix Avatar circle and logo
dnbexperience · Feb 8, 2022 · b91e745 · b91e745
2 parents 3c9546e + cd8dd48
commit b91e745
Show file tree

Hide file tree

Showing 34 changed files with 23 additions and 21 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/avatar/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/avatar/Examples.js
@@ -155,7 +155,7 @@ export const AvatarDNBLogo = () => (
     {() => /* jsx */ `
 <Avatar.Group label="Logos:">
   <Avatar>
-    <Logo/>
+    <Logo size="auto" />
   </Avatar>
 </Avatar.Group>
 `}
@@ -195,7 +195,7 @@ export const AvatarImageTobias = () => (
     {() => /* jsx */ `
 <Avatar.Group label="Profiles:">
   <Avatar 
-    src="https://avatars.githubusercontent.com/u/1501870?v=4" 
+    src="/images/avatars/1501870.jpg" 
     alt="Profile picture" 
     size="large"
   />
@@ -303,13 +303,13 @@ export const GroupedAvatarsImg = () => (
   <ComponentBox hideCode data-visual-test="avatar-grouped-image">
     {() => /* jsx */ `
 <Avatar.Group label="Eufemia contributors:" size="large" maxElements={5}>
-  <Avatar src="https://avatars.githubusercontent.com/u/1501870?v=4" alt="Profile picture"/>
-  <Avatar src="https://avatars.githubusercontent.com/u/35217511?v=4" alt="Profile picture"/>
-  <Avatar src="https://avatars.githubusercontent.com/u/21338570?v=4" alt="Profile picture"/>
-  <Avatar src="https://avatars.githubusercontent.com/u/1359205?v=4" alt="Profile picture"/>
-  <Avatar src="https://avatars.githubusercontent.com/u/1501870?v=4" alt="Profile picture"/>
-  <Avatar src="https://avatars.githubusercontent.com/u/1501870?v=4" alt="Profile picture"/>
-  <Avatar src="https://avatars.githubusercontent.com/u/1501870?v=4" alt="Profile picture"/>
+  <Avatar src="/images/avatars/1501870.jpg" alt="Profile picture"/>
+  <Avatar src="/images/avatars/35217511.jpg" alt="Profile picture"/>
+  <Avatar src="/images/avatars/21338570.jpg" alt="Profile picture"/>
+  <Avatar src="/images/avatars/1359205.jpg" alt="Profile picture"/>
+  <Avatar src="/images/avatars/1501870.jpg" alt="Profile picture"/>
+  <Avatar src="/images/avatars/1501870.jpg" alt="Profile picture"/>
+  <Avatar src="/images/avatars/1501870.jpg" alt="Profile picture"/>
 </Avatar.Group>
 `}
   </ComponentBox>

diff --git a/packages/dnb-design-system-portal/static/images/avatars/1359205.jpg b/packages/dnb-design-system-portal/static/images/avatars/1359205.jpg
diff --git a/packages/dnb-design-system-portal/static/images/avatars/1501870.jpg b/packages/dnb-design-system-portal/static/images/avatars/1501870.jpg
diff --git a/packages/dnb-design-system-portal/static/images/avatars/21338570.jpg b/packages/dnb-design-system-portal/static/images/avatars/21338570.jpg
diff --git a/packages/dnb-design-system-portal/static/images/avatars/35217511.jpg b/packages/dnb-design-system-portal/static/images/avatars/35217511.jpg
diff --git a/packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -123,11 +123,11 @@ exports[`Avatar scss have to match snapshot 1`] = `
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  line-height: 1;
   overflow: hidden;
   user-select: none;
   border-radius: 50%;
-  font-weight: var(--font-weight-medium); }
+  font-weight: var(--font-weight-medium);
+  line-height: 1; }
   .dnb-avatar,
   .dnb-core-style .dnb-avatar {
     line-height: var(--button-height); }
@@ -164,8 +164,12 @@ exports[`Avatar scss have to match snapshot 1`] = `
     justify-content: flex;
     flex-direction: row; }
     .dnb-avatar__group .dnb-avatar {
-      box-sizing: content-box;
-      border: 0.125rem solid var(--color-black-3); }
+      --border-color: var(--color-black-3);
+      box-shadow: 0 0 0 0.125rem var(--border-color);
+      border-color: transparent; }
+      @media screen and (-ms-high-contrast: none) {
+        .dnb-avatar__group .dnb-avatar {
+          box-shadow: 0 0 0 0.125rem var(--color-black-3); } }
       .dnb-avatar__group .dnb-avatar--size-small {
         margin-left: -0.5rem; }
       .dnb-avatar__group .dnb-avatar--size-medium {
@@ -175,8 +179,7 @@ exports[`Avatar scss have to match snapshot 1`] = `
       .dnb-avatar__group .dnb-avatar--size-x-large {
         margin-left: -1.5rem; }
       .dnb-avatar__group .dnb-avatar:nth-of-type(2) {
-        margin-left: 0;
-        border-left: none; }
+        margin-left: 0; }
     .dnb-avatar__group--elements-left {
       display: inline-flex;
       align-items: center;

diff --git a/...hot-children-have-to-match-icon-of-variant-primary-as-children-1-8f383.snap.png b/...hot-children-have-to-match-icon-of-variant-primary-as-children-1-8f383.snap.png
diff --git a/...t-children-have-to-match-icon-of-variant-secondary-as-children-1-08a3d.snap.png b/...t-children-have-to-match-icon-of-variant-secondary-as-children-1-08a3d.snap.png
diff --git a/...ot-children-have-to-match-icon-of-variant-tertiary-as-children-1-e7ead.snap.png b/...ot-children-have-to-match-icon-of-variant-tertiary-as-children-1-e7ead.snap.png
diff --git a/...t-js-avatar-screenshot-children-have-to-match-logo-as-children-1-46cdc.snap.png b/...t-js-avatar-screenshot-children-have-to-match-logo-as-children-1-46cdc.snap.png
diff --git a/...atar-screenshot-grouping-have-to-match-grouping-of-img-avatars-1-34d8d.snap.png b/...atar-screenshot-grouping-have-to-match-grouping-of-img-avatars-1-34d8d.snap.png
diff --git a/...ar-screenshot-grouping-have-to-match-grouping-of-large-avatars-1-4003c.snap.png b/...ar-screenshot-grouping-have-to-match-grouping-of-large-avatars-1-4003c.snap.png
diff --git a/...r-screenshot-grouping-have-to-match-grouping-of-medium-avatars-1-c4108.snap.png b/...r-screenshot-grouping-have-to-match-grouping-of-medium-avatars-1-c4108.snap.png
diff --git a/...ar-screenshot-grouping-have-to-match-grouping-of-small-avatars-1-9a812.snap.png b/...ar-screenshot-grouping-have-to-match-grouping-of-small-avatars-1-9a812.snap.png
diff --git a/...-screenshot-grouping-have-to-match-grouping-of-x-large-avatars-1-df878.snap.png b/...-screenshot-grouping-have-to-match-grouping-of-x-large-avatars-1-df878.snap.png
diff --git a/...shot-test-js-avatar-screenshot-size-have-to-match-default-size-1-8e7a8.snap.png b/...shot-test-js-avatar-screenshot-size-have-to-match-default-size-1-8e7a8.snap.png
diff --git a/...enshot-test-js-avatar-screenshot-size-have-to-match-large-size-1-e443c.snap.png b/...enshot-test-js-avatar-screenshot-size-have-to-match-large-size-1-e443c.snap.png
diff --git a/...nshot-test-js-avatar-screenshot-size-have-to-match-medium-size-1-7a038.snap.png b/...nshot-test-js-avatar-screenshot-size-have-to-match-medium-size-1-7a038.snap.png
diff --git a/...enshot-test-js-avatar-screenshot-size-have-to-match-small-size-1-101e7.snap.png b/...enshot-test-js-avatar-screenshot-size-have-to-match-small-size-1-101e7.snap.png
diff --git a/...shot-test-js-avatar-screenshot-size-have-to-match-x-large-size-1-4487c.snap.png b/...shot-test-js-avatar-screenshot-size-have-to-match-x-large-size-1-4487c.snap.png
diff --git a/...t-js-avatar-screenshot-src-have-to-match-image-of-external-src-1-dd3e5.snap.png b/...t-js-avatar-screenshot-src-have-to-match-image-of-external-src-1-dd3e5.snap.png
diff --git a/...atar-screenshot-src-have-to-match-image-when-passing-img-props-1-14fa6.snap.png b/...atar-screenshot-src-have-to-match-image-when-passing-img-props-1-14fa6.snap.png
diff --git a/...-js-avatar-screenshot-src-have-to-match-png-image-of-local-src-1-a55c4.snap.png b/...-js-avatar-screenshot-src-have-to-match-png-image-of-local-src-1-a55c4.snap.png
diff --git a/...-js-avatar-screenshot-src-have-to-match-svg-image-of-local-src-1-44759.snap.png b/...-js-avatar-screenshot-src-have-to-match-svg-image-of-local-src-1-44759.snap.png
diff --git a/...est-js-avatar-screenshot-variant-have-to-match-default-variant-1-22bd7.snap.png b/...est-js-avatar-screenshot-variant-have-to-match-default-variant-1-22bd7.snap.png
diff --git a/...est-js-avatar-screenshot-variant-have-to-match-primary-variant-1-e7e35.snap.png b/...est-js-avatar-screenshot-variant-have-to-match-primary-variant-1-e7e35.snap.png
diff --git a/...t-js-avatar-screenshot-variant-have-to-match-secondary-variant-1-d6086.snap.png b/...t-js-avatar-screenshot-variant-have-to-match-secondary-variant-1-d6086.snap.png
diff --git a/...st-js-avatar-screenshot-variant-have-to-match-tertiary-variant-1-5b058.snap.png b/...st-js-avatar-screenshot-variant-have-to-match-tertiary-variant-1-5b058.snap.png
diff --git a/packages/dnb-eufemia/src/components/avatar/style/_avatar.scss b/packages/dnb-eufemia/src/components/avatar/style/_avatar.scss
@@ -28,12 +28,13 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  line-height: 1;
+
   overflow: hidden;
   user-select: none;
 
   border-radius: 50%;
   font-weight: var(--font-weight-medium);
+  line-height: 1;
 
   // Safari needs a correct CSS specificity
   &,
@@ -91,8 +92,7 @@
     flex-direction: row;
 
     .dnb-avatar {
-      box-sizing: content-box;
-      border: 0.125rem solid var(--color-black-3);
+      @include fakeBorder(var(--color-black-3), 0.125rem);
 
       &--size-small {
         margin-left: -0.5rem;
@@ -112,7 +112,6 @@
 
       &:nth-of-type(2) {
         margin-left: 0;
-        border-left: none;
       }
     }
 

diff --git a/packages/dnb-eufemia/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap b/packages/dnb-eufemia/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
@@ -110,7 +110,7 @@ exports[`Logo scss have to match snapshot 1`] = `
  *
  */
 .dnb-logo {
-  display: inline-block;
+  display: inline-flex;
   vertical-align: baseline;
   font-size: inherit;
   line-height: var(--line-height-xx-small--em);

diff --git a/...shot-test-js-logo-screenshot-have-to-match-the-auto-sized-logo-1-ab047.snap.png b/...shot-test-js-logo-screenshot-have-to-match-the-auto-sized-logo-1-ab047.snap.png
diff --git a/...eenshot-test-js-logo-screenshot-have-to-match-the-default-logo-1-57086.snap.png b/...eenshot-test-js-logo-screenshot-have-to-match-the-default-logo-1-57086.snap.png
diff --git a/...test-js-logo-screenshot-have-to-match-the-inherited-sized-logo-1-82156.snap.png b/...test-js-logo-screenshot-have-to-match-the-inherited-sized-logo-1-82156.snap.png
diff --git a/packages/dnb-eufemia/src/components/logo/style/_logo.scss b/packages/dnb-eufemia/src/components/logo/style/_logo.scss
@@ -4,7 +4,7 @@
  */
 
 .dnb-logo {
-  display: inline-block;
+  display: inline-flex;
   vertical-align: baseline;
   font-size: inherit;
   line-height: var(