@primer/view-components 0.35.0-rc.38579618 → 0.35.0-rc.42cc0f9a

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) hide show
  1. package/app/assets/javascripts/components/primer/primer.d.ts +0 -1
  2. package/app/assets/javascripts/primer_view_components.js +1 -1
  3. package/app/assets/javascripts/primer_view_components.js.map +1 -1
  4. package/app/assets/styles/primer_view_components.css +1 -1
  5. package/app/assets/styles/primer_view_components.css.map +1 -1
  6. package/app/components/primer/alpha/action_bar_element.d.ts +17 -0
  7. package/app/components/primer/alpha/action_list.css +1 -1
  8. package/app/components/primer/alpha/action_list.d.ts +16 -0
  9. package/app/components/primer/alpha/action_menu/action_menu_element.d.ts +42 -0
  10. package/app/components/primer/alpha/dialog.css +1 -1
  11. package/app/components/primer/alpha/dialog.css.json +2 -1
  12. package/app/components/primer/alpha/dropdown/menu.d.ts +1 -0
  13. package/app/components/primer/alpha/dropdown.d.ts +1 -0
  14. package/app/components/primer/alpha/modal_dialog.d.ts +18 -0
  15. package/app/components/primer/alpha/segmented_control.d.ts +12 -0
  16. package/app/components/primer/alpha/select_panel_element.d.ts +63 -0
  17. package/app/components/primer/alpha/tab_container.d.ts +1 -0
  18. package/app/components/primer/alpha/text_field.css +1 -1
  19. package/app/components/primer/alpha/toggle_switch.d.ts +34 -0
  20. package/app/components/primer/alpha/tool_tip.d.ts +27 -0
  21. package/app/components/primer/alpha/x_banner.d.ts +18 -0
  22. package/app/components/primer/anchored_position.d.ts +27 -0
  23. package/app/components/primer/aria_live.d.ts +8 -0
  24. package/app/components/primer/beta/auto_complete/auto_complete.d.ts +1 -0
  25. package/app/components/primer/beta/clipboard_copy.d.ts +1 -0
  26. package/app/components/primer/beta/nav_list.d.ts +20 -0
  27. package/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
  28. package/app/components/primer/beta/relative_time.d.ts +1 -0
  29. package/app/components/primer/dialog_helper.d.ts +15 -0
  30. package/app/components/primer/dialog_helper.js +0 -1
  31. package/app/components/primer/focus_group.d.ts +19 -0
  32. package/app/components/primer/primer.d.ts +27 -0
  33. package/app/components/primer/primer.js +0 -1
  34. package/app/components/primer/scrollable_region.d.ts +13 -0
  35. package/app/components/primer/shared_events.d.ts +11 -0
  36. package/app/lib/primer/forms/primer_multi_input.d.ts +10 -0
  37. package/app/lib/primer/forms/primer_text_field.d.ts +28 -0
  38. package/app/lib/primer/forms/toggle_switch_input.d.ts +5 -0
  39. package/package.json +5 -5
  40. package/static/arguments.json +6 -28
  41. package/static/audited_at.json +0 -1
  42. package/static/constants.json +0 -2
  43. package/static/info_arch.json +19 -95
  44. package/static/previews.json +13 -47
  45. package/static/statuses.json +0 -1
  46. package/app/assets/javascripts/components/primer/alpha/image_crop.d.ts +0 -1
  47. package/app/components/primer/alpha/image_crop.js +0 -1
