docs(rounded): add examples for rounded button #212

apiExamples/rounded.html

@@ -0,0 +1,3 @@
+<auro-button aria-label="arrow-up" rounded iconOnly>
+  <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+</auro-button>

apiExamples/roundedRightAlign.html

@@ -0,0 +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-button>

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;
+  });
+}

apiExamples/roundedTextOnly.html

@@ -0,0 +1,3 @@
+<auro-button aria-label="arrow-up" rounded>
+  Primary
+</auro-button>

apiExamples/roundedTextWithIcon.html

@@ -0,0 +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-button>

apiExamples/toggledText.html

@@ -0,0 +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-button>

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;
+  });
+}

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.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/toggledText.html) -->
@@ -378,27 +378,37 @@ 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;
   });
 
   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;
+  });
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 #### 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.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/roundedRightAlign.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/roundedRightAlign.html -->
   <auro-button aria-label="in-flight" rounded iconOnly id="rightAlignElem" style="float: right;">
-    Back to Top
+    Text is now shown!
     <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
   </auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -410,7 +420,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;">
-  Back to Top
+  Text is now shown!
   <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
 </auro-button>
 ```
@@ -422,13 +432,23 @@ 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;
   });
 
   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;
+  });
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

demo/api.min.js

@@ -1,25 +1,45 @@
 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;
+  });
 }
 
 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;
+  });
 }
 
 function initButtonApiExamples(initCount) {

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.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/toggledText.html) -->
@@ -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.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/roundedRightAlign.html) -->