Skip to content

Commit 25e0844

Browse files
ERPnext LocalERPnext Local
ERPnext Local
authored and
ERPnext Local
committed
fix(ToolbarItem): implement responsive widths and flexGrow; update Toolbar tests
1 parent f27e3d9 commit 25e0844

2 files changed

Lines changed: 64 additions & 208 deletions

File tree

‎packages/react-core/src/components/Toolbar/ToolbarItem.tsx‎

Lines changed: 24 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,12 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
2828
};
2929

3030
flexGrow?: {
31-
default?: 'flexGrow';
32-
sm?: 'flexGrow';
33-
md?: 'flexGrow';
34-
lg?: 'flexGrow';
35-
xl?: 'flexGrow';
36-
'2xl'?: 'flexGrow';
31+
default?: boolean;
32+
sm?: boolean;
33+
md?: boolean;
34+
lg?: boolean;
35+
xl?: boolean;
36+
'2xl'?: boolean;
3737
};
3838

3939
visibility?: {
@@ -56,117 +56,30 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
5656
alignSelf?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';
5757

5858
gap?: {
59-
default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
60-
md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
61-
lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
62-
xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
63-
'2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
59+
default?: 'gapNone' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl';
60+
sm?: 'gapNone' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl';
61+
md?: 'gapNone' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl';
62+
lg?: 'gapNone' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl';
63+
xl?: 'gapNone' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl';
64+
'2xl'?: 'gapNone' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl';
6465
};
6566

6667
columnGap?: {
67-
default?:
68-
| 'columnGapNone'
69-
| 'columnGapXs'
70-
| 'columnGapSm'
71-
| 'columnGapMd'
72-
| 'columnGapLg'
73-
| 'columnGapXl'
74-
| 'columnGap_2xl'
75-
| 'columnGap_3xl'
76-
| 'columnGap_4xl';
77-
md?:
78-
| 'columnGapNone'
79-
| 'columnGapXs'
80-
| 'columnGapSm'
81-
| 'columnGapMd'
82-
| 'columnGapLg'
83-
| 'columnGapXl'
84-
| 'columnGap_2xl'
85-
| 'columnGap_3xl'
86-
| 'columnGap_4xl';
87-
lg?:
88-
| 'columnGapNone'
89-
| 'columnGapXs'
90-
| 'columnGapSm'
91-
| 'columnGapMd'
92-
| 'columnGapLg'
93-
| 'columnGapXl'
94-
| 'columnGap_2xl'
95-
| 'columnGap_3xl'
96-
| 'columnGap_4xl';
97-
xl?:
98-
| 'columnGapNone'
99-
| 'columnGapXs'
100-
| 'columnGapSm'
101-
| 'columnGapMd'
102-
| 'columnGapLg'
103-
| 'columnGapXl'
104-
| 'columnGap_2xl'
105-
| 'columnGap_3xl'
106-
| 'columnGap_4xl';
107-
'2xl'?:
108-
| 'columnGapNone'
109-
| 'columnGapXs'
110-
| 'columnGapSm'
111-
| 'columnGapMd'
112-
| 'columnGapLg'
113-
| 'columnGapXl'
114-
| 'columnGap_2xl'
115-
| 'columnGap_3xl'
116-
| 'columnGap_4xl';
68+
default?: 'columnGapNone' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap2xl';
69+
sm?: 'columnGapNone' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap2xl';
70+
md?: 'columnGapNone' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap2xl';
71+
lg?: 'columnGapNone' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap2xl';
72+
xl?: 'columnGapNone' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap2xl';
73+
'2xl'?: 'columnGapNone' | 'columnGapSm' | 'columnGapMd' | 'columnGapLg' | 'columnGapXl' | 'columnGap2xl';
11774
};
11875

11976
rowGap?: {
120-
default?:
121-
| 'rowGapNone'
122-
| 'rowGapXs'
123-
| 'rowGapSm'
124-
| 'rowGapMd'
125-
| 'rowGapLg'
126-
| 'rowGapXl'
127-
| 'rowGap_2xl'
128-
| 'rowGap_3xl'
129-
| 'rowGap_4xl';
130-
md?:
131-
| 'rowGapNone'
132-
| 'rowGapXs'
133-
| 'rowGapSm'
134-
| 'rowGapMd'
135-
| 'rowGapLg'
136-
| 'rowGapXl'
137-
| 'rowGap_2xl'
138-
| 'rowGap_3xl'
139-
| 'rowGap_4xl';
140-
lg?:
141-
| 'rowGapNone'
142-
| 'rowGapXs'
143-
| 'rowGapSm'
144-
| 'rowGapMd'
145-
| 'rowGapLg'
146-
| 'rowGapXl'
147-
| 'rowGap_2xl'
148-
| 'rowGap_3xl'
149-
| 'rowGap_4xl';
150-
xl?:
151-
| 'rowGapNone'
152-
| 'rowGapXs'
153-
| 'rowGapSm'
154-
| 'rowGapMd'
155-
| 'rowGapLg'
156-
| 'rowGapXl'
157-
| 'rowGap_2xl'
158-
| 'rowGap_3xl'
159-
| 'rowGap_4xl';
160-
'2xl'?:
161-
| 'rowGapNone'
162-
| 'rowGapXs'
163-
| 'rowGapSm'
164-
| 'rowGapMd'
165-
| 'rowGapLg'
166-
| 'rowGapXl'
167-
| 'rowGap_2xl'
168-
| 'rowGap_3xl'
169-
| 'rowGap_4xl';
77+
default?: 'rowGapNone' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap2xl';
78+
sm?: 'rowGapNone' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap2xl';
79+
md?: 'rowGapNone' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap2xl';
80+
lg?: 'rowGapNone' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap2xl';
81+
xl?: 'rowGapNone' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap2xl';
82+
'2xl'?: 'rowGapNone' | 'rowGapSm' | 'rowGapMd' | 'rowGapLg' | 'rowGapXl' | 'rowGap2xl';
17083
};
17184

17285
rowWrap?: {
@@ -221,7 +134,6 @@ export const ToolbarItem: FunctionComponent<ToolbarItemProps> = ({
221134
<PageContext.Consumer>
222135
{({ width, getBreakpoint }) => (
223136
<div
224-
data-testid="toolbaritem"
225137
className={css(
226138
styles.toolbarItem,
227139
variant && styles.modifiers[toCamel(variant) as 'pagination' | 'label'],

‎packages/react-core/src/components/Toolbar/__tests__/Toolbar.test.tsx‎

Lines changed: 40 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@ import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
1313

1414
jest.mock('../../../helpers/GenerateId/GenerateId');
1515

16-
jest.mock('../../../helpers/GenerateId/GenerateId');
17-
1816
describe('Toolbar', () => {
1917
it('should render inset', () => {
2018
const items = (
@@ -120,122 +118,68 @@ describe('Toolbar', () => {
120118
expect(screen.getAllByRole('button', { name: 'Clear all filters' }).length).toBe(1);
121119
});
122120

123-
it('Renders with class ${styles.modifiers.noBackground} when colorVariant="no-background"', () => {
124-
const items = (
125-
<Fragment>
126-
<ToolbarItem>Test</ToolbarItem>
127-
<ToolbarItem>Test 2</ToolbarItem>
128-
<ToolbarItem variant="separator" />
129-
<ToolbarItem>Test 3 </ToolbarItem>
130-
</Fragment>
131-
);
132-
133-
render(
134-
<Toolbar id="toolbar" colorVariant="no-background" data-testid="Toolbar-test-no-background-id">
135-
<ToolbarContent>{items}</ToolbarContent>
136-
</Toolbar>
137-
);
138-
139-
expect(screen.getByTestId('Toolbar-test-no-background-id')).toHaveClass(styles.modifiers.noBackground);
140-
});
141-
142-
it('Renders with class ${styles.modifiers.primary} when colorVariant="primary"', () => {
143-
const items = (
144-
<Fragment>
145-
<ToolbarItem>Test</ToolbarItem>
146-
<ToolbarItem>Test 2</ToolbarItem>
147-
<ToolbarItem variant="separator" />
148-
<ToolbarItem>Test 3 </ToolbarItem>
149-
</Fragment>
150-
);
151-
121+
it('Renders with class when colorVariant is applied', () => {
152122
render(
153-
<Toolbar id="toolbar" colorVariant="primary" data-testid="Toolbar-test-primary-id">
154-
<ToolbarContent>{items}</ToolbarContent>
155-
</Toolbar>
156-
);
157-
158-
expect(screen.getByTestId('Toolbar-test-primary-id')).toHaveClass(styles.modifiers.primary);
159-
});
160-
161-
it('Renders with class ${styles.modifiers.secondary} when colorVariant="secondary"', () => {
162-
const items = (
163-
<Fragment>
164-
<ToolbarItem>Test</ToolbarItem>
165-
<ToolbarItem>Test 2</ToolbarItem>
166-
<ToolbarItem variant="separator" />
167-
<ToolbarItem>Test 3 </ToolbarItem>
168-
</Fragment>
169-
);
170-
171-
render(
172-
<Toolbar id="toolbar" colorVariant="secondary" data-testid="Toolbar-test-secondary-id">
173-
<ToolbarContent>{items}</ToolbarContent>
123+
<Toolbar id="toolbar" colorVariant="primary" data-testid="toolbar-color">
124+
<ToolbarContent>
125+
<ToolbarItem>Test</ToolbarItem>
126+
</ToolbarContent>
174127
</Toolbar>
175128
);
176129

177-
expect(screen.getByTestId('Toolbar-test-secondary-id')).toHaveClass(styles.modifiers.secondary);
178-
});
179-
180-
describe('ToobarContent rowWrap', () => {
181-
const bps = ['default', 'sm', 'md', 'lg', 'xl', '2xl'];
182-
183-
describe.each(bps)(`rowWrap at various breakpoints`, (bp) => {
184-
it(`should render with pf-m-wrap when rowWrap is set to wrap at ${bp}`, () => {
185-
render(
186-
<Toolbar>
187-
<ToolbarContent data-testid="toolbarconent" rowWrap={{ [bp]: 'wrap' }}>
188-
Test
189-
</ToolbarContent>
190-
</Toolbar>
191-
);
192-
const bpWrapClass = bp === 'default' ? 'pf-m-wrap' : `pf-m-wrap-on-${bp}`;
193-
194-
expect(screen.getByTestId('toolbarconent').querySelector('div')).toHaveClass(bpWrapClass);
195-
});
196-
197-
it(`should render with pf-m-nowrap when rowWrap is set to nowrap at ${bp}`, () => {
198-
render(
199-
<ToolbarContent data-testid="toolbarconent" rowWrap={{ [bp]: 'nowrap' }}>
200-
Test
201-
</ToolbarContent>
202-
);
203-
const bpNoWrapClass = bp === 'default' ? 'pf-m-nowrap' : `pf-m-nowrap-on-${bp}`;
204-
expect(screen.getByTestId('toolbarconent').querySelector('div')).toHaveClass(bpNoWrapClass);
205-
});
206-
});
130+
expect(screen.getByTestId('toolbar-color')).toHaveClass(styles.modifiers.primary);
207131
});
208132

209133
it(`Renders toolbar without ${styles.modifiers.vertical} by default`, () => {
210134
render(
211135
<Toolbar data-testid="Toolbar-test-is-not-vertical">
212136
<ToolbarContent>
213137
<ToolbarItem>Test</ToolbarItem>
214-
<ToolbarItem>Test 2</ToolbarItem>
215-
<ToolbarItem variant="separator" />
216-
<ToolbarItem>Test 3 </ToolbarItem>
217138
</ToolbarContent>
218139
</Toolbar>
219140
);
220141
expect(screen.getByTestId('Toolbar-test-is-not-vertical')).not.toHaveClass(styles.modifiers.vertical);
221142
});
222143

223-
it('Renders with class ${styles.modifiers.vertical} when isVertical is true', () => {
224-
const items = (
225-
<Fragment>
226-
<ToolbarItem>Test</ToolbarItem>
227-
<ToolbarItem>Test 2</ToolbarItem>
228-
<ToolbarItem variant="separator" />
229-
<ToolbarItem>Test 3 </ToolbarItem>
230-
</Fragment>
231-
);
232-
144+
it('Renders with vertical class when isVertical is true', () => {
233145
render(
234146
<Toolbar id="toolbar" isVertical data-testid="Toolbar-test-is-vertical">
235-
<ToolbarContent>{items}</ToolbarContent>
147+
<ToolbarContent>
148+
<ToolbarItem>Test</ToolbarItem>
149+
</ToolbarContent>
236150
</Toolbar>
237151
);
238152

239153
expect(screen.getByTestId('Toolbar-test-is-vertical')).toHaveClass(styles.modifiers.vertical);
240154
});
241155
});
156+
157+
describe('ToolbarContent rowWrap', () => {
158+
const bps = ['default', 'sm', 'md', 'lg', 'xl', '2xl'];
159+
160+
bps.forEach((bp) => {
161+
it(`should render with wrap at ${bp}`, () => {
162+
render(
163+
<Toolbar>
164+
<ToolbarContent data-testid="toolbarcontent" rowWrap={{ [bp]: 'wrap' }}>
165+
Test
166+
</ToolbarContent>
167+
</Toolbar>
168+
);
169+
const cls = bp === 'default' ? 'pf-m-wrap' : `pf-m-wrap-on-${bp}`;
170+
expect(screen.getByTestId('toolbarcontent').querySelector('div')).toHaveClass(cls);
171+
});
172+
173+
it(`should render with nowrap at ${bp}`, () => {
174+
render(
175+
<Toolbar>
176+
<ToolbarContent data-testid="toolbarcontent" rowWrap={{ [bp]: 'nowrap' }}>
177+
Test
178+
</ToolbarContent>
179+
</Toolbar>
180+
);
181+
const cls = bp === 'default' ? 'pf-m-nowrap' : `pf-m-nowrap-on-${bp}`;
182+
expect(screen.getByTestId('toolbarcontent').querySelector('div')).toHaveClass(cls);
183+
});
184+
});
185+
});

0 commit comments

Comments
 (0)