@@ -0,0 +1,27 @@
1
+ import '@github/include-fragment-element';
2
+ import '@github/remote-input-element';
3
+ import './alpha/action_list';
4
+ import './alpha/action_bar_element';
5
+ import './alpha/dropdown';
6
+ import './anchored_position';
7
+ import './dialog_helper';
8
+ import './focus_group';
9
+ import './scrollable_region';
10
+ import './aria_live';
11
+ import './shared_events';
12
+ import './alpha/modal_dialog';
13
+ import './beta/nav_list';
14
+ import './beta/nav_list_group_element';
15
+ import './alpha/segmented_control';
16
+ import './alpha/toggle_switch';
17
+ import './alpha/tool_tip';
18
+ import './alpha/x_banner';
19
+ import './beta/auto_complete/auto_complete';
20
+ import './beta/clipboard_copy';
21
+ import './beta/relative_time';
22
+ import './alpha/tab_container';
23
+ import '../../lib/primer/forms/primer_multi_input';
24
+ import '../../lib/primer/forms/primer_text_field';
25
+ import '../../lib/primer/forms/toggle_switch_input';
26
+ import './alpha/action_menu/action_menu_element';
27
+ import './alpha/select_panel_element';
@@ -9,7 +9,6 @@ import './focus_group';
9
9
  import './scrollable_region';
10
10
  import './aria_live';
11
11
  import './shared_events';
12
- import './alpha/image_crop';
13
12
  import './alpha/modal_dialog';
14
13
  import './beta/nav_list';
15
14
  import './beta/nav_list_group_element';
@@ -0,0 +1,13 @@
1
+ export declare class ScrollableRegionElement extends HTMLElement {
2
+ hasOverflow: boolean;
3
+ labelledBy: string;
4
+ observer: ResizeObserver;
5
+ connectedCallback(): void;
6
+ disconnectedCallback(): void;
7
+ attributeChangedCallback(name: string): void;
8
+ }
9
+ declare global {
10
+ interface Window {
11
+ ScrollableRegionElement: typeof ScrollableRegionElement;
12
+ }
13
+ }
@@ -0,0 +1,11 @@
1
+ export type ItemActivatedEvent = {
2
+ item: Element;
3
+ checked: boolean;
4
+ value: string | null;
5
+ };
6
+ declare global {
7
+ interface HTMLElementEventMap {
8
+ itemActivated: CustomEvent<ItemActivatedEvent>;
9
+ beforeItemActivated: CustomEvent<ItemActivatedEvent>;
10
+ }
11
+ }
@@ -0,0 +1,10 @@
1
+ export declare class PrimerMultiInputElement extends HTMLElement {
2
+ fields: HTMLInputElement[];
3
+ activateField(name: string): void;
4
+ private findField;
5
+ }
6
+ declare global {
7
+ interface Window {
8
+ PrimerMultiInputElement: typeof PrimerMultiInputElement;
9
+ }
10
+ }
@@ -0,0 +1,28 @@
1
+ import '@github/auto-check-element';
2
+ import type { AutoCheckErrorEvent, AutoCheckSuccessEvent } from '@github/auto-check-element';
3
+ declare global {
4
+ interface HTMLElementEventMap {
5
+ 'auto-check-success': AutoCheckSuccessEvent;
6
+ 'auto-check-error': AutoCheckErrorEvent;
7
+ }
8
+ }
9
+ export declare class PrimerTextFieldElement extends HTMLElement {
10
+ #private;
11
+ inputElement: HTMLInputElement;
12
+ validationElement: HTMLElement;
13
+ validationMessageElement: HTMLElement;
14
+ validationSuccessIcon: HTMLElement;
15
+ validationErrorIcon: HTMLElement;
16
+ leadingVisual: HTMLElement;
17
+ leadingSpinner: HTMLElement;
18
+ connectedCallback(): void;
19
+ disconnectedCallback(): void;
20
+ clearContents(): void;
21
+ clearError(): void;
22
+ setValidationMessage(message: string): void;
23
+ toggleValidationStyling(isError: boolean): void;
24
+ setSuccess(message: string): void;
25
+ setError(message: string): void;
26
+ showLeadingSpinner(): void;
27
+ hideLeadingSpinner(): void;
28
+ }
@@ -0,0 +1,5 @@
1
+ export declare class ToggleSwitchInputElement extends HTMLElement {
2
+ validationElement: HTMLElement;
3
+ validationMessageElement: HTMLElement;
4
+ connectedCallback(): void;
5
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/view-components",
3
- "version": "0.35.0-rc.38579618",
3
+ "version": "0.35.0-rc.42cc0f9a",
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",
@@ -33,8 +33,8 @@
33
33
  "clean": "git clean -fdX -- app/",
34
34
  "prepare": "script/build-assets",
35
35
  "lint": "npm run lint:stylelint && npm run lint:eslint",
36
- "lint:stylelint": "stylelint 'app/components/**/*.pcss'",
37
- "lint:stylelint:fix": "stylelint 'app/components/**/*.pcss' --fix",
36
+ "lint:stylelint": "stylelint --rd -q 'app/components/**/*.pcss'",
37
+ "lint:stylelint:fix": "npm run lint:stylelint -- --fix",
38
38
  "lint:eslint": "eslint 'app/components/**/*.ts'",
39
39
  "lint:eslint:fix": "eslint 'app/components/**/*.ts' --fix",
40
40
  "changeset:version": "changeset version && script/version",
@@ -64,9 +64,9 @@
64
64
  "@github/markdownlint-github": "^0.6.0",
65
65
  "@github/prettier-config": "0.0.6",
66
66
  "@playwright/test": "^1.35.1",
67
- "@primer/css": "21.3.6",
67
+ "@primer/css": "21.5.0",
68
68
  "@primer/primitives": "^9.0.2",
69
- "@primer/stylelint-config": "^13.0.1",
69
+ "@primer/stylelint-config": "^13.1.1",
70
70
  "@rollup/plugin-node-resolve": "^15.2.3",
71
71
  "@rollup/plugin-typescript": "^8.3.3",
72
72
  "@typescript-eslint/eslint-plugin": "^7.0.1",
@@ -974,6 +974,12 @@
974
974
  "default": "`false`",
975
975
  "description": "If true will hide the heading title, while still making it available to Screen Readers."
976
976
  },
