Skip to content
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

Jump to bottom

Fix icon rendering issue #246

Merged
merged 7 commits into from
Feb 14, 2024
Merged

Fix icon rendering issue #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
db0deba
perf(examples): update references to example files
jordanjones243 Feb 12, 2024
6aa8c92
perf(demo): update demofile name
jordanjones243 Feb 13, 2024
6ad671d
fix(slim): render icon in icononly slim example #245
jordanjones243 Feb 13, 2024
ffbfb61
docs(examples): update demo examples and documentation
jordanjones243 Feb 13, 2024
db0db81
perf(styles): update styles for icon only buttons
jordanjones243 Feb 13, 2024
53e8b5b
perf(jsdocs): update event jsdocs
jordanjones243 Feb 13, 2024
58c7ceb
perf: update dependencies
blackfalcon Feb 14, 2024
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
6 changes: 3 additions & 3 deletions apiExamples/iconOnly.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<auro-button aria-label="home-filled" iconOnly>
<auro-icon customColor customSize category="interface" name="home-filled" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="home-filled" slot="icon"></auro-icon>
</auro-button>
<auro-button aria-label="arrow-left" variant="secondary" iconOnly>
<auro-icon customColor customSize category="interface" name="arrow-left" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="arrow-left" slot="icon"></auro-icon>
</auro-button>
<auro-button aria-label="heart-filled" variant="tertiary" iconOnly>
<auro-icon customColor customSize category="interface" name="heart-filled" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="heart-filled" slot="icon"></auro-icon>
</auro-button>
2 changes: 1 addition & 1 deletion apiExamples/rounded.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<auro-button aria-label="arrow-up" rounded iconOnly>
<auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
</auro-button>
2 changes: 1 addition & 1 deletion apiExamples/roundedRightAlign.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<auro-button aria-label="in-flight" rounded iconOnly id="rightAlignElem" style="float: right;">
Text is now shown!
<auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
</auro-button>
2 changes: 1 addition & 1 deletion apiExamples/roundedTextWithIcon.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<auro-button aria-label="in-flight" rounded>
Back to Top
<auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
</auro-button>
2 changes: 1 addition & 1 deletion apiExamples/toggledText.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<auro-button aria-label="arrow-up" rounded iconOnly id="toggledTextElem">
Text is now shown!
<auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
</auro-button>
32 changes: 17 additions & 15 deletions demo/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,21 +200,21 @@ Be sure to use the customColor attribute on the `auro-icon` component to allow c

Use the `iconOnly` attribute with the `auro-button` element for a style specific to having only an `auro-icon` as the button's content.

Be sure to also use the `customColor` and `customSize` attributes on the `auro-icon` component to allow colors set in your parent element to pass through to the icon.
Be sure to use the `customColor` attribute on the `auro-icon` component to allow colors set in your parent element to pass through to the icon.

**Recommended**: We strongly encourage the users of the icon only `auro-button` to use the `aria-label` attribute. Without this attribute, the screenreaders will not properly describe the button content to it's users.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/iconOnly.html) -->
<!-- The below content is automatically added from ./../../apiExamples/iconOnly.html -->
<auro-button aria-label="home-filled" iconOnly>
<auro-icon customColor customSize category="interface" name="home-filled" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="home-filled" slot="icon"></auro-icon>
</auro-button>
<auro-button aria-label="arrow-left" variant="secondary" iconOnly>
<auro-icon customColor customSize category="interface" name="arrow-left" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="arrow-left" slot="icon"></auro-icon>
</auro-button>
<auro-button aria-label="heart-filled" variant="tertiary" iconOnly>
<auro-icon customColor customSize category="interface" name="heart-filled" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="heart-filled" slot="icon"></auro-icon>
</auro-button>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
Expand All @@ -225,13 +225,13 @@ Be sure to also use the `customColor` and `customSize` attributes on the `auro-i

```html
<auro-button aria-label="home-filled" iconOnly>
<auro-icon customColor customSize category="interface" name="home-filled" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="home-filled" slot="icon"></auro-icon>
</auro-button>
<auro-button aria-label="arrow-left" variant="secondary" iconOnly>
<auro-icon customColor customSize category="interface" name="arrow-left" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="arrow-left" slot="icon"></auro-icon>
</auro-button>
<auro-button aria-label="heart-filled" variant="tertiary" iconOnly>
<auro-icon customColor customSize category="interface" name="heart-filled" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="heart-filled" slot="icon"></auro-icon>
</auro-button>
```
<!-- AURO-GENERATED-CONTENT:END -->
Expand All @@ -241,6 +241,8 @@ Be sure to also use the `customColor` and `customSize` attributes on the `auro-i

Use the `slim` attribute along with `iconOnly` attribute on the `auro-button` element for a slimmer icon only button with less padding.

