Skip to content

Fix the text in buttons not being centered properly #4620

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
julienw merged 2 commits into from
May 16, 2023
+16 −2
Merged

Fix the text in buttons not being centered properly #4620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
574995d
Fix the text in buttons not being centered properly
julienw May 15, 2023
c66001c
Merge branch 'main' into fix-photon-buttons
julienw May 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions res/css/photon/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

@julienw julienw May 15, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

display: flex was wrong, as this moved it from a inline element to a block element.

box-sizing: border-box;

@julienw julienw May 15, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

buttons are border-box by default, while links are content-box. So this makes them even.

align-items: center;
justify-content: center;

@julienw julienw May 15, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button have text-align: center but that doesn't work anymore once we move it to flex. With justify-content: center this should do the same thing in a flex context.

padding: 0 8px;
border: none;
border-radius: 2px;
Expand Down
11 changes: 11 additions & 0 deletions res/photon/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,29 +16,35 @@ <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">
<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">
<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">
Expand All @@ -47,19 +53,23 @@ <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">
<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">
Expand All @@ -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>
Expand Down