From 574995d0f1216c4e97ef364d739b1bde1052cd93 Mon Sep 17 00:00:00 2001
From: Julien Wajsberg <felash@gmail.com>
Date: Mon, 15 May 2023 15:48:29 -0400
Subject: [PATCH] Fix the text in buttons not being centered properly

---
 res/css/photon/button.css |  7 +++++--
 res/photon/index.html     | 11 +++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/res/css/photon/button.css b/res/css/photon/button.css
index e335b97b9b..aeff4be412 100644
--- a/res/css/photon/button.css
+++ b/res/css/photon/button.css
@@ -4,9 +4,12 @@
 
 /* See https://design.firefox.com/photon/components/buttons.html for the spec */
 .photon-button {
-  /* These two flex options aren't necessary when a real <button> is used, but they are when a <a> element is used as abutton */
-  display: flex;
+  /* These flex and sizing properties aren't necessary when a real <button> is used,
+   * but they are when a <a> element is used as a button. */
+  display: inline-flex;
+  box-sizing: border-box;
   align-items: center;
+  justify-content: center;
   padding: 0 8px;
   border: none;
   border-radius: 2px;
diff --git a/res/photon/index.html b/res/photon/index.html
index 51e7607c85..42a51daa9f 100644
--- a/res/photon/index.html
+++ b/res/photon/index.html
@@ -16,9 +16,11 @@ <h3 class='photon-title-20'>Photon Button</h3>
       <pre>
 &lt;button type="button" class="photon-button"&gt;Photon Button&lt;/button&gt;
 &lt;button type="button" class="photon-button" disabled title="This function is disabled because..."&gt;Disabled Photon Button&lt;/button&gt;
+&lt;a class="photon-button"&gt;Photon Button as a link&lt;/a&gt;
       </pre>
       <button type="button" class="photon-button">Photon Button</button>
       <button type="button" class="photon-button" disabled title="This function is disabled because...">Disabled Photon Button</button>
+      <a class="photon-button">Photon Button as a link</a>
     </div>
 
     <div class="row">
@@ -26,9 +28,11 @@ <h3 class='photon-title-20'>Photon Button Default</h3>
       <pre>
 &lt;button type="button" class="photon-button photon-button-default"&gt;Default&lt;/button&gt;
 &lt;button type="button" class="photon-button photon-button-default" disabled title="This function is disabled because..."&gt;Disabled Default&lt;/button&gt;
+&lt;a class="photon-button photon-button-default"&gt;Default&lt;/a&gt;
       </pre>
       <button type="button" class="photon-button photon-button-default">Default</button>
       <button type="button" class="photon-button photon-button-default" disabled title="This function is disabled because...">Disabled Default</button>
+      <a class="photon-button photon-button-default">Default</a>
     </div>
 
     <div class="row">
@@ -36,9 +40,11 @@ <h3 class='photon-title-20'>Photon Button Primary</h3>
       <pre>
 &lt;button type="button" class="photon-button photon-button-primary"&gt;Primary&lt;/button&gt;
 &lt;button type="button" class="photon-button photon-button-primary" disabled title="This function is disabled because..."&gt;Disabled Primary&lt;/button&gt;
+&lt;a class="photon-button photon-button-primary"&gt;Primary&lt;/a&gt;
       </pre>
       <button type="button" class="photon-button photon-button-primary">Primary</button>
       <button type="button" class="photon-button photon-button-primary" disabled title="This function is disabled because...">Disabled Primary</button>
+      <a class="photon-button photon-button-primary">Primary</a>
     </div>
 
     <div class="row">
@@ -47,9 +53,11 @@ <h3 class='photon-title-20'>Photon Button Destructive</h3>
       <pre>
 &lt;button type="button" class="photon-button photon-button-destructive"&gt;Delete&lt;/button&gt;
 &lt;button type="button" class="photon-button photon-button-destructive" disabled title="This function is disabled because..."&gt;Disabled Delete&lt;/button&gt;
+&lt;a class="photon-button photon-button-destructive"&gt;Delete&lt;/a&gt;
       </pre>
       <button type="button" class="photon-button photon-button-destructive">Delete</button>
       <button type="button" class="photon-button photon-button-destructive" disabled title="This function is disabled because...">Disabled Delete</button>
+      <a class="photon-button photon-button-destructive">Delete</a>
     </div>
 
     <div class="row">
@@ -57,9 +65,11 @@ <h3 class='photon-title-20'>Photon Button Micro</h3>
       <pre>
 &lt;button type="button" class="photon-button photon-button-micro"&gt;Photon Micro Button&lt;/button&gt;
 &lt;button type="button" class="photon-button photon-button-micro" disabled title="This function is disabled because..."&gt;Disabled Photon Micro Button&lt;/button&gt;
+&lt;a class="photon-button photon-button-micro"&gt;Micro button as a link&lt;/a&gt;
       </pre>
       <button type="button" class="photon-button photon-button-micro">Photon Micro Button</button>
       <button type="button" class="photon-button photon-button-micro" disabled title="This function is disabled because...">Disabled Photon Micro Button</button>
+      <a class="photon-button photon-button-micro">Micro button as a link</a>
     </div>
 
     <div class="row">
@@ -70,6 +80,7 @@ <h3 class='photon-title-20'>Photon Button Ghost</h3>
       </pre>
       <button type="button" class="photon-button photon-button-ghost photon-button-test-image"></button>
       <button type="button" class="photon-button photon-button-ghost photon-button-test-image" disabled title="This function is disabled because..."></button>
+      <a class="photon-button photon-button-ghost photon-button-test-image"></a>
     </div>
 
     <h2 class='photon-title-30'>Photon inputs</h2>