Skip to content

Commit 3f2dd84

Browse files
github-actions[bot]github-actions[bot]
authored
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)
1 parent 5248813 commit 3f2dd84

File tree

18 files changed

+430
-44
lines changed

18 files changed

+430
-44
lines changed

‎.github/workflows/chromatic.yml‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,16 @@ on:
1313
jobs:
1414
chromatic-deployment:
1515
runs-on: ubuntu-latest
16-
env:
17-
FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
1816
steps:
1917
- uses: actions/checkout@v2
2018
with:
2119
fetch-depth: 0 # 👈 Required to retrieve git history
2220
- uses: actions/setup-node@v3
2321
with:
2422
node-version-file: '.node-version'
25-
- run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ &&
26-
npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
23+
- run: |
24+
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
25+
npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
2726
- run: yarn
2827
- name: Publish to Chromatic
2928
uses: chromaui/action@v1

‎.github/workflows/create-new-release.yml‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,14 @@ jobs:
66
create-new-release:
77
name: Create new release
88
runs-on: ubuntu-latest
9-
env:
10-
FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
119
steps:
1210
- uses: actions/checkout@v2
1311
- uses: actions/setup-node@v3
1412
with:
1513
node-version-file: '.node-version'
16-
- run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ &&
17-
npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
14+
- run: |
15+
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
16+
npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
1817
- run: yarn install
1918

2019
- name: Initialize mandatory git config

‎.github/workflows/lint.yml‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,13 @@ on: push
55
jobs:
66
js-lint:
77
runs-on: ubuntu-latest
8-
env:
9-
FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
108
steps:
119
- uses: actions/checkout@v2
1210
- uses: actions/setup-node@v3
1311
with:
1412
node-version-file: '.node-version'
15-
- run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ &&
16-
npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
13+
- run: |
14+
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
15+
npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
1716
- run: yarn
1817
- run: yarn lint

