@primer/view-components 0.13.0-rc.46b46cd7 → 0.13.0-rc.5d729724

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.
@@ -15,7 +15,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
15
15
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
16
16
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
17
17
  };
18
- var _ActionBarElement_instances, _ActionBarElement_initialBarWidth, _ActionBarElement_previousBarWidth, _ActionBarElement_focusZoneAbortController, _ActionBarElement_itemGap, _ActionBarElement_availableSpace, _ActionBarElement_menuSpace, _ActionBarElement_shrink, _ActionBarElement_grow, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get;
18
+ var _ActionBarElement_instances, _ActionBarElement_initialBarWidth, _ActionBarElement_previousBarWidth, _ActionBarElement_focusZoneAbortController, _ActionBarElement_isVisible, _ActionBarElement_itemGap, _ActionBarElement_availableSpace, _ActionBarElement_menuSpace, _ActionBarElement_shrink, _ActionBarElement_grow, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get;
19
19
  import { controller, targets, target } from '@github/catalyst';
20
20
  import { focusZone, FocusKeys } from '@primer/behaviors';
21
21
  const instersectionObserver = new IntersectionObserver(entries => {
@@ -94,12 +94,17 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
94
94
  bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
95
95
  focusOutBehavior: 'wrap',
96
96
  focusableElementFilter: element => {
97
- return !element.closest('.ActionBar-item[hidden]') && !element.closest('li.ActionListItem');
97
+ return __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_isVisible).call(this, element);
98
98
  }
99
99
  }), "f");
100
100
  }
101
101
  };
