Skip to content

Commit ab06e80

Browse files
oandregalntsekouras
oandregal
and
ntsekouras
authored
wordpress/dataviews: migrate to Stack (WordPress#74174)
Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
1 parent e900161 commit ab06e80

File tree

43 files changed

+443
-395
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+443
-395
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/dataviews/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
### Code Quality
66

7+
- Replace HStack/VStack from `wordpress/components` by Stack from `wordpress/ui`. [#74174](https://github.com/WordPress/gutenberg/pull/74174)
78
- DataViews: Remove extra wrapper for GridItem. [#73665](https://github.com/WordPress/gutenberg/pull/73665)
89
- Field API: move validation to the field type. [#73642](https://github.com/WordPress/gutenberg/pull/73642)
910
- Field API: move format logic to the field type. [#73922](https://github.com/WordPress/gutenberg/pull/73922)

‎packages/dataviews/README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1071,14 +1071,14 @@ Component to render UI in a modal for the action.
10711071
return (
10721072
<form onSubmit={ onSubmit }>
10731073
<p>Modal UI</p>
1074-
<HStack>
1074+
<Stack direction="row">
10751075
<Button variant="tertiary" onClick={ closeModal }>
10761076
Cancel
10771077
</Button>
10781078
<Button variant="primary" type="submit">
10791079
Submit
10801080
</Button>
1081-
</HStack>
1081+
</Stack>
10821082
</form>
10831083
);
10841084
};
@@ -1202,10 +1202,10 @@ Example:
12021202
id: 'title',
12031203
type: 'text',
12041204
header: (
1205-
<HStack spacing={ 1 } justify="start">
1205+
<Stack direction="row" gap="2xs" justify="start">
12061206
<Icon icon={ icon } />
12071207
<span>Title</span>
1208-
</HStack>
1208+
</Stack>
12091209
),
12101210
}
12111211
```

‎packages/dataviews/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@
6767
"@wordpress/keycodes": "file:../keycodes",
6868
"@wordpress/primitives": "file:../primitives",
6969
"@wordpress/private-apis": "file:../private-apis",
70+
"@wordpress/theme": "file:../theme",
71+
"@wordpress/ui": "file:../ui",
7072
"@wordpress/url": "file:../url",
7173
"@wordpress/warning": "file:../warning",
7274
"clsx": "^2.1.1",

‎packages/dataviews/src/components/dataviews-bulk-actions/index.tsx‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,13 @@ import type { ReactElement } from 'react';
66
/**
77
* WordPress dependencies
88
*/
9-
import {
10-
Button,
11-
CheckboxControl,
12-
__experimentalHStack as HStack,
13-
} from '@wordpress/components';
9+
import { Button, CheckboxControl } from '@wordpress/components';
1410
import { __, sprintf, _n } from '@wordpress/i18n';
1511
import { useMemo, useState, useRef, useContext } from '@wordpress/element';
1612
import { useRegistry } from '@wordpress/data';
1713
import { closeSmall } from '@wordpress/icons';
1814
import { useViewportMatch } from '@wordpress/compose';
15+
import { Stack } from '@wordpress/ui';
1916

2017
/**
2118
* Internal dependencies
@@ -263,10 +260,11 @@ function renderFooterContent< Item >(
263260
data.length
264261
);
265262
return (
266-
<HStack
267-
expanded={ false }
263+
<Stack
264+
direction="row"
268265
className="dataviews-bulk-actions-footer__container"
269-
spacing={ 3 }
266+
gap="sm"
267+
align="center"
270268
>
271269
<BulkSelectionCheckbox
272270
selection={ selection }
@@ -278,10 +276,10 @@ function renderFooterContent< Item >(
278276
<span className="dataviews-bulk-actions-footer__item-count">
279277
{ message }
280278
</span>
281-
<HStack
279+
<Stack
280+
direction="row"
282281
className="dataviews-bulk-actions-footer__action-buttons"
283-
expanded={ false }
284-
spacing={ 1 }
282+
gap="2xs"
285283
>
286284
{ actionsToShow.map( ( action ) => {
287285
return (
@@ -308,8 +306,8 @@ function renderFooterContent< Item >(
308306
} }
309307
/>
310308
) }
311-
</HStack>
312-
</HStack>
309+
</Stack>
310+
</Stack>
313311
);
314312
}
315313

‎packages/dataviews/src/components/dataviews-filters/filter.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ import type { RefObject } from 'react';
99
*/
1010
import {
1111
Dropdown,
12-
__experimentalVStack as VStack,
13-
__experimentalHStack as HStack,
1412
FlexItem,
1513
SelectControl,
1614
Tooltip,
@@ -19,6 +17,7 @@ import {
1917
import { __, sprintf } from '@wordpress/i18n';
2018
import { useMemo, useRef } from '@wordpress/element';
2119
import { closeSmall } from '@wordpress/icons';
20+
import { Stack } from '@wordpress/ui';
2221

2322
/**
2423
* Internal dependencies
@@ -93,10 +92,12 @@ function OperatorSelector( {
9392
const value = currentFilter?.operator || filter.operators[ 0 ];
9493
return (
9594
operatorOptions.length > 1 && (
96-
<HStack
97-
spacing={ 2 }
95+
<Stack
96+
direction="row"
97+
gap="xs"
9898
justify="flex-start"
9999
className="dataviews-filters__summary-operators-container"
100+
align="center"
100101
>
101102
<FlexItem className="dataviews-filters__summary-operators-filter-name">
102103
{ filter.name }
@@ -164,7 +165,7 @@ function OperatorSelector( {
164165
variant="minimal"
165166
hideLabelFromVision
166167
/>
167-
</HStack>
168+
</Stack>
168169
)
169170
);
170171
}
@@ -348,7 +349,7 @@ export default function Filter( {
348349
) }
349350
renderContent={ () => {
350351
return (
351-
<VStack spacing={ 0 } justify="flex-start">
352+
<Stack direction="column" justify="flex-start">
352353
<OperatorSelector { ...commonProps } />
353354
{ commonProps.filter.hasElements ? (
354355
<SearchWidget
@@ -361,7 +362,7 @@ export default function Filter( {
361362
) : (
362363
<InputWidget { ...commonProps } fields={ fields } />
363364
) }
364-
</VStack>
365+
</Stack>
365366
);
366367
} }
367368
/>

‎packages/dataviews/src/components/dataviews-filters/filters.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* WordPress dependencies
33
*/
44
import { memo, useContext, useRef } from '@wordpress/element';
5-
import { __experimentalHStack as HStack } from '@wordpress/components';
5+
import { Stack } from '@wordpress/ui';
66

77
/**
88
* Internal dependencies
@@ -59,14 +59,16 @@ function Filters( { className }: { className?: string } ) {
5959
);
6060

6161
return (
62-
<HStack
62+
<Stack
63+
direction="row"
6364
justify="flex-start"
65+
gap="xs"
6466
style={ { width: 'fit-content' } }
65-
wrap
67+
wrap="wrap"
6668
className={ className }
6769
>
6870
{ filterComponents }
69-
</HStack>
71+
</Stack>
7072
);
7173
}
7274

‎packages/dataviews/src/components/dataviews-footer/index.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/**
22
* WordPress dependencies
33
*/
4-
import { __experimentalHStack as HStack } from '@wordpress/components';
54
import { useContext } from '@wordpress/element';
5+
import { Stack } from '@wordpress/ui';
66

77
/**
88
* Internal dependencies
@@ -37,14 +37,16 @@ export default function DataViewsFooter() {
3737
}
3838
return (
3939
!! totalItems && (
40-
<HStack
41-
expanded={ false }
40+
<Stack
41+
direction="row"
4242
justify="end"
43+
align="center"
4344
className="dataviews-footer"
45+
gap="xs"
4446
>
4547
{ hasBulkActions && <BulkActionsFooter /> }
4648
<DataViewsPagination />
47-
</HStack>
49+
</Stack>
4850
)
4951
);
5052
}

‎packages/dataviews/src/components/dataviews-item-actions/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ import type { MouseEventHandler } from 'react';
99
import {
1010
Button,
1111
Modal,
12-
__experimentalHStack as HStack,
1312
privateApis as componentsPrivateApis,
1413
} from '@wordpress/components';
1514
import { __ } from '@wordpress/i18n';
1615
import { useMemo, useState } from '@wordpress/element';
1716
import { moreVertical } from '@wordpress/icons';
1817
import { useRegistry } from '@wordpress/data';
1918
import { useViewportMatch } from '@wordpress/compose';
19+
import { Stack } from '@wordpress/ui';
2020

2121
/**
2222
* Internal dependencies
@@ -212,8 +212,8 @@ export default function ItemActions< Item >( {
212212
}
213213

214214
return (
215-
<HStack
216-
spacing={ 0 }
215+
<Stack
216+
direction="row"
217217
justify="flex-end"
218218
className="dataviews-item-actions"
219219
style={ {
@@ -233,7 +233,7 @@ export default function ItemActions< Item >( {
233233
registry={ registry }
234234
/>
235235
) }
236-
</HStack>
236+
</Stack>
237237
);
238238
}
239239

‎packages/dataviews/src/components/dataviews-pagination/index.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
/**
22
* WordPress dependencies
33
*/
4-
import {
5-
Button,
6-
__experimentalHStack as HStack,
7-
SelectControl,
8-
} from '@wordpress/components';
4+
import { Button, SelectControl } from '@wordpress/components';
95
import { createInterpolateElement, memo, useContext } from '@wordpress/element';
106
import { sprintf, __, _x, isRTL } from '@wordpress/i18n';
117
import { next, previous } from '@wordpress/icons';
8+
import { Stack } from '@wordpress/ui';
129

1310
/**
1411
* Internal dependencies
@@ -49,16 +46,18 @@ export function DataViewsPagination() {
4946
return (
5047
!! totalItems &&
5148
totalPages !== 1 && (
52-
<HStack
53-
expanded={ false }
49+
<Stack
50+
direction="row"
5451
className="dataviews-pagination"
5552
justify="end"
56-
spacing={ 6 }
53+
align="center"
54+
gap="lg"
5755
>
58-
<HStack
56+
<Stack
57+
direction="row"
5958
justify="flex-start"
60-
expanded={ false }
61-
spacing={ 1 }
59+
align="center"
60+
gap="2xs"
6261
className="dataviews-pagination__page-select"
6362
>
6463
{ createInterpolateElement(
@@ -90,8 +89,8 @@ export function DataViewsPagination() {
9089
),
9190
}
9291
) }
93-
</HStack>
94-
<HStack expanded={ false } spacing={ 1 }>
92+
</Stack>
93+
<Stack direction="row" gap="2xs" align="center">
9594
<Button
9695
onClick={ () =>
9796
onChangeView( {
@@ -119,8 +118,8 @@ export function DataViewsPagination() {
119118
size="compact"
120119
tooltipPosition="top"
121120
/>
122-
</HStack>
123-
</HStack>
121+
</Stack>
122+
</Stack>
124123
)
125124
);
126125
}

0 commit comments

Comments
 (0)