Merge release/2.6.0 into main branch (#1161)

* Allow prop type node for Card title (#1150) * Fix DropdownToggle focus color (#1154) * IconButton: expose loading props (#1152) * Bump ip from 2.0.0 to 2.0.1 (#1155) * remove warning and danger Button variants from docs (#1158) * Disable drawer background scrolling if drawer has background overlay (#1156)
user-interviews · Feb 27, 2024 · 3f2dd84 · 3f2dd84
1 parent 5248813
commit 3f2dd84
Show file tree

Hide file tree

Showing 18 changed files with 430 additions and 44 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -13,17 +13,16 @@ on:
 jobs:
   chromatic-deployment:
     runs-on: ubuntu-latest
-    env:
-      FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
     steps:
       - uses: actions/checkout@v2
         with:
           fetch-depth: 0 # 👈 Required to retrieve git history
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.node-version'
-      - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ &&
-          npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
+      - run: |
+          npm config set "@fortawesome:registry" https://npm.fontawesome.com/
+          npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
       - run: yarn
       - name: Publish to Chromatic
         uses: chromaui/action@v1

diff --git a/.github/workflows/create-new-release.yml b/.github/workflows/create-new-release.yml
@@ -6,15 +6,14 @@ jobs:
   create-new-release:
     name: Create new release
     runs-on: ubuntu-latest
-    env:
-      FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.node-version'
-      - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ &&
-          npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
+      - run: |
+          npm config set "@fortawesome:registry" https://npm.fontawesome.com/
+          npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
       - run: yarn install
 
       - name: Initialize mandatory git config

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -5,14 +5,13 @@ on: push
 jobs:
   js-lint:
     runs-on: ubuntu-latest
-    env:
-      FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.node-version'
-      - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ &&
-          npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
+      - run: |
+          npm config set "@fortawesome:registry" https://npm.fontawesome.com/
+          npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
       - run: yarn
       - run: yarn lint
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -5,14 +5,13 @@ on: push
 jobs:
   js-test:
     runs-on: ubuntu-latest
-    env:
-      FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.node-version'
-      - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ &&
-            npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
+      - run: |
+          npm config set "@fortawesome:registry" https://npm.fontawesome.com/
+          npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
       - run: yarn
       - run: yarn test
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "2.5.2a",
+  "version": "2.6.0",
   "dependencies": {
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-bold": "^2.0.3",

diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap
@@ -3586,7 +3586,7 @@ Array [
 ]
 `;
 
-exports[`Storyshots Components/Button Danger 1`] = `
+exports[`Storyshots Components/Button Danger DEPRECATED 1`] = `
 Array [
   <button
     className="Button btn btn-danger btn-sm"
@@ -4772,7 +4772,7 @@ Array [
 ]
 `;
 
-exports[`Storyshots Components/Button Warning 1`] = `
+exports[`Storyshots Components/Button Warning DEPRECATED 1`] = `
 Array [
   <button
     className="Button btn btn-warning btn-sm"
@@ -9298,6 +9298,7 @@ Array [
 exports[`Storyshots Components/IconButton Aria Label 1`] = `
 Array [
   <button
+    aria-disabled={false}
     aria-label="Previous page"
     className="Button IconButton btn btn-transparent btn-sm"
     disabled={false}
@@ -9322,6 +9323,7 @@ Array [
     </svg>
   </button>,
   <button
+    aria-disabled={false}
     aria-label="Next page"
     className="Button IconButton btn btn-transparent btn-sm"
     disabled={false}
@@ -9346,6 +9348,7 @@ Array [
     </svg>
   </button>,
   <button
+    aria-disabled={false}
     aria-label="Delete participant"
     className="Button IconButton btn btn-transparent btn-sm"
     disabled={false}
@@ -9370,6 +9373,7 @@ Array [
     </svg>
   </button>,
   <button
+    aria-disabled={false}
     aria-label="Edit note"
     className="Button IconButton btn btn-transparent btn-sm"
     disabled={false}
@@ -9399,6 +9403,7 @@ Array [
 exports[`Storyshots Components/IconButton Common Actions 1`] = `
 Array [
   <button
+    aria-disabled={false}
     aria-label="Add"
     className="Button IconButton btn btn-transparent btn-sm"
     disabled={false}
@@ -9423,6 +9428,7 @@ Array [
     </svg>
   </button>,
   <button
+    aria-disabled={false}
     aria-label="Subtract"
     className="Button IconButton btn btn-transparent btn-sm"
     disabled={false}
@@ -9447,6 +9453,7 @@ Array [
     </svg>
   </button>,
   <button
+    aria-disabled={false}
     aria-label="Edit"
     className="Button IconButton btn btn-transparent btn-sm"
     disabled={false}
@@ -9471,6 +9478,7 @@ Array [
     </svg>
   </button>,
   <button
+    aria-disabled={false}
     aria-label="Delete"
     className="Button IconButton btn btn-transparent btn-sm"
     disabled={false}
@@ -9495,6 +9503,7 @@ Array [
     </svg>
   </button>,
   <button
+    aria-disabled={false}
     aria-label="Copy"
     className="Button IconButton btn btn-transparent btn-sm"
     disabled={false}
@@ -9519,6 +9528,7 @@ Array [
     </svg>
   </button>,
   <button
+    aria-disabled={false}
     aria-label="Previous"
     className="Button IconButton btn btn-transparent btn-sm"
     disabled={false}
@@ -9543,6 +9553,7 @@ Array [
     </svg>
   </button>,
   <button
+    aria-disabled={false}
     aria-label="Next"
     className="Button IconButton btn btn-transparent btn-sm"
     disabled={false}
@@ -9567,6 +9578,7 @@ Array [
     </svg>
   </button>,
   <button
+    aria-disabled={false}
     aria-label="Close"
     className="Button IconButton btn btn-transparent btn-sm"
     disabled={false}
@@ -9591,6 +9603,7 @@ Array [
     </svg>
   </button>,
   <button
+    aria-disabled={false}
     aria-label="Expand"
     className="Button IconButton btn btn-transparent btn-sm"
     disabled={false}
@@ -9617,9 +9630,38 @@ Array [
 ]
 `;
 
+exports[`Storyshots Components/IconButton Loading 1`] = `
+<button
+  aria-disabled={true}
+  aria-label="Add"
+  className="Button IconButton btn btn-transparent btn-sm"
+  disabled={true}
+  type="button"
+>
+  <svg
+    aria-hidden="true"
+    className="svg-inline--fa fa-spinner-third icon-left btn-loading-spin"
+    data-icon="spinner-third"
+    data-prefix="far"
+    focusable="false"
+    role="img"
+    style={Object {}}
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M457 372c11.5 6.6 26.3 2.7 31.8-9.3C503.7 330.2 512 294.1 512 256C512 122.7 410.1 13.2 280 1.1C266.8-.1 256 10.7 256 24v0c0 13.3 10.8 23.9 24 25.4C383.5 61.2 464 149.2 464 256c0 29.3-6.1 57.3-17 82.6c-5.3 12.2-1.5 26.8 10 33.5v0z"
+      fill="currentColor"
+      style={Object {}}
+    />
+  </svg>
+</button>
+`;
+
 exports[`Storyshots Components/IconButton Sizes 1`] = `
 Array [
   <button
+    aria-disabled={false}
     aria-label="Delete"
     className="Button IconButton btn btn-transparent btn-sm"
     disabled={false}
@@ -9644,6 +9686,7 @@ Array [
     </svg>
   </button>,
   <button
+    aria-disabled={false}
     aria-label="Delete"
     className="Button IconButton btn btn-transparent btn-md"
     disabled={false}
@@ -9668,6 +9711,7 @@ Array [
     </svg>
   </button>,
   <button
+    aria-disabled={false}
     aria-label="Delete"
     className="Button IconButton btn btn-transparent btn-lg"
     disabled={false}

diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx
@@ -44,6 +44,10 @@ import * as ComponentStories from './Button.stories';
 	- Space is limited (e.g. too small for text alone)
 	- The icon is standardized or represents an object with a strong physical analog or visual attribute (e.g. floppy disk (Save), pencil (Edit))
 
+### Deprecated variants
+
+- The `danger` and `warning` variants are deprecated and will be removed in the next major version.
+
 ## Button vs. Link distinction
 
 - Buttons are used for actions that affect the application. Clicking them causes changes on the frontend or backend.
@@ -60,18 +64,6 @@ import * as ComponentStories from './Button.stories';
 
 <Canvas of={ComponentStories.Primary} />
 
-### Danger
-
-- Used to indicate destructive actions.
-
-<Canvas of={ComponentStories.Danger} />
-
-### Warning
-
-- Currently only used for managing project drafts, but could potentially be used to indicate actions that need require special attention.
-
-<Canvas of={ComponentStories.Warning} />
-
 ### Transparent
 
 <Canvas of={ComponentStories.Transparent} />

diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
@@ -97,7 +97,7 @@ export const Primary = () => (
   </>
 );
 
-export const Danger = () => (
+export const DangerDEPRECATED = () => (
   <>
     <Button
       leadingIcon={faFileAlt as IconDefinition}
@@ -173,7 +173,7 @@ export const Danger = () => (
   </>
 );
 
-export const Warning = () => (
+export const WarningDEPRECATED = () => (
   <>
     <Button
       leadingIcon={faFileAlt as IconDefinition}

diff --git a/src/Card/Card.jsx b/src/Card/Card.jsx
@@ -91,7 +91,7 @@ Card.propTypes = {
   noPadding: PropTypes.bool,
   size: PropTypes.string,
   subTitle: PropTypes.string,
-  title: PropTypes.string,
+  title: PropTypes.node,
 };
 
 Card.defaultProps = {

diff --git a/src/Drawer/Drawer.jsx b/src/Drawer/Drawer.jsx
@@ -1,5 +1,5 @@
 import React, {
-  createContext, useEffect, useState, useCallback,
+  createContext, useEffect, useState, useCallback, useRef,
 } from 'react';
 import * as propTypes from 'prop-types';
 import classNames from 'classnames';
@@ -33,6 +33,7 @@ const Drawer = ({
   size,
   onRequestClose,
 }) => {
+  const isCurrentlyOpen = useRef(false);
   const [expanded, setExpanded] = useState(defaultExpanded);
 
   const handleExpand = () => setExpanded(!expanded);
@@ -58,6 +59,28 @@ const Drawer = ({
     };
   }, [handleEscKeyPress, visible]);
 
+  useEffect(() => {
+    // isCurrentlyOpen ref accounts for a case where you could have multiple drawers
+    // on one page and you try to access one of them via their url. Without using ref, the
+    // Drawer--open would be potentially removed via other
+    // closed drawer because of a race condition
+    function disableBackgroundScrolling() {
+      if (visible && !isCurrentlyOpen.current) {
+        document.body.classList.add('Drawer--open');
+        isCurrentlyOpen.current = true;
+      }
+
+      if (!visible && isCurrentlyOpen.current) {
+        document.body.classList.remove('Drawer--open');
+        isCurrentlyOpen.current = false;
+      }
+    }
+
+    if (hasBackgroundOverlay) {
+      disableBackgroundScrolling();
+    }
+  }, [hasBackgroundOverlay, visible]);
+
   return (
     <>
       {

diff --git a/src/Drawer/Drawer.scss b/src/Drawer/Drawer.scss
@@ -50,6 +50,10 @@
   display: flex;
   flex-direction: column;
 
+  &--open {
+    overflow: hidden;
+  }
+
   &--behind-nav {
     padding-top: 48px;
   }