@justeattakeaway/pie-modal 0.14.0 → 0.17.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 (19) hide show
  1. package/.eslintignore +5 -0
  2. package/.turbo/turbo-build.log +5 -5
  3. package/CHANGELOG.md +45 -0
  4. package/README.md +31 -17
  5. package/dist/index.js +1442 -204
  6. package/dist/types/packages/components/pie-modal/src/defs.d.ts +46 -25
  7. package/dist/types/packages/components/pie-modal/src/defs.d.ts.map +1 -1
  8. package/dist/types/packages/components/pie-modal/src/index.d.ts +26 -10
  9. package/dist/types/packages/components/pie-modal/src/index.d.ts.map +1 -1
  10. package/package.json +6 -1
  11. package/playwright/index.ts +1 -1
  12. package/playwright-lit-visual.config.ts +0 -1
  13. package/playwright-lit.config.ts +1 -2
  14. package/src/defs.ts +57 -30
  15. package/src/index.ts +132 -57
  16. package/src/modal.scss +45 -2
  17. package/test/component/pie-modal.spec.ts +163 -0
  18. package/test/visual/pie-modal.spec.ts +200 -26
  19. package/tsconfig.json +1 -1
package/.eslintignore ADDED
@@ -0,0 +1,5 @@
1
+ .turbo
2
+ dist
3
+ node_modules
4
+ lit-browsers-report
5
+ lit-visual-report
package/.turbo/turbo-build.log CHANGED
@@ -1,14 +1,14 @@
1
- [9:56:38 AM] @custom-elements-manifest/analyzer: Created new manifest.
1
+ [3:19:34 PM] @custom-elements-manifest/analyzer: Created new manifest.
2
2
  react wrapper has been added!
3
3
  vite v4.3.9 building for production...
4
4
  transforming...
5
- ✓ 27 modules transformed.
5
+ ✓ 28 modules transformed.
6
6
  rendering chunks...
7
7
  computing gzip size...
8
- dist/index.js 20.62 kB │ gzip: 5.72 kB
9
8
  dist/react.js 59.27 kB │ gzip: 15.99 kB
9
+ dist/index.js 70.71 kB │ gzip: 19.04 kB
10
10
  
11
11
  [vite:dts] Start generate declaration files...
12
- ✓ built in 12.68s
13
- [vite:dts] Declaration files built in 11549ms.
12
+ ✓ built in 12.06s
13
+ [vite:dts] Declaration files built in 10809ms.
14
14
  
package/CHANGELOG.md CHANGED
@@ -1,5 +1,50 @@
1
1
  # @justeattakeaway/pie-modal
2
2
 
