@patternfly/react-core 4.236.10 → 4.236.11

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 (5) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/package.json +5 -5
  3. package/src/components/BackToTop/__tests__/BackToTop.test.tsx +153 -15
  4. package/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap +23 -96
  5. package/src/demos/examples/DashboardHeader.js +4 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 4.236.11 (2022-09-07)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **dashboardheader:** update brand image src to absolute import path for codesandbox functionality ([#7935](https://github.com/patternfly/patternfly-react/issues/7935)) ([6190a7f](https://github.com/patternfly/patternfly-react/commit/6190a7fd51a9606c9f1bf06aa0ebd46215fbd341))
12
+
13
+
14
+
15
+
16
+
6
17
  ## 4.236.10 (2022-09-07)
7
18
 
8
19
  **Note:** Version bump only for package @patternfly/react-core
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-core",
3
- "version": "4.236.10",
3
+ "version": "4.236.11",
4
4
  "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
5
5
  "main": "dist/js/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -44,9 +44,9 @@
44
44
  "generate": "node scripts/copyStyles.js"
45
45
  },
46
46
  "dependencies": {
47
- "@patternfly/react-icons": "^4.87.10",
48
- "@patternfly/react-styles": "^4.86.10",
49
- "@patternfly/react-tokens": "^4.88.10",
47
+ "@patternfly/react-icons": "^4.87.11",
48
+ "@patternfly/react-styles": "^4.86.11",
49
+ "@patternfly/react-tokens": "^4.88.11",
50
50
  "focus-trap": "6.9.2",
51
51
  "react-dropzone": "9.0.0",
52
52
  "tippy.js": "5.1.2",
@@ -70,5 +70,5 @@
70
70
  "react": "^16.8.0 || ^17.0.0",
71
71
  "react-dom": "^16.8.0 || ^17.0.0"
72
72
  },
73
- "gitHead": "fb205f92e45be059fa7d0d3fa636e101a66a46aa"
73
+ "gitHead": "64c3bec9a5a7941503aa74c467884ea2191dd93c"
74
74
  }
package/src/components/BackToTop/__tests__/BackToTop.test.tsx CHANGED
@@ -1,22 +1,160 @@
1
- import React from 'react';
2
- import { render } from '@testing-library/react';
1
+ import React, { RefObject } from 'react';
2
+ import { fireEvent, render, screen } from '@testing-library/react';
3
3
  import { BackToTop } from '../BackToTop';
4
+ import userEvent from '@testing-library/user-event';
4
5
 
