fix(avatar): add flexShrink 0 to avatar

twilio-labs · Oct 3, 2022 · a30a87d · a30a87d
1 parent 2584262
commit a30a87d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/.changeset/gold-apples-own.md b/.changeset/gold-apples-own.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/avatar': patch
+'@twilio-paste/core': patch
+---
+
+[Avatar] add flexShrink 0 so it stays the correct size in a flex layout
diff --git a/packages/paste-core/components/avatar/__tests__/__snapshots__/avatar.test.tsx.snap b/packages/paste-core/components/avatar/__tests__/__snapshots__/avatar.test.tsx.snap
@@ -6,6 +6,9 @@ exports[`Avatar image should render responsive css with an image 1`] = `
   box-sizing: border-box;
   overflow: hidden;
   text-align: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   width: sizeIcon30;
   height: sizeIcon30;
   background-color: colorBackgroundUser;
@@ -69,6 +72,9 @@ exports[`Avatar intials should render responsive css 1`] = `
   box-sizing: border-box;
   overflow: hidden;
   text-align: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   width: sizeIcon10;
   height: sizeIcon10;
   background-color: colorBackgroundUser;

diff --git a/packages/paste-core/components/avatar/src/index.tsx b/packages/paste-core/components/avatar/src/index.tsx
@@ -90,6 +90,7 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
         element={element}
         overflow="hidden"
         textAlign="center"
+        flexShrink={0}
         ref={ref}
         size={size}
         {...colorVariants[color]}