Skip to content

Commit 5248372

Browse files
kflournoy-sfkflournoy-sf
authored
chore(modals): headless and footless style changes (#4939)
1 parent 8a1c556 commit 5248372

File tree

14 files changed

+370
-49
lines changed

14 files changed

+370
-49
lines changed

‎RELEASENOTES.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@
9191
- Added `slds` as the default namespace with `sds` fallbacks for Styling Hooks.
9292
- Added CSS Custom Property reassignments for variants and states.
9393
- Added clarifying notes around modal focus for accessibility.
94+
- Added `.slds-modal__content_headless` and `slds-modal__content_footless` classes for styling modal content.
9495
#### Changed
9596
- Changed `header` and `footer` to generic `div` tags for better accessibility semantics.
9697
- Changed assistive text for close buttons in modals, and added notes to accessibility documentation.

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ exports[`renders a default app launcher 1`] = `
1313
aria-labelledby="header43"
1414
aria-modal="true"
1515
className="slds-modal slds-fade-in-open slds-modal_large slds-app-launcher"
16+
closeButtonDisabled={false}
1617
role="dialog"
1718
tabIndex="-1"
1819
>
@@ -21,6 +22,7 @@ exports[`renders a default app launcher 1`] = `
2122
>
2223
<button
2324
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
25+
disabled={false}
2426
onClick={[Function]}
2527
>
2628
<svg
@@ -776,6 +778,7 @@ exports[`renders a dropped app launcher 1`] = `
776778
aria-labelledby="header43"
777779
aria-modal="true"
778780
className="slds-modal slds-fade-in-open slds-modal_large slds-app-launcher"
781+
closeButtonDisabled={false}
779782
role="dialog"
780783
tabIndex="-1"
781784
>
@@ -784,6 +787,7 @@ exports[`renders a dropped app launcher 1`] = `
784787
>
785788
<button
786789
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
790+
disabled={false}
787791
onClick={[Function]}
788792
>
789793
<svg
@@ -1539,6 +1543,7 @@ exports[`renders a grabbed app launcher 1`] = `
15391543
aria-labelledby="header43"
15401544
aria-modal="true"
15411545
className="slds-modal slds-fade-in-open slds-modal_large slds-app-launcher"
1546+
closeButtonDisabled={false}
15421547
role="dialog"
15431548
tabIndex="-1"
15441549
>
@@ -1547,6 +1552,7 @@ exports[`renders a grabbed app launcher 1`] = `
15471552
>
15481553
<button
15491554
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
1555+
disabled={false}
15501556
onClick={[Function]}
15511557
>
15521558
<svg
@@ -2302,6 +2308,7 @@ exports[`renders a moved app launcher 1`] = `
23022308
aria-labelledby="header43"
23032309
aria-modal="true"
23042310
className="slds-modal slds-fade-in-open slds-modal_large slds-app-launcher"
2311+
closeButtonDisabled={false}
23052312
role="dialog"
23062313
tabIndex="-1"
23072314
>
@@ -2310,6 +2317,7 @@ exports[`renders a moved app launcher 1`] = `
23102317
>
23112318
<button
23122319
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
2320+
disabled={false}
23132321
onClick={[Function]}
23142322
>
23152323
<svg
@@ -3065,6 +3073,7 @@ exports[`renders a search app launcher 1`] = `
30653073
aria-labelledby="header43"
30663074
aria-modal="true"
30673075
className="slds-modal slds-fade-in-open slds-modal_large slds-app-launcher"
3076+
closeButtonDisabled={false}
30683077
role="dialog"
30693078
tabIndex="-1"
30703079
>
@@ -3073,6 +3082,7 @@ exports[`renders a search app launcher 1`] = `
30733082
>
30743083
<button
30753084
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
3085+
disabled={false}
30763086
onClick={[Function]}
30773087
>
30783088
<svg

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -703,6 +703,8 @@ 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"
707+
closeButtonDisabled={false}
706708
role="dialog"
707709
tabIndex="-1"
708710
>

‎ui/components/list-builder/__tests__/__snapshots__/index.spec.js.snap

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ exports[`List Builder Inline Edit renders a default list builder with inline edi
1212
<section
1313
aria-modal="true"
1414
className="slds-modal slds-fade-in-open slds-modal_large"
15+
closeButtonDisabled={false}
1516
role="dialog"
1617
tabIndex="-1"
1718
>
@@ -20,6 +21,7 @@ exports[`List Builder Inline Edit renders a default list builder with inline edi
2021
>
2122
<button
2223
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
24+
disabled={false}
2325
onClick={[Function]}
2426
>
2527
<svg
@@ -689,6 +691,7 @@ exports[`List Builder renders a default list builder 1`] = `
689691
aria-labelledby="id-of-modalheader-h1"
690692
aria-modal="true"
691693
className="slds-modal slds-fade-in-open slds-modal_large slds-list-builder"
694+
closeButtonDisabled={false}
692695
role="dialog"
693696
tabIndex="-1"
694697
>
@@ -697,6 +700,7 @@ exports[`List Builder renders a default list builder 1`] = `
697700
>
698701
<button
699702
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
703+
disabled={false}
700704
onClick={[Function]}
701705
>
702706
<svg
@@ -1947,6 +1951,7 @@ exports[`List Builder renders a list builder with default items disabled 1`] = `
19471951
aria-labelledby="id-of-modalheader-h1"
19481952
aria-modal="true"
19491953
className="slds-modal slds-fade-in-open slds-modal_large"
1954+
closeButtonDisabled={false}
19501955
role="dialog"
19511956
tabIndex="-1"
19521957
>
@@ -1955,6 +1960,7 @@ exports[`List Builder renders a list builder with default items disabled 1`] = `
19551960
>
19561961
<button
19571962
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
1963+
disabled={false}
19581964
onClick={[Function]}
19591965
>
19601966
<svg
@@ -3213,6 +3219,7 @@ exports[`List Builder renders a list builder with filtered results 1`] = `
32133219
aria-labelledby="id-of-modalheader-h1"
32143220
aria-modal="true"
32153221
className="slds-modal slds-fade-in-open slds-modal_large"
3222+
closeButtonDisabled={false}
32163223
role="dialog"
32173224
tabIndex="-1"
32183225
>
@@ -3221,6 +3228,7 @@ exports[`List Builder renders a list builder with filtered results 1`] = `
32213228
>
32223229
<button
32233230
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
3231+
disabled={false}
32243232
onClick={[Function]}
32253233
>
32263234
<svg
@@ -3920,6 +3928,7 @@ exports[`List Builder renders a list builder with hidden header 1`] = `
39203928
aria-labelledby="id-of-modalheader-h1"
39213929
aria-modal="true"
39223930
className="slds-modal slds-fade-in-open slds-modal_large"
3931+
closeButtonDisabled={false}
39233932
role="dialog"
39243933
tabIndex="-1"
39253934
>
@@ -3928,6 +3937,7 @@ exports[`List Builder renders a list builder with hidden header 1`] = `
39283937
>
39293938
<button
39303939
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
3940+
disabled={false}
39313941
onClick={[Function]}
39323942
>
39333943
<svg
@@ -4715,6 +4725,7 @@ exports[`List Builder renders a list builder with items disabled 1`] = `
47154725
aria-labelledby="id-of-modalheader-h1"
47164726
aria-modal="true"
47174727
className="slds-modal slds-fade-in-open slds-modal_large"
4728+
closeButtonDisabled={false}
47184729
role="dialog"
47194730
tabIndex="-1"
47204731
>
@@ -4723,6 +4734,7 @@ exports[`List Builder renders a list builder with items disabled 1`] = `
47234734
>
47244735
<button
47254736
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
4737+
disabled={false}
47264738
onClick={[Function]}
47274739
>
47284740
<svg
@@ -5981,6 +5993,7 @@ exports[`List Builder renders a list builder with items selected 1`] = `
59815993
aria-labelledby="id-of-modalheader-h1"
59825994
aria-modal="true"
59835995
className="slds-modal slds-fade-in-open slds-modal_large"
5996+
closeButtonDisabled={false}
59845997
role="dialog"
59855998
tabIndex="-1"
59865999
>
@@ -5989,6 +6002,7 @@ exports[`List Builder renders a list builder with items selected 1`] = `
59896002
>
59906003
<button
59916004
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
6005+
disabled={false}
59926006
onClick={[Function]}
59936007
>
59946008
<svg

‎ui/components/lookups/__tests__/__snapshots__/index.spec.js.snap

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ exports[`Lookup - Advanced Modal renders a lookup with modal 1`] = `
1212
<section
1313
aria-modal="true"
1414
className="slds-modal slds-fade-in-open slds-modal_large"
15+
closeButtonDisabled={false}
1516
role="dialog"
1617
tabIndex="-1"
1718
>
@@ -20,6 +21,7 @@ exports[`Lookup - Advanced Modal renders a lookup with modal 1`] = `
2021
>
2122
<button
2223
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
24+
disabled={false}
2325
onClick={[Function]}
2426
>
2527
<svg

‎ui/components/map/__tests__/__snapshots__/index.spec.js.snap

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -530,6 +530,7 @@ exports[`renders a map component modal 1`] = `
530530
aria-labelledby="modal-heading-id-01"
531531
aria-modal="true"
532532
className="slds-modal slds-fade-in-open slds-modal_medium"
533+
closeButtonDisabled={false}
533534
role="dialog"
534535
tabIndex="-1"
535536
>
@@ -538,6 +539,7 @@ exports[`renders a map component modal 1`] = `
538539
>
539540
<button
540541
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
542+
disabled={false}
541543
onClick={[Function]}
542544
>
543545
<svg
@@ -600,6 +602,7 @@ exports[`renders a map component modal with coordinates panel 1`] = `
600602
aria-labelledby="modal-heading-id-01"
601603
aria-modal="true"
602604
className="slds-modal slds-fade-in-open slds-modal_medium"
605+
closeButtonDisabled={false}
603606
role="dialog"
604607
tabIndex="-1"
605608
>
@@ -608,6 +611,7 @@ exports[`renders a map component modal with coordinates panel 1`] = `
608611
>
609612
<button
610613
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
614+
disabled={false}
611615
onClick={[Function]}
612616
>
613617
<svg
@@ -1119,6 +1123,7 @@ exports[`renders a map component modal with first coordinate selected 1`] = `
11191123
aria-labelledby="modal-heading-id-01"
11201124
aria-modal="true"
11211125
className="slds-modal slds-fade-in-open slds-modal_medium"
1126+
closeButtonDisabled={false}
11221127
role="dialog"
11231128
tabIndex="-1"
11241129
>
@@ -1127,6 +1132,7 @@ exports[`renders a map component modal with first coordinate selected 1`] = `
11271132
>
11281133
<button
11291134
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
1135+
disabled={false}
11301136
onClick={[Function]}
11311137
>
11321138
<svg
@@ -1640,6 +1646,7 @@ exports[`renders a map component modal with footer 1`] = `
16401646
aria-labelledby="modal-heading-id-01"
16411647
aria-modal="true"
16421648
className="slds-modal slds-fade-in-open slds-modal_medium"
1649+
closeButtonDisabled={false}
16431650
role="dialog"
16441651
tabIndex="-1"
16451652
>
@@ -1648,6 +1655,7 @@ exports[`renders a map component modal with footer 1`] = `
16481655
>
16491656
<button
16501657
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
1658+
disabled={false}
16511659
onClick={[Function]}
16521660
>
16531661
<svg
@@ -1719,6 +1727,7 @@ exports[`renders a map component modal with second coordinate selected 1`] = `
17191727
aria-labelledby="modal-heading-id-01"
17201728
aria-modal="true"
17211729
className="slds-modal slds-fade-in-open slds-modal_medium"
1730+
closeButtonDisabled={false}
17221731
role="dialog"
17231732
tabIndex="-1"
17241733
>
@@ -1727,6 +1736,7 @@ exports[`renders a map component modal with second coordinate selected 1`] = `
17271736
>
17281737
<button
17291738
className="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
1739+
disabled={false}
17301740
onClick={[Function]}
17311741
>
17321742
<svg

‎ui/components/modals/RELEASENOTES.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
- Added `slds` as the default namespace with `sds` fallbacks for Styling Hooks.
1212
- Added CSS Custom Property reassignments for variants and states.
1313
- Added clarifying notes around modal focus for accessibility.
14+
- Added `.slds-modal__content_headless` and `slds-modal__content_footless` classes for styling modal content.
1415

1516
### Changed
1617

0 commit comments

Comments
 (0)