` element.
+
+
+
+
+ Primary
+ Secondary
+ Tertiary
+
+
+
+ See code
+
+
+
+```html
+Primary
+Secondary
+Tertiary
+```
+
+
diff --git a/docs/api.md b/docs/api.md
index 037f65b3..f12496e5 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -2,23 +2,24 @@
## Properties
-| Property | Attribute | Type | Default | Description |
-|---------------|---------------|--------------------------------------------------|-----------|--------------------------------------------------|
-| `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. |
-| `loading` | `loading` | `boolean` | false | If set to true button text will be replaced with `auro-loader` and become disabled. |
-| `loadingText` | `loadingText` | `string` | | Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used. |
-| `onDark` | `ondark` | `boolean` | false | Indicates if the button is rendered in dark mode. |
-| `shape` | `shape` | `'default', 'rounded', 'pill', 'circle', 'square'` | "rounded" | Defines the shape of the button. |
-| `size` | `size` | `'xs', 'sm', 'md', 'lg', 'xl'` | "md" | Defines the size of the button. |
-| `static` | `static` | `boolean` | false | If true, the button will be static and not respond to user interactions. |
-| `tIndex` | `tIndex` | `string` | | Populates `tabindex` to define the focusable sequence in keyboard navigation. |
-| `tabindex` | `tabindex` | `string` | | Populates `tabindex` to define the focusable sequence in keyboard navigation.
Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
Example: ``. |
-| `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` | `'submit', 'reset', 'button'` | | The type of button. Matches HTML5 Button Spec. |
-| `value` | `value` | `string` | | Defines the value associated with the button which is submitted with the form data. |
-| `variant` | `variant` | `'primary', 'secondary', 'tertiary', 'ghost', 'flat'` | "primary" | Sets the button variant. |
+| Property | Attribute | Type | Default | Description |
+|---------------|---------------|--------------------------------------------------|-------------|--------------------------------------------------|
+| `appearance` | `appearance` | `'default', 'inverse'` | "'default'" | Defines whether the button will be on lighter or darker backgrounds. |
+| `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. |
+| `loading` | `loading` | `boolean` | false | If set to true button text will be replaced with `auro-loader` and become disabled. |
+| `loadingText` | `loadingText` | `string` | | Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used. |
+| `onDark` | `ondark` | `boolean` | "{false}" | DEPRECATED - use `appearance` property |
+| `shape` | `shape` | `'default', 'rounded', 'pill', 'circle', 'square'` | "rounded" | Defines the shape of the button. |
+| `size` | `size` | `'xs', 'sm', 'md', 'lg', 'xl'` | "md" | Defines the size of the button. |
+| `static` | `static` | `boolean` | false | If true, the button will be static and not respond to user interactions. |
+| `tIndex` | `tIndex` | `string` | | Populates `tabindex` to define the focusable sequence in keyboard navigation. |
+| `tabindex` | `tabindex` | `string` | | Populates `tabindex` to define the focusable sequence in keyboard navigation.
Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
Example: ``. |
+| `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` | `'submit', 'reset', 'button'` | | The type of button. Matches HTML5 Button Spec. |
+| `value` | `value` | `string` | | Defines the value associated with the button which is submitted with the form data. |
+| `variant` | `variant` | `'primary', 'secondary', 'tertiary', 'ghost', 'flat'` | "primary" | Sets the button variant. |
## Methods
diff --git a/docs/partials/api.md b/docs/partials/api.md
index 85851f91..3ae49bc2 100644
--- a/docs/partials/api.md
+++ b/docs/partials/api.md
@@ -19,14 +19,14 @@
-
+
See code
-
+
@@ -49,14 +49,14 @@ This example demonstrates `auro-button` in it's `disabled` state.
-
+
See code
-
+
@@ -79,14 +79,14 @@ The `static` attribute creates a button with no interactivity. When applied, the
-
+
See code
-
+
@@ -270,14 +270,14 @@ Use the `loading` attribute to alter the content to the shimmering dots to alert
-
+
See code
-
+
diff --git a/docs/partials/index.md b/docs/partials/index.md
index 231efc7f..f353b251 100644
--- a/docs/partials/index.md
+++ b/docs/partials/index.md
@@ -47,19 +47,19 @@ In cases were the action of the button would not fit the criteria above, it is m
-## On Dark
+## Visual state on Dark Backgrounds
-These examples illustrate the core button types and a `disabled` state on dark backgrounds using the `onDark` attribute.
+These examples illustrate the core button types on dark backgrounds using the `appearance="inverse"` attribute .
-
+
See code
-
+
@@ -82,14 +82,14 @@ This example demonstrates `auro-button` in it's `disabled` state.
-
+
See code
-
+
diff --git a/src/auro-button.js b/src/auro-button.js
index 1d72dcff..a27d6aa7 100644
--- a/src/auro-button.js
+++ b/src/auro-button.js
@@ -43,7 +43,8 @@ const ICON_ONLY_SHAPES = ["circle", "square"];
* @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
* @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
* @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
- * @property {boolean} onDark - Indicates if the button is rendered in dark mode.
+ * @property {boolean} onDark - DEPRECATED - use `appearance` property
+ * @property {'default', 'inverse'} appearance - Defines whether the button will be on lighter or darker backgrounds.
*/
export class AuroButton extends AuroElement {
/**
@@ -63,7 +64,6 @@ export class AuroButton extends AuroElement {
this.static = false;
this.size = "md";
this.shape = "rounded";
- this.onDark = false;
this.fluid = false;
this.loadingText = this.loadingText || "Loading...";
this.variant = "primary";
diff --git a/src/layoutElement/auroElement.js b/src/layoutElement/auroElement.js
index 6b183d72..0c3294c4 100644
--- a/src/layoutElement/auroElement.js
+++ b/src/layoutElement/auroElement.js
@@ -46,7 +46,17 @@ export class AuroElement extends LitElement {
},
/**
- * This Boolean attribute lets you specify that the element should be rendered in dark mode.
+ * Defines whether the button will be on lighter or darker backgrounds.
+ * @property {'default', 'inverse'}
+ * @default 'default'
+ */
+ appearance: {
+ type: String,
+ reflect: true
+ },
+
+ /**
+ * DEPRECATED - use `appearance` attribute.
* @default {false}
*/
onDark: {
@@ -69,6 +79,13 @@ export class AuroElement extends LitElement {
};
}
+ constructor() {
+ super();
+
+ this.onDark = false;
+ this.appearance = 'default';
+ }
+
resetShapeClasses() {
if (this.shape && this.size) {
if (this.wrapper) {
diff --git a/src/styles/color.scss b/src/styles/color.scss
index 7bc226fd..cdaa1581 100644
--- a/src/styles/color.scss
+++ b/src/styles/color.scss
@@ -162,7 +162,8 @@
// ONDARK DEFAULT / PRIMARY
-:host([onDark]) {
+:host([onDark]),
+:host([appearance="inverse"]) {
--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse, #{v.$ds-advanced-color-button-primary-border-inverse});
--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse, #{v.$ds-advanced-color-button-primary-background-inverse});
@@ -171,17 +172,20 @@
--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text-inverse, #{v.$ds-advanced-color-button-primary-text-inverse});
}
-:host([ondark]:not([disabled]):is([data-hover], [data-active])) {
+:host([ondark]:not([disabled]):is([data-hover], [data-active])),
+:host([appearance="inverse"]:not([disabled]):is([data-hover], [data-active])) {
--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-hover, #{v.$ds-advanced-color-button-primary-border-inverse-hover});
--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-hover, #{v.$ds-advanced-color-button-primary-background-inverse-hover});
--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-hover, #{v.$ds-advanced-color-button-primary-background-inverse-hover});
}
-:host([ondark]:focus-within) {
+:host([ondark]:focus-within),
+:host([appearance="inverse"]:focus-within) {
--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #{v.$ds-advanced-color-state-focused});
}
-:host([ondark][disabled]) {
+:host([ondark][disabled]),
+:host([appearance="inverse"][disabled]) {
--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, #{v.$ds-advanced-color-button-primary-border-inverse-disabled});
--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-disabled, #{v.$ds-advanced-color-button-primary-background-inverse-disabled});
--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-disabled, #{v.$ds-advanced-color-button-primary-background-inverse-disabled});
@@ -189,7 +193,8 @@
}
// ONDARK SECONDARY
-:host([ondark][variant='secondary']) {
+:host([ondark][variant='secondary']),
+:host([appearance="inverse"][variant='secondary']) {
--ds-auro-button-container-color: transparent;
--ds-auro-button-container-image: transparent;
--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse, #{v.$ds-advanced-color-button-secondary-border-inverse});
@@ -197,23 +202,27 @@
--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text-inverse, #{v.$ds-advanced-color-button-secondary-text-inverse});
}
-:host([ondark][variant='secondary']:not([disabled]):is([data-hover], [data-active])) {
+:host([ondark][variant='secondary']:not([disabled]):is([data-hover], [data-active])),
+:host([appearance="inverse"][variant='secondary']:not([disabled]):is([data-hover], [data-active])) {
--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #{v.$ds-advanced-color-button-secondary-text-inverse});
--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-inverse-hover, #{v.$ds-advanced-color-button-secondary-background-inverse-hover});
--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-inverse-hover, #{v.$ds-advanced-color-button-secondary-background-inverse-hover});
}
-:host([ondark][variant='secondary']:focus-within) {
+:host([ondark][variant='secondary']:focus-within),
+:host([appearance="inverse"][variant='secondary']:focus-within) {
--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
}
-:host([ondark][variant='secondary'][disabled]) {
+:host([ondark][variant='secondary'][disabled]),
+:host([appearance="inverse"][variant='secondary'][disabled]) {
--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #{v.$ds-basic-color-texticon-inverse-disabled});
--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse-disabled, #{v.$ds-advanced-color-button-secondary-border-inverse-disabled});
}
// ONDARK TERTIARY
-:host([ondark][variant='tertiary']) {
+:host([ondark][variant='tertiary']),
+:host([appearance="inverse"][variant='tertiary']) {
--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse, #{v.$ds-advanced-color-button-tertiary-background-inverse});
--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse, #{v.$ds-advanced-color-button-tertiary-background-inverse});
--ds-auro-button-border-color: transparent;
@@ -221,22 +230,26 @@
--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text-inverse, #{v.$ds-advanced-color-button-tertiary-text-inverse});
}
-:host([ondark][variant='tertiary']:not([disabled]):is([data-hover], [data-active])) {
+:host([ondark][variant='tertiary']:not([disabled]):is([data-hover], [data-active])),
+:host([appearance="inverse"][variant='tertiary']:not([disabled]):is([data-hover], [data-active])) {
--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse-hover, #{v.$ds-advanced-color-button-tertiary-background-inverse-hover});
--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse-hover, #{v.$ds-advanced-color-button-tertiary-background-inverse-hover});
}
-:host([ondark][variant='tertiary']:focus-within) {
+:host([ondark][variant='tertiary']:focus-within),
+:host([appearance="inverse"][variant='tertiary']:focus-within) {
--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
}
-:host([ondark][variant='tertiary'][disabled]) {
+:host([ondark][variant='tertiary'][disabled]),
+:host([appearance="inverse"][variant='tertiary'][disabled]) {
--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #{v.$ds-basic-color-texticon-inverse-disabled});
}
// ONDARK GHOST
-:host([ondark][variant='ghost']) {
+:host([ondark][variant='ghost']),
+:host([appearance="inverse"][variant='ghost']) {
--ds-auro-button-container-color: transparent;
--ds-auro-button-container-image: transparent;
--ds-auro-button-border-color: transparent;
@@ -244,23 +257,27 @@
--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text-inverse, #{v.$ds-advanced-color-button-ghost-text-inverse});
}
-:host([ondark][variant='ghost']:not([disabled]):is([data-hover], [data-active])) {
+:host([ondark][variant='ghost']:not([disabled]):is([data-hover], [data-active])),
+:host([appearance="inverse"][variant='ghost']:not([disabled]):is([data-hover], [data-active])) {
--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-inverse-hover, #{v.$ds-advanced-color-button-ghost-background-inverse-hover});
--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-inverse-hover, #{v.$ds-advanced-color-button-ghost-background-inverse-hover});
--ds-auro-button-border-color: transparent;
}
-:host([ondark][variant='ghost']:focus-within) {
+:host([ondark][variant='ghost']:focus-within),
+:host([appearance="inverse"][variant='ghost']:focus-within) {
border-color: transparent;
--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
}
-:host([ondark][variant='ghost'][disabled]) {
+:host([ondark][variant='ghost'][disabled]),
+:host([appearance="inverse"][variant='ghost'][disabled]) {
--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #{v.$ds-basic-color-texticon-inverse-disabled});
}
// ONDARK FLAT
-:host([ondark][variant='flat']) {
+:host([ondark][variant='flat']),
+:host([appearance="inverse"][variant='flat']) {
.auro-button {
color: var(--ds-advanced-color-button-flat-text-inverse, #{v.$ds-advanced-color-button-flat-text-inverse});
background-color: transparent;
@@ -284,7 +301,8 @@
}
}
-:host([ondark][variant='flat']:focus-within) {
+:host([ondark][variant='flat']:focus-within),
+:host([appearance="inverse"][variant='flat']:focus-within) {
--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
}
diff --git a/test/auro-button.test.js b/test/auro-button.test.js
index 0ba11b78..c0490132 100644
--- a/test/auro-button.test.js
+++ b/test/auro-button.test.js
@@ -56,9 +56,9 @@ describe("auro-button", () => {
expect(button.getAttribute("disabled")).to.equal("");
});
- it("tests setting ondark", async () => {
+ it("tests setting inverse appearance", async () => {
const el = await fixture(html`
- Click Me!
+ Click Me!
`);
const root = el.shadowRoot;
@@ -66,7 +66,7 @@ describe("auro-button", () => {
const classList = button.getAttribute("class").split(" ");
expect(classList.includes("auro-button")).to.be.true;
- expect(el.hasAttribute("ondark")).to.be.true;
+ expect(el.getAttribute("appearance")).to.equal("inverse");
});
it("tests setting secondary", async () => {
@@ -82,9 +82,9 @@ describe("auro-button", () => {
expect(el.getAttribute("variant")).to.equal("secondary");
});
- it("tests setting secondary ondark", async () => {
+ it("tests setting secondary inverse appearance", async () => {
const el = await fixture(html`
- Click Me!
+ Click Me!
`);
const root = el.shadowRoot;
@@ -92,7 +92,7 @@ describe("auro-button", () => {
const classList = button.getAttribute("class").split(" ");
expect(classList.includes("auro-button")).to.be.true;
- expect(el.hasAttribute("ondark")).to.be.true;
+ expect(el.getAttribute("appearance")).to.equal("inverse");
expect(el.getAttribute("variant")).to.equal("secondary");
});
@@ -109,9 +109,9 @@ describe("auro-button", () => {
expect(el.getAttribute("variant")).to.equal("tertiary");
});
- it("tests setting tertiary ondark", async () => {
+ it("tests setting tertiary inverse appearance", async () => {
const el = await fixture(html`
- Click Me!
+ Click Me!
`);
const root = el.shadowRoot;
@@ -119,7 +119,7 @@ describe("auro-button", () => {
const classList = button.getAttribute("class").split(" ");
expect(classList.includes("auro-button")).to.be.true;
- expect(el.hasAttribute("ondark")).to.be.true;
+ expect(el.getAttribute("appearance")).to.equal("inverse");
expect(el.getAttribute("variant")).to.equal("tertiary");
});