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

AlaskaAirlines · Jun 20, 2023 · dcfad45 · dcfad45
1 parent 4ef2c16
commit dcfad45
Show file tree

Hide file tree

Showing 14 changed files with 89 additions and 61 deletions.
diff --git a/README.md b/README.md
@@ -108,7 +108,7 @@ We recommend you load these bundles using [differential serving](https://philipw
 <!-- **NOTE:** Be sure to replace `@latest` in the URL with the version of the asset you want. @latest is NOT aware of any MAJOR releases, use at your own risk. -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->

diff --git a/apiExamples/rounded.html b/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>
diff --git a/apiExamples/roundedRightAlign.html b/apiExamples/roundedRightAlign.html
@@ -0,0 +1,4 @@
+<auro-button aria-label="in-flight" rounded iconOnly id="rightAlignElem" style="float: right;">
+  Back to Top
+  <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+</auro-button>
diff --git a/apiExamples/roundedRightAlign.js b/apiExamples/roundedRightAlign.js
@@ -0,0 +1,11 @@
+export function roundedRightAlignExample() {
+  const rightAlignElem = document.querySelector('#rightAlignElem');
+
+  rightAlignElem.addEventListener('mouseover', () => {
+    rightAlignElem.iconOnly = false;
+  });
+
+  rightAlignElem.addEventListener('mouseout', () => {
+    rightAlignElem.iconOnly = true;
+  });
+}
diff --git a/apiExamples/roundedTextOnly.html b/apiExamples/roundedTextOnly.html
@@ -0,0 +1,3 @@
+<auro-button aria-label="arrow-up" rounded>
+  Primary
+</auro-button>
diff --git a/apiExamples/roundedTextWithIcon.html b/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>
diff --git a/apiExamples/toggledText.html b/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>
diff --git a/apiExamples/toggledText.js b/apiExamples/toggledText.js
@@ -0,0 +1,11 @@
+export function toggledTextExample() {
+  const toggledTextElem = document.querySelector('#toggledTextElem');
+
+  toggledTextElem.addEventListener('mouseover', () => {
+    toggledTextElem.iconOnly = false;
+  });
+
+  toggledTextElem.addEventListener('mouseout', () => {
+    toggledTextElem.iconOnly = true;
+  });
+}
diff --git a/demo/api.md b/demo/api.md
@@ -11,26 +11,25 @@
 
 ## Properties
 
-| Property         | Attribute        | Type      | Default     | Description                                      |
-|------------------|------------------|-----------|-------------|--------------------------------------------------|
-| [arialabel](#arialabel)      | `arialabel`      | `String`  |             | Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead. |
-| [arialabelledby](#arialabelledby) | `arialabelledby` | `String`  |             | Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion. |
-| [autofocus](#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)       | `disabled`       | `Boolean` | false       | If set to true button will become disabled and not allow for interactions |
-| [fluid](#fluid)          | `fluid`          | `Boolean` | false       | Alters the shape of the button to be full width of its parent container |
-| [iconOnly](#iconOnly)       | `iconOnly`       | `Boolean` | false       | If set to true, the button will contain an icon with no additional content |
-| [loading](#loading)        | `loading`        | `Boolean` | false       | If set to true button text will be replaced with `auro-loader` and become disabled |
-| [ondark](#ondark)         | `ondark`         | `Boolean` | false       | Set value for on-dark version of auro-button     |
-| [ready](#ready)          | `ready`          | `Boolean` | false       | When false the component API should not be called. |
-| [rounded](#rounded)        | `rounded`        | `Boolean` | false       | If set to true, the button will have a rounded shape |
-| [secondary](#secondary)      | `secondary`      | `Boolean` | false       | DEPRECATED                                       |
-| [slim](#slim)           | `slim`           | `Boolean` | false       | Set value for slim version of auro-button        |
-| [tertiary](#tertiary)       | `tertiary`       | `Boolean` | false       | DEPRECATED                                       |
-| [title](#title)          | `title`          | `String`  |             | Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element. |
-| [toggleText](#toggleText)     | `toggleText`     | `Boolean` | "undefined" | If set to true, a hover event will be added to hide/show button text |
-| [type](#type)           | `type`           | `String`  |             | The type of the button. Possible values are: `submit`, `reset`, `button` |
-| [value](#value)          | `value`          | `String`  |             | Defines the value associated with the button which is submitted with the form data. |
-| [variant](#variant)        | `variant`        | `String`  |             | Sets button variant option. Possible values are: `secondary`, `tertiary` |
+| Property         | Attribute        | Type      | Default | Description                                      |
+|------------------|------------------|-----------|---------|--------------------------------------------------|
+| [arialabel](#arialabel)      | `arialabel`      | `String`  |         | Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead. |
+| [arialabelledby](#arialabelledby) | `arialabelledby` | `String`  |         | Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion. |
+| [autofocus](#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)       | `disabled`       | `Boolean` | false   | If set to true button will become disabled and not allow for interactions |
+| [fluid](#fluid)          | `fluid`          | `Boolean` | false   | Alters the shape of the button to be full width of its parent container |
+| [iconOnly](#iconOnly)       | `iconOnly`       | `Boolean` | false   | If set to true, the button will contain an icon with no additional content |
+| [loading](#loading)        | `loading`        | `Boolean` | false   | If set to true button text will be replaced with `auro-loader` and become disabled |
+| [ondark](#ondark)         | `ondark`         | `Boolean` | false   | Set value for on-dark version of auro-button     |
+| [ready](#ready)          | `ready`          | `Boolean` | false   | When false the component API should not be called. |
+| [rounded](#rounded)        | `rounded`        | `Boolean` | false   | If set to true, the button will have a rounded shape |
+| [secondary](#secondary)      | `secondary`      | `Boolean` | false   | DEPRECATED                                       |
+| [slim](#slim)           | `slim`           | `Boolean` | false   | Set value for slim version of auro-button        |
+| [tertiary](#tertiary)       | `tertiary`       | `Boolean` | false   | DEPRECATED                                       |
+| [title](#title)          | `title`          | `String`  |         | Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element. |
+| [type](#type)           | `type`           | `String`  |         | The type of the button. Possible values are: `submit`, `reset`, `button` |
+| [value](#value)          | `value`          | `String`  |         | Defines the value associated with the button which is submitted with the form data. |
+| [variant](#variant)        | `variant`        | `String`  |         | Sets button variant option. Possible values are: `secondary`, `tertiary` |
 
 ## Events
 
@@ -349,12 +348,12 @@ A `rounded` `auro-button` with text only.
 
 #### Toggle Text
 
-The `toggleText` attribute enables a user the ability to hide/show text. 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.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/toggledText.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/toggledText.html -->
-  <auro-button aria-label="arrow-up" rounded iconOnly toggleText id="toggledTextElem">
+  <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>
@@ -366,7 +365,7 @@ The `toggleText` attribute enables a user the ability to hide/show text. In this
 <!-- The below code snippet is automatically added from ./../../apiExamples/toggledText.html -->
 
 ```html
-<auro-button aria-label="arrow-up" rounded iconOnly toggleText id="toggledTextElem">
+<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>
@@ -398,7 +397,7 @@ This example shows a `rounded` `auro-button` that is right-aligned, demonstratin
 <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 toggleText id="rightAlignElem" style="float: right;">
+  <auro-button aria-label="in-flight" rounded iconOnly id="rightAlignElem" style="float: right;">
     Back to Top
     <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
   </auro-button>
@@ -410,7 +409,7 @@ This example shows a `rounded` `auro-button` that is right-aligned, demonstratin
 <!-- The below code snippet is automatically added from ./../../apiExamples/roundedRightAlign.html -->
 
 ```html
-<auro-button aria-label="in-flight" rounded iconOnly toggleText id="rightAlignElem" style="float: right;">
+<auro-button aria-label="in-flight" rounded iconOnly id="rightAlignElem" style="float: right;">
   Back to Top
   <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
 </auro-button>

diff --git a/docs/api.md b/docs/api.md
@@ -8,26 +8,25 @@
 
 ## Properties
 
-| Property         | Attribute        | Type      | Default     | Description                                      |
-|------------------|------------------|-----------|-------------|--------------------------------------------------|
-| `arialabel`      | `arialabel`      | `String`  |             | Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead. |
-| `arialabelledby` | `arialabelledby` | `String`  |             | Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion. |
-| `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 |
-| `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                                       |
-| `title`          | `title`          | `String`  |             | Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element. |
-| `toggleText`     | `toggleText`     | `Boolean` | "undefined" | If set to true, a hover event will be added to hide/show button text |
-| `type`           | `type`           | `String`  |             | The type of the button. Possible values are: `submit`, `reset`, `button` |
-| `value`          | `value`          | `String`  |             | Defines the value associated with the button which is submitted with the form data. |
-| `variant`        | `variant`        | `String`  |             | Sets button variant option. Possible values are: `secondary`, `tertiary` |
+| Property         | Attribute        | Type      | Default | Description                                      |
+|------------------|------------------|-----------|---------|--------------------------------------------------|
+| `arialabel`      | `arialabel`      | `String`  |         | Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead. |
+| `arialabelledby` | `arialabelledby` | `String`  |         | Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion. |
+| `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 |
+| `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                                       |
+| `title`          | `title`          | `String`  |         | Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element. |
+| `type`           | `type`           | `String`  |         | The type of the button. Possible values are: `submit`, `reset`, `button` |
+| `value`          | `value`          | `String`  |         | Defines the value associated with the button which is submitted with the form data. |
+| `variant`        | `variant`        | `String`  |         | Sets button variant option. Possible values are: `secondary`, `tertiary` |
 
 ## Events
 

diff --git a/docs/partials/api.md b/docs/partials/api.md
@@ -182,7 +182,7 @@ A `rounded` `auro-button` with text only.
 
 #### Toggle Text
 
-The `toggleText` attribute enables a user the ability to hide/show text. 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.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/toggledText.html) -->

diff --git a/src/auro-button.js b/src/auro-button.js
@@ -20,7 +20,6 @@ import '@alaskaairux/auro-loader';
  * @attr {Boolean} rounded - If set to true, the button will have a rounded shape
  * @attr {Boolean} slim - Set value for slim version of auro-button
  * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container
- * @attr {Boolean} toggleText - If set to true, a hover event will be added to hide/show button text
  * @attr {String} arialabel - Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead.
  * @attr {String} arialabelledby - Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion.
  * @attr {String} id - Set the unique ID of an element.
@@ -51,7 +50,6 @@ export class AuroButton extends LitElement {
     this.rounded = false;
     this.slim = false;
     this.fluid = false;
-    this.toggleText = undefined;
   }
 
   static get styles() {
@@ -100,10 +98,6 @@ export class AuroButton extends LitElement {
         type: Boolean,
         reflect: true
       },
-      toggleText:       {
-        type: Boolean,
-        reflect: true
-      },
       arialabel:        {
         type: String,
         reflect: true

diff --git a/src/style.scss b/src/style.scss
@@ -421,6 +421,9 @@ slot {
     height: var(--auro-size-500);
     min-width: unset;
 
+    transition: all 300ms ease-out;
+    opacity: 1;
+
     ::slotted(auro-icon) {
       width: var(--auro-size-300);
       height: var(--auro-size-300);
@@ -441,13 +444,6 @@ slot {
   }
 }
 
-:host([rounded]) {
-  .auro-button {
-    transition: all 300ms ease-out;
-    opacity: 1;
-  }
-}
-
 auro-loader {
   position: absolute;
   top: 50%;