diff --git a/apiExamples/rounded.html b/apiExamples/rounded.html new file mode 100644 index 0000000..38c6e25 --- /dev/null +++ b/apiExamples/rounded.html @@ -0,0 +1,3 @@ + + + diff --git a/apiExamples/roundedRightAlign.html b/apiExamples/roundedRightAlign.html new file mode 100644 index 0000000..a69404f --- /dev/null +++ b/apiExamples/roundedRightAlign.html @@ -0,0 +1,4 @@ + + Text is now shown! + + diff --git a/apiExamples/roundedRightAlign.js b/apiExamples/roundedRightAlign.js new file mode 100644 index 0000000..d26c1bb --- /dev/null +++ b/apiExamples/roundedRightAlign.js @@ -0,0 +1,21 @@ +export function roundedRightAlignExample() { + const rightAlignElem = document.querySelector('#rightAlignElem'); + + // The mouseover and mouseout events are to simulate toggling text for mouse users + rightAlignElem.addEventListener('mouseover', () => { + rightAlignElem.iconOnly = false; + }); + + rightAlignElem.addEventListener('mouseout', () => { + rightAlignElem.iconOnly = true; + }); + + // The focusin and focusout events are to simulate toggling text for keyboard users + rightAlignElem.addEventListener('focusin', () => { + rightAlignElem.iconOnly = false; + }); + + rightAlignElem.addEventListener('focusout', () => { + rightAlignElem.iconOnly = true; + }); +} diff --git a/apiExamples/roundedTextOnly.html b/apiExamples/roundedTextOnly.html new file mode 100644 index 0000000..6ca2136 --- /dev/null +++ b/apiExamples/roundedTextOnly.html @@ -0,0 +1,3 @@ + + Primary + diff --git a/apiExamples/roundedTextWithIcon.html b/apiExamples/roundedTextWithIcon.html new file mode 100644 index 0000000..c37bec1 --- /dev/null +++ b/apiExamples/roundedTextWithIcon.html @@ -0,0 +1,4 @@ + + Back to Top + + diff --git a/apiExamples/toggledText.html b/apiExamples/toggledText.html new file mode 100644 index 0000000..5169546 --- /dev/null +++ b/apiExamples/toggledText.html @@ -0,0 +1,4 @@ + + Text is now shown! + + diff --git a/apiExamples/toggledText.js b/apiExamples/toggledText.js new file mode 100644 index 0000000..dcdf857 --- /dev/null +++ b/apiExamples/toggledText.js @@ -0,0 +1,21 @@ +export function toggledTextExample() { + const toggledTextElem = document.querySelector('#toggledTextElem'); + + // The mouseover and mouseout events are to simulate toggling text for mouse users + toggledTextElem.addEventListener('mouseover', () => { + toggledTextElem.iconOnly = false; + }); + + toggledTextElem.addEventListener('mouseout', () => { + toggledTextElem.iconOnly = true; + }); + + // The focusin and focusout events are to simulate toggling text for keyboard users + toggledTextElem.addEventListener('focusin', () => { + toggledTextElem.iconOnly = false; + }); + + toggledTextElem.addEventListener('focusout', () => { + toggledTextElem.iconOnly = true; + }); +} diff --git a/demo/api.md b/demo/api.md index 34dc688..be5649b 100644 --- a/demo/api.md +++ b/demo/api.md @@ -348,7 +348,7 @@ A `rounded` `auro-button` with text only. #### Toggle Text -The `rounded` attribute supports the ability to hide/show the text of the `auro-button`. This can be done by changing the value of the `iconOnly` attribute. In this example, the text is toggled via `mouseover` and `mouseout` events. +The `rounded` attribute supports the ability to hide/show the text of the `auro-button`. This can be done by changing the value of the `iconOnly` attribute. In this example, the text is toggled via `mouseover` and `mouseout` events. The `focusin` and `focusout` events simulate toggling text for keyboard users.
@@ -378,6 +378,7 @@ The `rounded` attribute supports the ability to hide/show the text of the `auro- export function toggledTextExample() { const toggledTextElem = document.querySelector('#toggledTextElem'); + // The mouseover and mouseout events are to simulate toggling text for mouse users toggledTextElem.addEventListener('mouseover', () => { toggledTextElem.iconOnly = false; }); @@ -385,6 +386,15 @@ export function toggledTextExample() { toggledTextElem.addEventListener('mouseout', () => { toggledTextElem.iconOnly = true; }); + + // The focusin and focusout events are to simulate toggling text for keyboard users + toggledTextElem.addEventListener('focusin', () => { + toggledTextElem.iconOnly = false; + }); + + toggledTextElem.addEventListener('focusout', () => { + toggledTextElem.iconOnly = true; + }); } ``` @@ -392,13 +402,13 @@ export function toggledTextExample() { #### Right Aligned -This example shows a `rounded` `auro-button` that is right-aligned, demonstrating how the button starts from the right and grows/shrinks from right to left when using the `toggleText` attribute in conjuction with the `mouseover` and `mouseout` events. +This example shows a `rounded` `auro-button` that is right-aligned, demonstrating how the button starts from the right and grows/shrinks from right to left when using the `toggleText` attribute in conjuction with the `mouseover` and `mouseout` events. The `focusin` and `focusout` events simulate toggling text for keyboard users.
- Back to Top + Text is now shown! @@ -410,7 +420,7 @@ This example shows a `rounded` `auro-button` that is right-aligned, demonstratin ```html - Back to Top + Text is now shown! ``` @@ -422,6 +432,7 @@ This example shows a `rounded` `auro-button` that is right-aligned, demonstratin export function roundedRightAlignExample() { const rightAlignElem = document.querySelector('#rightAlignElem'); + // The mouseover and mouseout events are to simulate toggling text for mouse users rightAlignElem.addEventListener('mouseover', () => { rightAlignElem.iconOnly = false; }); @@ -429,6 +440,15 @@ export function roundedRightAlignExample() { rightAlignElem.addEventListener('mouseout', () => { rightAlignElem.iconOnly = true; }); + + // The focusin and focusout events are to simulate toggling text for keyboard users + rightAlignElem.addEventListener('focusin', () => { + rightAlignElem.iconOnly = false; + }); + + rightAlignElem.addEventListener('focusout', () => { + rightAlignElem.iconOnly = true; + }); } ``` diff --git a/demo/api.min.js b/demo/api.min.js index 7a55004..5162973 100644 --- a/demo/api.min.js +++ b/demo/api.min.js @@ -1,6 +1,7 @@ function toggledTextExample() { const toggledTextElem = document.querySelector('#toggledTextElem'); + // The mouseover and mouseout events are to simulate toggling text for mouse users toggledTextElem.addEventListener('mouseover', () => { toggledTextElem.iconOnly = false; }); @@ -8,11 +9,21 @@ function toggledTextExample() { toggledTextElem.addEventListener('mouseout', () => { toggledTextElem.iconOnly = true; }); + + // The focusin and focusout events are to simulate toggling text for keyboard users + toggledTextElem.addEventListener('focusin', () => { + toggledTextElem.iconOnly = false; + }); + + toggledTextElem.addEventListener('focusout', () => { + toggledTextElem.iconOnly = true; + }); } function roundedRightAlignExample() { const rightAlignElem = document.querySelector('#rightAlignElem'); + // The mouseover and mouseout events are to simulate toggling text for mouse users rightAlignElem.addEventListener('mouseover', () => { rightAlignElem.iconOnly = false; }); @@ -20,6 +31,15 @@ function roundedRightAlignExample() { rightAlignElem.addEventListener('mouseout', () => { rightAlignElem.iconOnly = true; }); + + // The focusin and focusout events are to simulate toggling text for keyboard users + rightAlignElem.addEventListener('focusin', () => { + rightAlignElem.iconOnly = false; + }); + + rightAlignElem.addEventListener('focusout', () => { + rightAlignElem.iconOnly = true; + }); } function initButtonApiExamples(initCount) { diff --git a/docs/partials/api.md b/docs/partials/api.md index 6895832..e827eef 100644 --- a/docs/partials/api.md +++ b/docs/partials/api.md @@ -182,7 +182,7 @@ A `rounded` `auro-button` with text only. #### Toggle Text -The `rounded` attribute supports the ability to hide/show the text of the `auro-button`. This can be done by changing the value of the `iconOnly` attribute. In this example, the text is toggled via `mouseover` and `mouseout` events. +The `rounded` attribute supports the ability to hide/show the text of the `auro-button`. This can be done by changing the value of the `iconOnly` attribute. In this example, the text is toggled via `mouseover` and `mouseout` events. The `focusin` and `focusout` events simulate toggling text for keyboard users.
@@ -202,7 +202,7 @@ The `rounded` attribute supports the ability to hide/show the text of the `auro- #### Right Aligned -This example shows a `rounded` `auro-button` that is right-aligned, demonstrating how the button starts from the right and grows/shrinks from right to left when using the `toggleText` attribute in conjuction with the `mouseover` and `mouseout` events. +This example shows a `rounded` `auro-button` that is right-aligned, demonstrating how the button starts from the right and grows/shrinks from right to left when using the `toggleText` attribute in conjuction with the `mouseover` and `mouseout` events. The `focusin` and `focusout` events simulate toggling text for keyboard users.