feat(tile): add eight by nine aspect ratio (#504)

Adds an eight by nine tile aspect ratio, which will be used in the image collage component in modern client.
microsoft · Aug 21, 2018 · 9c19e52 · 9c19e52
1 parent 8d28645
commit 9c19e52
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 0 deletions.
diff --git a/config/styleguide-visual/reference/Tile_with_images_desktop.png b/config/styleguide-visual/reference/Tile_with_images_desktop.png
diff --git a/src/components/Tile/Tile.md b/src/components/Tile/Tile.md
@@ -33,6 +33,23 @@ const image = <Image source={yammerLogo} description={yammerLogoDescription} ful
 
   <br />
 
+  <FixedGridRow>
+    <FixedGridColumn>
+      <Tile aspectRatio={TileAspectRatio.EightNine}>{image}</Tile>
+    </FixedGridColumn>
+    <FixedGridColumn>
+      <Tile aspectRatio={TileAspectRatio.EightNine}>{image}</Tile>
+    </FixedGridColumn>
+    <FixedGridColumn>
+      <Tile aspectRatio={TileAspectRatio.EightNine}>{image}</Tile>
+    </FixedGridColumn>
+    <FixedGridColumn>
+      <Tile aspectRatio={TileAspectRatio.EightNine}>{image}</Tile>
+    </FixedGridColumn>
+  </FixedGridRow>
+
+  <br />
+
   <FixedGridRow>
     <FixedGridColumn>
       <Tile aspectRatio={TileAspectRatio.OneOne}>{image}</Tile>

diff --git a/src/components/Tile/Tile.styles.ts b/src/components/Tile/Tile.styles.ts
@@ -12,6 +12,7 @@ export interface TileClassNameProps {
 
 const mapAspectRatioToPercent: Record<TileAspectRatio, string> = {
   [TileAspectRatio.TwoThree]: '150%',
+  [TileAspectRatio.EightNine]: '112.5%',
   [TileAspectRatio.OneOne]: '100%',
   [TileAspectRatio.FourThree]: '75%',
   [TileAspectRatio.SixteenNine]: '56.25%',

diff --git a/src/components/Tile/Tile.types.ts b/src/components/Tile/Tile.types.ts
@@ -13,6 +13,8 @@ export enum TileAspectRatio {
   FourThree = '4_3',
   /** 1:1 aspect ratio */
   OneOne = '1_1',
+  /** 8:9 aspect ratio */
+  EightNine = '8_9',
   /** 2:3 aspect ratio */
   TwoThree = '2_3',
 }