5
- describe('BackToTop', () => {
6
- test('verify basic', () => {
7
- const { asFragment } = render(<BackToTop />);
8
- expect(asFragment()).toMatchSnapshot();
9
- });
6
+ jest.mock('../../Button', () => ({
7
+ Button: ({ variant, iconPosition, children, icon }) => (
8
+ <>
9
+ <button>{children}</button>
10
+ <p>{variant}</p>
11
+ <p>{iconPosition}</p>
12
+ <div data-testid="icon">{icon}</div>
13
+ </>
14
+ )
15
+ }));
10
16
 
11
- test('verify custom class', () => {
12
- const { asFragment } = render(<BackToTop className="custom-css">test</BackToTop>);
17
+ test('Renders BackToTop', () => {
18
+ render(
19
+ <div data-testid="backtotop">
20
+ <BackToTop />
21
+ </div>
22
+ );
13
23
 
14
- expect(asFragment()).toMatchSnapshot();
15
- });
24
+ expect(screen.getByTestId('backtotop').firstChild).toBeTruthy();
25
+ });
26
+
27
+ test('Renders with the default class', () => {
28
+ render(<BackToTop />);
29
+
30
+ expect(screen.getByRole(`button`).parentElement).toHaveClass('pf-c-back-to-top');
31
+ });
32
+
33
+ test('BackToTop is not yet visible', () => {
34
+ render(<BackToTop />);
35
+
36
+ expect(screen.getByRole(`button`).parentElement).toHaveClass('pf-m-hidden');
37
+ });
38
+
39
+ test('BackToTop is visible after scrolling', () => {
40
+ render(<BackToTop />);
41
+
42
+ fireEvent.scroll(window, { target: { scrollY: 401 } });
43
+ expect(screen.getByRole(`button`).parentElement).not.toHaveClass('pf-m-hidden');
44
+ });
45
+
46
+ test('ScrollTo event is fired after clicking BackToTop', async () => {
47
+ render(<BackToTop />);
48
+ const user = userEvent.setup();
49
+ fireEvent.scroll(window, { target: { scrollY: 401 } });
50
+ global.scrollTo = jest.fn();
51
+
52
+ await user.click(screen.getByRole(`button`).parentElement as Element);
53
+ expect(global.scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
54
+ });
55
+
56
+ test('BackToTop gets hidden again after user scrolls back up', () => {
57
+ render(<BackToTop />);
58
+
59
+ fireEvent.scroll(window, { target: { scrollY: 401 } });
60
+
61
+ fireEvent.scroll(window, { target: { scrollY: 0 } });
62
+ expect(screen.getByRole(`button`).parentElement).toHaveClass('pf-m-hidden');
63
+ });
64
+
65
+ test('Renders BackToTop when isAlwaysVisible prop is set', () => {
66
+ render(<BackToTop isAlwaysVisible />);
67
+
68
+ expect(screen.getByRole(`button`).parentElement).not.toHaveClass('pf-m-hidden');
69
+ });
70
+
71
+ test('Renders with custom className prop passed', () => {
72
+ render(<BackToTop className="test-class" />);
73
+ expect(screen.getByRole(`button`).parentElement).toHaveClass('test-class');
74
+ });
75
+
76
+ test('Renders with custom title prop passed', () => {
77
+ render(<BackToTop title="Back to the Future" />);
78
+ expect(screen.getByRole(`button`).parentElement).toHaveTextContent('Back to the Future');
79
+ });
80
+
81
+ test('Renders with passed aria-label', () => {
82
+ render(<BackToTop aria-label="Back to top test" />);
83
+ expect(screen.getByRole(`button`).parentElement).toHaveAccessibleName('Back to top test');
84
+ });
85
+
86
+ test('BackToTop can be accessed via passed innerRef', () => {
87
+ const testRef: RefObject<HTMLElement> = React.createRef();
88
+ render(<BackToTop innerRef={testRef} isAlwaysVisible />);
89
+ global.scrollTo = jest.fn();
90
+ testRef.current?.click();
91
+ expect(global.scrollTo).toBeCalledTimes(1);
92
+ });
93
+
94
+ test('BackToTop reacts to scrolling inside element passed via scrollableSelector', () => {
95
+ render(
96
+ <div id="backToTopWrapper">
97
+ <BackToTop scrollableSelector="#backToTopWrapper" />
98
+ </div>
99
+ );
100
+ const wrapper = document.getElementById('backToTopWrapper');
101
+ fireEvent.scroll(wrapper as HTMLElement, { target: { scrollY: 401 } });
102
+
103
+ expect(screen.getByRole(`button`).parentElement).not.toHaveClass('pf-m-hidden');
104
+ });
105
+
106
+ test('BackToTop does not react to scrolling inside window when scrollableSelector passed', () => {
107
+ render(
108
+ <div id="backToTopWrapper">
109
+ <BackToTop scrollableSelector="#backToTopWrapper" />
110
+ </div>
111
+ );
112
+ fireEvent.scroll(window, { target: { scrollY: 401 } });
113
+
114
+ expect(screen.getByRole(`button`).parentElement).toHaveClass('pf-m-hidden');
115
+ });
116
+
117
+ test('Clicking backToTop scrolls back to top of the element passed via scrollableSelector', async () => {
118
+ render(
119
+ <div id="backToTopWrapper">
120
+ <BackToTop scrollableSelector="#backToTopWrapper" />
121
+ </div>
122
+ );
123
+ const user = userEvent.setup();
124
+ const wrapper = document.getElementById('backToTopWrapper');
125
+ fireEvent.scroll(wrapper as HTMLElement, { target: { scrollY: 401 } });
126
+ wrapper!.scrollTo = jest.fn();
127
+ await user.click(screen.getByRole(`button`).parentElement as Element);
128
+
129
+ expect(wrapper?.scrollTo).toBeCalledTimes(1);
130
+ });
131
+
132
+ test('Passes correct text content to button child component', () => {
133
+ render(<BackToTop title="Back to the future" />);
134
+
135
+ expect(screen.getByText('Back to the future')).toBeVisible();
136
+ });
137
+
138
+ test('Passes correct variant to button child component', () => {
139
+ render(<BackToTop title="Back to the future" />);
140
+
141
+ expect(screen.getByText('primary')).toBeVisible();
142
+ });
143
+
144
+ test('Passes correct iconPosition to button child component', () => {
145
+ render(<BackToTop />);
146
+
147
+ expect(screen.getByText('right')).toBeVisible();
148
+ });
149
+
150
+ test('Passes correct icon to button child component', () => {
151
+ render(<BackToTop />);
152
+
153
+ expect(screen.getByTestId('icon').firstChild).toBeTruthy();
154
+ });
16
155
 
17
- test('verify always show', () => {
18
- const { asFragment } = render(<BackToTop isAlwaysVisible>test</BackToTop>);
156
+ test('Matches the snapshot', () => {
157
+ const { asFragment } = render(<BackToTop />);
19
158
 
20
- expect(asFragment()).toMatchSnapshot();
21
- });
159
+ expect(asFragment()).toMatchSnapshot();
22
160
  });
package/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap CHANGED
@@ -1,109 +1,36 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`BackToTop verify always show 1`] = `
4
- <DocumentFragment>
5
- <div
6
- class="pf-c-back-to-top"
7
- >
8
- <button
9
- aria-disabled="false"
10
- class="pf-c-button pf-m-primary"
11
- data-ouia-component-id="OUIA-Generated-Button-primary-3"
12
- data-ouia-component-type="PF4/Button"
13
- data-ouia-safe="true"
14
- type="button"
15
- >
16
- Back to top
17
- <span
18
- class="pf-c-button__icon pf-m-end"
19
- >
20
- <svg
21
- aria-hidden="true"
22
- fill="currentColor"
23
- height="1em"
24
- role="img"
25
- style="vertical-align: -0.125em;"
26
- viewBox="0 0 320 512"
27
- width="1em"
28
- >
29
- <path
30
- d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
31
- />
32
- </svg>
33
- </span>
34
- </button>
35
- </div>
36
- </DocumentFragment>
37
- `;
38
-
39
- exports[`BackToTop verify basic 1`] = `
3
+ exports[`Matches the snapshot 1`] = `
40
4
  <DocumentFragment>
41
5
  <div
42
6
  class="pf-c-back-to-top pf-m-hidden"
43
7
  >
44
- <button
45
- aria-disabled="false"
46
- class="pf-c-button pf-m-primary"
47
- data-ouia-component-id="OUIA-Generated-Button-primary-1"
48
- data-ouia-component-type="PF4/Button"
49
- data-ouia-safe="true"
50
- type="button"
51
- >
8
+ <button>
52
9
  Back to top
53
- <span
54
- class="pf-c-button__icon pf-m-end"
55
- >
56
- <svg
57
- aria-hidden="true"
58
- fill="currentColor"
59
- height="1em"
60
- role="img"
61
- style="vertical-align: -0.125em;"
62
- viewBox="0 0 320 512"
63
- width="1em"
64
- >
65
- <path
66
- d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
67
- />
68
- </svg>
69
- </span>
70
10
  </button>
71
- </div>
72
- </DocumentFragment>
73
- `;
74
-
75
- exports[`BackToTop verify custom class 1`] = `
76
- <DocumentFragment>
77
- <div
78
- class="pf-c-back-to-top pf-m-hidden custom-css"
79
- >
80
- <button
81
- aria-disabled="false"
82
- class="pf-c-button pf-m-primary"
83
- data-ouia-component-id="OUIA-Generated-Button-primary-2"
84
- data-ouia-component-type="PF4/Button"
85
- data-ouia-safe="true"
86
- type="button"
11
+ <p>
12
+ primary
13
+ </p>
14
+ <p>
15
+ right
16
+ </p>
17
+ <div
18
+ data-testid="icon"
87
19
  >
88
- Back to top
89
- <span
90
- class="pf-c-button__icon pf-m-end"
20
+ <svg
21
+ aria-hidden="true"
22
+ fill="currentColor"
23
+ height="1em"
24
+ role="img"
25
+ style="vertical-align: -0.125em;"
26
+ viewBox="0 0 320 512"
27
+ width="1em"
91
28
  >
92
- <svg
93
- aria-hidden="true"
94
- fill="currentColor"
95
- height="1em"
96
- role="img"
97
- style="vertical-align: -0.125em;"
98
- viewBox="0 0 320 512"
99
- width="1em"
100
- >
101
- <path
102
- d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
103
- />
104
- </svg>
105
- </span>
106
- </button>
29
+ <path
30
+ d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
31
+ />
32
+ </svg>
33
+ </div>
107
34
  </div>
108
35
  </DocumentFragment>
109
36
  `;
package/src/demos/examples/DashboardHeader.js CHANGED
@@ -28,6 +28,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
28
28
  import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
29
29
  import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
30
30
  import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
31
+ import pfColorLogo from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
31
32
 
32
33
  export default class DashboardHeader extends React.Component {
33
34
  constructor(props) {
@@ -185,11 +186,11 @@ export default class DashboardHeader extends React.Component {
185
186
  <MastheadBrand>
186
187
  <Brand
187
188
  widths={{ default: '180px', md: '180px', '2xl': '220px' }}
188
- src="/assets/images/logo__pf--reverse--base.png"
189
+ src={pfColorLogo}
189
190
  alt="Fallback patternFly default logo"
190
191
  >
191
- <source media="(min-width: 768px)" srcSet="/assets/images/logo__pf--reverse-on-md.svg" />
192
- <source srcSet="/assets/images/logo__pf--reverse--base.svg" />
192
+ <source media="(min-width: 768px)" srcSet={pfColorLogo} />
193
+ <source srcSet={pfColorLogo} />
193
194
  </Brand>
194
195
  </MastheadBrand>
195
196
  </MastheadMain>