fix(loading-spinner, sidenav, docs): use is-on-background correctly

ithaka · Jan 4, 2024 · 315bb4d · 315bb4d
1 parent f8342cc
commit 315bb4d
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 12 deletions.
diff --git a/packages/pharos-site/static/guidelines/button.docs.mdx b/packages/pharos-site/static/guidelines/button.docs.mdx
@@ -306,8 +306,8 @@ import ellipsesExample from '@images/components/button/buttons_ellipses-example.
   <PageSection title="Buttons on dark background" subSectionLevel={1}>
     <p>
       When a button is used on a darker background (e.g., black or marble-gray-20), use the
-      on-background attribute. The four variants described above can all be used on dark backgrounds
-      and follow the same guidelines.
+      is-on-background attribute. The four variants described above can all be used on dark
+      backgrounds and follow the same guidelines.
     </p>
     <div
       style={{

diff --git a/packages/pharos/src/components/loading-spinner/pharos-loading-spinner.scss b/packages/pharos/src/components/loading-spinner/pharos-loading-spinner.scss
@@ -13,7 +13,7 @@
   align-items: center;
 }
 
-:host(:not([on-background])) .loading-spinner__wrapper {
+:host(:not([is-on-background])) .loading-spinner__wrapper {
   background-color: rgb(255 255 255 / 0.8);
 }
 

diff --git a/packages/pharos/src/components/loading-spinner/pharos-loading-spinner.ts b/packages/pharos/src/components/loading-spinner/pharos-loading-spinner.ts
@@ -57,10 +57,10 @@ focusable="false"
 export class PharosLoadingSpinner extends PharosElement {
   /**
    * Indicates if the spinner is on background
-   * @attr on-background
+   * @attr is-on-background
    */
-  @property({ type: Boolean, reflect: true, attribute: 'on-background' })
-  public onBackground = false;
+  @property({ type: Boolean, reflect: true, attribute: 'is-on-background' })
+  public isOnBackground = false;
 
   /**
    * Indicates if the spinner is small
@@ -111,7 +111,7 @@ export class PharosLoadingSpinner extends PharosElement {
       { stroke: PharosLoadingSpinnerColorStrokeOnBackground, offset: 0.9 },
       { stroke: PharosLoadingSpinnerColorStrokeOnBackground, offset: 1 },
     ];
-    const colorKeys = this.onBackground ? colorKeysOnBackground : colorKeysBase;
+    const colorKeys = this.isOnBackground ? colorKeysOnBackground : colorKeysBase;
     const colorTiming: KeyframeAnimationOptions = {
       easing: 'ease-in-out',
       duration: 6000,

diff --git a/packages/pharos/src/components/loading-spinner/pharos-loading-spinner.wc.stories.jsx b/packages/pharos/src/components/loading-spinner/pharos-loading-spinner.wc.stories.jsx
@@ -39,7 +39,7 @@ export const OnBackground = {
   render: () =>
     html`
       <div style="height: 5rem; width: 5rem; background: black; position: relative;">
-        <storybook-pharos-loading-spinner on-background></storybook-pharos-loading-spinner>
+        <storybook-pharos-loading-spinner is-on-background></storybook-pharos-loading-spinner>
       </div>
     `,
 };
@@ -57,7 +57,7 @@ export const SmallOnBackground = {
   render: () =>
     html`
       <div style="height: 5rem; width: 5rem; background: black; position: relative;">
-        <storybook-pharos-loading-spinner small on-background></storybook-pharos-loading-spinner>
+        <storybook-pharos-loading-spinner small is-on-background></storybook-pharos-loading-spinner>
       </div>
     `,
 };
diff --git a/packages/pharos/src/components/sidenav/pharos-sidenav.test.ts b/packages/pharos/src/components/sidenav/pharos-sidenav.test.ts
@@ -17,15 +17,15 @@ describe('pharos-sidenav', () => {
           name="my-input-group"
           placeholder="Search"
           hide-label
-          on-background
+          is-on-background
         >
           <span slot="label">Search</span>
           <test-pharos-button
             name="search-button"
             icon="search"
             variant="subtle"
             a11y-label="search"
-            on-background
+            is-on-background
           ></test-pharos-button>
         </test-pharos-input-group>
         <test-pharos-sidenav-section show-divider>

diff --git a/packages/pharos/src/components/sidenav/pharos-sidenav.wc.stories.jsx b/packages/pharos/src/components/sidenav/pharos-sidenav.wc.stories.jsx
@@ -46,7 +46,7 @@ export const Base = {
             icon="search"
             variant="subtle"
             a11y-label="search"
-            on-background
+            is-on-background
           ></storybook-pharos-button>
         </storybook-pharos-input-group>
         <storybook-pharos-sidenav-section show-divider>