feat(rounded): add new rounded button #212

AlaskaAirlines · Jun 6, 2023 · 42ccee6 · 42ccee6
1 parent 5b6b0f4
commit 42ccee6
Show file tree

Hide file tree

Showing 7 changed files with 4,036 additions and 14,611 deletions.
diff --git a/demo/demo.md b/demo/demo.md
@@ -381,6 +381,62 @@ Use the `slim` attribute along with `iconOnly` attribute on the `auro-button` el
 
 </auro-accordion>
 
+## Rounded
+
+<div class="exampleWrapper">
+  <auro-button aria-label="in-flight" rounded>
+    Activate WiFi
+    <auro-icon customSize customcolor category="in-flight" name="wifi" slot="icon"></auro-icon>
+  </auro-button>
+</div>
+
+<div class="exampleWrapper" style="padding-top: 8px">
+  <auro-button aria-label="in-flight" rounded hideText>
+    Activate WiFi
+    <auro-icon customSize customcolor category="in-flight" name="wifi" slot="icon"></auro-icon>
+  </auro-button>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <auro-button aria-label="in-flight" rounded>
+    Activate WiFi
+    <auro-icon customSize customcolor category="in-flight" name="wifi" slot="icon"></auro-icon>
+  </auro-button>
+
+  <auro-button aria-label="in-flight" rounded hideText>
+    Activate WiFi
+    <auro-icon customSize customcolor category="in-flight" name="wifi" slot="icon"></auro-icon>
+  </auro-button>
+  ```
+
+</auro-accordion>
+
+### Hide/Show Text Event
+
+A `rounded` button gives the user ability to hide and show the default slot content with an event called `auroButton-toggleText`. In this example, the event is used to hide/show the text by clicking on the `auro-button`. This event is intended to be used when `auro-button` has text in the default slot and an `auro-icon` in the icon slot. 
+
+<div class="exampleWrapper">
+  <auro-button aria-label="in-flight" id="targetButton" rounded>
+    Click me to hide/show text
+    <auro-icon customSize customcolor category="in-flight" name="wifi" slot="icon"></auro-icon>
+  </auro-button>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <auro-button aria-label="in-flight" id="targetButton" rounded>
+    Activate WiFi
+    <auro-icon customSize customcolor category="in-flight" name="wifi" slot="icon"></auro-icon>
+  </auro-button>
+  ```
+
+</auro-accordion>
+
 ## Fluid
 
 In the following example see how the `fluid` attributes alters the shape of the button to be full width of its parent container.

diff --git a/demo/index.html b/demo/index.html
@@ -25,6 +25,13 @@
           const rawHtml = marked.parse(text);
           document.querySelector('main').innerHTML = rawHtml;
           Prism.highlightAll();
+        })
+        .then(() => {
+          const targetButton = document.getElementById('targetButton');
+
+          targetButton.addEventListener('click', () => {
+            targetButton.dispatchEvent(new CustomEvent('auroButton-toggleText'));
+          });
         });
     </script>
     <script type="module" src="../src/auro-button.js"></script>

diff --git a/docs/api.md b/docs/api.md
@@ -15,10 +15,12 @@
 | `autofocus`      | `autofocus`      | `Boolean` | false   | This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user |
 | `disabled`       | `disabled`       | `Boolean` | false   | If set to true button will become disabled and not allow for interactions |
 | `fluid`          | `fluid`          | `Boolean` | false   | Alters the shape of the button to be full width of its parent container |
+| `hideText`       | `hideText`       | `Boolean` | false   | If set to true, hides default slot content       |
 | `iconOnly`       | `iconOnly`       | `Boolean` | false   | If set to true, the button will contain an icon with no additional content |
 | `loading`        | `loading`        | `Boolean` | false   | If set to true button text will be replaced with `auro-loader` and become disabled |
 | `ondark`         | `ondark`         | `Boolean` | false   | Set value for on-dark version of auro-button     |
 | `ready`          | `ready`          | `Boolean` | false   | When false the component API should not be called. |
+| `rounded`        | `rounded`        | `Boolean` | false   | If set to true, the button will have a rounded shape |
 | `secondary`      | `secondary`      | `Boolean` | false   | DEPRECATED                                       |
 | `slim`           | `slim`           | `Boolean` | false   | Set value for slim version of auro-button        |
 | `tertiary`       | `tertiary`       | `Boolean` | false   | DEPRECATED                                       |
@@ -29,9 +31,10 @@
 
 ## Events
 
-| Event              | Type               | Description                                      |
-|--------------------|--------------------|--------------------------------------------------|
-| `auroButton-ready` | `CustomEvent<any>` | Notifies that the component has finished initializing. |
+| Event                   | Type               | Description                                      |
+|-------------------------|--------------------|--------------------------------------------------|
+| `auroButton-ready`      | `CustomEvent<any>` | Notifies that the component has finished initializing. |
+| `auroButton-toggleText` |                    | Hides/shows default slot content.                |
 
 ## Slots