102
- _ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_previousBarWidth = new WeakMap(), _ActionBarElement_focusZoneAbortController = new WeakMap(), _ActionBarElement_instances = new WeakSet(), _ActionBarElement_itemGap = function _ActionBarElement_itemGap() {
102
+ _ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_previousBarWidth = new WeakMap(), _ActionBarElement_focusZoneAbortController = new WeakMap(), _ActionBarElement_instances = new WeakSet(), _ActionBarElement_isVisible = function _ActionBarElement_isVisible(element) {
103
+ // Safari doesn't support `checkVisibility` yet.
104
+ if (typeof element.checkVisibility === 'function')
105
+ return element.checkVisibility();
106
+ return Boolean(element.offsetParent || element.offsetWidth || element.offsetHeight);
107
+ }, _ActionBarElement_itemGap = function _ActionBarElement_itemGap() {
103
108
  var _a;
104
109
  return parseInt((_a = window.getComputedStyle(this.itemContainer)) === null || _a === void 0 ? void 0 : _a.columnGap, 10) || 0;
105
110
  }, _ActionBarElement_availableSpace = function _ActionBarElement_availableSpace() {
@@ -109,7 +109,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
109
109
  __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
110
110
  }
111
111
  handleEvent(event) {
112
- var _a, _b, _c;
112
+ var _a;
113
113
  const targetIsInvoker = (_a = this.invokerElement) === null || _a === void 0 ? void 0 : _a.contains(event.target);
114
114
  const eventIsActivation = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event);
115
115
  if (targetIsInvoker && event.type === 'mousedown') {
@@ -127,10 +127,6 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
127
127
  __classPrivateFieldSet(this, _ActionMenuElement_invokerBeingClicked, false, "f");
128
128
  return;
129
129
  }
130
- // Ignore events within dialogs within menus
131
- if (((_b = event.target) === null || _b === void 0 ? void 0 : _b.closest('dialog')) || ((_c = event.target) === null || _c === void 0 ? void 0 : _c.closest('modal-dialog'))) {
132
- return;
133
- }
134
130
  if (event.type === 'focusout') {
135
131
  if (__classPrivateFieldGet(this, _ActionMenuElement_invokerBeingClicked, "f"))
136
132
  return;
@@ -32,9 +32,8 @@ const isPopoverOpen = (() => {
32
32
  }
33
33
  return (el) => (selector ? el.matches(selector) : setSelector(el));
34
34
  })();
35
- const TOOLTIP_ARROW_EDGE_OFFSET = 6;
36
35
  const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
37
- const TOOLTIP_OFFSET = 10;
36
+ const TOOLTIP_OFFSET = 4;
38
37
  const DIRECTION_CLASSES = [
39
38
  'tooltip-n',
40
39
  'tooltip-s',
@@ -84,10 +83,9 @@ class ToolTipElement extends HTMLElement {
84
83
  styles() {
85
84
  return `
86
85
  :host {
87
- padding: .5em .75em !important;
88
- font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
89
- -webkit-font-smoothing: subpixel-antialiased;
90
- color: var(--color-fg-on-emphasis) !important;
86
+ padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important;
87
+ font: var(--text-body-shorthand-small);
88
+ color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important;
91
89
  text-align: center;
92
90
  text-decoration: none;
93
91
  text-shadow: none;
@@ -95,25 +93,17 @@ class ToolTipElement extends HTMLElement {
95
93
  letter-spacing: normal;
96
94
  word-wrap: break-word;
97
95
  white-space: pre;
98
- background: var(--color-neutral-emphasis-plus) !important;
99
- border-radius: 6px;
96
+ background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important;
97
+ border-radius: var(--borderRadius-medium);
100
98
  border: 0 !important;
101
99
  opacity: 0;
102
- max-width: 250px;
100
+ max-width: var(--overlay-width-small);
103
101
  word-wrap: break-word;
104
102
  white-space: normal;
105
103
  width: max-content !important;
106
104
  inset: var(--tool-tip-position-top, 0) auto auto var(--tool-tip-position-left, 0) !important;
107
105
  overflow: visible !important;
108
- }
109
-
110
- :host:before{
111
- position: absolute;
112
- z-index: 1000001;
113
- color: var(--color-neutral-emphasis-plus);
114
- content: "";
115
- border: 6px solid transparent;
116
- opacity: 0
106
+ text-wrap: balance;
117
107
  }
118
108
 
119
109
  @keyframes tooltip-appear {
@@ -125,91 +115,19 @@ class ToolTipElement extends HTMLElement {
125
115
  }
126
116
  }
127
117
 
128
- :host:after{
129
- position: absolute;
130
- display: block;
131
- right: 0;
132
- left: 0;
133
- height: 12px;
134
- content: ""
135
- }
136
-
137
118
  :host(:popover-open),
138
119
  :host(:popover-open):before {
139
120
  animation-name: tooltip-appear;
140
121
  animation-duration: .1s;
141
122
  animation-fill-mode: forwards;
142
123
  animation-timing-function: ease-in;
143
- animation-delay: .4s
144
124
  }
145
125
 
146
- :host(.\\:popover-open),
147
- :host(.\\:popover-open):before {
126
+ :host(.\\:popover-open) {
148
127
  animation-name: tooltip-appear;
149
128
  animation-duration: .1s;
150
129
  animation-fill-mode: forwards;
151
130
  animation-timing-function: ease-in;
152
- animation-delay: .4s
153
- }
154
-
155
- :host(.tooltip-s):before,
156
- :host(.tooltip-n):before {
157
- right: 50%;
158
- margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
159
- }
160
-
161
- :host(.tooltip-s):before,
162
- :host(.tooltip-se):before,
163
- :host(.tooltip-sw):before {
164
- bottom: 100%;
165
- border-bottom-color: var(--color-neutral-emphasis-plus)
166
- }
167
-
168
- :host(.tooltip-s):after,
169
- :host(.tooltip-se):after,
170
- :host(.tooltip-sw):after {
171
- bottom: 100%
172
- }
173
-
174
- :host(.tooltip-n):before,
175
- :host(.tooltip-ne):before,
176
- :host(.tooltip-nw):before {
177
- top: 100%;
178
- border-top-color: var(--color-neutral-emphasis-plus)
179
- }
180
-
181
- :host(.tooltip-n):after,
182
- :host(.tooltip-ne):after,
183
- :host(.tooltip-nw):after {
184
- top: 100%
185
- }
186
-
187
- :host(.tooltip-se):before,
188
- :host(.tooltip-ne):before {
189
- left: 0;
190
- margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
191
- }
192
-
193
- :host(.tooltip-sw):before,
194
- :host(.tooltip-nw):before {
195
- right: 0;
196
- margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
197
- }
198
-
199
- :host(.tooltip-w):before {
200
- top: 50%;
201
- bottom: 50%;
202
- left: 100%;
203
- margin-top: -6px;
204
- border-left-color: var(--color-neutral-emphasis-plus)
205
- }
206
-
207
- :host(.tooltip-e):before {
208
- top: 50%;
209
- right: 100%;
210
- bottom: 50%;
211
- margin-top: -6px;
212
- border-right-color: var(--color-neutral-emphasis-plus)
213
131
  }
214
132
  `;
215
133
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/view-components",
3
- "version": "0.13.0-rc.46b46cd7",
3
+ "version": "0.13.0-rc.5d729724",
4
4
  "description": "ViewComponents for the Primer Design System",
5
5
  "main": "app/assets/javascripts/primer_view_components.js",
6
6
  "module": "app/components/primer/primer.js",
@@ -74,7 +74,7 @@
74
74
  "cssnano": "^5.1.13",
75
75
  "eslint": "^8.23.1",
76
76
  "eslint-plugin-custom-elements": "^0.0.6",
77
- "eslint-plugin-github": "^4.4.0",
77
+ "eslint-plugin-github": "^4.9.2",
78
78
  "eslint-plugin-prettier": "^4.2.1",
79
79
  "markdownlint-cli2": "^0.5.1",
80
80
  "mocha": "^10.0.0",
@@ -2589,84 +2589,7 @@
2589
2589
 
2590
2590
  ],
2591
2591
  "previews": [
2592
- {
2593
- "preview_path": "primer/alpha/check_box/playground",
2594
- "name": "playground",
2595
- "snapshot": "false",
2596
- "skip_rules": {
2597
- "wont_fix": [
2598
- "region"
2599
- ],
2600
- "will_fix": [
2601
- "color-contrast"
2602
- ]
2603
- }
2604
- },
2605
- {
2606
- "preview_path": "primer/alpha/check_box/default",
2607
- "name": "default",
2608
- "snapshot": "false",
2609
- "skip_rules": {
2610
- "wont_fix": [
2611
- "region"
2612
- ],
2613
- "will_fix": [
2614
- "color-contrast"
2615
- ]
2616
- }
2617
- },
2618
- {
2619
- "preview_path": "primer/alpha/check_box/with_caption",
2620
- "name": "with_caption",
2621
- "snapshot": "true",
2622
- "skip_rules": {
2623
- "wont_fix": [
2624
- "region"
2625
- ],
2626
- "will_fix": [
2627
- "color-contrast"
2628
- ]
2629
- }
2630
- },
2631
- {
2632
- "preview_path": "primer/alpha/check_box/checked",
2633
- "name": "checked",
2634
- "snapshot": "false",
2635
- "skip_rules": {
2636
- "wont_fix": [
2637
- "region"
2638
- ],
2639
- "will_fix": [
2640
- "color-contrast"
2641
- ]
2642
- }
2643
- },
2644
- {
2645
- "preview_path": "primer/alpha/check_box/visually_hide_label",
2646
- "name": "visually_hide_label",
2647
- "snapshot": "false",
2648
- "skip_rules": {
2649
- "wont_fix": [
2650
- "region"
2651
- ],
2652
- "will_fix": [
2653
- "color-contrast"
2654
- ]
2655
- }
2656
- },
2657
- {
2658
- "preview_path": "primer/alpha/check_box/disabled",
2659
- "name": "disabled",
2660
- "snapshot": "false",
2661
- "skip_rules": {
2662
- "wont_fix": [
2663
- "region"
2664
- ],
2665
- "will_fix": [
2666
- "color-contrast"
2667
- ]
2668
- }
2669
- }
2592
+
2670
2593
  ],
2671
2594
  "subcomponents": [
2672
2595
 
@@ -6014,84 +5937,7 @@
6014
5937
 
6015
5938
  ],
6016
5939
  "previews": [
6017
- {
6018
- "preview_path": "primer/alpha/radio_button/playground",
6019
- "name": "playground",
6020
- "snapshot": "false",
6021
- "skip_rules": {
6022
- "wont_fix": [
6023
- "region"
6024
- ],
6025
- "will_fix": [
6026
- "color-contrast"
6027
- ]
6028
- }
6029
- },
6030
- {
6031
- "preview_path": "primer/alpha/radio_button/default",
6032
- "name": "default",
6033
- "snapshot": "true",
6034
- "skip_rules": {
6035
- "wont_fix": [
6036
- "region"
6037
- ],
6038
- "will_fix": [
6039
- "color-contrast"
6040
- ]
6041
- }
6042
- },
6043
- {
6044
- "preview_path": "primer/alpha/radio_button/with_caption",
6045
- "name": "with_caption",
6046
- "snapshot": "true",
6047
- "skip_rules": {
6048
- "wont_fix": [
6049
- "region"
6050
- ],
6051
- "will_fix": [
6052
- "color-contrast"
6053
- ]
6054
- }
6055
- },
6056
- {
6057
- "preview_path": "primer/alpha/radio_button/checked",
6058
- "name": "checked",
6059
- "snapshot": "true",
6060
- "skip_rules": {
6061
- "wont_fix": [
6062
- "region"
6063
- ],
6064
- "will_fix": [
6065
- "color-contrast"
6066
- ]
6067
- }
6068
- },
6069
- {
6070
- "preview_path": "primer/alpha/radio_button/visually_hide_label",
6071
- "name": "visually_hide_label",
6072
- "snapshot": "true",
6073
- "skip_rules": {
6074
- "wont_fix": [
6075
- "region"
6076
- ],
6077
- "will_fix": [
6078
- "color-contrast"
6079
- ]
6080
- }
6081
- },
6082
- {
6083
- "preview_path": "primer/alpha/radio_button/disabled",
6084
- "name": "disabled",
6085
- "snapshot": "true",
6086
- "skip_rules": {
6087
- "wont_fix": [
6088
- "region"
6089
- ],
6090
- "will_fix": [
6091
- "color-contrast"
6092
- ]
6093
- }
6094
- }
5940
+
6095
5941
  ],
6096
5942
  "subcomponents": [
6097
5943
 
@@ -2311,92 +2311,6 @@
2311
2311
  }
2312
2312
  ]
2313
2313
  },
2314
- {
2315
- "name": "check_box",
2316
- "component": "CheckBox",
2317
- "status": "alpha",
2318
- "lookup_path": "primer/alpha/check_box",
2319
- "examples": [
2320
- {
2321
- "preview_path": "primer/alpha/check_box/playground",
2322
- "name": "playground",
2323
- "snapshot": "false",
2324
- "skip_rules": {
2325
- "wont_fix": [
2326
- "region"
2327
- ],
2328
- "will_fix": [
2329
- "color-contrast"
2330
- ]
2331
- }
2332
- },
2333
- {
2334
- "preview_path": "primer/alpha/check_box/default",
2335
- "name": "default",
2336
- "snapshot": "false",
2337
- "skip_rules": {
2338
- "wont_fix": [
2339
- "region"
2340
- ],
2341
- "will_fix": [
2342
- "color-contrast"
2343
- ]
2344
- }
2345
- },
2346
- {
2347
- "preview_path": "primer/alpha/check_box/with_caption",
2348
- "name": "with_caption",
2349
- "snapshot": "true",
2350
- "skip_rules": {
2351
- "wont_fix": [
2352
- "region"
2353
- ],
2354
- "will_fix": [
2355
- "color-contrast"
2356
- ]
2357
- }
2358
- },
2359
- {
2360
- "preview_path": "primer/alpha/check_box/checked",
2361
- "name": "checked",
2362
- "snapshot": "false",
2363
- "skip_rules": {
2364
- "wont_fix": [
2365
- "region"
2366
- ],
2367
- "will_fix": [
2368
- "color-contrast"
2369
- ]
2370
- }
2371
- },
2372
- {
2373
- "preview_path": "primer/alpha/check_box/visually_hide_label",
2374
- "name": "visually_hide_label",
2375
- "snapshot": "false",
2376
- "skip_rules": {
2377
- "wont_fix": [
2378
- "region"
2379
- ],
2380
- "will_fix": [
2381
- "color-contrast"
2382
- ]
2383
- }
2384
- },
2385
- {
2386
- "preview_path": "primer/alpha/check_box/disabled",
2387
- "name": "disabled",
2388
- "snapshot": "false",
2389
- "skip_rules": {
2390
- "wont_fix": [
2391
- "region"
2392
- ],
2393
- "will_fix": [
2394
- "color-contrast"
2395
- ]
2396
- }
2397
- }
2398
- ]
2399
- },
2400
2314
  {
2401
2315
  "name": "check_box_group",
2402
2316
  "component": "CheckBoxGroup",
@@ -4682,92 +4596,6 @@
4682
4596
  }
4683
4597
  ]