‎.github/workflows/test.yml‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,13 @@ on: push
55
jobs:
66
js-test:
77
runs-on: ubuntu-latest
8-
env:
9-
FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
108
steps:
119
- uses: actions/checkout@v2
1210
- uses: actions/setup-node@v3
1311
with:
1412
node-version-file: '.node-version'
15-
- run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ &&
16-
npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
13+
- run: |
14+
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
15+
npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
1716
- run: yarn
1817
- run: yarn test

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@user-interviews/ui-design-system",
3-
"version": "2.5.2a",
3+
"version": "2.6.0",
44
"dependencies": {
55
"@tiptap/core": "^2.0.3",
66
"@tiptap/extension-bold": "^2.0.3",

‎spec/__snapshots__/Storyshots.test.js.snap‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3586,7 +3586,7 @@ Array [
35863586
]
35873587
`;
35883588

3589-
exports[`Storyshots Components/Button Danger 1`] = `
3589+
exports[`Storyshots Components/Button Danger DEPRECATED 1`] = `
35903590
Array [
35913591
<button
35923592
className="Button btn btn-danger btn-sm"
@@ -4772,7 +4772,7 @@ Array [
47724772
]
47734773
`;
47744774

4775-
exports[`Storyshots Components/Button Warning 1`] = `
4775+
exports[`Storyshots Components/Button Warning DEPRECATED 1`] = `
47764776
Array [
47774777
<button
47784778
className="Button btn btn-warning btn-sm"
@@ -9298,6 +9298,7 @@ Array [
92989298
exports[`Storyshots Components/IconButton Aria Label 1`] = `
92999299
Array [
93009300
<button
9301+
aria-disabled={false}
93019302
aria-label="Previous page"
93029303
className="Button IconButton btn btn-transparent btn-sm"
93039304
disabled={false}
@@ -9322,6 +9323,7 @@ Array [
93229323
</svg>
93239324
</button>,
93249325
<button
9326+
aria-disabled={false}
93259327
aria-label="Next page"
93269328
className="Button IconButton btn btn-transparent btn-sm"
93279329
disabled={false}
@@ -9346,6 +9348,7 @@ Array [
93469348
</svg>
93479349
</button>,
93489350
<button
9351+
aria-disabled={false}
93499352
aria-label="Delete participant"
93509353
className="Button IconButton btn btn-transparent btn-sm"
93519354
disabled={false}
@@ -9370,6 +9373,7 @@ Array [
93709373
</svg>
93719374
</button>,
93729375
<button
9376+
aria-disabled={false}
93739377
aria-label="Edit note"
93749378
className="Button IconButton btn btn-transparent btn-sm"
93759379
disabled={false}
@@ -9399,6 +9403,7 @@ Array [
93999403
exports[`Storyshots Components/IconButton Common Actions 1`] = `
94009404
Array [
94019405
<button
9406+
aria-disabled={false}
94029407
aria-label="Add"
94039408
className="Button IconButton btn btn-transparent btn-sm"
94049409
disabled={false}
@@ -9423,6 +9428,7 @@ Array [
94239428
</svg>
94249429
</button>,
94259430
<button
9431+
aria-disabled={false}
94269432
aria-label="Subtract"
94279433
className="Button IconButton btn btn-transparent btn-sm"
94289434
disabled={false}
@@ -9447,6 +9453,7 @@ Array [
94479453
</svg>
94489454
</button>,
94499455
<button
9456+
aria-disabled={false}
94509457
aria-label="Edit"
94519458
className="Button IconButton btn btn-transparent btn-sm"
94529459
disabled={false}
@@ -9471,6 +9478,7 @@ Array [
94719478
</svg>
94729479
</button>,
94739480
<button
9481+
aria-disabled={false}
94749482
aria-label="Delete"
94759483
className="Button IconButton btn btn-transparent btn-sm"
94769484
disabled={false}
@@ -9495,6 +9503,7 @@ Array [
94959503
</svg>
94969504
</button>,
94979505
<button
9506+
aria-disabled={false}
94989507
aria-label="Copy"
94999508
className="Button IconButton btn btn-transparent btn-sm"
95009509
disabled={false}
@@ -9519,6 +9528,7 @@ Array [
95199528
</svg>
95209529
</button>,
95219530
<button
9531+
aria-disabled={false}
95229532
aria-label="Previous"
95239533
className="Button IconButton btn btn-transparent btn-sm"
95249534
disabled={false}
@@ -9543,6 +9553,7 @@ Array [
95439553
</svg>
95449554
</button>,
95459555
<button
9556+
aria-disabled={false}
95469557
aria-label="Next"
95479558
className="Button IconButton btn btn-transparent btn-sm"
95489559
disabled={false}
@@ -9567,6 +9578,7 @@ Array [
95679578
</svg>
95689579
</button>,
95699580
<button
9581+
aria-disabled={false}
95709582
aria-label="Close"
95719583
className="Button IconButton btn btn-transparent btn-sm"
95729584
disabled={false}
@@ -9591,6 +9603,7 @@ Array [
95919603
</svg>
95929604
</button>,
95939605
<button
9606+
aria-disabled={false}
95949607
aria-label="Expand"
95959608
className="Button IconButton btn btn-transparent btn-sm"
95969609
disabled={false}
@@ -9617,9 +9630,38 @@ Array [
96179630
]
96189631
`;
96199632

9633+
exports[`Storyshots Components/IconButton Loading 1`] = `
9634+
<button
9635+
aria-disabled={true}
9636+
aria-label="Add"
9637+
className="Button IconButton btn btn-transparent btn-sm"
9638+
disabled={true}
9639+
type="button"
9640+
>
9641+
<svg
9642+
aria-hidden="true"
9643+
className="svg-inline--fa fa-spinner-third icon-left btn-loading-spin"
9644+
data-icon="spinner-third"
9645+
data-prefix="far"
9646+
focusable="false"
9647+
role="img"
9648+
style={Object {}}
9649+
viewBox="0 0 512 512"
9650+
xmlns="http://www.w3.org/2000/svg"
9651+
>
9652+
<path
9653+
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"
9654+
fill="currentColor"
9655+
style={Object {}}
9656+
/>
9657+
</svg>
9658+
</button>
9659+
`;
9660+
96209661
exports[`Storyshots Components/IconButton Sizes 1`] = `
96219662
Array [
96229663
<button
9664+
aria-disabled={false}
96239665
aria-label="Delete"
96249666
className="Button IconButton btn btn-transparent btn-sm"
96259667
disabled={false}
@@ -9644,6 +9686,7 @@ Array [
96449686
</svg>
96459687
</button>,
96469688
<button
9689+
aria-disabled={false}
96479690
aria-label="Delete"
96489691
className="Button IconButton btn btn-transparent btn-md"
96499692
disabled={false}
@@ -9668,6 +9711,7 @@ Array [
96689711
</svg>
96699712
</button>,
96709713
<button
9714+
aria-disabled={false}
96719715
aria-label="Delete"
96729716
className="Button IconButton btn btn-transparent btn-lg"
96739717
disabled={false}

‎src/Button/Button.mdx‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,10 @@ import * as ComponentStories from './Button.stories';
4444
- Space is limited (e.g. too small for text alone)
4545
- The icon is standardized or represents an object with a strong physical analog or visual attribute (e.g. floppy disk (Save), pencil (Edit))
4646

47+
### Deprecated variants
48+
49+
- The `danger` and `warning` variants are deprecated and will be removed in the next major version.
50+
4751
## Button vs. Link distinction
4852

4953
- 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';
6064

6165
<Canvas of={ComponentStories.Primary} />
6266

63-
### Danger
64-
65-
- Used to indicate destructive actions.
66-
67-
<Canvas of={ComponentStories.Danger} />
68-
69-
### Warning
70-
71-
- Currently only used for managing project drafts, but could potentially be used to indicate actions that need require special attention.
72-
73-
<Canvas of={ComponentStories.Warning} />
74-
7567
### Transparent
7668

7769
<Canvas of={ComponentStories.Transparent} />

‎src/Button/Button.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export const Primary = () => (
9797
</>
9898
);
9999

100-
export const Danger = () => (
100+
export const DangerDEPRECATED = () => (
101101
<>
102102
<Button
103103
leadingIcon={faFileAlt as IconDefinition}
@@ -173,7 +173,7 @@ export const Danger = () => (
173173
</>
174174
);
175175

176-
export const Warning = () => (
176+
export const WarningDEPRECATED = () => (
177177
<>
178178
<Button
179179
leadingIcon={faFileAlt as IconDefinition}

‎src/Card/Card.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ Card.propTypes = {
9191
noPadding: PropTypes.bool,
9292
size: PropTypes.string,
9393
subTitle: PropTypes.string,
94-
title: PropTypes.string,
94+
title: PropTypes.node,
9595
};
9696

9797
Card.defaultProps = {

‎src/Drawer/Drawer.jsx‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {
2-
createContext, useEffect, useState, useCallback,
2+
createContext, useEffect, useState, useCallback, useRef,
33
} from 'react';
44
import * as propTypes from 'prop-types';
55
import classNames from 'classnames';
@@ -33,6 +33,7 @@ const Drawer = ({
3333
size,
3434
onRequestClose,
3535
}) => {
36+
const isCurrentlyOpen = useRef(false);
3637
const [expanded, setExpanded] = useState(defaultExpanded);
3738

3839
const handleExpand = () => setExpanded(!expanded);
@@ -58,6 +59,28 @@ const Drawer = ({
5859
};
5960
}, [handleEscKeyPress, visible]);
6061

62+
useEffect(() => {
63+
// isCurrentlyOpen ref accounts for a case where you could have multiple drawers
64+
// on one page and you try to access one of them via their url. Without using ref, the
65+
// Drawer--open would be potentially removed via other
66+
// closed drawer because of a race condition
67+
function disableBackgroundScrolling() {
68+
if (visible && !isCurrentlyOpen.current) {
69+
document.body.classList.add('Drawer--open');
70+
isCurrentlyOpen.current = true;
71+
}
72+
73+
if (!visible && isCurrentlyOpen.current) {
74+
document.body.classList.remove('Drawer--open');
75+
isCurrentlyOpen.current = false;
76+
}
77+
}
78+
79+
if (hasBackgroundOverlay) {
80+
disableBackgroundScrolling();
81+
}
82+
}, [hasBackgroundOverlay, visible]);
83+
6184
return (
6285
<>
6386
{

0 commit comments

Comments
 (0)