@patternfly/react-core 4.229.0 → 4.230.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/esm/components/Page/Page.d.ts +13 -0
  3. package/dist/esm/components/Page/Page.d.ts.map +1 -1
  4. package/dist/esm/components/Page/Page.js +18 -19
  5. package/dist/esm/components/Page/Page.js.map +1 -1
  6. package/dist/esm/components/Page/PageBreadcrumb.d.ts +11 -2
  7. package/dist/esm/components/Page/PageBreadcrumb.d.ts.map +1 -1
  8. package/dist/esm/components/Page/PageBreadcrumb.js +5 -2
  9. package/dist/esm/components/Page/PageBreadcrumb.js.map +1 -1
  10. package/dist/esm/components/Page/PageGroup.d.ts +11 -2
  11. package/dist/esm/components/Page/PageGroup.d.ts.map +1 -1
  12. package/dist/esm/components/Page/PageGroup.js +5 -2
  13. package/dist/esm/components/Page/PageGroup.js.map +1 -1
  14. package/dist/esm/components/Page/PageNavigation.d.ts +11 -2
  15. package/dist/esm/components/Page/PageNavigation.d.ts.map +1 -1
  16. package/dist/esm/components/Page/PageNavigation.js +5 -2
  17. package/dist/esm/components/Page/PageNavigation.js.map +1 -1
  18. package/dist/esm/components/Page/PageSection.d.ts +10 -1
  19. package/dist/esm/components/Page/PageSection.d.ts.map +1 -1
  20. package/dist/esm/components/Page/PageSection.js +4 -2
  21. package/dist/esm/components/Page/PageSection.js.map +1 -1
  22. package/dist/esm/helpers/constants.d.ts +14 -0
  23. package/dist/esm/helpers/constants.d.ts.map +1 -1
  24. package/dist/esm/helpers/constants.js +24 -0
  25. package/dist/esm/helpers/constants.js.map +1 -1
  26. package/dist/esm/helpers/util.d.ts +8 -1
  27. package/dist/esm/helpers/util.d.ts.map +1 -1
  28. package/dist/esm/helpers/util.js +36 -9
  29. package/dist/esm/helpers/util.js.map +1 -1
  30. package/dist/js/components/Page/Page.d.ts +13 -0
  31. package/dist/js/components/Page/Page.d.ts.map +1 -1
  32. package/dist/js/components/Page/Page.js +17 -18
  33. package/dist/js/components/Page/Page.js.map +1 -1
  34. package/dist/js/components/Page/PageBreadcrumb.d.ts +11 -2
  35. package/dist/js/components/Page/PageBreadcrumb.d.ts.map +1 -1
  36. package/dist/js/components/Page/PageBreadcrumb.js +5 -2
  37. package/dist/js/components/Page/PageBreadcrumb.js.map +1 -1
  38. package/dist/js/components/Page/PageGroup.d.ts +11 -2
  39. package/dist/js/components/Page/PageGroup.d.ts.map +1 -1
  40. package/dist/js/components/Page/PageGroup.js +5 -2
  41. package/dist/js/components/Page/PageGroup.js.map +1 -1
  42. package/dist/js/components/Page/PageNavigation.d.ts +11 -2
  43. package/dist/js/components/Page/PageNavigation.d.ts.map +1 -1
  44. package/dist/js/components/Page/PageNavigation.js +5 -2
  45. package/dist/js/components/Page/PageNavigation.js.map +1 -1
  46. package/dist/js/components/Page/PageSection.d.ts +10 -1
  47. package/dist/js/components/Page/PageSection.d.ts.map +1 -1
  48. package/dist/js/components/Page/PageSection.js +4 -2
  49. package/dist/js/components/Page/PageSection.js.map +1 -1
  50. package/dist/js/helpers/constants.d.ts +14 -0
  51. package/dist/js/helpers/constants.d.ts.map +1 -1
  52. package/dist/js/helpers/constants.js +26 -1
  53. package/dist/js/helpers/constants.js.map +1 -1
  54. package/dist/js/helpers/util.d.ts +8 -1
  55. package/dist/js/helpers/util.d.ts.map +1 -1
  56. package/dist/js/helpers/util.js +37 -9
  57. package/dist/js/helpers/util.js.map +1 -1
  58. package/dist/umd/react-core.js +155 -65
  59. package/dist/umd/react-core.min.js +6 -5
  60. package/package.json +5 -5
  61. package/src/components/Page/Page.tsx +58 -21
  62. package/src/components/Page/PageBreadcrumb.tsx +37 -20
  63. package/src/components/Page/PageGroup.tsx +35 -19
  64. package/src/components/Page/PageNavigation.tsx +37 -20
  65. package/src/components/Page/PageSection.tsx +41 -25
  66. package/src/components/Page/__tests__/Page.test.tsx +126 -2
  67. package/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap +683 -14
  68. package/src/demos/Page/Page.md +356 -3
  69. package/src/helpers/constants.ts +28 -0
  70. package/src/helpers/util.ts +44 -9
