77 */
88
99import React from 'react' ;
10- import { css } from '@emotion/react' ;
1110import type { Meta , StoryObj } from '@storybook/react' ;
1211import { faker } from '@faker-js/faker' ;
1312
1413import { enableFunctionToggleControls } from '../../../.storybook/utils' ;
1514import { EuiText } from '../text' ;
16- import { useEuiContainerQuery } from '../../services/container_query' ;
1715import {
1816 EuiResizableContainer ,
1917 EuiResizableContainerProps ,
@@ -32,38 +30,19 @@ const placeholderText = (
3230const TwoColumns : EuiResizableContainerProps [ 'children' ] = (
3331 EuiResizablePanel ,
3432 EuiResizableButton
35- ) => {
36- const { ref, matches } = useEuiContainerQuery < HTMLDivElement > (
37- '(inline-size > 420px)'
38- ) ;
39-
40- return (
41- < >
42- < EuiResizablePanel
43- initialSize = { 50 }
44- tabIndex = { 0 }
45- css = { css `
46- container-type : inline-size;
47- outline : 1px dashed orange;
48- ` }
49- >
50- < div ref = { ref } >
51- < EuiText color = { matches ? 'success' : 'default' } >
52- { matches
53- ? 'Container width is greater than 420px'
54- : placeholderText }
55- </ EuiText >
56- </ div >
57- </ EuiResizablePanel >
58-
59- < EuiResizableButton accountForScrollbars = "both" />
60-
61- < EuiResizablePanel initialSize = { 50 } tabIndex = { 0 } >
62- < EuiText > { placeholderText } </ EuiText >
63- </ EuiResizablePanel >
64- </ >
65- ) ;
66- } ;
33+ ) => (
34+ < >
35+ < EuiResizablePanel initialSize = { 50 } tabIndex = { 0 } >
36+ < EuiText > { placeholderText } </ EuiText >
37+ </ EuiResizablePanel >
38+
39+ < EuiResizableButton accountForScrollbars = "both" />
40+
41+ < EuiResizablePanel initialSize = { 50 } tabIndex = { 0 } >
42+ < EuiText > { placeholderText } </ EuiText >
43+ </ EuiResizablePanel >
44+ </ >
45+ ) ;
6746
6847const ThreeColumns : EuiResizableContainerProps [ 'children' ] = (
6948 EuiResizablePanel ,
0 commit comments