Skip to content

Commit edda39d

Browse files
diegoasmellodiegoasmello
committed
fix: modal header accept external styles
1 parent 83b037b commit edda39d

File tree

3 files changed

+202
-4
lines changed

3 files changed

+202
-4
lines changed

‎src/components/Modal/ModalHeader.test.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,15 @@ describe('ModalHeader', () => {
3232
expect(container).toMatchSnapshot()
3333
})
3434

35+
it('should accept "style" prop', () => {
36+
const { container } = render(
37+
<ModalContextProvider value={mockContextValue}>
38+
<ModalHeader title='title' style={{ background: 'red' }} />
39+
</ModalContextProvider>
40+
)
41+
expect(container).toMatchSnapshot()
42+
})
43+
3544
it('should render correctly with children', () => {
3645
const { container } = render(
3746
<ModalContextProvider value={mockContextValue}>

‎src/components/Modal/ModalHeader.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { CSSProperties, ReactNode, useEffect } from 'react'
2-
import { Theme, useStyles } from '../../styles'
2+
import { ExternalStyles, Theme, useStyles } from '../../styles'
33
import { Heading } from '../Heading'
44
import { HFlow } from '../HFlow'
55
import { VFlow } from '../VFlow'
@@ -10,6 +10,7 @@ import { ModalHeaderIconType, ModalHeaderIcon } from './ModalHeaderIcon'
1010

1111
type ModalHeaderBaseProps = {
1212
hasCloseButton?: boolean
13+
style?: ExternalStyles
1314
onCloseButtonClick?: () => void
1415
}
1516

@@ -27,14 +28,14 @@ export function ModalHeader(props: ModalHeaderContentProps): JSX.Element
2728
export function ModalHeader(props: ModalHeaderChildrenProps): JSX.Element
2829

2930
export function ModalHeader(props: ModalHeaderContentProps | ModalHeaderChildrenProps) {
30-
const { hasCloseButton = true, onCloseButtonClick } = props
31+
const { hasCloseButton = true, style, onCloseButtonClick } = props
3132

3233
const { scroll, bodyRef, hasLeftSidebar, hasRightSidebar, setSectionState } = useModalContext()
3334
const isBodyOverflowing = useIsOverflowing(bodyRef, 'vertical')
3435
const hasSidebar = hasLeftSidebar || hasRightSidebar
3536
const showHeaderShadow = scroll === 'body' && isBodyOverflowing
3637
const showHeaderBorder = hasSidebar && (scroll === 'full' || (scroll === 'body' && !isBodyOverflowing))
37-
const { classes } = useStyles(createStyles, showHeaderShadow, showHeaderBorder, hasSidebar)
38+
const { classes, css } = useStyles(createStyles, showHeaderShadow, showHeaderBorder, hasSidebar)
3839

3940
useEffect(() => {
4041
setSectionState('hasHeader', true)
@@ -46,7 +47,7 @@ export function ModalHeader(props: ModalHeaderContentProps | ModalHeaderChildren
4647
hSpacing={0.5}
4748
justifyContent='space-between'
4849
alignItems='flex-start'
49-
style={classes.header}
50+
style={css(classes.header, style)}
5051
data-testid='modal-header'
5152
>
5253
{isHeaderWithChildren(props) ? (

‎src/components/Modal/__snapshots__/ModalHeader.test.tsx.snap‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,193 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`ModalHeader basic rendering should accept "style" prop 1`] = `
4+
.emotion-3 {
5+
display: grid;
6+
grid-auto-flow: column;
7+
grid-auto-columns: minmax(min-content,max-content);
8+
grid-gap: 1rem;
9+
-webkit-align-items: center;
10+
-webkit-box-align: center;
11+
-ms-flex-align: center;
12+
align-items: center;
13+
-webkit-box-pack: start;
14+
-webkit-justify-content: flex-start;
15+
-ms-flex-pack: start;
16+
justify-content: flex-start;
17+
}
18+
19+
.emotion-2 {
20+
display: -webkit-box;
21+
display: -webkit-flex;
22+
display: -ms-flexbox;
23+
display: flex;
24+
-webkit-flex-direction: column;
25+
-ms-flex-direction: column;
26+
flex-direction: column;
27+
}
28+
29+
.emotion-1 {
30+
display: inline-block;
31+
margin-bottom: 0rem;
32+
margin-top: 0rem;
33+
}
34+
35+
.emotion-1:first-of-type {
36+
margin-top: 0;
37+
}
38+
39+
.emotion-1:last-of-type {
40+
margin-bottom: 0;
41+
}
42+
43+
.emotion-1:empty {
44+
display: none;
45+
}
46+
47+
.emotion-0 {
48+
font-family: "IBM Plex Sans",sans-serif;
49+
font-size: 1.5rem;
50+
line-height: 1.5;
51+
color: #24252E;
52+
font-weight: bold;
53+
color: #24252E;
54+
font-weight: bold;
55+
}
56+
57+
.emotion-5 {
58+
font-family: "IBM Plex Sans",sans-serif;
59+
font-size: 0.8125rem;
60+
line-height: 1.5rem;
61+
color: #24252E;
62+
display: -webkit-inline-box;
63+
display: -webkit-inline-flex;
64+
display: -ms-inline-flexbox;
65+
display: inline-flex;
66+
-webkit-box-pack: center;
67+
-webkit-justify-content: center;
68+
-ms-flex-pack: center;
69+
justify-content: center;
70+
position: relative;
71+
-webkit-user-select: none;
72+
-moz-user-select: none;
73+
-ms-user-select: none;
74+
user-select: none;
75+
-webkit-transition: all .2s;
76+
transition: all .2s;
77+
font-weight: bold;
78+
cursor: pointer;
79+
background-color: transparent;
80+
border: 1px solid transparent;
81+
border-radius: 4px;
82+
color: #24252E;
83+
-webkit-text-decoration: none;
84+
text-decoration: none;
85+
font-size: 0.875rem;
86+
padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
87+
}
88+
89+
.emotion-5 > span {
90+
-webkit-align-items: center;
91+
-webkit-box-align: center;
92+
-ms-flex-align: center;
93+
align-items: center;
94+
display: -webkit-inline-box;
95+
display: -webkit-inline-flex;
96+
display: -ms-inline-flexbox;
97+
display: inline-flex;
98+
}
99+
100+
.emotion-5:not(:disabled):active {
101+
box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
102+
}
103+
104+
.emotion-5:focus {
105+
outline: none;
106+
box-shadow: 0 0 0 2px #0069D0;
107+
}
108+
109+
.emotion-5:not(:disabled):hover {
110+
background-color: rgba(58,58,71,0.1);
111+
}
112+
113+
.emotion-4 {
114+
fill: currentColor;
115+
font-size: 1.5rem;
116+
}
117+
118+
.emotion-6 {
119+
display: grid;
120+
grid-auto-flow: column;
121+
grid-auto-columns: minmax(min-content,max-content);
122+
grid-gap: 0.5rem;
123+
-webkit-align-items: flex-start;
124+
-webkit-box-align: flex-start;
125+
-ms-flex-align: flex-start;
126+
align-items: flex-start;
127+
-webkit-box-pack: justify;
128+
-webkit-justify-content: space-between;
129+
-ms-flex-pack: justify;
130+
justify-content: space-between;
131+
width: 100%;
132+
grid-template-columns: 1fr auto;
133+
padding: 1.5rem 1rem 1rem 2rem;
134+
z-index: 1;
135+
background-color: #FFFFFF;
136+
border-bottom: none;
137+
grid-row: 1;
138+
grid-column: 1 / -1;
139+
background: red;
140+
}
141+
142+
<div>
143+
<div
144+
class="emotion-6"
145+
data-testid="modal-header"
146+
>
147+
<div
148+
class="emotion-3"
149+
>
150+
<div
151+
class="emotion-2"
152+
>
153+
<div
154+
class="emotion-1"
155+
>
156+
<h1
157+
class="emotion-0"
158+
>
159+
title
160+
</h1>
161+
</div>
162+
</div>
163+
</div>
164+
<button
165+
aria-label="Close"
166+
class="emotion-5"
167+
title="Close"
168+
type="button"
169+
>
170+
<span>
171+
<svg
172+
aria-hidden="true"
173+
class="emotion-4"
174+
height="1em"
175+
role="img"
176+
viewBox="0 0 24 24"
177+
width="1em"
178+
>
179+
<path
180+
clip-rule="evenodd"
181+
d="M8.071 6.657l4.243 4.242 4.242-4.242c.464-.48.935-.48 1.415 0s.48.95 0 1.414l-4.243 4.243 4.243 4.242c.471.472.471.943 0 1.415-.472.471-.943.471-1.415 0l-4.242-4.243L8.07 17.97c-.46.482-.932.482-1.414 0-.482-.483-.482-.954 0-1.415l4.242-4.242L6.657 8.07c-.472-.47-.472-.942 0-1.414s.943-.472 1.414 0v.001z"
182+
fill-rule="evenodd"
183+
/>
184+
</svg>
185+
</span>
186+
</button>
187+
</div>
188+
</div>
189+
`;
190+
3191
exports[`ModalHeader basic rendering should render correctly with children 1`] = `
4192
.emotion-2 {
5193
display: grid;

0 commit comments

Comments
 (0)