977
+ {
978
+ "name": "disable_scroll",
979
+ "type": "Boolean",
980
+ "default": "`true`",
981
+ "description": "When true, disables scrolling the page when the dialog is open."
982
+ },
977
983
  {
978
984
  "name": "system_arguments",
979
985
  "type": "Hash",
@@ -1345,34 +1351,6 @@
1345
1351
  }
1346
1352
  ]
1347
1353
  },
1348
- {
1349
- "component": "ImageCrop",
1350
- "status": "alpha",
1351
- "a11y_reviewed": false,
1352
- "short_name": "ImageCrop",
1353
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/image_crop.rb",
1354
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/image_crop/default/",
1355
- "parameters": [
1356
- {
1357
- "name": "src",
1358
- "type": "String",
1359
- "default": "N/A",
1360
- "description": "The path of the image to crop."
1361
- },
1362
- {
1363
- "name": "rounded",
1364
- "type": "Boolean",
1365
- "default": "`true`",
1366
- "description": "If the crop mask should be a circle. Defaults to true."
1367
- },
1368
- {
1369
- "name": "system_arguments",
1370
- "type": "Hash",
1371
- "default": "N/A",
1372
- "description": "[System arguments](/system-arguments)"
1373
- }
1374
- ]
1375
- },
1376
1354
  {
1377
1355
  "component": "Layout",
1378
1356
  "status": "alpha",
@@ -30,7 +30,6 @@
30
30
  "Primer::Alpha::HellipButton": "",
31
31
  "Primer::Alpha::HiddenTextExpander": "",
32
32
  "Primer::Alpha::Image": "",
33
- "Primer::Alpha::ImageCrop": "",
34
33
  "Primer::Alpha::Layout": "",
35
34
  "Primer::Alpha::Layout::Main": "",
36
35
  "Primer::Alpha::Layout::Sidebar": "",
@@ -356,8 +356,6 @@
356
356
  },
