Skip to content

Commit 2f5befd

Browse files
jasonbasuiljasonbasuil
authored
feature/UIDS-248 update modal spacing and content (#253)
* adjusts padding on ModalHeader and ModalFooter * update light font for Header subtitle and Body * adds Medium sized Modal * test * use MODAL_SIZES in stories + scss adjustments
1 parent 0254317 commit 2f5befd

File tree

8 files changed

+288
-51
lines changed

8 files changed

+288
-51
lines changed

‎scss/modals.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
$modal-width-default: 32rem;
2-
$modal-width-wide: 46.5rem;
1+
$modal-width-small: 32rem;
2+
$modal-width-medium: 40rem;
3+
$modal-width-large: 55.625rem;

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

Lines changed: 210 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1742,7 +1742,114 @@ exports[`Storyshots Design System/Form Elements/Form Group With Trailing Icon 1`
17421742
</div>
17431743
`;
17441744

1745-
exports[`Storyshots Design System/Modal Base Modal 1`] = `
1745+
exports[`Storyshots Design System/Modal Danger Modal 1`] = `
1746+
<div
1747+
style={
1748+
Object {
1749+
"padding": "1rem",
1750+
}
1751+
}
1752+
>
1753+
<div
1754+
className="ReactModal__Overlay ReactModal__Overlay--after-open"
1755+
onClick={[Function]}
1756+
onMouseDown={[Function]}
1757+
style={
1758+
Object {
1759+
"backgroundColor": "rgba(255, 255, 255, 0.75)",
1760+
"bottom": 0,
1761+
"left": 0,
1762+
"position": "fixed",
1763+
"right": 0,
1764+
"top": 0,
1765+
}
1766+
}
1767+
>
1768+
<div
1769+
aria-label="Danger Modal"
1770+
aria-modal={true}
1771+
className="ReactModal__Content ReactModal__Content--after-open DangerModal"
1772+
onClick={[Function]}
1773+
onKeyDown={[Function]}
1774+
onMouseDown={[Function]}
1775+
onMouseUp={[Function]}
1776+
role="dialog"
1777+
style={Object {}}
1778+
tabIndex="-1"
1779+
>
1780+
<header
1781+
className="ModalHeader"
1782+
>
1783+
<div
1784+
className="ModalHeader__heading"
1785+
>
1786+
<h1
1787+
className="ModalHeader__title"
1788+
id="danger-modal"
1789+
>
1790+
<svg
1791+
aria-hidden="true"
1792+
className="svg-inline--fa fa-exclamation-triangle fa-w-18 danger"
1793+
data-icon="exclamation-triangle"
1794+
data-prefix="fas"
1795+
focusable="false"
1796+
role="img"
1797+
style={Object {}}
1798+
viewBox="0 0 576 512"
1799+
xmlns="http://www.w3.org/2000/svg"
1800+
>
1801+
<path
1802+
d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
1803+
fill="currentColor"
1804+
style={Object {}}
1805+
/>
1806+
</svg>
1807+
Danger modal
1808+
</h1>
1809+
</div>
1810+
<button
1811+
aria-label="Close"
1812+
className="btn btn-sm btn-link close"
1813+
disabled={false}
1814+
onClick={[Function]}
1815+
type="button"
1816+
>
1817+
<span
1818+
aria-hidden="true"
1819+
>
1820+
×
1821+
</span>
1822+
</button>
1823+
</header>
1824+
<div
1825+
className="ModalBody"
1826+
>
1827+
<p>
1828+
Are you sure you want to do this?
1829+
</p>
1830+
</div>
1831+
<div
1832+
className="ModalFooter"
1833+
>
1834+
<button
1835+
className="btn btn-light"
1836+
type="button"
1837+
>
1838+
Cancel
1839+
</button>
1840+
<button
1841+
className="btn btn-outline-danger"
1842+
type="submit"
1843+
>
1844+
Delete
1845+
</button>
1846+
</div>
1847+
</div>
1848+
</div>
1849+
</div>
1850+
`;
1851+
1852+
exports[`Storyshots Design System/Modal Default 1`] = `
17461853
<div
17471854
style={
17481855
Object {
@@ -1766,9 +1873,9 @@ exports[`Storyshots Design System/Modal Base Modal 1`] = `
17661873
}
17671874
>
17681875
<div
1769-
aria-label="Base Modal"
1876+
aria-label="Default Modal"
17701877
aria-modal={true}
1771-
className="ReactModal__Content ReactModal__Content--after-open BaseModal"
1878+
className="ReactModal__Content ReactModal__Content--after-open DefaultModal"
17721879
onClick={[Function]}
17731880
onKeyDown={[Function]}
17741881
onMouseDown={[Function]}
@@ -1785,9 +1892,9 @@ exports[`Storyshots Design System/Modal Base Modal 1`] = `
17851892
>
17861893
<h1
17871894
className="ModalHeader__title"
1788-
id="base-modal"
1895+
id="default-modal"
17891896
>
1790-
Base modal
1897+
Default modal
17911898
</h1>
17921899
</div>
17931900
<button
@@ -1832,7 +1939,7 @@ exports[`Storyshots Design System/Modal Base Modal 1`] = `
18321939
</div>
18331940
`;
18341941

1835-
exports[`Storyshots Design System/Modal Danger Modal 1`] = `
1942+
exports[`Storyshots Design System/Modal Large Modal 1`] = `
18361943
<div
18371944
style={
18381945
Object {
@@ -1856,9 +1963,9 @@ exports[`Storyshots Design System/Modal Danger Modal 1`] = `
18561963
}
18571964
>
18581965
<div
1859-
aria-label="Danger Modal"
1966+
aria-label="Large Modal"
18601967
aria-modal={true}
1861-
className="ReactModal__Content ReactModal__Content--after-open DangerModal"
1968+
className="ReactModal__Content ReactModal__Content--after-open LargeModal ReactModal--large"
18621969
onClick={[Function]}
18631970
onKeyDown={[Function]}
18641971
onMouseDown={[Function]}
@@ -1875,26 +1982,9 @@ exports[`Storyshots Design System/Modal Danger Modal 1`] = `
18751982
>
18761983
<h1
18771984
className="ModalHeader__title"
1878-
id="danger-modal"
1985+
id="large-modal"
18791986
>
1880-
<svg
1881-
aria-hidden="true"
1882-
className="svg-inline--fa fa-exclamation-triangle fa-w-18 danger"
1883-
data-icon="exclamation-triangle"
1884-
data-prefix="fas"
1885-
focusable="false"
1886-
role="img"
1887-
style={Object {}}
1888-
viewBox="0 0 576 512"
1889-
xmlns="http://www.w3.org/2000/svg"
1890-
>
1891-
<path
1892-
d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
1893-
fill="currentColor"
1894-
style={Object {}}
1895-
/>
1896-
</svg>
1897-
Danger modal
1987+
Large modal
18981988
</h1>
18991989
</div>
19001990
<button
@@ -1915,7 +2005,7 @@ exports[`Storyshots Design System/Modal Danger Modal 1`] = `
19152005
className="ModalBody"
19162006
>
19172007
<p>
1918-
Are you sure you want to do this?
2008+
Some content goes here.
19192009
</p>
19202010
</div>
19212011
<div
@@ -1928,10 +2018,100 @@ exports[`Storyshots Design System/Modal Danger Modal 1`] = `
19282018
Cancel
19292019
</button>
19302020
<button
1931-
className="btn btn-outline-danger"
2021+
className="btn btn-success"
19322022
type="submit"
19332023
>
1934-
Delete
2024+
Save
2025+
</button>
2026+
</div>
2027+
</div>
2028+
</div>
2029+
</div>
2030+
`;
2031+
2032+
exports[`Storyshots Design System/Modal Medium Modal 1`] = `
2033+
<div
2034+
style={
2035+
Object {
2036+
"padding": "1rem",
2037+
}
2038+
}
2039+
>
2040+
<div
2041+
className="ReactModal__Overlay ReactModal__Overlay--after-open"
2042+
onClick={[Function]}
2043+
onMouseDown={[Function]}
2044+
style={
2045+
Object {
2046+
"backgroundColor": "rgba(255, 255, 255, 0.75)",
2047+
"bottom": 0,
2048+
"left": 0,
2049+
"position": "fixed",
2050+
"right": 0,
2051+
"top": 0,
2052+
}
2053+
}
2054+
>
2055+
<div
2056+
aria-label="Medium Modal"
2057+
aria-modal={true}
2058+
className="ReactModal__Content ReactModal__Content--after-open MediumModal ReactModal--medium"
2059+
onClick={[Function]}
2060+
onKeyDown={[Function]}
2061+
onMouseDown={[Function]}
2062+
onMouseUp={[Function]}
2063+
role="dialog"
2064+
style={Object {}}
2065+
tabIndex="-1"
2066+
>
2067+
<header
2068+
className="ModalHeader"
2069+
>
2070+
<div
2071+
className="ModalHeader__heading"
2072+
>
2073+
<h1
2074+
className="ModalHeader__title"
2075+
id="medium-modal"
2076+
>
2077+
Medium modal
2078+
</h1>
2079+
</div>
2080+
<button
2081+
aria-label="Close"
2082+
className="btn btn-sm btn-link close"
2083+
disabled={false}
2084+
onClick={[Function]}
2085+
type="button"
2086+
>
2087+
<span
2088+
aria-hidden="true"
2089+
>
2090+
×
2091+
</span>
2092+
</button>
2093+
</header>
2094+
<div
2095+
className="ModalBody"
2096+
>
2097+
<p>
2098+
Some content goes here.
2099+
</p>
2100+
</div>
2101+
<div
2102+
className="ModalFooter"
2103+
>
2104+
<button
2105+
className="btn btn-light"
2106+
type="button"
2107+
>
2108+
Cancel
2109+
</button>
2110+
<button
2111+
className="btn btn-success"
2112+
type="submit"
2113+
>
2114+
Save
19352115
</button>
19362116
</div>
19372117
</div>

‎src/Modal/Modal.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@ import PropTypes from 'prop-types';
55

66
import './Modal.scss';
77

8-
export const MODAL_SIZES = { SMALL: 'small', LARGE: 'large' };
8+
export const MODAL_SIZES = { SMALL: 'small', MEDIUM: 'medium', LARGE: 'large' };
99

1010
const Modal = (props) => {
1111
const { size } = props;
1212
let { className } = props;
1313

14-
if (size === MODAL_SIZES.LARGE) {
14+
if (size === MODAL_SIZES.MEDIUM) {
15+
className = classNames(className, 'ReactModal--medium');
16+
} else if (size === MODAL_SIZES.LARGE) {
1517
className = classNames(className, 'ReactModal--large');
1618
}
1719

‎src/Modal/Modal.mdx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,18 @@ DON'T:
7373

7474
## Stories
7575

76-
### Base modal
76+
### Default
7777

7878
- To use in projects as the foundation of any modal. We might need to detach it to customize it.
7979

80+
### Medium Modal
81+
82+
- For a wider content area.
83+
84+
### Large Modal
85+
86+
- For a large content area.
87+
8088
### Transactional modal
8189

8290
- The user needs to take an action for the modal to be completed and closed. It contains the cancel and primary action buttons.

‎src/Modal/Modal.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,14 @@
1717
overflow: auto;
1818
transform: translate(0, -25%);
1919
transition: transform $ux-duration-long ease-in;
20-
width: $modal-width-default;
20+
width: $modal-width-small;
21+
22+
&.ReactModal--medium {
23+
width: $modal-width-medium;
24+
}
2125

2226
&.ReactModal--large {
23-
width: $modal-width-wide;
27+
width: $modal-width-large;
2428
}
2529

2630
// Bootstrap has the following reset:

0 commit comments

Comments
 (0)