Handle non-square stickers via 'contain'

stylesheets/_modules.scss

@@ -5146,10 +5146,9 @@ button.module-image__border-overlay:focus {
 }
 
 .module-sticker-picker__header__button__image {
-  min-width: 20px;
+  width: 20px;
-  min-height: 20px;
+  height: 20px;
-  max-width: 20px;
+  object-fit: contain;
-  max-height: 20px;
 }
 
 .module-sticker-picker__header__button__image--placeholder {
@@ -5199,7 +5198,8 @@ button.module-image__border-overlay:focus {
     &__image,
     &__placeholder {
       width: 100%;
-      height: auto;
+      height: 100%;
+      object-fit: contain;
     }
 
     &__placeholder {
@@ -5385,6 +5385,7 @@ button.module-image__border-overlay:focus {
   &__cover {
     width: 48px;
     height: 48px;
+    object-fit: contain;
   }
   &__cover-placeholder {
     width: 48px;
@@ -5590,7 +5591,8 @@ button.module-image__border-overlay:focus {
 
         &__image {
           width: 100%;
-          height: auto;
+          height: 100%;
+          object-fit: contain;
         }
 
         &--placeholder {
@@ -5787,6 +5789,7 @@ button.module-image__border-overlay:focus {
   &__image {
     width: 20px;
     height: 20px;
+    object-fit: contain;
   }
   &__image-placeholder {
     width: 20px;

ts/components/stickers/StickerButton.md

@@ -276,6 +276,152 @@ const packs = [
 </util.ConversationContext>;
 ```
 
+#### Installed Pack Tooltip (Wide Sticker)
+
+When a pack is installed there should be a tooltip saying as such and the sticker should appear in its original aspect ratio.
+
+```jsx
+const landscapeGreenSticker = {
+  id: 4,
+  url: util.landscapeGreenObjectUrl,
+  packId: 'green',
+};
+const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
+const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
+const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
+
+const packs = [
+  {
+    id: 'foo',
+    title: 'Green',
+    cover: landscapeGreenSticker,
+    stickers: Array(101)
+      .fill(0)
+      .map((n, id) => ({ ...landscapeGreenSticker, id })),
+  },
+  {
+    id: 'bar',
+    cover: sticker1,
+    stickers: Array(101)
+      .fill(0)
+      .map((n, id) => ({ ...sticker1, id })),
+  },
+  {
+    id: 'baz',
+    cover: sticker2,
+    stickers: Array(101)
+      .fill(0)
+      .map((n, id) => ({ ...sticker2, id })),
+  },
+  {
+    id: 'qux',
+    cover: sticker3,
+    stickers: Array(101)
+      .fill(0)
+      .map((n, id) => ({ ...sticker3, id })),
+  },
+];
+
+<util.ConversationContext theme={util.theme}>
+  <div
+    style={{
+      height: '500px',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'flex-end',
+    }}
+  >
+    <StickerButton
+      i18n={util.i18n}
+      receivedPacks={[]}
+      installedPacks={packs}
+      blessedPacks={[]}
+      knownPacks={[]}
+      installedPack={packs[0]}
+      onPickSticker={(packId, stickerId) =>
+        console.log('onPickSticker', { packId, stickerId })
+      }
+      clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
+      onClickAddPack={() => console.log('onClickAddPack')}
+      recentStickers={[]}
+    />
+  </div>
+</util.ConversationContext>;
+```
+
+#### Installed Pack Tooltip (Tall Sticker)
+
+When a pack is installed there should be a tooltip saying as such and the sticker should appear in its original aspect ratio.
+
+```jsx
+const portraitTealSticker = {
+  id: 4,
+  url: util.portraitTealObjectUrl,
+  packId: 'teal',
+};
+const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
+const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
+const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
+
+const packs = [
+  {
+    id: 'foo',
+    title: 'Teal',
+    cover: portraitTealSticker,
+    stickers: Array(101)
+      .fill(0)
+      .map((n, id) => ({ ...portraitTealSticker, id })),
+  },
+  {
+    id: 'bar',
+    cover: sticker1,
+    stickers: Array(101)
+      .fill(0)
+      .map((n, id) => ({ ...sticker1, id })),
+  },
+  {
+    id: 'baz',
+    cover: sticker2,
+    stickers: Array(101)
+      .fill(0)
+      .map((n, id) => ({ ...sticker2, id })),
+  },
+  {
+    id: 'qux',
+    cover: sticker3,
+    stickers: Array(101)
+      .fill(0)
+      .map((n, id) => ({ ...sticker3, id })),
+  },
+];
+
+<util.ConversationContext theme={util.theme}>
+  <div
+    style={{
+      height: '500px',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'flex-end',
+    }}
+  >
+    <StickerButton
+      i18n={util.i18n}
+      receivedPacks={[]}
+      installedPacks={packs}
+      blessedPacks={[]}
+      knownPacks={[]}
+      installedPack={packs[0]}
+      onPickSticker={(packId, stickerId) =>
+        console.log('onPickSticker', { packId, stickerId })
+      }
+      clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')}
+      onClickAddPack={() => console.log('onClickAddPack')}
+      recentStickers={[]}
+    />
+  </div>
+</util.ConversationContext>;
+```
+
 #### New Installation Splash Tooltip
 
 When the application is updated or freshly installed there should be a tooltip

ts/components/stickers/StickerManager.md

@@ -4,6 +4,12 @@
 const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
 const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
 const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
+const wideSticker = {
+  id: 4,
+  url: util.landscapeGreenObjectUrl,
+  packId: 'wide',
+};
+const tallSticker = { id: 4, url: util.portraitTealObjectUrl, packId: 'tall' };
 
 const packs = [
   {
@@ -33,6 +39,24 @@ const packs = [
       .fill(0)
       .map((n, id) => ({ ...sticker3, id })),
   },
+  {
+    id: 'wide',
+    cover: wideSticker,
+    title: 'Wide',
+    author: 'Wide',
+    stickers: Array(101)
+      .fill(0)
+      .map((n, id) => ({ ...wideSticker, id })),
+  },
+  {
+    id: 'tall',
+    cover: tallSticker,
+    title: 'Tall',
+    author: 'Tall',
+    stickers: Array(101)
+      .fill(0)
+      .map((n, id) => ({ ...tallSticker, id })),
+  },
 ];
 
 const receivedPacks = packs.map(p => ({ ...p, status: 'downloaded' }));

ts/components/stickers/StickerPicker.md

@@ -5,8 +5,30 @@ const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' };
 const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' };
 const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' };
 const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' };
+const wideSticker = {
+  id: 4,
+  url: util.landscapeGreenObjectUrl,
+  packId: 'wide',
+};
+const tallSticker = { id: 4, url: util.portraitTealObjectUrl, packId: 'tall' };
 
 const packs = [
+  {
+    id: 'tall',
+    cover: tallSticker,
+    stickerCount: 101,
+    stickers: Array(101)
+      .fill(0)
+      .map((n, id) => ({ ...tallSticker, id })),
+  },
+  {
+    id: 'wide',
+    cover: wideSticker,
+    stickerCount: 101,
+    stickers: Array(101)
+      .fill(0)
+      .map((n, id) => ({ ...wideSticker, id })),
+  },
   {
     id: 'foo',
     cover: sticker1,
@@ -154,6 +176,8 @@ const packs = [
       sticker1,
       sticker2,
       sticker3,
+      tallSticker,
+      wideSticker,
       { ...sticker2, id: 9999 },
     ]}
     onClose={() => console.log('onClose')}

ts/components/stickers/StickerPreviewModal.md

@@ -2,6 +2,12 @@
 
 ```jsx
 const abeSticker = { url: util.squareStickerObjectUrl, packId: 'abe' };
+const wideSticker = {
+  id: 4,
+  url: util.landscapeGreenObjectUrl,
+  packId: 'wide',
+};
+const tallSticker = { id: 4, url: util.portraitTealObjectUrl, packId: 'tall' };
 
 const pack = {
   id: 'foo',
@@ -10,9 +16,14 @@ const pack = {
   isBlessed: true,
   author: 'Foo McBarrington',
   status: 'downloaded',
-  stickers: Array(101)
+  stickerCount: 101,
-    .fill(0)
+  stickers: [
-    .map((n, id) => ({ ...abeSticker, id })),
+    wideSticker,
+    tallSticker,
+    ...Array(101)
+      .fill(0)
+      .map((n, id) => ({ ...abeSticker, id })),
+  ],
 };
 
 <util.ConversationContext theme={util.theme}>