357
357
  "Primer::Alpha::Image": {
358
358
  },
359
- "Primer::Alpha::ImageCrop": {
360
- },
361
359
  "Primer::Alpha::Layout": {
362
360
  "FIRST_IN_SOURCE_DEFAULT": "sidebar",
363
361
  "FIRST_IN_SOURCE_OPTIONS": [
@@ -3306,6 +3306,12 @@
3306
3306
  "default": "`false`",
3307
3307
  "description": "If true will hide the heading title, while still making it available to Screen Readers."
3308
3308
  },
3309
+ {
3310
+ "name": "disable_scroll",
3311
+ "type": "Boolean",
3312
+ "default": "`true`",
3313
+ "description": "When true, disables scrolling the page when the dialog is open."
3314
+ },
3309
3315
  {
3310
3316
  "name": "system_arguments",
3311
3317
  "type": "Hash",
@@ -4614,101 +4620,6 @@
4614
4620
 
4615
4621
  ]
4616
4622
  },
4617
- {
4618
- "fully_qualified_name": "Primer::Alpha::ImageCrop",
4619
- "description": "A client-side mechanism to crop images.",
4620
- "accessibility_docs": null,
4621
- "is_form_component": false,
4622
- "is_published": true,
4623
- "requires_js": true,
4624
- "component": "ImageCrop",
4625
- "status": "alpha",
4626
- "a11y_reviewed": false,
4627
- "short_name": "ImageCrop",
4628
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/image_crop.rb",
4629
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/image_crop/default/",
4630
- "parameters": [
4631
- {
4632
- "name": "src",
4633
- "type": "String",
4634
- "default": "N/A",
4635
- "description": "The path of the image to crop."
4636
- },
4637
- {
4638
- "name": "rounded",
4639
- "type": "Boolean",
4640
- "default": "`true`",
4641
- "description": "If the crop mask should be a circle. Defaults to true."
4642
- },
4643
- {
4644
- "name": "system_arguments",
4645
- "type": "Hash",
4646
- "default": "N/A",
4647
- "description": "{{link_to_system_arguments_docs}}"
4648
- }
4649
- ],
4650
- "slots": [
4651
- {
4652
- "name": "loading",
4653
- "description": "A loading indicator that is shown while the image is loading.",
4654
- "parameters": [
4655
- {
4656
- "name": "system_arguments",
4657
- "type": "Hash",
4658
- "default": "N/A",
4659
- "description": "{{link_to_system_arguments_docs}}"
4660
- }
4661
- ]
4662
- }
4663
- ],
4664
- "methods": [
4665
-
4666
- ],
4667
- "previews": [
4668
- {
4669
- "preview_path": "primer/alpha/image_crop/playground",
4670
- "name": "playground",
4671
- "snapshot": "false",
4672
- "skip_rules": {
4673
- "wont_fix": [
4674
- "region"
4675
- ],
4676
- "will_fix": [
4677
- "color-contrast"
4678
- ]
4679
- }
4680
- },
4681
- {
4682
- "preview_path": "primer/alpha/image_crop/default",
4683
- "name": "default",
4684
- "snapshot": "false",
4685
- "skip_rules": {
4686
- "wont_fix": [
4687
- "region"
4688
- ],
4689
- "will_fix": [
4690
- "color-contrast"
4691
- ]
4692
- }
4693
- },
4694
- {
4695
- "preview_path": "primer/alpha/image_crop/loading",
4696
- "name": "loading",
4697
- "snapshot": "false",
4698
- "skip_rules": {
4699
- "wont_fix": [
4700
- "region"
4701
- ],
4702
- "will_fix": [
4703
- "color-contrast"
4704
- ]
4705
- }
4706
- }
4707
- ],
4708
- "subcomponents": [
4709
-
4710
- ]
4711
- },
4712
4623
  {
4713
4624
  "fully_qualified_name": "Primer::Alpha::Layout",
4714
4625
  "description": "`Layout` provides foundational patterns for responsive pages.\n`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences.\n On smaller screens, `Layout` uses vertically stacked rows to display content.\n\n`Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Sidebar`side-by-side (on a desktop of tablet device, per instance);\nor it flows as a row, when `Main` and `Sidebar` are stacked vertically (e.g. on a mobile device).\n`Layout` should always work in any screen size.",
@@ -8185,6 +8096,19 @@
8185
8096
  "color-contrast"
8186
8097
  ]
