Merge branch 'release/14.0.0' into fix/tab-overflow

* release/14.0.0: fix(chromatic): reintroduce build-storybook script (#656) Fix broken whitespace in Icon documentation (#616) chore(deps): bump msgpackr from 1.7.2 to 1.10.1 (#654) Loading Spinner, Sidenav, Docs: use is-on-background correctly (#657) a11y revamp: Pharos Buttons (#594) Sidenav: remove sidenav button (#478) Global: update onBackground to isOnBackground (#578) Remove `paint` value from contain properties (#614) Footer: Remove google translate (#586) fix: use public registry chore: update storybook deps fix: update incorrect imports Site: fix site build (#481) Toast: Update Toaster to use internally consistent scoping (#475) Tabs: move selected state management to pharos-tabs (#468) Infra: Bump TypeScript, add main exports (#472)
ithaka · Feb 21, 2024 · a0024e1 · a0024e1
2 parents 69b0d40 + 13460c1
commit a0024e1
Showing 100 changed files with 1,293 additions and 1,088 deletions.
diff --git a/.changeset/cold-jeans-fail.md b/.changeset/cold-jeans-fail.md
@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': major
+---
+
+Update Toaster to use internally consistent component scoping
diff --git a/.changeset/eight-dots-cry.md b/.changeset/eight-dots-cry.md
@@ -0,0 +1,6 @@
+---
+'@ithaka/pharos': major
+'@ithaka/pharos-site': major
+---
+
+Use is-on-background in place of on-background
diff --git a/.changeset/five-moles-add.md b/.changeset/five-moles-add.md
@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': major
+---
+
+Remove `paint` value of contain property globally
diff --git a/.changeset/gorgeous-months-vanish.md b/.changeset/gorgeous-months-vanish.md
@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': major
+---
+
+remove sidenav button, add consumer controls
diff --git a/.changeset/light-paws-listen.md b/.changeset/light-paws-listen.md
@@ -0,0 +1,7 @@
+---
+'@ithaka/pharos': patch
+'@ithaka/pharos-site': patch
+'@ithaka/pharos-cli': patch
+---
+
+Update onBackground prop to isOnBackground
diff --git a/.changeset/mighty-planes-poke.md b/.changeset/mighty-planes-poke.md
@@ -0,0 +1,7 @@
+---
+'@ithaka/pharos': major
+---
+
+Add additional ARIA attributes for Pharos button
+and use a new naming convention for these specific
+pharos attributes.
diff --git a/.changeset/perfect-cycles-drum.md b/.changeset/perfect-cycles-drum.md
@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': major
+---
+
+pharos-tab `selected` has been deprecated, see new property for pharos-tabs `selected-tab`
diff --git a/.changeset/sweet-singers-arrive.md b/.changeset/sweet-singers-arrive.md
@@ -0,0 +1,6 @@
+---
+'@ithaka/pharos': major
+'@ithaka/pharos-site': major
+---
+
+individual file exports are no longer supported, import files based on the exports defined in the package.json
diff --git a/.changeset/thick-planes-wink.md b/.changeset/thick-planes-wink.md
@@ -0,0 +1,6 @@
+---
+'@ithaka/pharos': major
+'@ithaka/pharos-site': major
+---
+
+Remove deprecated Google Translate widget
diff --git a/.storybook/initComponents.js b/.storybook/initComponents.js
@@ -30,7 +30,6 @@ import {
   PharosSelect,
   PharosSheet,
   PharosSidenav,
-  PharosSidenavButton,
   PharosSidenavLink,
   PharosSidenavMenu,
   PharosSidenavSection,
@@ -80,7 +79,6 @@ registerComponents('storybook', [
   PharosSelect,
   PharosSheet,
   PharosSidenav,
-  PharosSidenavButton,
   PharosSidenavLink,
   PharosSidenavMenu,
   PharosSidenavSection,

diff --git a/...create-explicit-minimally-exhaustive-accessibility-properties-for-components.md b/...create-explicit-minimally-exhaustive-accessibility-properties-for-components.md
@@ -21,21 +21,15 @@ Create an (enforced) convention of property names that, when supplied at the cus
 When a custom element has a a11y-\* attribute, that attribute gets passed down to the appropriate (as decided on a per-component basis) underlying native element.
 
 ```html
-<pharos-button a11y-aria-describedby="the-tooltip">
-    Click me
-</pharos-button>
+<pharos-button a11y-aria-describedby="the-tooltip"> Click me </pharos-button>
 
-<pharos-tooltip id="the-tooltip">
-    I am a tooltip
-</pharos-tooltip>
+<pharos-tooltip id="the-tooltip"> I am a tooltip </pharos-tooltip>
 ```
 
 The button’s shadow DOM would then look like:
 
 ```html
-<button aria-describedby="the-tooltip">
-    Click me
-</button>
+<button aria-describedby="the-tooltip">Click me</button>
 ```
 
 Shorter attribute names could have been used for brevity, but we should in general avoid possible conflicts with valid HTML5 attribute names.

diff --git a/package.json b/package.json
@@ -75,16 +75,16 @@
     "@commitlint/config-conventional": "^15.0.0",
     "@emotion/babel-plugin": "^11.9.2",
     "@size-limit/preset-small-lib": "^7.0.4",
-    "@storybook/addon-a11y": "^7.2.1",
-    "@storybook/addon-essentials": "^7.2.1",
-    "@storybook/addon-links": "^7.2.1",
+    "@storybook/addon-a11y": "^7.3.2",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
     "@storybook/addon-styling": "^1.3.5",
-    "@storybook/blocks": "^7.2.1",
-    "@storybook/manager-api": "^7.2.1",
-    "@storybook/react-vite": "^7.2.1",
-    "@storybook/theming": "^7.2.1",
-    "@storybook/web-components": "^7.2.1",
-    "@storybook/web-components-vite": "^7.2.1",
+    "@storybook/blocks": "^7.3.2",
+    "@storybook/manager-api": "^7.3.2",
+    "@storybook/react-vite": "^7.3.2",
+    "@storybook/theming": "^7.3.2",
+    "@storybook/web-components": "^7.3.2",
+    "@storybook/web-components-vite": "^7.3.2",
     "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
@@ -117,7 +117,7 @@
     "react-dom": "^17.0.0",
     "sass": "^1.63.6",
     "size-limit": "^7.0.4",
-    "storybook": "^7.2.1",
+    "storybook": "^7.3.2",
     "stylelint": "^15.10.1",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard-scss": "^10.0.0",

diff --git a/packages/pharos-site/initComponents.tsx b/packages/pharos-site/initComponents.tsx
@@ -33,7 +33,6 @@ if (typeof window !== `undefined`) {
     pharos.PharosRadioGroup,
     pharos.PharosSelect,
     pharos.PharosSidenav,
-    pharos.PharosSidenavButton,
     pharos.PharosSidenavLink,
     pharos.PharosSidenavMenu,
     pharos.PharosSidenavSection,

diff --git a/packages/pharos-site/package.json b/packages/pharos-site/package.json
@@ -54,4 +54,4 @@
     "url": "git+https://github.com/ithaka/pharos.git",
     "directory": "site"
   }
-}
+}
diff --git a/packages/pharos-site/src/components/layout.tsx b/packages/pharos-site/src/components/layout.tsx
@@ -37,12 +37,11 @@ const Layout: FC<LayoutProps> = ({ children, location, fill }) => {
   const [MainContent, setMainContent] = useState<ReactElement | null>(null);
 
   useEffect(() => {
-    const { PharosSidenavButton, PharosLink, PharosLayout } = Pharos;
+    const { PharosLink, PharosLayout } = Pharos;
 
     const body = (
       <main className={main}>
         <div className={topBar}>
-          <PharosSidenavButton onBackground />
           <PharosLink id="skip-link" skip href="#sidenav-skip-link" onBackground>
             Skip to main navigation
           </PharosLink>

diff --git a/packages/pharos-site/src/components/statics/color/ColorCombos.tsx b/packages/pharos-site/src/components/statics/color/ColorCombos.tsx
@@ -1,6 +1,6 @@
 import type { FC, CSSProperties } from 'react';
 import { colorBox } from './ColorCombos.module.css';
-import tokens from '@ithaka/pharos/lib/styles/tokens.js';
+import tokens from '@ithaka/pharos/lib/styles/tokens';
 import CrossOut from '../CrossOut';
 import { toTitleCase } from '../../../utils/textConvert';
 

diff --git a/packages/pharos-site/src/components/statics/color/ColorGradients.tsx b/packages/pharos-site/src/components/statics/color/ColorGradients.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import type { FC, ReactElement } from 'react';
-import tokens from '@ithaka/pharos/lib/styles/tokens.js';
+import tokens from '@ithaka/pharos/lib/styles/tokens';
 import { colorGradient, gradientLabel, gradientContainer } from './ColorGradients.module.css';
 
 interface Gradient {

diff --git a/packages/pharos-site/src/components/statics/color/ColorSwatches.tsx b/packages/pharos-site/src/components/statics/color/ColorSwatches.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import type { FC, ReactElement, CSSProperties } from 'react';
-import tokens from '@ithaka/pharos/lib/styles/tokens.js';
+import tokens from '@ithaka/pharos/lib/styles/tokens';
 import {
   figure,
   colorSwatch,

diff --git a/packages/pharos-site/src/components/statics/color/ColorTextSquares.tsx b/packages/pharos-site/src/components/statics/color/ColorTextSquares.tsx
@@ -1,6 +1,6 @@
 import type { FC, CSSProperties } from 'react';
 import { container, container_text } from './ColorTextSquares.module.css';
-import tokens from '@ithaka/pharos/lib/styles/tokens.js';
+import tokens from '@ithaka/pharos/lib/styles/tokens';
 import { toTitleCase } from '../../../utils/textConvert';
 
 interface ColorTextSquaresProps {

diff --git a/packages/pharos-site/static/guidelines/button.docs.mdx b/packages/pharos-site/static/guidelines/button.docs.mdx
@@ -314,8 +314,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-site/static/guidelines/footer.docs.mdx b/packages/pharos-site/static/guidelines/footer.docs.mdx
@@ -354,7 +354,6 @@ import BestPractices from '@components/statics/BestPractices.tsx';
       </PharosLink>
     </li>
   </ul>
-  <div slot="google-widget" id="google_translate_element" aria-hidden="true"></div>
 </PharosFooter>
 ```
 

diff --git a/packages/pharos/package.json b/packages/pharos/package.json
@@ -90,5 +90,20 @@
     "ts-lit-plugin": "^1.2.1",
     "typescript": "^5.2.2"
   },
-  "customElements": "custom-elements.json"
+  "customElements": "custom-elements.json",
+  "exports": {
+    ".": "./lib/index.js",
+    "./lib": "./lib/index.js",
+    "./lib/index": "./lib/index.js",
+    "./lib/react-components": "./lib/react-components/index.js",
+    "./lib/styles/*": "./lib/styles/*.js",
+    "./lib/styles/*.css": "./lib/styles/*.css",
+    "./lib/styles/*.scss": "./lib/styles/*.scss",
+    "./lib/styles/pharos": "./lib/styles/pharos.scss",
+    "./lib/utils/scss/mixins": "./lib/utils/scss/_mixins.scss",
+    "./lib/utils/registerComponents": "./lib/utils/registerComponents.js",
+    "./lib/utils/PharosContext": "./lib/utils/PharosContext.js",
+    "./package.json": "./package.json",
+    "./custom-elements.json": "./custom-elements.json"
+  }
 }
diff --git a/packages/pharos/src/components/base/form-element.scss b/packages/pharos/src/components/base/form-element.scss
@@ -51,7 +51,7 @@ $groupable-elements: radio-element checkbox-element;
     @include mixins.hidden;
   }
 
-  :host([on-background]) label[for='#{$element}'] {
+  :host([is-on-background]) label[for='#{$element}'] {
     color: var(--pharos-color-text-white);
   }
 

diff --git a/packages/pharos/src/components/button/PharosButton.react.stories.jsx b/packages/pharos/src/components/button/PharosButton.react.stories.jsx
@@ -45,9 +45,9 @@ export const Base = {
       fullWidth={args.fullWidth}
       href={args.href}
       hreflang={args.hreflang}
-      a11yLabel={args.label}
+      a11yLabel={args.a11yLabel}
       large={args.large}
-      onBackground={args.onBackground}
+      isOnBackground={args.isOnBackground}
       ping={args.ping}
       pressed={args.pressed}
       target={args.target}
@@ -104,16 +104,16 @@ export const Variants = {
           gridGap: '1.5rem',
         }}
       >
-        <PharosButton name="primary-on-background" onBackground>
+        <PharosButton name="primary-is-on-background" isOnBackground>
           Primary
         </PharosButton>
-        <PharosButton name="secondary-on-background" variant="secondary" onBackground>
+        <PharosButton name="secondary-is-on-background" variant="secondary" isOnBackground>
           Secondary
         </PharosButton>
-        <PharosButton name="subtle-on-background" variant="subtle" onBackground>
+        <PharosButton name="subtle-is-on-background" variant="subtle" isOnBackground>
           Subtle
         </PharosButton>
-        <PharosButton name="overlay-on-background" variant="overlay" onBackground>
+        <PharosButton name="overlay-is-on-background" variant="overlay" isOnBackground>
           Overlay
         </PharosButton>
       </div>
@@ -166,16 +166,21 @@ export const Large = {
           gridGap: '1.5rem',
         }}
       >
-        <PharosButton name="large-primary-on-background" large onBackground>
+        <PharosButton name="large-primary-is-on-background" large isOnBackground>
           Primary
         </PharosButton>
-        <PharosButton name="large-secondary-on-background" variant="secondary" large onBackground>
+        <PharosButton
+          name="large-secondary-is-on-background"
+          variant="secondary"
+          large
+          isOnBackground
+        >
           Secondary
         </PharosButton>
-        <PharosButton name="large-subtle-on-background" variant="subtle" large onBackground>
+        <PharosButton name="large-subtle-is-on-background" variant="subtle" large isOnBackground>
           Subtle
         </PharosButton>
-        <PharosButton name="large-overlay-on-background" variant="overlay" large onBackground>
+        <PharosButton name="large-overlay-is-on-background" variant="overlay" large isOnBackground>
           Overlay
         </PharosButton>
       </div>
@@ -227,17 +232,21 @@ export const WithIcons = {
           gridGap: '1.5rem',
         }}
       >
-        <PharosButton name="primary-icon-left-on-background" iconLeft="download" onBackground>
+        <PharosButton name="primary-icon-left-is-on-background" iconLeft="download" isOnBackground>
           Icon left
         </PharosButton>
-        <PharosButton name="primary-icon-right-on-background" iconRight="chevron-down" onBackground>
+        <PharosButton
+          name="primary-icon-right-is-on-background"
+          iconRight="chevron-down"
+          isOnBackground
+        >
           Icon right
         </PharosButton>
         <PharosButton
-          name="primary-icon-both-on-background"
+          name="primary-icon-both-is-on-background"
           iconRight="chevron-down"
           iconLeft="view-gallery"
-          onBackground
+          isOnBackground
         >
           Icon both
         </PharosButton>

diff --git a/packages/pharos/src/components/button/pharos-button.scss b/packages/pharos/src/components/button/pharos-button.scss
@@ -90,31 +90,31 @@
   );
 }
 
-:host([on-background][disabled]) #button-element {
+:host([is-on-background][disabled]) #button-element {
   @include mixins.button-color(
     $color: var(--pharos-button-color-on-background-primary-text-disabled),
     $background-color: var(--pharos-button-color-on-background-primary-background-disabled),
     $border-color: var(--pharos-button-color-on-background-primary-border-disabled)
   );
 }
 
-:host([on-background][variant='subtle'][disabled]) #button-element {
+:host([is-on-background][variant='subtle'][disabled]) #button-element {
   @include mixins.button-color(
     $color: var(--pharos-button-color-on-background-primary-text-disabled),
     $background-color: var(--pharos-button-color-base-subtle-background-disabled),
     $border-color: var(--pharos-button-color-base-subtle-border-base)
   );
 }
 
-:host([on-background][variant='secondary']:not([disabled])) #button-element {
+:host([is-on-background][variant='secondary']:not([disabled])) #button-element {
   @include mixins.button-color(
     $color: var(--pharos-button-color-on-background-secondary-text-base),
     $background-color: var(--pharos-button-color-on-background-secondary-background-base),
     $border-color: var(--pharos-button-color-on-background-secondary-border-base)
   );
 }
 
-:host([on-background][variant='subtle']:not([disabled])) #button-element {
+:host([is-on-background][variant='subtle']:not([disabled])) #button-element {
   @include mixins.button-color(
     $color: var(--pharos-button-color-on-background-subtle-text-base),
     $background-color: var(--pharos-button-color-on-background-subtle-background-base),
@@ -150,19 +150,19 @@
   padding: var(--pharos-button-padding-condensed);
 }
 
-:host([on-background][variant='primary']:not([disabled])) #button-element:hover,
-:host([on-background][variant='primary']:not([disabled])) #button-element:active,
-:host([on-background][variant='secondary']:not([disabled])) #button-element:hover,
-:host([on-background][variant='secondary']:not([disabled])) #button-element:active {
+:host([is-on-background][variant='primary']:not([disabled])) #button-element:hover,
+:host([is-on-background][variant='primary']:not([disabled])) #button-element:active,
+:host([is-on-background][variant='secondary']:not([disabled])) #button-element:hover,
+:host([is-on-background][variant='secondary']:not([disabled])) #button-element:active {
   @include mixins.button-color(
     $color: var(--pharos-button-color-on-background-primary-text-hover),
     $background-color: var(--pharos-button-color-on-background-primary-background-hover),
     $border-color: var(--pharos-button-color-on-background-primary-border-hover)
   );
 }
 
-:host([on-background][variant='subtle']:not([disabled])) #button-element:hover,
-:host([on-background][variant='subtle']:not([disabled])) #button-element:active {
+:host([is-on-background][variant='subtle']:not([disabled])) #button-element:hover,
+:host([is-on-background][variant='subtle']:not([disabled])) #button-element:active {
   @include mixins.button-color(
     $color: var(--pharos-button-color-on-background-subtle-text-hover),
     $background-color: var(--pharos-button-color-on-background-subtle-background-hover),
-Original file line number
+Diff line change
@@ @@ -54,4 +54,4 @@ @@
         "url": "git+https://github.com/ithaka/pharos.git",
         "directory": "site"
       }
-    }
+    }