Be sure to use the `customColor` and `customSize` attributes on the `auro-icon` component, as well as add `height` and `width` styles to the `auro-icon` component to allow colors set in your parent element to pass through to the icon.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/iconOnlySlim.html) -->
<!-- The below content is automatically added from ./../../apiExamples/iconOnlySlim.html -->
Expand Down Expand Up @@ -286,7 +288,7 @@ Use the `rounded` attribute in conjunction with the `iconOnly` attribute for an
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/rounded.html) -->
<!-- The below content is automatically added from ./../../apiExamples/rounded.html -->
<auro-button aria-label="arrow-up" rounded iconOnly>
<auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
</auro-button>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
Expand All @@ -297,7 +299,7 @@ Use the `rounded` attribute in conjunction with the `iconOnly` attribute for an

```html
<auro-button aria-label="arrow-up" rounded iconOnly>
<auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
</auro-button>
```
<!-- AURO-GENERATED-CONTENT:END -->
Expand All @@ -312,7 +314,7 @@ This example demonstrates a `rounded` `auro-button` with text and an `auro-icon`
<!-- The below content is automatically added from ./../../apiExamples/roundedTextWithIcon.html -->
<auro-button aria-label="in-flight" rounded>
Back to Top
<auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
</auro-button>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
Expand All @@ -324,7 +326,7 @@ This example demonstrates a `rounded` `auro-button` with text and an `auro-icon`
```html
<auro-button aria-label="in-flight" rounded>
Back to Top
<auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
</auro-button>
```
<!-- AURO-GENERATED-CONTENT:END -->
Expand Down Expand Up @@ -364,7 +366,7 @@ The `rounded` attribute supports the ability to hide/show the text of the `auro-
<!-- The below content is automatically added from ./../../apiExamples/toggledText.html -->
<auro-button aria-label="arrow-up" rounded iconOnly id="toggledTextElem">
Text is now shown!
<auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
</auro-button>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
Expand All @@ -376,7 +378,7 @@ The `rounded` attribute supports the ability to hide/show the text of the `auro-
```html
<auro-button aria-label="arrow-up" rounded iconOnly id="toggledTextElem">
Text is now shown!
<auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
</auro-button>
```
<!-- AURO-GENERATED-CONTENT:END -->
Expand Down Expand Up @@ -418,7 +420,7 @@ This example shows a `rounded` `auro-button` that is right-aligned, demonstratin
<!-- The below content is automatically added from ./../../apiExamples/roundedRightAlign.html -->
<auro-button aria-label="in-flight" rounded iconOnly id="rightAlignElem" style="float: right;">
Text is now shown!
<auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
</auro-button>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
Expand All @@ -430,7 +432,7 @@ This example shows a `rounded` `auro-button` that is right-aligned, demonstratin
```html
<auro-button aria-label="in-flight" rounded iconOnly id="rightAlignElem" style="float: right;">
Text is now shown!
<auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
<auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
</auro-button>
```
<!-- AURO-GENERATED-CONTENT:END -->
Expand Down
2 changes: 1 addition & 1 deletion demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<main></main>

<script type="module">
fetch('/demo/demo.md')
fetch('/demo/index.md')
.then((response) => response.text())
.then((text) => {
const rawHtml = marked.parse(text);
Expand Down
4 changes: 2 additions & 2 deletions demo/demo.md → demo/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!--
The demo.md file is a compiled document. No edits should be made directly to this file.
The index.md file is a compiled document. No edits should be made directly to this file.
README.md is created by running `npm run build:docs`.
This file is generated based on a template fetched from `./docs/partials/demo.md`
This file is generated based on a template fetched from `./docs/partials/index.md`
-->

# Button
Expand Down
4 changes: 3 additions & 1 deletion docs/partials/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ Be sure to use the customColor attribute on the `auro-icon` component to allow c

Use the `iconOnly` attribute with the `auro-button` element for a style specific to having only an `auro-icon` as the button's content.

Be sure to also use the `customColor` and `customSize` attributes on the `auro-icon` component to allow colors set in your parent element to pass through to the icon.
Be sure to use the `customColor` attribute on the `auro-icon` component to allow colors set in your parent element to pass through to the icon.

**Recommended**: We strongly encourage the users of the icon only `auro-button` to use the `aria-label` attribute. Without this attribute, the screenreaders will not properly describe the button content to it's users.

Expand All @@ -112,6 +112,8 @@ Be sure to also use the `customColor` and `customSize` attributes on the `auro-i

Use the `slim` attribute along with `iconOnly` attribute on the `auro-button` element for a slimmer icon only button with less padding.

Be sure to use the `customColor` and `customSize` attributes on the `auro-icon` component, as well as add `height` and `width` styles to the `auro-icon` component to allow colors set in your parent element to pass through to the icon.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/iconOnlySlim.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
Expand Down
4 changes: 2 additions & 2 deletions docs/partials/demo.md → docs/partials/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!--
The demo.md file is a compiled document. No edits should be made directly to this file.
The index.md file is a compiled document. No edits should be made directly to this file.
README.md is created by running `npm run build:docs`.
This file is generated based on a template fetched from `./docs/partials/demo.md`
This file is generated based on a template fetched from `./docs/partials/index.md`
-->

# Button
Expand Down
Loading
Loading