@purpurds/drawer 6.12.5 → 7.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/LICENSE.txt +4 -4
- package/dist/drawer-content.d.ts +1 -1
- package/dist/drawer-content.d.ts.map +1 -1
- package/dist/drawer-frame.d.ts +2 -2
- package/dist/drawer-frame.d.ts.map +1 -1
- package/dist/drawer-header.d.ts +2 -2
- package/dist/drawer-header.d.ts.map +1 -1
- package/dist/drawer.cjs.js +9 -9
- package/dist/drawer.cjs.js.map +1 -1
- package/dist/drawer.es.js +221 -222
- package/dist/drawer.es.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +7 -7
- package/src/drawer-content.module.scss +14 -5
- package/src/drawer-content.test.tsx +5 -5
- package/src/drawer-content.tsx +3 -3
- package/src/drawer-frame.test.tsx +6 -6
- package/src/drawer-frame.tsx +3 -3
- package/src/drawer-header.test.tsx +8 -8
- package/src/drawer-header.tsx +3 -3
- package/src/drawer.stories.tsx +4 -4
- package/src/drawer.test.tsx +5 -5
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-drawer-
|
|
1
|
+
._purpur-drawer-content_5mlbf_1{bottom:0;height:90vh;height:90dvh;max-width:100%;position:absolute;right:0;width:100%}@media (prefers-reduced-motion: no-preference){._purpur-drawer-content_5mlbf_1{animation:_drawerSmallScreenAnimation_5mlbf_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-drawer-content--fit-to-content_5mlbf_16{display:flex;flex-direction:column;height:auto;max-height:90vh;max-height:90dvh}@media screen and (min-width: 600px){._purpur-drawer-content_5mlbf_1{height:100vh;height:100dvh;max-width:calc(30rem * var(--purpur-rescale));top:0}._purpur-drawer-content--fit-to-content_5mlbf_16{max-height:100vh;max-height:100dvh}}@media screen and (min-width: 600px) and (prefers-reduced-motion: no-preference){._purpur-drawer-content_5mlbf_1{animation:_drawerLargeScreenAnimation_5mlbf_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-drawer-content_5mlbf_1:focus{outline:none}._purpur-drawer-content__content-container_5mlbf_43{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-content__drawer-frame_5mlbf_48[data-swipe=cancel]{transform:translateY(0);transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content__drawer-frame_5mlbf_48[data-swipe=move]{transform:translateY(var(--purpur-drawer-swipe-move-y))}._purpur-drawer-content__drawer-frame_5mlbf_48[data-swipe=end]{animation:_slideDown_5mlbf_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-drawer-content__description_5mlbf_58{color:var(--purpur-color-text-default);display:block;font-family:var(--purpur-typography-family-default);font-size:var(--purpur-typography-scale-100);font-weight:var(--purpur-typography-weight-normal);-webkit-hyphens:none;hyphens:none;line-height:var(--purpur-typography-line-height-loose);margin:0}._purpur-drawer-overlay_5mlbf_69{background:var(--purpur-color-overlay-default);top:0;right:0;bottom:0;left:0;position:fixed}@media (prefers-reduced-motion: no-preference){._purpur-drawer-overlay_5mlbf_69{animation:_overlayAnimation_5mlbf_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);transition:opacity var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}@keyframes _slideDown_5mlbf_1{0%{transform:translateY(var(--purpur-drawer-swipe-end-y))}to{transform:translateY(100%)}}@keyframes _overlayAnimation_5mlbf_1{0%{opacity:0}to{opacity:1}}@keyframes _drawerLargeScreenAnimation_5mlbf_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _drawerSmallScreenAnimation_5mlbf_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._purpur-drawer-container--header_1u45h_1{padding:var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm) var(--purpur-spacing-150);border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}@media screen and (min-width: 600px){._purpur-drawer-container--header_1u45h_1{padding:var(--purpur-spacing-300) var(--purpur-spacing-300) var(--purpur-spacing-200)}}._purpur-drawer-container--body_1u45h_10{padding:var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm) 0}@media screen and (min-width: 600px){._purpur-drawer-container--body_1u45h_10{padding:var(--purpur-spacing-400) var(--purpur-spacing-300) 0}}._purpur-drawer-container--body_1u45h_10._purpur-drawer-container--sticky_1u45h_18{padding:var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm)}@media screen and (min-width: 600px){._purpur-drawer-container--body_1u45h_10._purpur-drawer-container--sticky_1u45h_18{padding:var(--purpur-spacing-400) var(--purpur-spacing-300)}}._purpur-drawer-container--footer_1u45h_26{padding:0 var(--purpur-spacing-page-padding-sm) var(--purpur-spacing-200)}@media screen and (min-width: 600px){._purpur-drawer-container--footer_1u45h_26{padding:0 var(--purpur-spacing-300) var(--purpur-spacing-200)}}._purpur-drawer-container--footer_1u45h_26._purpur-drawer-container--sticky_1u45h_18{border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);padding:var(--purpur-spacing-200) var(--purpur-spacing-page-padding-sm)}@media screen and (min-width: 600px){._purpur-drawer-container--footer_1u45h_26._purpur-drawer-container--sticky_1u45h_18{padding:var(--purpur-spacing-200) var(--purpur-spacing-300)}}._purpur-drawer-frame_1gdvv_1{background-color:var(--purpur-color-background-primary);border-top-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:var(--purpur-border-radius-lg);box-shadow:var(--purpur-shadow-lg);display:flex;flex-direction:column;height:100%;position:relative}@media screen and (min-width: 600px){._purpur-drawer-frame_1gdvv_1{border-bottom-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:0}}._purpur-drawer-frame--sticky-footer_1gdvv_17{gap:0}._purpur-drawer-frame__header_1gdvv_20{flex:0 0 auto}._purpur-drawer-frame__body_1gdvv_23{flex:1 1 auto;overflow:hidden}._purpur-drawer-frame--fit-to-content_1gdvv_27{flex:1 1 auto;height:auto;overflow:hidden}._purpur-drawer-frame--fit-to-content_1gdvv_27 ._purpur-drawer-frame__body_1gdvv_23{display:flex;flex-direction:column}._purpur-drawer-frame__footer_1gdvv_36{flex:0 0 auto}._purpur-drawer-frame__content-container_1gdvv_39{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-frame__content-container--no-footer_1gdvv_44{margin-bottom:var(--purpur-spacing-400)}._purpur-drawer-handle_3n0ew_1{align-items:center;display:flex;height:var(--purpur-spacing-250);justify-content:center;position:absolute;top:0;width:100%}@media screen and (min-width: 600px){._purpur-drawer-handle_3n0ew_1{display:none}}._purpur-drawer-handle_3n0ew_1:before{content:"";background:var(--purpur-color-border-weak);border-radius:var(--purpur-border-radius-full);height:var(--purpur-spacing-50);width:var(--purpur-spacing-600)}._purpur-drawer-header__row_1yg5w_1{display:flex;align-items:center;gap:var(--purpur-spacing-100)}._purpur-drawer-header__row--with-back-button_1yg5w_6{margin-bottom:var(--purpur-spacing-100)}._purpur-drawer-header__left_1yg5w_9{flex:1 1 auto}._purpur-drawer-header__right_1yg5w_12{flex:0 0 auto}._purpur-drawer-header__close-button_1yg5w_15{margin-right:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-header__back-button--only-icon_1yg5w_18{margin-left:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-scroll-area__root_1r0fa_1{height:100%}._purpur-drawer-scroll-area__root--fit-to-content_1r0fa_4{display:flex;flex-direction:column;height:auto;overflow:hidden}._purpur-drawer-scroll-area__viewport_1r0fa_10{height:100%}._purpur-drawer-scroll-area__scrollbar_1r0fa_13{display:flex;-webkit-user-select:none;user-select:none;touch-action:none;padding:var(--purpur-spacing-25);background:var(--purpur-color-functional-white);transition:background var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:var(--purpur-spacing-100)}._purpur-drawer-scroll-area__thumb_1r0fa_24{background:var(--purpur-color-gray-200);border-radius:var(--purpur-spacing-200);flex:1;position:relative}._purpur-drawer-scroll-area__thumb_1r0fa_24:before{content:"";height:100%;left:50%;min-height:var(--purpur-spacing-300);min-width:var(--purpur-spacing-300);position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/drawer",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "7.1.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/drawer.cjs.js",
|
|
6
6
|
"types": "./dist/drawer.d.ts",
|
|
@@ -18,12 +18,12 @@
|
|
|
18
18
|
"@radix-ui/react-dialog": "~1.1.6",
|
|
19
19
|
"@radix-ui/react-scroll-area": "~1.2.3",
|
|
20
20
|
"classnames": "~2.5.0",
|
|
21
|
-
"@purpurds/button": "
|
|
22
|
-
"@purpurds/heading": "
|
|
23
|
-
"@purpurds/paragraph": "
|
|
24
|
-
"@purpurds/icon": "
|
|
25
|
-
"@purpurds/tokens": "
|
|
26
|
-
"@purpurds/visually-hidden": "
|
|
21
|
+
"@purpurds/button": "7.1.0",
|
|
22
|
+
"@purpurds/heading": "7.1.0",
|
|
23
|
+
"@purpurds/paragraph": "7.1.0",
|
|
24
|
+
"@purpurds/icon": "7.1.0",
|
|
25
|
+
"@purpurds/tokens": "7.1.0",
|
|
26
|
+
"@purpurds/visually-hidden": "7.1.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"eslint": "9.24.0",
|
|
@@ -3,16 +3,19 @@
|
|
|
3
3
|
$animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);
|
|
4
4
|
|
|
5
5
|
.purpur-drawer-content {
|
|
6
|
-
animation: drawerSmallScreenAnimation $animation-settings;
|
|
7
6
|
bottom: 0;
|
|
8
7
|
height: 90vh; /* Fallback for older browsers */
|
|
9
8
|
height: 90dvh;
|
|
10
9
|
max-width: 100%;
|
|
11
10
|
position: absolute;
|
|
12
11
|
right: 0;
|
|
13
|
-
transition: transform $animation-settings;
|
|
14
12
|
width: 100%;
|
|
15
13
|
|
|
14
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
15
|
+
animation: drawerSmallScreenAnimation $animation-settings;
|
|
16
|
+
transition: transform $animation-settings;
|
|
17
|
+
}
|
|
18
|
+
|
|
16
19
|
&--fit-to-content {
|
|
17
20
|
display: flex;
|
|
18
21
|
flex-direction: column;
|
|
@@ -22,7 +25,6 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
|
|
|
22
25
|
}
|
|
23
26
|
|
|
24
27
|
@media screen and (min-width: $purpur-breakpoint-md) {
|
|
25
|
-
animation: drawerLargeScreenAnimation $animation-settings;
|
|
26
28
|
height: 100vh; /* Fallback for older browsers */
|
|
27
29
|
height: 100dvh;
|
|
28
30
|
max-width: calc(30rem * var(--purpur-rescale));
|
|
@@ -32,6 +34,10 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
|
|
|
32
34
|
max-height: 100vh; /* Fallback for older browsers */
|
|
33
35
|
max-height: 100dvh;
|
|
34
36
|
}
|
|
37
|
+
|
|
38
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
39
|
+
animation: drawerLargeScreenAnimation $animation-settings;
|
|
40
|
+
}
|
|
35
41
|
}
|
|
36
42
|
|
|
37
43
|
&:focus {
|
|
@@ -72,11 +78,14 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
|
|
|
72
78
|
}
|
|
73
79
|
|
|
74
80
|
.purpur-drawer-overlay {
|
|
75
|
-
animation: overlayAnimation $animation-settings;
|
|
76
81
|
background: var(--purpur-color-overlay-default);
|
|
77
82
|
inset: 0;
|
|
78
83
|
position: fixed;
|
|
79
|
-
|
|
84
|
+
|
|
85
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
86
|
+
animation: overlayAnimation $animation-settings;
|
|
87
|
+
transition: opacity $animation-settings;
|
|
88
|
+
}
|
|
80
89
|
}
|
|
81
90
|
|
|
82
91
|
@keyframes slideDown {
|
|
@@ -21,7 +21,7 @@ describe("DrawerContent", () => {
|
|
|
21
21
|
backButton
|
|
22
22
|
backButtonText="Back"
|
|
23
23
|
bodyText="This is the body text"
|
|
24
|
-
|
|
24
|
+
closeButtonAriaLabel="Close"
|
|
25
25
|
onBackButtonClick={() => {}}
|
|
26
26
|
stickyFooter
|
|
27
27
|
title="Title"
|
|
@@ -41,7 +41,7 @@ describe("DrawerContent", () => {
|
|
|
41
41
|
data-testid={Selectors.DRAWER_CONTENT}
|
|
42
42
|
backButton
|
|
43
43
|
backButtonText="Back"
|
|
44
|
-
|
|
44
|
+
closeButtonAriaLabel="Close"
|
|
45
45
|
onBackButtonClick={() => {}}
|
|
46
46
|
stickyFooter
|
|
47
47
|
title="Title"
|
|
@@ -61,7 +61,7 @@ describe("DrawerContent", () => {
|
|
|
61
61
|
backButton
|
|
62
62
|
backButtonText="Back"
|
|
63
63
|
bodyText={bodyText}
|
|
64
|
-
|
|
64
|
+
closeButtonAriaLabel="Close"
|
|
65
65
|
onBackButtonClick={() => {}}
|
|
66
66
|
stickyFooter
|
|
67
67
|
title="Title"
|
|
@@ -81,7 +81,7 @@ describe("DrawerContent", () => {
|
|
|
81
81
|
backButton
|
|
82
82
|
backButtonText="Back"
|
|
83
83
|
bodyText="bodyText"
|
|
84
|
-
|
|
84
|
+
closeButtonAriaLabel="Close"
|
|
85
85
|
onBackButtonClick={() => {}}
|
|
86
86
|
stickyFooter
|
|
87
87
|
title="Title"
|
|
@@ -102,7 +102,7 @@ describe("DrawerContent", () => {
|
|
|
102
102
|
<DrawerContent
|
|
103
103
|
data-testid={Selectors.DRAWER_CONTENT}
|
|
104
104
|
bodyText="bodyText"
|
|
105
|
-
|
|
105
|
+
closeButtonAriaLabel="Close"
|
|
106
106
|
stickyFooter
|
|
107
107
|
title="Title"
|
|
108
108
|
zIndex={200}
|
package/src/drawer-content.tsx
CHANGED
|
@@ -27,7 +27,7 @@ export type DrawerContentProps = React.HTMLAttributes<HTMLElement> & {
|
|
|
27
27
|
["data-testid"]?: string;
|
|
28
28
|
bodyText?: string;
|
|
29
29
|
children: ReactNode;
|
|
30
|
-
|
|
30
|
+
closeButtonAriaLabel: string;
|
|
31
31
|
disableCloseOnClickOutside?: boolean;
|
|
32
32
|
/**
|
|
33
33
|
* If true, the drawer height will fit to its content on small screens.
|
|
@@ -52,7 +52,7 @@ export const DrawerContent = forwardRef(
|
|
|
52
52
|
bodyText,
|
|
53
53
|
children,
|
|
54
54
|
className,
|
|
55
|
-
|
|
55
|
+
closeButtonAriaLabel,
|
|
56
56
|
disableCloseOnClickOutside = false,
|
|
57
57
|
fitToContent = false,
|
|
58
58
|
footerContent,
|
|
@@ -101,7 +101,7 @@ export const DrawerContent = forwardRef(
|
|
|
101
101
|
backButton={backButton}
|
|
102
102
|
backButtonText={backButtonText}
|
|
103
103
|
backButtonOnlyIcon={backButtonOnlyIcon}
|
|
104
|
-
|
|
104
|
+
closeButtonAriaLabel={closeButtonAriaLabel}
|
|
105
105
|
className={cx(`${rootClassName}__drawer-frame`)}
|
|
106
106
|
fitToContent={fitToContent}
|
|
107
107
|
footerContent={footerContent}
|
|
@@ -18,13 +18,13 @@ describe("DrawerFrame", () => {
|
|
|
18
18
|
it("should have the sticky-footer class if stickyFooter is set", () => {
|
|
19
19
|
render(
|
|
20
20
|
<RadixDialog.Root open={true}>
|
|
21
|
-
<RadixDialog.Content>
|
|
21
|
+
<RadixDialog.Content aria-describedby={undefined}>
|
|
22
22
|
<DrawerFrame
|
|
23
23
|
data-testid={Selectors.DRAWER_FRAME}
|
|
24
24
|
backButton
|
|
25
25
|
backButtonOnlyIcon={false}
|
|
26
26
|
backButtonText="Back"
|
|
27
|
-
|
|
27
|
+
closeButtonAriaLabel="Close"
|
|
28
28
|
footerContent={<div>Footer content</div>}
|
|
29
29
|
onAnimationEnd={noop}
|
|
30
30
|
onBackButtonClick={noop}
|
|
@@ -51,13 +51,13 @@ describe("DrawerFrame", () => {
|
|
|
51
51
|
])("should render the correct scroll area depending on stickyFooter prop", (args) => {
|
|
52
52
|
render(
|
|
53
53
|
<RadixDialog.Root open={true}>
|
|
54
|
-
<RadixDialog.Content>
|
|
54
|
+
<RadixDialog.Content aria-describedby={undefined}>
|
|
55
55
|
<DrawerFrame
|
|
56
56
|
data-testid={Selectors.DRAWER_FRAME}
|
|
57
57
|
backButton
|
|
58
58
|
backButtonOnlyIcon={false}
|
|
59
59
|
backButtonText="Back"
|
|
60
|
-
|
|
60
|
+
closeButtonAriaLabel="Close"
|
|
61
61
|
footerContent={<div>Footer content</div>}
|
|
62
62
|
onAnimationEnd={noop}
|
|
63
63
|
onBackButtonClick={noop}
|
|
@@ -100,13 +100,13 @@ describe("DrawerFrame", () => {
|
|
|
100
100
|
])("should only show footerContent if there is any", (args) => {
|
|
101
101
|
render(
|
|
102
102
|
<RadixDialog.Root open={true}>
|
|
103
|
-
<RadixDialog.Content>
|
|
103
|
+
<RadixDialog.Content aria-describedby={undefined}>
|
|
104
104
|
<DrawerFrame
|
|
105
105
|
data-testid={Selectors.DRAWER_FRAME}
|
|
106
106
|
backButton
|
|
107
107
|
backButtonOnlyIcon={false}
|
|
108
108
|
backButtonText="Back"
|
|
109
|
-
|
|
109
|
+
closeButtonAriaLabel="Close"
|
|
110
110
|
footerContent={args.footerContent}
|
|
111
111
|
onAnimationEnd={noop}
|
|
112
112
|
onBackButtonClick={noop}
|
package/src/drawer-frame.tsx
CHANGED
|
@@ -15,7 +15,7 @@ export type DrawerFrameProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
15
15
|
backButtonText?: string;
|
|
16
16
|
backButtonOnlyIcon: boolean;
|
|
17
17
|
children: ReactNode;
|
|
18
|
-
|
|
18
|
+
closeButtonAriaLabel: string;
|
|
19
19
|
fitToContent?: boolean;
|
|
20
20
|
footerContent?: ReactNode;
|
|
21
21
|
headerContent?: ReactNode;
|
|
@@ -40,7 +40,7 @@ export const DrawerFrame = forwardRef(
|
|
|
40
40
|
backButtonOnlyIcon,
|
|
41
41
|
children,
|
|
42
42
|
className,
|
|
43
|
-
|
|
43
|
+
closeButtonAriaLabel,
|
|
44
44
|
fitToContent = false,
|
|
45
45
|
footerContent,
|
|
46
46
|
headerContent,
|
|
@@ -90,7 +90,7 @@ export const DrawerFrame = forwardRef(
|
|
|
90
90
|
backButtonOnlyIcon={backButtonOnlyIcon}
|
|
91
91
|
backButton={backButton}
|
|
92
92
|
backButtonText={backButtonText}
|
|
93
|
-
|
|
93
|
+
closeButtonAriaLabel={closeButtonAriaLabel}
|
|
94
94
|
onBackButtonClick={onBackButtonClick}
|
|
95
95
|
/>
|
|
96
96
|
</DrawerContainer>
|
|
@@ -44,12 +44,12 @@ describe("DrawerHeader", () => {
|
|
|
44
44
|
])("should display the back button if required props are set", (args) => {
|
|
45
45
|
render(
|
|
46
46
|
<RadixDialog.Root open={true}>
|
|
47
|
-
<RadixDialog.Content>
|
|
47
|
+
<RadixDialog.Content aria-describedby={undefined}>
|
|
48
48
|
<DrawerHeader
|
|
49
49
|
backButton={args.backButton}
|
|
50
50
|
backButtonText={args.backButtonText}
|
|
51
51
|
backButtonOnlyIcon={false}
|
|
52
|
-
|
|
52
|
+
closeButtonAriaLabel="Close"
|
|
53
53
|
data-testid={Selectors.DRAWER_HEADER}
|
|
54
54
|
onBackButtonClick={args.handleBackClick}
|
|
55
55
|
title="Title"
|
|
@@ -106,12 +106,12 @@ describe("DrawerHeader", () => {
|
|
|
106
106
|
(args) => {
|
|
107
107
|
render(
|
|
108
108
|
<RadixDialog.Root open={true}>
|
|
109
|
-
<RadixDialog.Content>
|
|
109
|
+
<RadixDialog.Content aria-describedby={undefined}>
|
|
110
110
|
<DrawerHeader
|
|
111
111
|
backButton={args.backButton}
|
|
112
112
|
backButtonText={args.backButtonText}
|
|
113
113
|
backButtonOnlyIcon={false}
|
|
114
|
-
|
|
114
|
+
closeButtonAriaLabel="Close"
|
|
115
115
|
data-testid={Selectors.DRAWER_HEADER}
|
|
116
116
|
onBackButtonClick={args.handleBackClick}
|
|
117
117
|
title="Title"
|
|
@@ -126,12 +126,12 @@ describe("DrawerHeader", () => {
|
|
|
126
126
|
it("should add the button text as aria-label if backButtonOnlyIcon is true", () => {
|
|
127
127
|
render(
|
|
128
128
|
<RadixDialog.Root open={true}>
|
|
129
|
-
<RadixDialog.Content>
|
|
129
|
+
<RadixDialog.Content aria-describedby={undefined}>
|
|
130
130
|
<DrawerHeader
|
|
131
131
|
backButton
|
|
132
132
|
backButtonText="Back"
|
|
133
133
|
backButtonOnlyIcon
|
|
134
|
-
|
|
134
|
+
closeButtonAriaLabel="Close"
|
|
135
135
|
data-testid={Selectors.DRAWER_HEADER}
|
|
136
136
|
onBackButtonClick={handleBackClick}
|
|
137
137
|
title="Title"
|
|
@@ -146,12 +146,12 @@ describe("DrawerHeader", () => {
|
|
|
146
146
|
it("should not add the button text as aria-label if backButtonOnlyIcon is false", () => {
|
|
147
147
|
render(
|
|
148
148
|
<RadixDialog.Root open={true}>
|
|
149
|
-
<RadixDialog.Content>
|
|
149
|
+
<RadixDialog.Content aria-describedby={undefined}>
|
|
150
150
|
<DrawerHeader
|
|
151
151
|
backButton
|
|
152
152
|
backButtonText="Back"
|
|
153
153
|
backButtonOnlyIcon={false}
|
|
154
|
-
|
|
154
|
+
closeButtonAriaLabel="Close"
|
|
155
155
|
data-testid={Selectors.DRAWER_HEADER}
|
|
156
156
|
onBackButtonClick={handleBackClick}
|
|
157
157
|
title="Title"
|
package/src/drawer-header.tsx
CHANGED
|
@@ -16,7 +16,7 @@ export type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
16
16
|
backButton: boolean;
|
|
17
17
|
backButtonText?: string;
|
|
18
18
|
backButtonOnlyIcon: boolean;
|
|
19
|
-
|
|
19
|
+
closeButtonAriaLabel: string;
|
|
20
20
|
headerContent?: React.ReactNode;
|
|
21
21
|
onBackButtonClick?: () => void;
|
|
22
22
|
title: string;
|
|
@@ -32,7 +32,7 @@ export const DrawerHeader = forwardRef(
|
|
|
32
32
|
backButtonText,
|
|
33
33
|
backButtonOnlyIcon,
|
|
34
34
|
className,
|
|
35
|
-
|
|
35
|
+
closeButtonAriaLabel,
|
|
36
36
|
headerContent,
|
|
37
37
|
onBackButtonClick,
|
|
38
38
|
title,
|
|
@@ -96,7 +96,7 @@ export const DrawerHeader = forwardRef(
|
|
|
96
96
|
<div className={cx(`${rootClassName}__right`)}>
|
|
97
97
|
<RadixDialog.Close asChild>
|
|
98
98
|
<Button
|
|
99
|
-
aria-label={
|
|
99
|
+
aria-label={closeButtonAriaLabel}
|
|
100
100
|
className={cx(`${rootClassName}__close-button`)}
|
|
101
101
|
iconOnly
|
|
102
102
|
size="sm"
|
package/src/drawer.stories.tsx
CHANGED
|
@@ -83,7 +83,7 @@ const StorybookMultiDrawerTestComponent = () => {
|
|
|
83
83
|
backButtonText="Back"
|
|
84
84
|
backButtonOnlyIcon={false}
|
|
85
85
|
bodyText="This is the body text"
|
|
86
|
-
|
|
86
|
+
closeButtonAriaLabel="Close drawer"
|
|
87
87
|
onBackButtonClick={() => {
|
|
88
88
|
return undefined;
|
|
89
89
|
}}
|
|
@@ -111,7 +111,7 @@ const StorybookMultiDrawerTestComponent = () => {
|
|
|
111
111
|
backButtonText="Back"
|
|
112
112
|
backButtonOnlyIcon={false}
|
|
113
113
|
bodyText="This is the body text"
|
|
114
|
-
|
|
114
|
+
closeButtonAriaLabel="Close drawer"
|
|
115
115
|
onBackButtonClick={() => {
|
|
116
116
|
return undefined;
|
|
117
117
|
}}
|
|
@@ -139,7 +139,7 @@ const StorybookMultiDrawerTestComponent = () => {
|
|
|
139
139
|
backButtonText="Back"
|
|
140
140
|
backButtonOnlyIcon={false}
|
|
141
141
|
bodyText="This is the body text"
|
|
142
|
-
|
|
142
|
+
closeButtonAriaLabel="Close drawer"
|
|
143
143
|
onBackButtonClick={() => {
|
|
144
144
|
return undefined;
|
|
145
145
|
}}
|
|
@@ -233,7 +233,7 @@ export const ShowcaseForDrawerContent: DrawerContentStory = {
|
|
|
233
233
|
backButtonText: "Back",
|
|
234
234
|
backButtonOnlyIcon: false,
|
|
235
235
|
bodyText: "This is the body text",
|
|
236
|
-
|
|
236
|
+
closeButtonAriaLabel: "Close drawer",
|
|
237
237
|
disableCloseOnClickOutside: false,
|
|
238
238
|
fitToContent: false,
|
|
239
239
|
footerContent: <StorybookTestFooterContent />,
|
package/src/drawer.test.tsx
CHANGED
|
@@ -38,7 +38,7 @@ describe("Drawer", () => {
|
|
|
38
38
|
backButton
|
|
39
39
|
backButtonText="Back"
|
|
40
40
|
bodyText="This is the body text"
|
|
41
|
-
|
|
41
|
+
closeButtonAriaLabel="Close"
|
|
42
42
|
onBackButtonClick={() => {}}
|
|
43
43
|
stickyFooter
|
|
44
44
|
title="Title"
|
|
@@ -73,7 +73,7 @@ describe("Drawer", () => {
|
|
|
73
73
|
backButton
|
|
74
74
|
backButtonText="Back"
|
|
75
75
|
bodyText="This is the body text"
|
|
76
|
-
|
|
76
|
+
closeButtonAriaLabel="Close"
|
|
77
77
|
onBackButtonClick={() => {}}
|
|
78
78
|
stickyFooter
|
|
79
79
|
title="Title"
|
|
@@ -108,7 +108,7 @@ describe("Drawer", () => {
|
|
|
108
108
|
backButton
|
|
109
109
|
backButtonText="Back"
|
|
110
110
|
bodyText="This is the body text"
|
|
111
|
-
|
|
111
|
+
closeButtonAriaLabel="Close"
|
|
112
112
|
onBackButtonClick={() => {}}
|
|
113
113
|
stickyFooter
|
|
114
114
|
title="Title"
|
|
@@ -143,7 +143,7 @@ describe("Drawer", () => {
|
|
|
143
143
|
backButton
|
|
144
144
|
backButtonText="Back"
|
|
145
145
|
bodyText="This is the body text"
|
|
146
|
-
|
|
146
|
+
closeButtonAriaLabel="Close"
|
|
147
147
|
onBackButtonClick={() => {}}
|
|
148
148
|
stickyFooter
|
|
149
149
|
title="Title"
|
|
@@ -178,7 +178,7 @@ describe("Drawer", () => {
|
|
|
178
178
|
backButton
|
|
179
179
|
backButtonText="Back"
|
|
180
180
|
bodyText="This is the body text"
|
|
181
|
-
|
|
181
|
+
closeButtonAriaLabel="Close"
|
|
182
182
|
disableCloseOnClickOutside={true}
|
|
183
183
|
onBackButtonClick={() => {}}
|
|
184
184
|
stickyFooter
|