@pingux/astro 2.73.0 → 2.74.0-alpha.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.
@@ -61,7 +61,7 @@ var PopoverMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
61
61
  targetRef: triggerRef,
62
62
  overlayRef: menuPopoverRef,
63
63
  scrollRef: menuRef,
64
- offset: 15,
64
+ offset: 5,
65
65
  placement: (0, _concat["default"])(_context = "".concat(direction, " ")).call(_context, align),
66
66
  // Our API preference is for default false so we invert this since it should be default true
67
67
  shouldFlip: !isNotFlippable,
@@ -1,19 +1,23 @@
1
- import { Meta } from '@storybook/addon-docs';
1
+ import { Meta } from "@storybook/addon-docs";
2
2
 
3
3
  <Meta title="Components/PopoverMenu/PopoverMenu" />
4
4
 
5
5
  # PopoverMenu
6
6
 
7
7
  The PopoverMenu component serves as a wrapper for the Menu component and the associated trigger.
8
- It links the Menu's open state to the trigger's press state to provide the necessary overlay context.
9
- It primarily uses the [useMenuTrigger](https://react-spectrum.adobe.com/react-aria/useMenuTrigger.html) from React Aria
8
+ It links the Menu's open state to the trigger's press state to provide the necessary overlay context.
9
+ It primarily uses the [useMenuTrigger](https://react-spectrum.adobe.com/react-aria/useMenuTrigger.html) from React Aria
10
10
  and [useMenuTriggerState](https://react-spectrum.adobe.com/react-stately/useMenuTriggerState.html) from React Stately.
11
11
 
12
12
  The PopoverMenu should:
13
+
13
14
  - Be triggered by a [Button](./?path=/docs/components-button--default) or [IconButton](./?path=/docs/components-iconbutton--default).
14
15
  - Include actionable labels, such as view, edit, and delete.
15
16
 
16
- The PopoverMenu shouldn’t have more than five options.
17
+ The PopoverMenu shouldn’t:
18
+
19
+ - Have more than five options.
20
+ - Have a disabled menu item, because there is no way of explaining why it is disabled.
17
21
 
18
22
  ### Required Components
19
23
 
@@ -32,22 +36,21 @@ This component should adhere to the [WAI-ARIA Dialog](https://www.w3.org/WAI/ARI
32
36
 
33
37
  These keys provide additional functionality to the component.
34
38
 
35
- | Key | Functions |
36
- | ---- | ---- |
37
- | Tab | The trigger and menu items are focusable using the Tab key. |
38
- | Shift + Tab | Moves focus to the previous focusable component. |
39
+ | Key | Functions |
40
+ | -------------- | ----------------------------------------------------------------------------------------------------------------- |
41
+ | Tab | The trigger and menu items are focusable using the Tab key. |
42
+ | Shift + Tab | Moves focus to the previous focusable component. |
39
43
  | Space or Enter | Pressing Space or Enter on a focused trigger opens or closes the menu and selects the MenuItems it is focused on. |
40
- | Arrow keys | Moves the selection through the popover. |
41
- | Esc | Pressing the escape key closes the popover and focuses on the previous focusable component. |
44
+ | Arrow keys | Moves the selection through the popover. |
45
+ | Esc | Pressing the escape key closes the popover and focuses on the previous focusable component. |
42
46
 
43
47
  #### Screen Readers
44
48
 
45
49
  This component uses the following attributes to assist screen readers:
46
- - The **`aria-haspopup`** attribute is set to “True” to indicate that this component contains popover content.
47
- - The trigger uses the **`aria-expanded`** attribute to indicate when the content expands and collapses.
48
- - The menu ID is supplied to the **`aria-controls`** attribute pointing to the content.
49
- - The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous.
50
- - The default **`aria-disabled`** attribute is set to “False” by default.
51
- - The button ID is supplied to the **`aria-labelledby`** attribute to reference it.
52
-
53
50
 
51
+ - The **`aria-haspopup`** attribute is set to “True” to indicate that this component contains popover content.
52
+ - The trigger uses the **`aria-expanded`** attribute to indicate when the content expands and collapses.
53
+ - The menu ID is supplied to the **`aria-controls`** attribute pointing to the content.
54
+ - The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous.
55
+ - The default **`aria-disabled`** attribute is set to “False” by default.
56
+ - The button ID is supplied to the **`aria-labelledby`** attribute to reference it.
@@ -8,5 +8,3 @@ export declare const Controlled: StoryFn;
8
8
  export declare const Placement: StoryFn;
9
9
  export declare const NotFlippable: StoryFn;
10
10
  export declare const NotClosedOnSelect: StoryFn;
11
- export declare const DisabledItem: StoryFn;
12
- export declare const isPressed: StoryFn;
@@ -8,9 +8,10 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
8
8
  _Object$defineProperty(exports, "__esModule", {
9
9
  value: true
10
10
  });
11
- exports.isPressed = exports["default"] = exports.Placement = exports.NotFlippable = exports.NotClosedOnSelect = exports.DisabledItem = exports.DefaultOpen = exports.Default = exports.Controlled = void 0;
11
+ exports["default"] = exports.Placement = exports.NotFlippable = exports.NotClosedOnSelect = exports.DefaultOpen = exports.Default = exports.Controlled = void 0;
12
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
13
13
  var _react = _interopRequireWildcard(require("react"));
14
+ var _DotsVerticalIcon = _interopRequireDefault(require("@pingux/mdi-react/DotsVerticalIcon"));
14
15
  var _addonActions = require("@storybook/addon-actions");
15
16
  var _storybookAddonDesigns = require("storybook-addon-designs");
16
17
  var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
@@ -55,7 +56,16 @@ var Default = function Default(args) {
55
56
  return (
56
57
  // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
57
58
  // readers when an overlay opens.
58
- (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, args, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
59
+ (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, args, (0, _react2.jsx)(_index.IconButton, {
60
+ "aria-label": "more options",
61
+ variant: "inverted"
62
+ }, (0, _react2.jsx)(_index.Icon, {
63
+ icon: _DotsVerticalIcon["default"],
64
+ size: "md",
65
+ title: {
66
+ name: 'Dots Vertical Icon'
67
+ }
68
+ })), (0, _react2.jsx)(_index.Menu, {
59
69
  onAction: (0, _addonActions.action)('onAction')
60
70
  }, (0, _react2.jsx)(_index.Item, {
61
71
  key: "edit"
@@ -82,8 +92,18 @@ var DefaultOpen = function DefaultOpen() {
82
92
  // readers when an overlay opens.
83
93
  (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
84
94
  isDefaultOpen: true
85
- }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
86
- onAction: (0, _addonActions.action)('onAction')
95
+ }, (0, _react2.jsx)(_index.IconButton, {
96
+ "aria-label": "more options",
97
+ variant: "inverted"
98
+ }, (0, _react2.jsx)(_index.Icon, {
99
+ icon: _DotsVerticalIcon["default"],
100
+ size: "md",
101
+ title: {
102
+ name: 'Dots Vertical Icon'
103
+ }
104
+ })), (0, _react2.jsx)(_index.Menu, {
105
+ onAction: (0, _addonActions.action)('onAction'),
106
+ disabledKeys: ['duplicate']
87
107
  }, (0, _react2.jsx)(_index.Item, {
88
108
  key: "edit"
89
109
  }, "Edit"), (0, _react2.jsx)(_index.Item, {
@@ -108,7 +128,16 @@ var Controlled = function Controlled() {
108
128
  (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
109
129
  isOpen: isOpen,
110
130
  onOpenChange: setIsOpen
111
- }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
131
+ }, (0, _react2.jsx)(_index.IconButton, {
132
+ "aria-label": "more options",
133
+ variant: "inverted"
134
+ }, (0, _react2.jsx)(_index.Icon, {
135
+ icon: _DotsVerticalIcon["default"],
136
+ size: "md",
137
+ title: {
138
+ name: 'Dots Vertical Icon'
139
+ }
140
+ })), (0, _react2.jsx)(_index.Menu, {
112
141
  onAction: (0, _addonActions.action)('onAction')
113
142
  }, (0, _react2.jsx)(_index.Item, {
114
143
  key: "edit"
@@ -129,7 +158,16 @@ var Placement = function Placement() {
129
158
  // readers when an overlay opens.
130
159
  (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
131
160
  direction: "left"
132
- }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
161
+ }, (0, _react2.jsx)(_index.IconButton, {
162
+ "aria-label": "more options",
163
+ variant: "inverted"
164
+ }, (0, _react2.jsx)(_index.Icon, {
165
+ icon: _DotsVerticalIcon["default"],
166
+ size: "md",
167
+ title: {
168
+ name: 'Dots Vertical Icon'
169
+ }
170
+ })), (0, _react2.jsx)(_index.Menu, {
133
171
  onAction: (0, _addonActions.action)('onAction')
134
172
  }, (0, _react2.jsx)(_index.Item, {
135
173
  key: "edit"
@@ -151,7 +189,16 @@ var NotFlippable = function NotFlippable() {
151
189
  (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
152
190
  direction: "left",
153
191
  isNotFlippable: true
154
- }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
192
+ }, (0, _react2.jsx)(_index.IconButton, {
193
+ "aria-label": "more options",
194
+ variant: "inverted"
195
+ }, (0, _react2.jsx)(_index.Icon, {
196
+ icon: _DotsVerticalIcon["default"],
197
+ size: "md",
198
+ title: {
199
+ name: 'Dots Vertical Icon'
200
+ }
201
+ })), (0, _react2.jsx)(_index.Menu, {
155
202
  onAction: (0, _addonActions.action)('onAction')
156
203
  }, (0, _react2.jsx)(_index.Item, {
157
204
  key: "edit"
@@ -172,7 +219,16 @@ var NotClosedOnSelect = function NotClosedOnSelect() {
172
219
  // readers when an overlay opens.
173
220
  (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
174
221
  isNotClosedOnSelect: true
175
- }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
222
+ }, (0, _react2.jsx)(_index.IconButton, {
223
+ "aria-label": "more options",
224
+ variant: "inverted"
225
+ }, (0, _react2.jsx)(_index.Icon, {
226
+ icon: _DotsVerticalIcon["default"],
227
+ size: "md",
228
+ title: {
229
+ name: 'Dots Vertical Icon'
230
+ }
231
+ })), (0, _react2.jsx)(_index.Menu, {
176
232
  onAction: (0, _addonActions.action)('onAction')
177
233
  }, (0, _react2.jsx)(_index.Item, {
178
234
  key: "edit"
@@ -186,45 +242,4 @@ var NotClosedOnSelect = function NotClosedOnSelect() {
186
242
  }, "Delete")))))
187
243
  );
188
244
  };
189
- exports.NotClosedOnSelect = NotClosedOnSelect;
190
- var DisabledItem = function DisabledItem() {
191
- return (
192
- // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
193
- // readers when an overlay opens.
194
- (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
195
- onAction: (0, _addonActions.action)('onAction'),
196
- disabledKeys: ['duplicate']
197
- }, (0, _react2.jsx)(_index.Item, {
198
- key: "edit"
199
- }, "Edit"), (0, _react2.jsx)(_index.Item, {
200
- key: "duplicate"
201
- }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
202
- key: "delete",
203
- textValue: "delete"
204
- }, (0, _react2.jsx)(_index.Text, {
205
- color: "critical.bright"
206
- }, "Delete")))))
207
- );
208
- };
209
- exports.DisabledItem = DisabledItem;
210
- var isPressed = function isPressed() {
211
- return (
212
- // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
213
- // readers when an overlay opens.
214
- (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
215
- onAction: (0, _addonActions.action)('onAction'),
216
- disabledKeys: ['duplicate']
217
- }, (0, _react2.jsx)(_index.Item, {
218
- key: "edit",
219
- isPressed: true
220
- }, "Edit"), (0, _react2.jsx)(_index.Item, {
221
- key: "duplicate"
222
- }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
223
- key: "delete",
224
- textValue: "delete"
225
- }, (0, _react2.jsx)(_index.Text, {
226
- color: "critical.bright"
227
- }, "Delete")))))
228
- );
229
- };
230
- exports.isPressed = isPressed;
245
+ exports.NotClosedOnSelect = NotClosedOnSelect;
@@ -28,7 +28,7 @@ test('renders a popover menu when trigger is clicked', function () {
28
28
  expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
29
29
  expect(_testWrapper.screen.queryByRole('presentation')).toBeVisible();
30
30
  expect(_testWrapper.screen.queryByRole('presentation')).toHaveStyle({
31
- top: '15px'
31
+ top: '5px'
32
32
  });
33
33
  // Should have two accessible dismiss buttons applied (in addition to the trigger button)
34
34
  expect(_testWrapper.screen.queryAllByRole('button')).toHaveLength(3);
@@ -50,7 +50,7 @@ var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
50
50
  targetRef: triggerRef,
51
51
  overlayRef: menuPopoverRef,
52
52
  scrollRef: menuRef,
53
- offset: 15,
53
+ offset: 5,
54
54
  placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
55
55
  // Our API preference is for default false so we invert this since it should be default true
56
56
  shouldFlip: !isNotFlippable,
@@ -1,19 +1,23 @@
1
- import { Meta } from '@storybook/addon-docs';
1
+ import { Meta } from "@storybook/addon-docs";
2
2
 
3
3
  <Meta title="Components/PopoverMenu/PopoverMenu" />
4
4
 
5
5
  # PopoverMenu
6
6
 
7
7
  The PopoverMenu component serves as a wrapper for the Menu component and the associated trigger.
8
- It links the Menu's open state to the trigger's press state to provide the necessary overlay context.
9
- It primarily uses the [useMenuTrigger](https://react-spectrum.adobe.com/react-aria/useMenuTrigger.html) from React Aria
8
+ It links the Menu's open state to the trigger's press state to provide the necessary overlay context.
9
+ It primarily uses the [useMenuTrigger](https://react-spectrum.adobe.com/react-aria/useMenuTrigger.html) from React Aria
10
10
  and [useMenuTriggerState](https://react-spectrum.adobe.com/react-stately/useMenuTriggerState.html) from React Stately.
11
11
 
12
12
  The PopoverMenu should:
13
+
13
14
  - Be triggered by a [Button](./?path=/docs/components-button--default) or [IconButton](./?path=/docs/components-iconbutton--default).
14
15
  - Include actionable labels, such as view, edit, and delete.
15
16
 
16
- The PopoverMenu shouldn’t have more than five options.
17
+ The PopoverMenu shouldn’t:
18
+
19
+ - Have more than five options.
20
+ - Have a disabled menu item, because there is no way of explaining why it is disabled.
17
21
 
18
22
  ### Required Components
19
23
 
@@ -32,22 +36,21 @@ This component should adhere to the [WAI-ARIA Dialog](https://www.w3.org/WAI/ARI
32
36
 
33
37
  These keys provide additional functionality to the component.
34
38
 
35
- | Key | Functions |
36
- | ---- | ---- |
37
- | Tab | The trigger and menu items are focusable using the Tab key. |
38
- | Shift + Tab | Moves focus to the previous focusable component. |
39
+ | Key | Functions |
40
+ | -------------- | ----------------------------------------------------------------------------------------------------------------- |
41
+ | Tab | The trigger and menu items are focusable using the Tab key. |
42
+ | Shift + Tab | Moves focus to the previous focusable component. |
39
43
  | Space or Enter | Pressing Space or Enter on a focused trigger opens or closes the menu and selects the MenuItems it is focused on. |
40
- | Arrow keys | Moves the selection through the popover. |
41
- | Esc | Pressing the escape key closes the popover and focuses on the previous focusable component. |
44
+ | Arrow keys | Moves the selection through the popover. |
45
+ | Esc | Pressing the escape key closes the popover and focuses on the previous focusable component. |
42
46
 
43
47
  #### Screen Readers
44
48
 
45
49
  This component uses the following attributes to assist screen readers:
46
- - The **`aria-haspopup`** attribute is set to “True” to indicate that this component contains popover content.
47
- - The trigger uses the **`aria-expanded`** attribute to indicate when the content expands and collapses.
48
- - The menu ID is supplied to the **`aria-controls`** attribute pointing to the content.
49
- - The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous.
50
- - The default **`aria-disabled`** attribute is set to “False” by default.
51
- - The button ID is supplied to the **`aria-labelledby`** attribute to reference it.
52
-
53
50
 
51
+ - The **`aria-haspopup`** attribute is set to “True” to indicate that this component contains popover content.
52
+ - The trigger uses the **`aria-expanded`** attribute to indicate when the content expands and collapses.
53
+ - The menu ID is supplied to the **`aria-controls`** attribute pointing to the content.
54
+ - The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous.
55
+ - The default **`aria-disabled`** attribute is set to “False” by default.
56
+ - The button ID is supplied to the **`aria-labelledby`** attribute to reference it.
@@ -1,9 +1,10 @@
1
1
  import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
2
2
  import React, { useState } from 'react';
3
+ import DotsVerticalIcon from '@pingux/mdi-react/DotsVerticalIcon';
3
4
  import { action } from '@storybook/addon-actions';
4
5
  import { withDesign } from 'storybook-addon-designs';
5
6
  import DocsLayout from '../../../.storybook/storybookDocsLayout';
6
- import { Button, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../index';
7
+ import { Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../index';
7
8
  import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
8
9
  import PopoverMenuReadme from './PopoverMenu.mdx';
9
10
  import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -41,7 +42,16 @@ export var Default = function Default(args) {
41
42
  return (
42
43
  // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
43
44
  // readers when an overlay opens.
44
- ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, args, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
45
+ ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, args, ___EmotionJSX(IconButton, {
46
+ "aria-label": "more options",
47
+ variant: "inverted"
48
+ }, ___EmotionJSX(Icon, {
49
+ icon: DotsVerticalIcon,
50
+ size: "md",
51
+ title: {
52
+ name: 'Dots Vertical Icon'
53
+ }
54
+ })), ___EmotionJSX(Menu, {
45
55
  onAction: action('onAction')
46
56
  }, ___EmotionJSX(Item, {
47
57
  key: "edit"
@@ -67,8 +77,18 @@ export var DefaultOpen = function DefaultOpen() {
67
77
  // readers when an overlay opens.
68
78
  ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
69
79
  isDefaultOpen: true
70
- }, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
71
- onAction: action('onAction')
80
+ }, ___EmotionJSX(IconButton, {
81
+ "aria-label": "more options",
82
+ variant: "inverted"
83
+ }, ___EmotionJSX(Icon, {
84
+ icon: DotsVerticalIcon,
85
+ size: "md",
86
+ title: {
87
+ name: 'Dots Vertical Icon'
88
+ }
89
+ })), ___EmotionJSX(Menu, {
90
+ onAction: action('onAction'),
91
+ disabledKeys: ['duplicate']
72
92
  }, ___EmotionJSX(Item, {
73
93
  key: "edit"
74
94
  }, "Edit"), ___EmotionJSX(Item, {
@@ -92,7 +112,16 @@ export var Controlled = function Controlled() {
92
112
  ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
93
113
  isOpen: isOpen,
94
114
  onOpenChange: setIsOpen
95
- }, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
115
+ }, ___EmotionJSX(IconButton, {
116
+ "aria-label": "more options",
117
+ variant: "inverted"
118
+ }, ___EmotionJSX(Icon, {
119
+ icon: DotsVerticalIcon,
120
+ size: "md",
121
+ title: {
122
+ name: 'Dots Vertical Icon'
123
+ }
124
+ })), ___EmotionJSX(Menu, {
96
125
  onAction: action('onAction')
97
126
  }, ___EmotionJSX(Item, {
98
127
  key: "edit"
@@ -112,7 +141,16 @@ export var Placement = function Placement() {
112
141
  // readers when an overlay opens.
113
142
  ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
114
143
  direction: "left"
115
- }, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
144
+ }, ___EmotionJSX(IconButton, {
145
+ "aria-label": "more options",
146
+ variant: "inverted"
147
+ }, ___EmotionJSX(Icon, {
148
+ icon: DotsVerticalIcon,
149
+ size: "md",
150
+ title: {
151
+ name: 'Dots Vertical Icon'
152
+ }
153
+ })), ___EmotionJSX(Menu, {
116
154
  onAction: action('onAction')
117
155
  }, ___EmotionJSX(Item, {
118
156
  key: "edit"
@@ -133,7 +171,16 @@ export var NotFlippable = function NotFlippable() {
133
171
  ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
134
172
  direction: "left",
135
173
  isNotFlippable: true
136
- }, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
174
+ }, ___EmotionJSX(IconButton, {
175
+ "aria-label": "more options",
176
+ variant: "inverted"
177
+ }, ___EmotionJSX(Icon, {
178
+ icon: DotsVerticalIcon,
179
+ size: "md",
180
+ title: {
181
+ name: 'Dots Vertical Icon'
182
+ }
183
+ })), ___EmotionJSX(Menu, {
137
184
  onAction: action('onAction')
138
185
  }, ___EmotionJSX(Item, {
139
186
  key: "edit"
@@ -153,7 +200,16 @@ export var NotClosedOnSelect = function NotClosedOnSelect() {
153
200
  // readers when an overlay opens.
154
201
  ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, {
155
202
  isNotClosedOnSelect: true
156
- }, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
203
+ }, ___EmotionJSX(IconButton, {
204
+ "aria-label": "more options",
205
+ variant: "inverted"
206
+ }, ___EmotionJSX(Icon, {
207
+ icon: DotsVerticalIcon,
208
+ size: "md",
209
+ title: {
210
+ name: 'Dots Vertical Icon'
211
+ }
212
+ })), ___EmotionJSX(Menu, {
157
213
  onAction: action('onAction')
158
214
  }, ___EmotionJSX(Item, {
159
215
  key: "edit"
@@ -166,43 +222,4 @@ export var NotClosedOnSelect = function NotClosedOnSelect() {
166
222
  color: "critical.bright"
167
223
  }, "Delete")))))
168
224
  );
169
- };
170
- export var DisabledItem = function DisabledItem() {
171
- return (
172
- // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
173
- // readers when an overlay opens.
174
- ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
175
- onAction: action('onAction'),
176
- disabledKeys: ['duplicate']
177
- }, ___EmotionJSX(Item, {
178
- key: "edit"
179
- }, "Edit"), ___EmotionJSX(Item, {
180
- key: "duplicate"
181
- }, "Duplicate"), ___EmotionJSX(Item, {
182
- key: "delete",
183
- textValue: "delete"
184
- }, ___EmotionJSX(Text, {
185
- color: "critical.bright"
186
- }, "Delete")))))
187
- );
188
- };
189
- export var isPressed = function isPressed() {
190
- return (
191
- // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
192
- // readers when an overlay opens.
193
- ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(Button, null, "Click me"), ___EmotionJSX(Menu, {
194
- onAction: action('onAction'),
195
- disabledKeys: ['duplicate']
196
- }, ___EmotionJSX(Item, {
197
- key: "edit",
198
- isPressed: true
199
- }, "Edit"), ___EmotionJSX(Item, {
200
- key: "duplicate"
201
- }, "Duplicate"), ___EmotionJSX(Item, {
202
- key: "delete",
203
- textValue: "delete"
204
- }, ___EmotionJSX(Text, {
205
- color: "critical.bright"
206
- }, "Delete")))))
207
- );
208
225
  };
@@ -25,7 +25,7 @@ test('renders a popover menu when trigger is clicked', function () {
25
25
  expect(screen.queryByRole('presentation')).toBeInTheDocument();
26
26
  expect(screen.queryByRole('presentation')).toBeVisible();
27
27
  expect(screen.queryByRole('presentation')).toHaveStyle({
28
- top: '15px'
28
+ top: '5px'
29
29
  });
30
30
  // Should have two accessible dismiss buttons applied (in addition to the trigger button)
31
31
  expect(screen.queryAllByRole('button')).toHaveLength(3);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.73.0",
3
+ "version": "2.74.0-alpha.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",
@@ -1,5 +0,0 @@
1
- import { StoryFn } from '@storybook/react';
2
- import { MenuProps } from '../../types';
3
- declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
4
- export default _default;
5
- export declare const Default: StoryFn<MenuProps>;
@@ -1,67 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
- _Object$defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = exports.Default = void 0;
9
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
10
- var _react = _interopRequireDefault(require("react"));
11
- var _reactStately = require("react-stately");
12
- var _storybookAddonDesigns = require("storybook-addon-designs");
13
- var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
14
- var _index = require("../../index");
15
- var _figmaLinks = require("../../utils/designUtils/figmaLinks");
16
- var _Menu = _interopRequireDefault(require("./Menu.mdx"));
17
- var _menuAttributes = require("./menuAttributes");
18
- var _react2 = require("@emotion/react");
19
- var _default = {
20
- title: 'Components/Menu',
21
- component: _index.Menu,
22
- decorators: [_storybookAddonDesigns.withDesign],
23
- parameters: {
24
- actions: {
25
- argTypesRegex: '^on.*'
26
- },
27
- docs: {
28
- page: function page() {
29
- return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Menu["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
30
- },
31
- source: {
32
- type: 'code'
33
- }
34
- },
35
- design: {
36
- type: 'figma'
37
- }
38
- },
39
- argTypes: _menuAttributes.menuArgTypes
40
- };
41
- exports["default"] = _default;
42
- var Default = function Default(args) {
43
- return (0, _react2.jsx)(_index.Menu, (0, _extends2["default"])({
44
- "aria-label": "Example Menu"
45
- }, args), (0, _react2.jsx)(_reactStately.Item, {
46
- key: "edit",
47
- textValue: "Edit",
48
- "data-id": "edit"
49
- }, (0, _react2.jsx)(_index.Text, null, "Edit")), (0, _react2.jsx)(_reactStately.Item, {
50
- key: "duplicate",
51
- textValue: "Duplicate",
52
- "data-id": "duplicate"
53
- }, (0, _react2.jsx)(_index.Text, null, "Duplicate")), (0, _react2.jsx)(_reactStately.Item, {
54
- key: "delete",
55
- textValue: "Delete",
56
- "data-id": "delete"
57
- }, (0, _react2.jsx)(_index.Text, {
58
- color: "critical.bright"
59
- }, "Delete")));
60
- };
61
- exports.Default = Default;
62
- Default.parameters = {
63
- design: {
64
- type: 'figma',
65
- url: _figmaLinks.FIGMA_LINKS.menu["default"]
66
- }
67
- };
@@ -1,57 +0,0 @@
1
- import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
2
- import React from 'react';
3
- import { Item } from 'react-stately';
4
- import { withDesign } from 'storybook-addon-designs';
5
- import DocsLayout from '../../../.storybook/storybookDocsLayout';
6
- import { Menu, Text } from '../../index';
7
- import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
8
- import MenuReadme from './Menu.mdx';
9
- import { menuArgTypes } from './menuAttributes';
10
- import { jsx as ___EmotionJSX } from "@emotion/react";
11
- export default {
12
- title: 'Components/Menu',
13
- component: Menu,
14
- decorators: [withDesign],
15
- parameters: {
16
- actions: {
17
- argTypesRegex: '^on.*'
18
- },
19
- docs: {
20
- page: function page() {
21
- return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(MenuReadme, null), ___EmotionJSX(DocsLayout, null));
22
- },
23
- source: {
24
- type: 'code'
25
- }
26
- },
27
- design: {
28
- type: 'figma'
29
- }
30
- },
31
- argTypes: menuArgTypes
32
- };
33
- export var Default = function Default(args) {
34
- return ___EmotionJSX(Menu, _extends({
35
- "aria-label": "Example Menu"
36
- }, args), ___EmotionJSX(Item, {
37
- key: "edit",
38
- textValue: "Edit",
39
- "data-id": "edit"
40
- }, ___EmotionJSX(Text, null, "Edit")), ___EmotionJSX(Item, {
41
- key: "duplicate",
42
- textValue: "Duplicate",
43
- "data-id": "duplicate"
44
- }, ___EmotionJSX(Text, null, "Duplicate")), ___EmotionJSX(Item, {
45
- key: "delete",
46
- textValue: "Delete",
47
- "data-id": "delete"
48
- }, ___EmotionJSX(Text, {
49
- color: "critical.bright"
50
- }, "Delete")));
51
- };
52
- Default.parameters = {
53
- design: {
54
- type: 'figma',
55
- url: FIGMA_LINKS.menu["default"]
56
- }
57
- };