From 7382d43266a0f983b5351a9372f09ee97ebe73ab Mon Sep 17 00:00:00 2001
From: Rafe Goldberg <rafegoldberg@gmail.com>
Date: Thu, 29 Aug 2024 13:45:44 -0400
Subject: [PATCH] style(Image): fix alignment oddities (#956)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

| 🎫 Fix RM-10636 |
| :-------------: |

## 🧰 Changes

Images that did not specify their alignment were being forced to the
center in MDX; they should default to the left.

- [x] [don't force `[align]` to default to
`"center"`](https://github.com/readmeio/markdown/pull/956/files#diff-1b96290f278c30bd682c1247de2db226763c471520a387108344a9d53d13de23R19)
- [x] [fix some errant CSS alignment
selectors](https://github.com/readmeio/markdown/pull/956/files#diff-19c7d495b0c7303322a8a6dcaf6813764594f9e77b9aabc2e5da9a1e274a6d92)

## 🧬 QA & Testing

Pull this branch down, run `start`, and try rendering the following
syntax:

```
![](https://files.readme.io/2eb4d36-Screenshot_2024-08-05_at_21.34.12.png)

<img align="center" width="50%" src="https://files.readme.io/0bce9dd-image.png" />
```

If the first image is aligned to the left and the latter is properly
centered, this worked! :tada:
---
 __tests__/__snapshots__/index.test.js.snap            | 2 +-
 __tests__/components/Image.test.tsx                   | 4 ++--
 __tests__/components/__snapshots__/index.test.ts.snap | 2 +-
 components/Image/index.tsx                            | 6 +++---
 components/Image/style.scss                           | 4 +---
 5 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/__tests__/__snapshots__/index.test.js.snap b/__tests__/__snapshots__/index.test.js.snap
index a7330bb0b..c022784ac 100644
--- a/__tests__/__snapshots__/index.test.js.snap
+++ b/__tests__/__snapshots__/index.test.js.snap
@@ -335,7 +335,7 @@ exports[`export multiple Markdown renderers > renders plain markdown as React 1`
 
 exports[`heading 1`] = `"<h2 class=\\"heading heading-2 header-scroll\\" align=\\"\\"><div class=\\"heading-anchor anchor waypoint\\" id=\\"example-header\\"></div><div class=\\"heading-text\\"><div id=\\"section-example-header\\" class=\\"heading-anchor_backwardsCompatibility\\"></div>Example Header</div><a aria-label=\\"Skip link to Example Header\\" class=\\"heading-anchor-icon fa fa-anchor\\" href=\\"#example-header\\"></a></h2>"`;
 
-exports[`image 1`] = `"<span aria-label="Image" class="img lightbox closed" role="button" tabindex="0"><span class="lightbox-inner"><img src="http://example.com/image.png" width="auto" height="auto" title="" class="img img-align-center" alt="Image" loading="lazy"></span></span>"`;
+exports[`image 1`] = `"<span aria-label="Image" class="img lightbox closed" role="button" tabindex="0"><span class="lightbox-inner"><img src="http://example.com/image.png" width="auto" height="auto" title="" class="img  " alt="Image" loading="lazy"></span></span>"`;
 
 exports[`list items 1`] = `
 "<ul>
diff --git a/__tests__/components/Image.test.tsx b/__tests__/components/Image.test.tsx
index 6e3f9f4a9..0bc47dc43 100644
--- a/__tests__/components/Image.test.tsx
+++ b/__tests__/components/Image.test.tsx
@@ -10,7 +10,7 @@ describe('Image', () => {
     expect(screen.getByRole('img')).toMatchInlineSnapshot(`
       <img
         alt=""
-        class="img img-align-center"
+        class="img img-align-center "
         height="auto"
         loading="lazy"
         src="https://files.readme.io/b8674d6-pizzabro.jpg"
@@ -42,7 +42,7 @@ describe('Image', () => {
         >
           <img
             alt=""
-            class="img img-align-center"
+            class="img img-align-center "
             height="auto"
             loading="lazy"
             src="https://files.readme.io/b8674d6-pizzabro.jpg"
diff --git a/__tests__/components/__snapshots__/index.test.ts.snap b/__tests__/components/__snapshots__/index.test.ts.snap
index 110832099..ccc35352c 100644
--- a/__tests__/components/__snapshots__/index.test.ts.snap
+++ b/__tests__/components/__snapshots__/index.test.ts.snap
@@ -10,4 +10,4 @@ exports[`Components > Embed 3`] = `"<div class="embed embed_hasImg"><a class="em
 
 exports[`Components > Embed 4`] = `"<div class="embed "><a class="embed-link" href="https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html" rel="noopener noreferrer" target="_blank"><div class="embed-body"><small class="embed-provider">nytimes.com</small><div class="embed-title">rdmd</div></div></a></div>"`;
 
-exports[`Components > Image 1`] = `"<span aria-label="Bro eats pizza and makes an OK gesture." class="img lightbox closed" role="button" tabindex="0"><span class="lightbox-inner"><img src="https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg" width="auto" height="auto" title="Pizza Face" class="img img-align-center" alt="Bro eats pizza and makes an OK gesture." loading="lazy"></span></span>"`;
+exports[`Components > Image 1`] = `"<span aria-label="Bro eats pizza and makes an OK gesture." class="img lightbox closed" role="button" tabindex="0"><span class="lightbox-inner"><img src="https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg" width="auto" height="auto" title="Pizza Face" class="img  " alt="Bro eats pizza and makes an OK gesture." loading="lazy"></span></span>"`;
diff --git a/components/Image/index.tsx b/components/Image/index.tsx
index a4a983893..338b3cce3 100644
--- a/components/Image/index.tsx
+++ b/components/Image/index.tsx
@@ -16,7 +16,7 @@ interface ImageProps {
 
 const Image = (Props: ImageProps) => {
   const {
-    align = 'center',
+    align = '',
     alt = '',
     border = false,
     caption,
@@ -75,7 +75,7 @@ const Image = (Props: ImageProps) => {
               width={width}
               height={height}
               title={title}
-              className={`img img-align-center${border ? ' border' : ''}`}
+              className={`img img-align-center ${border ? 'border' : ''}`}
               alt={alt}
               loading={lazy ? 'lazy' : 'eager'}
             />
@@ -101,7 +101,7 @@ const Image = (Props: ImageProps) => {
           width={width}
           height={height}
           title={title}
-          className={`img img-align-${align}${border ? ' border' : ''}`}
+          className={`img ${align ? `img-align-${align}` : ''} ${border ? 'border' : ''}`}
           alt={alt}
           loading={lazy ? 'lazy' : 'eager'}
         />
diff --git a/components/Image/style.scss b/components/Image/style.scss
index 516a9810c..9573e4047 100644
--- a/components/Image/style.scss
+++ b/components/Image/style.scss
@@ -37,10 +37,8 @@
     &[alt~='align-left'] {
       @extend %img-align-left;
     }
-
-    &[width='80%'],
+    &[align='middle'], // hack to fix Firefox; see: https://stackoverflow.com/a/45901819/1341949
     &[align='center'],
-    &[align='middle'],
     &[alt~='align-center'] {
       @extend %img-align-center;
     }