package/src/components/Page/__tests__/Page.test.tsx CHANGED
@@ -95,6 +95,74 @@ describe('Page', () => {
95
95
  expect(asFragment()).toMatchSnapshot();
96
96
  });
97
97
 
98
+ test('Verify sticky top breadcrumb on all height breakpoints', () => {
99
+ const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
100
+ const Sidebar = <PageSidebar isNavOpen />;
101
+ const PageBreadcrumb = () => (
102
+ <Breadcrumb>
103
+ <BreadcrumbItem>Section Home</BreadcrumbItem>
104
+ <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
105
+ <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
106
+ <BreadcrumbItem to="#" isActive>
107
+ Section Landing
108
+ </BreadcrumbItem>
109
+ </Breadcrumb>
110
+ );
111
+
112
+ const { asFragment } = render(
113
+ <Page
114
+ {...props}
115
+ header={Header}
116
+ sidebar={Sidebar}
117
+ breadcrumb={<PageBreadcrumb />}
118
+ breadcrumbProps={{ stickyOnBreakpoint: { sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' } }}
119
+ >
120
+ <PageSection variant="default">Section with default background</PageSection>
121
+ <PageSection variant="light">Section with light background</PageSection>
122
+ <PageSection variant="dark">Section with dark background</PageSection>
123
+ <PageSection variant="darker">Section with darker background</PageSection>
124
+ </Page>
125
+ );
126
+
127
+ expect(screen.getByRole('main')).not.toHaveAttribute('id');
128
+ expect(asFragment()).toMatchSnapshot();
129
+ });
130
+
131
+ test('Verify sticky bottom breadcrumb on all height breakpoints', () => {
132
+ const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
133
+ const Sidebar = <PageSidebar isNavOpen />;
134
+ const PageBreadcrumb = () => (
135
+ <Breadcrumb>
136
+ <BreadcrumbItem>Section Home</BreadcrumbItem>
137
+ <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
138
+ <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
139
+ <BreadcrumbItem to="#" isActive>
140
+ Section Landing
141
+ </BreadcrumbItem>
142
+ </Breadcrumb>
143
+ );
144
+
145
+ const { asFragment } = render(
146
+ <Page
147
+ {...props}
148
+ header={Header}
149
+ sidebar={Sidebar}
150
+ breadcrumb={<PageBreadcrumb />}
151
+ breadcrumbProps={{
152
+ stickyOnBreakpoint: { sm: 'bottom', md: 'bottom', lg: 'bottom', xl: 'bottom', '2xl': 'bottom' }
153
+ }}
154
+ >
155
+ <PageSection variant="default">Section with default background</PageSection>
156
+ <PageSection variant="light">Section with light background</PageSection>
157
+ <PageSection variant="dark">Section with dark background</PageSection>
158
+ <PageSection variant="darker">Section with darker background</PageSection>
159
+ </Page>
160
+ );
161
+
162
+ expect(screen.getByRole('main')).not.toHaveAttribute('id');
163
+ expect(asFragment()).toMatchSnapshot();
164
+ });
165
+
98
166
  test('Check page to verify breadcrumb is created - PageBreadcrumb syntax', () => {
99
167
  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
100
168
  const Sidebar = <PageSidebar isNavOpen />;
@@ -122,6 +190,62 @@ describe('Page', () => {
122
190
  expect(asFragment()).toMatchSnapshot();
123
191
  });
124
192
 
193
+ test('Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
194
+ const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
195
+ const Sidebar = <PageSidebar isNavOpen />;
196
+
197
+ const { asFragment } = render(
198
+ <Page {...props} header={Header} sidebar={Sidebar}>
199
+ <PageBreadcrumb stickyOnBreakpoint={{ sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' }}>
200
+ <Breadcrumb>
201
+ <BreadcrumbItem>Section Home</BreadcrumbItem>
202
+ <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
203
+ <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
204
+ <BreadcrumbItem to="#" isActive>
205
+ Section Landing
206
+ </BreadcrumbItem>
207
+ </Breadcrumb>
208
+ </PageBreadcrumb>
209
+ <PageSection variant="default">Section with default background</PageSection>
210
+ <PageSection variant="light">Section with light background</PageSection>
211
+ <PageSection variant="dark">Section with dark background</PageSection>
212
+ <PageSection variant="darker">Section with darker background</PageSection>
213
+ </Page>
214
+ );
215
+
216
+ expect(screen.getByRole('main')).not.toHaveAttribute('id');
217
+ expect(asFragment()).toMatchSnapshot();
218
+ });
219
+
220
+ test('Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
221
+ const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
222
+ const Sidebar = <PageSidebar isNavOpen />;
223
+
224
+ const { asFragment } = render(
225
+ <Page {...props} header={Header} sidebar={Sidebar}>
226
+ <PageBreadcrumb
227
+ stickyOnBreakpoint={{ sm: 'bottom', md: 'bottom', lg: 'bottom', xl: 'bottom', '2xl': 'bottom' }}
228
+ >
229
+ <Breadcrumb>
230
+ <BreadcrumbItem>Section Home</BreadcrumbItem>
231
+ <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
232
+ <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
233
+ <BreadcrumbItem to="#" isActive>
234
+ Section Landing
235
+ </BreadcrumbItem>
236
+ </Breadcrumb>
237
+ </PageBreadcrumb>
238
+ <PageSection variant="default">Section with default background</PageSection>
239
+ <PageSection variant="light">Section with light background</PageSection>
240
+ <PageSection variant="dark">Section with dark background</PageSection>
241
+ <PageSection variant="darker">Section with darker background</PageSection>
242
+ </Page>
243
+ );
244
+
245
+ expect(screen.getByRole('main')).not.toHaveAttribute('id');
246
+ expect(asFragment()).toMatchSnapshot();
247
+ });
248
+
125
249
  test('Check page to verify nav is created - PageNavigation syntax', () => {
126
250
  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
127
251
  const Sidebar = <PageSidebar isNavOpen />;
@@ -158,7 +282,7 @@ describe('Page', () => {
158
282
 
159
283
  const { asFragment } = render(
160
284
  <Page {...props} header={Header} sidebar={Sidebar}>
161
- <PageGroup sticky="bottom">
285
+ <PageGroup stickyOnBreakpoint={{ default: 'bottom' }}>
162
286
  <PageBreadcrumb>
163
287
  <Breadcrumb>
164
288
  <BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -232,7 +356,7 @@ describe('Page', () => {
232
356
  tertiaryNav={nav}
233
357
  isBreadcrumbGrouped
234
358
  isTertiaryNavGrouped
235
- groupProps={{ sticky: 'bottom', hasShadowTop: true }}
359
+ groupProps={{ stickyOnBreakpoint: { default: 'bottom' }, hasShadowTop: true }}
236
360
  >
237
361
  <PageSection variant="default">Section with default background</PageSection>
238
362
  <PageSection variant="light">Section with light background</PageSection>