Skip to content

Commit 640b8a8

Browse files
kflournoy-sfkflournoy-sf
authored
chore(modals): close button out of header (#4935)
* chore(modals): close button out of header * chore(modals): close button out of header - PR feedback
1 parent 5aad195 commit 640b8a8

File tree

18 files changed

+794
-639
lines changed

18 files changed

+794
-639
lines changed

‎RELEASENOTES.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,10 @@
9898
- Removed redundant `title` attribute from modal close button.
9999
- Updated use of `aria-describedby` attribute for modal content, and clarified in accessibility documentation section.
100100
- Added the `role="presentation"` attribute to the modal backdrop.
101+
- Moved `slds-modal__close` out of the modal header container and adjusted styles and annotations accordingly.
102+
- Headless modal variant no longer requires `slds-modal__header` in the markup.
103+
#### Deprecated
104+
- Deprecated older styles for previous markup of the `slds-modal__close` button.
101105

102106
### [Pills](https://www.lightningdesignsystem.com/components/pills)
103107
## Added
@@ -115,6 +119,10 @@
115119
#### Changed
116120
- Labels will no longer wrap below the radio button. When the label text wraps, it will now go directly under the previous line.
117121

122+
### [Rich Text Editor](https://www.lightningdesignsystem.com/components/rich-text-editor)
123+
#### Added
124+
- Added `slds` as the default namespace with `sds` fallbacks for Styling Hooks.
125+
118126
### [Select](https://www.lightningdesignsystem.com/components/select)
119127
#### Added
120128
- Added `slds` as the default namespace with `sds` fallbacks for Styling Hooks.

‎ui/components/app-launcher/__tests__/__snapshots__/index.spec.js.snap

Lines changed: 90 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -19,27 +19,27 @@ exports[`renders a default app launcher 1`] = `
1919
<div
2020
className="slds-modal__container"
2121
>
22+
<button
23+
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
24+
onClick={[Function]}
25+
>
26+
<svg
27+
aria-hidden={true}
28+
className="slds-button__icon slds-button__icon_large"
29+
>
30+
<use
31+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#close"
32+
/>
33+
</svg>
34+
<span
35+
className="slds-assistive-text"
36+
>
37+
Cancel and close
38+
</span>
39+
</button>
2240
<div
2341
className="slds-modal__header slds-grid slds-grid_align-spread slds-grid_vertical-align-center"
2442
>
25-
<button
26-
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
27-
onClick={[Function]}
28-
>
29-
<svg
30-
aria-hidden={true}
31-
className="slds-button__icon slds-button__icon_large"
32-
>
33-
<use
34-
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#close"
35-
/>
36-
</svg>
37-
<span
38-
className="slds-assistive-text"
39-
>
40-
Cancel and close
41-
</span>
42-
</button>
4343
<h2
4444
className="slds-text-heading_medium"
4545
id="header43"
@@ -782,27 +782,27 @@ exports[`renders a dropped app launcher 1`] = `
782782
<div
783783
className="slds-modal__container"
784784
>
785+
<button
786+
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
787+
onClick={[Function]}
788+
>
789+
<svg
790+
aria-hidden={true}
791+
className="slds-button__icon slds-button__icon_large"
792+
>
793+
<use
794+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#close"
795+
/>
796+
</svg>
797+
<span
798+
className="slds-assistive-text"
799+
>
800+
Cancel and close
801+
</span>
802+
</button>
785803
<div
786804
className="slds-modal__header slds-grid slds-grid_align-spread slds-grid_vertical-align-center"
787805
>
788-
<button
789-
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
790-
onClick={[Function]}
791-
>
792-
<svg
793-
aria-hidden={true}
794-
className="slds-button__icon slds-button__icon_large"
795-
>
796-
<use
797-
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#close"
798-
/>
799-
</svg>
800-
<span
801-
className="slds-assistive-text"
802-
>
803-
Cancel and close
804-
</span>
805-
</button>
806806
<h2
807807
className="slds-text-heading_medium"
808808
id="header43"
@@ -1545,27 +1545,27 @@ exports[`renders a grabbed app launcher 1`] = `
15451545
<div
15461546
className="slds-modal__container"
15471547
>
1548+
<button
1549+
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
1550+
onClick={[Function]}
1551+
>
1552+
<svg
1553+
aria-hidden={true}
1554+
className="slds-button__icon slds-button__icon_large"
1555+
>
1556+
<use
1557+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#close"
1558+
/>
1559+
</svg>
1560+
<span
1561+
className="slds-assistive-text"
1562+
>
1563+
Cancel and close
1564+
</span>
1565+
</button>
15481566
<div
15491567
className="slds-modal__header slds-grid slds-grid_align-spread slds-grid_vertical-align-center"
15501568
>
1551-
<button
1552-
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
1553-
onClick={[Function]}
1554-
>
1555-
<svg
1556-
aria-hidden={true}
1557-
className="slds-button__icon slds-button__icon_large"
1558-
>
1559-
<use
1560-
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#close"
1561-
/>
1562-
</svg>
1563-
<span
1564-
className="slds-assistive-text"
1565-
>
1566-
Cancel and close
1567-
</span>
1568-
</button>
15691569
<h2
15701570
className="slds-text-heading_medium"
15711571
id="header43"
@@ -2308,27 +2308,27 @@ exports[`renders a moved app launcher 1`] = `
23082308
<div
23092309
className="slds-modal__container"
23102310
>
2311+
<button
2312+
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
2313+
onClick={[Function]}
2314+
>
2315+
<svg
2316+
aria-hidden={true}
2317+
className="slds-button__icon slds-button__icon_large"
2318+
>
2319+
<use
2320+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#close"
2321+
/>
2322+
</svg>
2323+
<span
2324+
className="slds-assistive-text"
2325+
>
2326+
Cancel and close
2327+
</span>
2328+
</button>
23112329
<div
23122330
className="slds-modal__header slds-grid slds-grid_align-spread slds-grid_vertical-align-center"
23132331
>
2314-
<button
2315-
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
2316-
onClick={[Function]}
2317-
>
2318-
<svg
2319-
aria-hidden={true}
2320-
className="slds-button__icon slds-button__icon_large"
2321-
>
2322-
<use
2323-
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#close"
2324-
/>
2325-
</svg>
2326-
<span
2327-
className="slds-assistive-text"
2328-
>
2329-
Cancel and close
2330-
</span>
2331-
</button>
23322332
<h2
23332333
className="slds-text-heading_medium"
23342334
id="header43"
@@ -3071,27 +3071,27 @@ exports[`renders a search app launcher 1`] = `
30713071
<div
30723072
className="slds-modal__container"
30733073
>
3074+
<button
3075+
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
3076+
onClick={[Function]}
3077+
>
3078+
<svg
3079+
aria-hidden={true}
3080+
className="slds-button__icon slds-button__icon_large"
3081+
>
3082+
<use
3083+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#close"
3084+
/>
3085+
</svg>
3086+
<span
3087+
className="slds-assistive-text"
3088+
>
3089+
Cancel and close
3090+
</span>
3091+
</button>
30743092
<div
30753093
className="slds-modal__header slds-grid slds-grid_align-spread slds-grid_vertical-align-center"
30763094
>
3077-
<button
3078-
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
3079-
onClick={[Function]}
3080-
>
3081-
<svg
3082-
aria-hidden={true}
3083-
className="slds-button__icon slds-button__icon_large"
3084-
>
3085-
<use
3086-
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#close"
3087-
/>
3088-
</svg>
3089-
<span
3090-
className="slds-assistive-text"
3091-
>
3092-
Cancel and close
3093-
</span>
3094-
</button>
30953095
<h2
30963096
className="slds-text-heading_medium"
30973097
id="header43"

‎ui/components/docked-composer/__tests__/__snapshots__/index.spec.js.snap

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -703,6 +703,7 @@ exports[`renders a docked composer with popout 1`] = `
703703
aria-labelledby="dialog-heading-id-1"
704704
aria-modal="true"
705705
className="slds-modal slds-fade-in-open slds-docked-composer-modal"
706+
closeButton="false"
706707
role="dialog"
707708
tabIndex="-1"
708709
>

‎ui/components/docked-composer/__tests__/index.spec.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ it('renders a docked composer with popout', () =>
8484
className="slds-docked-composer-modal"
8585
aria-labelledby={dialogHeadingId}
8686
aria-describedby={dialogBodyId}
87+
closeButton="false"
8788
>
8889
<ModalContent id="modal-content-id">
8990
<DockedComposerPanel footer={<Footer />} nestedDialog>

‎ui/components/docked-composer/base/example.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -333,6 +333,7 @@ export let states = [
333333
className="slds-docked-composer-modal"
334334
aria-labelledby={dialogHeadingId}
335335
aria-describedby={dialogBodyId}
336+
closeButton="false"
336337
>
337338
<ModalContent id="modal-content-id">
338339
<DockedComposerPanel footer={<Footer />} nestedDialog>

0 commit comments

Comments
 (0)