Skip to content

Commit c276089

Browse files
tsullivantsullivan
committed
Child background style: default / shaded
1 parent da738fb commit c276089

4 files changed

Lines changed: 107 additions & 12 deletions

File tree

‎packages/eui/src/components/flyout/_flyout_close_button.styles.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,7 @@ export const euiFlyoutCloseButtonStyles = (euiThemeContext: UseEuiTheme) => {
2929
z-index: 3;
3030
`,
3131
inside: css`
32-
background-color: ${euiTheme.components
33-
.flyoutCloseButtonInsideBackground};
32+
background-color: transparent;
3433
`,
3534
outside: css`
3635
/* Match dropshadow */

‎packages/eui/src/components/flyout/flyout_child.stories.tsx‎

Lines changed: 91 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ export const WithSmallMainSize: Story = {
249249
),
250250
};
251251

252-
export const WithSmallMainLargeChlld: Story = {
252+
export const WithSmallMainLargeChild: Story = {
253253
name: 'Main Size: s, Child Size: m',
254254
render: (args) => (
255255
<StatefulFlyout
@@ -259,3 +259,93 @@ export const WithSmallMainLargeChlld: Story = {
259259
/>
260260
),
261261
};
262+
263+
const ChildBackgroundStylesFlyout = () => {
264+
const [isMainOpen, setIsMainOpen] = useState(true);
265+
const [isDefaultChildOpen, setIsDefaultChildOpen] = useState(true);
266+
const [isShadedChildOpen, setIsShadedChildOpen] = useState(false);
267+
268+
const openDefaultChild = () => {
269+
setIsDefaultChildOpen(true);
270+
setIsShadedChildOpen(false);
271+
};
272+
const openShadedChild = () => {
273+
setIsDefaultChildOpen(false);
274+
setIsShadedChildOpen(true);
275+
};
276+
277+
const closeMain = () => {
278+
setIsMainOpen(false);
279+
setIsDefaultChildOpen(false);
280+
setIsShadedChildOpen(false);
281+
};
282+
const closeChild = () => {
283+
setIsDefaultChildOpen(false);
284+
setIsShadedChildOpen(false);
285+
};
286+
287+
const ChildFlyoutContent = () => (
288+
<EuiFlyoutBody>
289+
<EuiText>
290+
<p>
291+
This is the child flyout content, with a{' '}
292+
<b>{isShadedChildOpen ? 'shaded' : 'default'}</b> background.
293+
</p>
294+
</EuiText>
295+
</EuiFlyoutBody>
296+
);
297+
298+
return (
299+
<>
300+
<EuiText>
301+
<EuiButton onClick={openDefaultChild} disabled={isDefaultChildOpen}>
302+
Open flyout with <b>default</b> child background
303+
</EuiButton>
304+
<EuiSpacer />
305+
<EuiButton onClick={openShadedChild} disabled={isShadedChildOpen}>
306+
Open flyout with <b>shaded</b> child background
307+
</EuiButton>
308+
</EuiText>
309+
310+
{isMainOpen && (
311+
<EuiFlyout
312+
onClose={closeMain}
313+
size="s"
314+
type="push"
315+
pushMinBreakpoint="xs"
316+
>
317+
<EuiFlyoutBody>
318+
<EuiText>
319+
<p>This is the main flyout content.</p>
320+
</EuiText>
321+
<EuiSpacer />
322+
</EuiFlyoutBody>
323+
324+
{isDefaultChildOpen && (
325+
<EuiFlyoutChild
326+
onClose={closeChild}
327+
size="s"
328+
backgroundStyle="default"
329+
>
330+
<ChildFlyoutContent />
331+
</EuiFlyoutChild>
332+
)}
333+
{isShadedChildOpen && (
334+
<EuiFlyoutChild
335+
onClose={closeChild}
336+
size="s"
337+
backgroundStyle="shaded"
338+
>
339+
<ChildFlyoutContent />
340+
</EuiFlyoutChild>
341+
)}
342+
</EuiFlyout>
343+
)}
344+
</>
345+
);
346+
};
347+
348+
export const WithChildBackgroundStyles: Story = {
349+
name: 'Child Background Styles',
350+
render: () => <ChildBackgroundStylesFlyout />,
351+
};

‎packages/eui/src/components/flyout/flyout_child.styles.ts‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ export const euiFlyoutChildStyles = (euiThemeContext: UseEuiTheme) => {
2525
inset-block-start: 0;
2626
inset-inline-start: 0;
2727
block-size: 100%;
28-
background: ${euiTheme.colors.backgroundBaseSubdued};
2928
display: flex;
3029
flex-direction: column;
3130
${logicalCSSWithFallback('overflow-y', 'hidden')}
@@ -36,6 +35,13 @@ export const euiFlyoutChildStyles = (euiThemeContext: UseEuiTheme) => {
3635
${maxedFlyoutWidth(euiThemeContext)}
3736
`,
3837

38+
backgroundDefault: css`
39+
background: ${euiTheme.colors.backgroundBasePlain};
40+
`,
41+
backgroundShaded: css`
42+
background: ${euiTheme.colors.backgroundBaseSubdued};
43+
`,
44+
3945
// Position variants based on screen size
4046
sidePosition: css`
4147
transform: translateX(-100%);
@@ -55,13 +61,6 @@ export const euiFlyoutChildStyles = (euiThemeContext: UseEuiTheme) => {
5561
${composeFlyoutSizing(euiThemeContext, 'm')}
5662
`,
5763

58-
closeButton: css`
59-
position: absolute;
60-
inset-block-start: ${euiTheme.size.s};
61-
inset-inline-end: ${euiTheme.size.s};
62-
z-index: 1;
63-
`,
64-
6564
overflow: {
6665
overflow: css`
6766
flex-grow: 1;

‎packages/eui/src/components/flyout/flyout_child.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,10 @@ export interface EuiFlyoutChildProps
6060
* @default 's'
6161
*/
6262
size?: 's' | 'm';
63+
/*
64+
* The background of the child flyout can be optionally shaded. Use `shaded` to add the shading.
65+
*/
66+
backgroundStyle?: 'shaded' | 'default';
6367
/**
6468
* Children are implicitly part of FunctionComponent, but good to have if props type is standalone.
6569
*/
@@ -72,6 +76,7 @@ export interface EuiFlyoutChildProps
7276
*/
7377
export const EuiFlyoutChild: FunctionComponent<EuiFlyoutChildProps> = ({
7478
children,
79+
backgroundStyle = 'default',
7580
className,
7681
banner,
7782
hideCloseButton = false,
@@ -195,6 +200,9 @@ export const EuiFlyoutChild: FunctionComponent<EuiFlyoutChildProps> = ({
195200

196201
const flyoutChildCss = [
197202
styles.euiFlyoutChild,
203+
backgroundStyle === 'shaded'
204+
? styles.backgroundShaded
205+
: styles.backgroundDefault,
198206
size === 's' ? styles.s : styles.m,
199207
childLayoutMode === 'side-by-side'
200208
? styles.sidePosition
@@ -238,7 +246,6 @@ export const EuiFlyoutChild: FunctionComponent<EuiFlyoutChildProps> = ({
238246
{!hideCloseButton && (
239247
<EuiFlyoutCloseButton
240248
className="euiFlyoutChild__closeButton"
241-
css={styles.closeButton}
242249
onClose={handleClose}
243250
side="right"
244251
closeButtonPosition="inside"

0 commit comments

Comments
 (0)