4684
4598
  },
4685
- {
4686
- "name": "radio_button",
4687
- "component": "RadioButton",
4688
- "status": "alpha",
4689
- "lookup_path": "primer/alpha/radio_button",
4690
- "examples": [
4691
- {
4692
- "preview_path": "primer/alpha/radio_button/playground",
4693
- "name": "playground",
4694
- "snapshot": "false",
4695
- "skip_rules": {
4696
- "wont_fix": [
4697
- "region"
4698
- ],
4699
- "will_fix": [
4700
- "color-contrast"
4701
- ]
4702
- }
4703
- },
4704
- {
4705
- "preview_path": "primer/alpha/radio_button/default",
4706
- "name": "default",
4707
- "snapshot": "true",
4708
- "skip_rules": {
4709
- "wont_fix": [
4710
- "region"
4711
- ],
4712
- "will_fix": [
4713
- "color-contrast"
4714
- ]
4715
- }
4716
- },
4717
- {
4718
- "preview_path": "primer/alpha/radio_button/with_caption",
4719
- "name": "with_caption",
4720
- "snapshot": "true",
4721
- "skip_rules": {
4722
- "wont_fix": [
4723
- "region"
4724
- ],
4725
- "will_fix": [
4726
- "color-contrast"
4727
- ]
4728
- }
4729
- },
4730
- {
4731
- "preview_path": "primer/alpha/radio_button/checked",
4732
- "name": "checked",
4733
- "snapshot": "true",
4734
- "skip_rules": {
4735
- "wont_fix": [
4736
- "region"
4737
- ],
4738
- "will_fix": [
4739
- "color-contrast"
4740
- ]
4741
- }
4742
- },
4743
- {
4744
- "preview_path": "primer/alpha/radio_button/visually_hide_label",
4745
- "name": "visually_hide_label",
4746
- "snapshot": "true",
4747
- "skip_rules": {
4748
- "wont_fix": [
4749
- "region"
4750
- ],
4751
- "will_fix": [
4752
- "color-contrast"
4753
- ]
4754
- }
4755
- },
4756
- {
4757
- "preview_path": "primer/alpha/radio_button/disabled",
4758
- "name": "disabled",
4759
- "snapshot": "true",
4760
- "skip_rules": {
4761
- "wont_fix": [
4762
- "region"
4763
- ],
4764
- "will_fix": [
4765
- "color-contrast"
4766
- ]
4767
- }
4768
- }
4769
- ]
4770
- },
4771
4599
  {
4772
4600
  "name": "radio_button_group",
4773
4601
  "component": "RadioButtonGroup",