@primer/view-components 0.16.1 → 0.16.2-rc.59bb3a6e
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.
- package/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- package/package.json +5 -5
- package/static/arguments.json +6 -0
- package/static/constants.json +1 -0
- package/static/info_arch.json +46 -1
- package/static/previews.json +39 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/view-components",
|
|
3
|
-
"version": "0.16.
|
|
3
|
+
"version": "0.16.2-rc.59bb3a6e",
|
|
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",
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"@github/markdownlint-github": "^0.6.0",
|
|
63
63
|
"@github/prettier-config": "0.0.6",
|
|
64
64
|
"@playwright/test": "^1.35.1",
|
|
65
|
-
"@primer/css": "21.1.
|
|
66
|
-
"@primer/primitives": "7.15.
|
|
65
|
+
"@primer/css": "21.1.1",
|
|
66
|
+
"@primer/primitives": "7.15.5",
|
|
67
67
|
"@primer/stylelint-config": "^12.7.2",
|
|
68
68
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
69
69
|
"@rollup/plugin-typescript": "^8.3.3",
|
|
@@ -88,8 +88,8 @@
|
|
|
88
88
|
"prettier": "3.1.1",
|
|
89
89
|
"rollup": "^2.79.1",
|
|
90
90
|
"rollup-plugin-terser": "^7.0.2",
|
|
91
|
-
"stylelint": "^
|
|
92
|
-
"stylelint-config-standard": "^
|
|
91
|
+
"stylelint": "^16.1.0",
|
|
92
|
+
"stylelint-config-standard": "^36.0.0",
|
|
93
93
|
"tslib": "^2.4.0",
|
|
94
94
|
"typescript": "^5.2.2"
|
|
95
95
|
},
|
package/static/arguments.json
CHANGED
|
@@ -628,6 +628,12 @@
|
|
|
628
628
|
"default": "`:none`",
|
|
629
629
|
"description": "Whether the component can be dismissed with an \"x\" button. One of `:hide`, `:none`, or `:remove`."
|
|
630
630
|
},
|
|
631
|
+
{
|
|
632
|
+
"name": "dismiss_label",
|
|
633
|
+
"type": "String",
|
|
634
|
+
"default": "`Dismiss`",
|
|
635
|
+
"description": "The aria-label text of the dismiss \"x\" button"
|
|
636
|
+
},
|
|
631
637
|
{
|
|
632
638
|
"name": "description",
|
|
633
639
|
"type": "String",
|
package/static/constants.json
CHANGED
package/static/info_arch.json
CHANGED
|
@@ -1627,6 +1627,19 @@
|
|
|
1627
1627
|
]
|
|
1628
1628
|
}
|
|
1629
1629
|
},
|
|
1630
|
+
{
|
|
1631
|
+
"preview_path": "primer/alpha/action_menu/in_scroll_container",
|
|
1632
|
+
"name": "in_scroll_container",
|
|
1633
|
+
"snapshot": "false",
|
|
1634
|
+
"skip_rules": {
|
|
1635
|
+
"wont_fix": [
|
|
1636
|
+
"region"
|
|
1637
|
+
],
|
|
1638
|
+
"will_fix": [
|
|
1639
|
+
"color-contrast"
|
|
1640
|
+
]
|
|
1641
|
+
}
|
|
1642
|
+
},
|
|
1630
1643
|
{
|
|
1631
1644
|
"preview_path": "primer/alpha/action_menu/align_end",
|
|
1632
1645
|
"name": "align_end",
|
|
@@ -2248,6 +2261,12 @@
|
|
|
2248
2261
|
"default": "`:none`",
|
|
2249
2262
|
"description": "Whether the component can be dismissed with an \"x\" button. One of `:hide`, `:none`, or `:remove`."
|
|
2250
2263
|
},
|
|
2264
|
+
{
|
|
2265
|
+
"name": "dismiss_label",
|
|
2266
|
+
"type": "String",
|
|
2267
|
+
"default": "`Dismiss`",
|
|
2268
|
+
"description": "The aria-label text of the dismiss \"x\" button"
|
|
2269
|
+
},
|
|
2251
2270
|
{
|
|
2252
2271
|
"name": "description",
|
|
2253
2272
|
"type": "String",
|
|
@@ -3311,6 +3330,32 @@
|
|
|
3311
3330
|
"color-contrast"
|
|
3312
3331
|
]
|
|
3313
3332
|
}
|
|
3333
|
+
},
|
|
3334
|
+
{
|
|
3335
|
+
"preview_path": "primer/alpha/dialog/left_side",
|
|
3336
|
+
"name": "left_side",
|
|
3337
|
+
"snapshot": "interactive",
|
|
3338
|
+
"skip_rules": {
|
|
3339
|
+
"wont_fix": [
|
|
3340
|
+
"region"
|
|
3341
|
+
],
|
|
3342
|
+
"will_fix": [
|
|
3343
|
+
"color-contrast"
|
|
3344
|
+
]
|
|
3345
|
+
}
|
|
3346
|
+
},
|
|
3347
|
+
{
|
|
3348
|
+
"preview_path": "primer/alpha/dialog/right_side",
|
|
3349
|
+
"name": "right_side",
|
|
3350
|
+
"snapshot": "interactive",
|
|
3351
|
+
"skip_rules": {
|
|
3352
|
+
"wont_fix": [
|
|
3353
|
+
"region"
|
|
3354
|
+
],
|
|
3355
|
+
"will_fix": [
|
|
3356
|
+
"color-contrast"
|
|
3357
|
+
]
|
|
3358
|
+
}
|
|
3314
3359
|
}
|
|
3315
3360
|
],
|
|
3316
3361
|
"subcomponents": [
|
|
@@ -15617,6 +15662,6 @@
|
|
|
15617
15662
|
"component": "BaseComponent",
|
|
15618
15663
|
"fully_qualified_name": "Primer::BaseComponent",
|
|
15619
15664
|
"description_md": "All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) used by [Primer React](https://primer.style/components/system-props).\n\nUnder the hood, system arguments are [mapped](https://github.com/primer/view_components/blob/main/lib/primer/classify.rb) to Primer CSS classes, with any remaining options passed to Rails' [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).\n\n## Responsive values\n\nTo apply different values across responsive breakpoints, pass an array with up to five values in the order `[default, small, medium, large, xlarge]`. To skip a breakpoint, pass `nil`.\n\nFor example:\n\n```erb\n<%= render Primer::Beta::Heading.new(mt: [0, nil, nil, 4, 2]) do %>\n Hello world\n<% end %>\n```\n\nRenders:\n\n```html\n<h1 class=\"mt-0 mt-lg-4 mt-xl-2\">Hello world</h1>\n```",
|
|
15620
|
-
"args_md": "## HTML attributes\n\
|
|
15665
|
+
"args_md": "## HTML attributes\n\nUse system arguments to add HTML attributes to elements. For the most part, system arguments map 1:1 to\nHTML attributes. For example, `render(Component.new(title: \"Foo\"))` will result in eg. `<div title=\"foo\">`.\nHowever, ViewComponents applies special handling to certain system arguments. See the table below for details.\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n\n## Utility classes\n\nViewComponents provides a convenient way to add Primer CSS utility classes to HTML elements. Use the shorthand\ndocumented in the tables below instead of adding CSS classes directly.\n\n### Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n### Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n### Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n### Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n### Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n### Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | Sets the element's width. One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | Sets the element's height. One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n### Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n### Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `px` | Integer | Horizontal padding. One of `0`, `1`, `2`, `3`, `4`, `5`, or `6`. |\n| `py` | Integer | Vertical padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n\n### Typography\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `font_family` | Symbol | Font family. One of `:mono`. |\n| `font_size` | String, Integer, Symbol | One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `00`, `:normal`, or `:small`. |\n| `font_style` | Symbol | Font style. One of `:italic`. |\n| `font_weight` | Symbol | Font weight. One of `:bold`, `:emphasized`, `:light`, or `:normal`. |\n| `text_align` | Symbol | Text alignment. One of `:center`, `:left`, or `:right`. |\n| `text_transform` | Symbol | Text transformation. One of `:capitalize` or `:uppercase`. |\n| `underline` | Boolean | Whether text should be underlined. |\n| `word_break` | Symbol | Whether to break words on line breaks. One of `:break_all` or `:break_word`. |\n\n### Other\n\n| Name | Type | Description |\n| :- | :- | :- |\n| classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |\n| test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |"
|
|
15621
15666
|
}
|
|
15622
15667
|
]
|
package/static/previews.json
CHANGED
|
@@ -658,6 +658,19 @@
|
|
|
658
658
|
]
|
|
659
659
|
}
|
|
660
660
|
},
|
|
661
|
+
{
|
|
662
|
+
"preview_path": "primer/alpha/action_menu/in_scroll_container",
|
|
663
|
+
"name": "in_scroll_container",
|
|
664
|
+
"snapshot": "false",
|
|
665
|
+
"skip_rules": {
|
|
666
|
+
"wont_fix": [
|
|
667
|
+
"region"
|
|
668
|
+
],
|
|
669
|
+
"will_fix": [
|
|
670
|
+
"color-contrast"
|
|
671
|
+
]
|
|
672
|
+
}
|
|
673
|
+
},
|
|
661
674
|
{
|
|
662
675
|
"preview_path": "primer/alpha/action_menu/align_end",
|
|
663
676
|
"name": "align_end",
|
|
@@ -3087,6 +3100,32 @@
|
|
|
3087
3100
|
"color-contrast"
|
|
3088
3101
|
]
|
|
3089
3102
|
}
|
|
3103
|
+
},
|
|
3104
|
+
{
|
|
3105
|
+
"preview_path": "primer/alpha/dialog/left_side",
|
|
3106
|
+
"name": "left_side",
|
|
3107
|
+
"snapshot": "interactive",
|
|
3108
|
+
"skip_rules": {
|
|
3109
|
+
"wont_fix": [
|
|
3110
|
+
"region"
|
|
3111
|
+
],
|
|
3112
|
+
"will_fix": [
|
|
3113
|
+
"color-contrast"
|
|
3114
|
+
]
|
|
3115
|
+
}
|
|
3116
|
+
},
|
|
3117
|
+
{
|
|
3118
|
+
"preview_path": "primer/alpha/dialog/right_side",
|
|
3119
|
+
"name": "right_side",
|
|
3120
|
+
"snapshot": "interactive",
|
|
3121
|
+
"skip_rules": {
|
|
3122
|
+
"wont_fix": [
|
|
3123
|
+
"region"
|
|
3124
|
+
],
|
|
3125
|
+
"will_fix": [
|
|
3126
|
+
"color-contrast"
|
|
3127
|
+
]
|
|
3128
|
+
}
|
|
3090
3129
|
}
|
|
3091
3130
|
]
|
|
3092
3131
|
},
|