8187
8098
  }
8099
+ },
8100
+ {
8101
+ "preview_path": "primer/alpha/select_panel/scroll_container",
8102
+ "name": "scroll_container",
8103
+ "snapshot": "false",
8104
+ "skip_rules": {
8105
+ "wont_fix": [
8106
+ "region"
8107
+ ],
8108
+ "will_fix": [
8109
+ "color-contrast"
8110
+ ]
8111
+ }
8188
8112
  }
8189
8113
  ],
8190
8114
  "subcomponents": [
@@ -3978,53 +3978,6 @@
3978
3978
  }
3979
3979
  ]
3980
3980
  },
3981
- {
3982
- "name": "image_crop",
3983
- "component": "ImageCrop",
3984
- "status": "alpha",
3985
- "lookup_path": "primer/alpha/image_crop",
3986
- "examples": [
3987
- {
3988
- "preview_path": "primer/alpha/image_crop/playground",
3989
- "name": "playground",
3990
- "snapshot": "false",
3991
- "skip_rules": {
3992
- "wont_fix": [
3993
- "region"
3994
- ],
3995
- "will_fix": [
3996
- "color-contrast"
3997
- ]
3998
- }
3999
- },
4000
- {
4001
- "preview_path": "primer/alpha/image_crop/default",
4002
- "name": "default",
4003
- "snapshot": "false",
4004
- "skip_rules": {
4005
- "wont_fix": [
4006
- "region"
4007
- ],
4008
- "will_fix": [
4009
- "color-contrast"
4010
- ]
4011
- }
4012
- },
4013
- {
4014
- "preview_path": "primer/alpha/image_crop/loading",
4015
- "name": "loading",
4016
- "snapshot": "false",
4017
- "skip_rules": {
4018
- "wont_fix": [
4019
- "region"
4020
- ],
4021
- "will_fix": [
4022
- "color-contrast"
4023
- ]
4024
- }
4025
- }
4026
- ]
4027
- },
4028
3981
  {
4029
3982
  "name": "label",
4030
3983
  "component": "Label",
@@ -6212,6 +6165,19 @@
6212
6165
  "color-contrast"
6213
6166
  ]
6214
6167
  }
6168
+ },
6169
+ {
6170
+ "preview_path": "primer/alpha/select_panel/scroll_container",
6171
+ "name": "scroll_container",
6172
+ "snapshot": "false",
6173
+ "skip_rules": {
6174
+ "wont_fix": [
6175
+ "region"
6176
+ ],
6177
+ "will_fix": [
6178
+ "color-contrast"
6179
+ ]
6180
+ }
6215
6181
  }
6216
6182
  ]
6217
6183
  },
@@ -30,7 +30,6 @@
30
30
  "Primer::Alpha::HellipButton": "alpha",
31
31
  "Primer::Alpha::HiddenTextExpander": "alpha",
32
32
  "Primer::Alpha::Image": "alpha",
33
- "Primer::Alpha::ImageCrop": "alpha",
34
33
  "Primer::Alpha::Layout": "alpha",
35
34
  "Primer::Alpha::Layout::Main": "alpha",
36
35
  "Primer::Alpha::Layout::Sidebar": "alpha",
@@ -1 +0,0 @@
1
- import '@github/image-crop-element';
@@ -1 +0,0 @@
1
- import '@github/image-crop-element';