3
+ ## 0.17.0
4
+
5
+ ### Minor Changes
6
+
7
+ - - [Changed] - updated Modal component dependencies adding the `dialog-polyfill` package ([#678](https://github.com/justeattakeaway/pie/pull/678)) by [@fernandofranca](https://github.com/fernandofranca)
8
+
9
+ - [Changed] - updated Modal component to use `dialog-polyfill`
10
+ - [Changed] - updated Modal documentation regarding the legacy browser support for Dialog element and polyfill usage and limitations
11
+ - [Changed] - vanilla example app for testing Modal with `dialog-polyfill`
12
+
13
+ ## 0.16.0
14
+
15
+ ### Minor Changes
16
+
17
+ - [Added] - hasStackedActions to pie-modal action buttons ([#650](https://github.com/justeattakeaway/pie/pull/650)) by [@ashleynolan](https://github.com/ashleynolan)
18
+
19
+ - [Fixed] - Prevent tree-shaking of components in storybook ([#667](https://github.com/justeattakeaway/pie/pull/667)) by [@xander-marjoram](https://github.com/xander-marjoram)
20
+
21
+ [Removed] - Built webc icons from source control
22
+ [Added] - Type declaration files for components
23
+ [Added] - Types for pie-icons
24
+ [Added] - TS version of pie-icons-configs/config.js (Will be used after DSW-1025)
25
+ [Added] - Webc icon tests for width, height and base classes
26
+ [Changed] - Update pie-icons-webc build to generate a slightly different template for regular and large icons (using different types, etc.)
27
+ [Changed] - Update pie-icons-webc rollup config to remove commonjs build
28
+ [Changed] - Use `just-kebab-case` and `just-pascal-case` instead of `kebab-case` and `pascal-case` to simplify usage (and they're more recently maintained)
29
+
30
+ - [Added] - New ActionProps type for modal leading/supporting actions ([#670](https://github.com/justeattakeaway/pie/pull/670)) by [@xander-marjoram](https://github.com/xander-marjoram)
31
+
32
+ ### Patch Changes
33
+
34
+ - [Fixed] - Re-add property decorator for modal position prop ([#676](https://github.com/justeattakeaway/pie/pull/676)) by [@xander-marjoram](https://github.com/xander-marjoram)
35
+
36
+ ## 0.15.0
37
+
38
+ ### Minor Changes
39
+
40
+ - [Added] - isFooterPinned property to modal which offers more scrolling options to consumers ([#648](https://github.com/justeattakeaway/pie/pull/648)) by [@jamieomaguire](https://github.com/jamieomaguire)
41
+
42
+ - [Added] - Modal aria labels to close, back and loading elements ([#652](https://github.com/justeattakeaway/pie/pull/652)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
43
+
44
+ - [Changed] - Add js/ts linting and fix errors ([#653](https://github.com/justeattakeaway/pie/pull/653)) by [@jamieomaguire](https://github.com/jamieomaguire)
45
+
46
+ - [Added] SupportingAction prop to modal ([#643](https://github.com/justeattakeaway/pie/pull/643)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
47
+
3
48
  ## 0.14.0
4
49
 
5
50
  ### Minor Changes
package/README.md CHANGED
@@ -15,6 +15,7 @@
15
15
  3. [Importing the component](#importing-the-component)
16
16
  4. [Props](#props)
17
17
  5. [Testing](#testing)
18
+ 5. [Legacy browser support](#legacy-browser-support)
18
19
 
19
20
  # pie-modal
20
21
 
@@ -57,23 +58,23 @@ import { PieModal } from '@justeattakeaway/pie-modal/dist/react';
57
58
 
58
59
  ## Props
59
60
 
60
- | Property | Type | Default | Description |
61
- |---|---|---|---|
62
- | headingLevel | `String` | `h2` | |
63
-
64
- | Property | Type | Default | Description |
65
- |---|---|---|---|
66
- | heading | `String` | n/a (Required) | The heading text of the modal |
67
- | headingLevel | `String` | `h2` | The HTML tag to use for the modal's heading (can be `h1`-`h6`) |
68
- | isDismissible | `Boolean` | `false` | If true, the modal includes a close button and can be dismissed by clicking on the backdrop or pressing the Esc key |
69
- | hasBackButton | `Boolean` | `false` | If true, the modal includes a back button which closes the modal when clicked |
70
- | isFullWidthBelowMid | `Boolean` | `false` | If true and the page is narrower than the mid breakpoint, a **medium-sized** modal will take up the full width of the screen. |
71
- | isOpen | `Boolean` | `false` | Controls if the modal element is open or closed |
72
- | isLoading | `Boolean` | `false` | When true, displays a loading spinner in the modal |
73
- | size | `String` | `medium` | Determines the maximum width of the modal. Large modals will expand to fill the entire page width at narrow viewports. Can be `small`, `medium` or `large`. |
74
- | position | `String` | `center` | The position of the modal; this controls where it will appear on the page. Can be `top` or `center`. |
75
- | returnFocusAfterCloseSelector | `String` | `undefined` | If provided, focus will be sent to the first element that matches this selector when the modal is closed. If not provided, the `dialog` element will return focus to the element that opened the modal. |
76
- | leadingAction | `Object` | `undefined` | An object representing the leading action of the modal. It has the following properties:<br>- text (required): The text to display on the leading action button.<br>- variant: The variant of the leading action button. Please see [pie-button](https://github.com/justeattakeaway/pie/blob/main/packages/components/pie-button/README.md#props) for options. Defaults to primary if not provided.<br>- ariaLabel: The ARIA label for the leading action button. Example: `leadingAction = { text: "Example Text", variant: "secondary", ariaLabel: "Example Aria Label" }` |
61
+ | Property | Type | Default | Description |
62
+ |-------------------------------|-----------|----------------|-------------|
63
+ | aria | `Object` | `undefined` | An object representing the aria labels for the `close` & `back` buttons within the modal as well as the `isLoading` state labels (`aria-label` & `aria-busy`). |
64
+ | hasBackButton | `Boolean` | `false` | If true, the modal includes a back button which closes the modal when clicked. |
65
+ | hasStackedActions | `Boolean` | `false` | If true, the action buttons will be stacked (full width) at narrow breakpoints. |
66
+ | heading | `String` | n/a (Required) | The heading text of the modal. |
67
+ | headingLevel | `String` | `h2` | The HTML tag to use for the modal's heading (can be `h1`-`h6`). |
68
+ | isDismissible | `Boolean` | `false` | If true, the modal includes a close button and can be dismissed by clicking on the backdrop or pressing the `Esc` key. |
69
+ | isFooterPinned | `Boolean` | `true` | When false, the modal footer will scroll with the content inside the modal body. |
70
+ | isFullWidthBelowMid | `Boolean` | `false` | If true and the page is narrower than the mid breakpoint, a **medium-sized** modal will take up the full width of the screen. |
71
+ | isLoading | `Boolean` | `false` | When true, displays a loading spinner in the modal |
72
+ | isOpen | `Boolean` | `false` | Controls if the modal element is open or closed |
73
+ | leadingAction | `Object` | `undefined` | An object representing the leading action of the modal. It has the following properties:<br>- text (required): The text to display on the leading action button.<br>- variant: The variant of the leading action button. Please see [pie-button](https://github.com/justeattakeaway/pie/blob/main/packages/components/pie-button/README.md#props) for options. Defaults to primary if not provided.<br>- ariaLabel: The ARIA label for the leading action button. Example: `leadingAction = { text: "Example Text", variant: "secondary", ariaLabel: "Example Aria Label" }` |
74
+ | position | `String` | `center` | The position of the modal; this controls where it will appear on the page. Can be `top` or `center`. |
75
+ | returnFocusAfterCloseSelector | `String` | `undefined` | If provided, focus will be sent to the first element that matches this selector when the modal is closed. If not provided, the `dialog` element will return focus to the element that opened the modal. |
76
+ | size | `String` | `medium` | Determines the maximum width of the modal. Large modals will expand to fill the entire page width at narrow viewports. Can be `small`, `medium` or `large`. |
77
+ | supportingAction | `Object` | `undefined` | An object representing the supporting action of the modal. It has the following properties:<br>- text (required): The text to display on the supporting action button.<br>- variant: The variant of the supporting action button. Please see [pie-button](https://github.com/justeattakeaway/pie/blob/main/packages/components/pie-button/README.md#props) for options. Defaults to ghost if not provided.<br>- ariaLabel: The ARIA label for the supporting action button. Example: `supportingAction = { text: "Example Text", variant: "ghost", ariaLabel: "Example Aria Label" }` |
77
78
 
78
79
  In your markup or JSX, you can then use these to set the properties for the `pie-modal` component:
79
80
 
@@ -118,3 +119,16 @@ Under scripts `test:visual` replace the environment variable with the below:
118
119
  ```bash
119
120
  PERCY_TOKEN_PIE_MODAL=abcde
120
121
  ```
122
+
123
+ ## Legacy browser support
124
+
125
+ `pie-modal` uses the Dialog element which might not be supported by legacy browsers.
126
+
127
+ To support them, `pie-modal` uses the [dialog-polyfill](https://github.com/GoogleChrome/dialog-polyfill) package. It works automatically and doesn't need any setup.
128
+
129
+ The polyfill comes with a few limitations, as noted on its [documentation page](https://github.com/GoogleChrome/dialog-polyfill#limitations):
130
+ - Dialogs should not be contained by parents that create a stacking context
131
+ - The browser's chrome may not always be accessible via the tab key
132
+ - Changes to the CSS top/bottom values while open aren't retained
133
+
134
+ For more details, check the package documentation mentioned above.