@primer/view-components 0.35.0-rc.0e432b94 → 0.35.0-rc.121ad8cd
Sign up to get free protection for your applications and to get access to all the features.
- package/app/assets/javascripts/components/primer/primer.d.ts +0 -1
- package/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- package/app/assets/styles/primer_view_components.css +1 -1
- package/app/assets/styles/primer_view_components.css.map +1 -1
- package/app/components/primer/alpha/action_bar_element.d.ts +17 -0
- package/app/components/primer/alpha/action_list.css +1 -1
- package/app/components/primer/alpha/action_list.d.ts +16 -0
- package/app/components/primer/alpha/action_menu/action_menu_element.d.ts +42 -0
- package/app/components/primer/alpha/dialog.css +1 -1
- package/app/components/primer/alpha/dialog.css.json +2 -1
- package/app/components/primer/alpha/dropdown/menu.d.ts +1 -0
- package/app/components/primer/alpha/dropdown.d.ts +1 -0
- package/app/components/primer/alpha/modal_dialog.d.ts +18 -0
- package/app/components/primer/alpha/segmented_control.d.ts +12 -0
- package/app/components/primer/alpha/select_panel_element.d.ts +63 -0
- package/app/components/primer/alpha/tab_container.d.ts +1 -0
- package/app/components/primer/alpha/text_field.css +1 -1
- package/app/components/primer/alpha/toggle_switch.d.ts +34 -0
- package/app/components/primer/alpha/tool_tip.d.ts +27 -0
- package/app/components/primer/alpha/x_banner.d.ts +18 -0
- package/app/components/primer/anchored_position.d.ts +27 -0
- package/app/components/primer/aria_live.d.ts +8 -0
- package/app/components/primer/beta/auto_complete/auto_complete.d.ts +1 -0
- package/app/components/primer/beta/clipboard_copy.d.ts +1 -0
- package/app/components/primer/beta/nav_list.d.ts +20 -0
- package/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
- package/app/components/primer/beta/relative_time.d.ts +1 -0
- package/app/components/primer/dialog_helper.d.ts +15 -0
- package/app/components/primer/dialog_helper.js +0 -1
- package/app/components/primer/focus_group.d.ts +19 -0
- package/app/components/primer/primer.d.ts +27 -0
- package/app/components/primer/primer.js +0 -1
- package/app/components/primer/scrollable_region.d.ts +13 -0
- package/app/components/primer/shared_events.d.ts +11 -0
- package/app/lib/primer/forms/primer_multi_input.d.ts +10 -0
- package/app/lib/primer/forms/primer_text_field.d.ts +28 -0
- package/app/lib/primer/forms/toggle_switch_input.d.ts +5 -0
- package/package.json +5 -5
- package/static/arguments.json +6 -28
- package/static/audited_at.json +0 -1
- package/static/constants.json +0 -2
- package/static/info_arch.json +19 -95
- package/static/previews.json +13 -47
- package/static/statuses.json +0 -1
- package/app/assets/javascripts/components/primer/alpha/image_crop.d.ts +0 -1
- 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';
|
@@ -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
|
+
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@primer/view-components",
|
3
|
-
"version": "0.35.0-rc.
|
3
|
+
"version": "0.35.0-rc.121ad8cd",
|
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
|
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.
|
67
|
+
"@primer/css": "21.5.0",
|
68
68
|
"@primer/primitives": "^9.0.2",
|
69
|
-
"@primer/stylelint-config": "^13.
|
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",
|
package/static/arguments.json
CHANGED
@@ -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",
|
package/static/audited_at.json
CHANGED
package/static/constants.json
CHANGED
package/static/info_arch.json
CHANGED
@@ -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": [
|
package/static/previews.json
CHANGED
@@ -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
|
},
|
package/static/statuses.json
CHANGED
@@ -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';
|