@primer/view-components 0.24.0 → 0.24.1-rc.46e71d00
Sign up to get free protection for your applications and to get access to all the features.
- 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/tab_nav.css +1 -1
- package/app/components/primer/alpha/tab_nav.css.json +0 -2
- package/app/components/primer/alpha/underline_nav.css +1 -1
- package/app/components/primer/alpha/underline_nav.css.json +0 -2
- package/package.json +3 -3
- package/static/arguments.json +12 -0
- package/static/info_arch.json +13 -1
- package/app/components/primer/alpha/underline_panels.css +0 -1
- package/app/components/primer/alpha/underline_panels.css.json +0 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
.tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow:auto}.tabnav
|
|
1
|
+
.tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow:auto}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin) solid #0000;border-bottom:0;color:var(--fgColor-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium);line-height:23px;padding:var(--base-size-8) var(--control-medium-paddingInline-spacious);-webkit-text-decoration:none;text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0;color:var(--fgColor-default)}.tabnav-tab.selected .octicon,.tabnav-tab[aria-current]:not([aria-current=false]) .octicon,.tabnav-tab[aria-selected=true] .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0!important;outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap)}.tabnav-extra{color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-small);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed)}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
"selectors": [
|
|
4
4
|
".tabnav",
|
|
5
5
|
".tabnav-tabs",
|
|
6
|
-
".tabnav::part(tablist-wrapper)",
|
|
7
6
|
".tabnav-tab",
|
|
8
7
|
".tabnav-tab.selected",
|
|
9
8
|
".tabnav-tab[aria-current]:not([aria-current=false])",
|
|
@@ -17,7 +16,6 @@
|
|
|
17
16
|
".tabnav-tab .octicon",
|
|
18
17
|
".tabnav-tab:active",
|
|
19
18
|
".tabnav-tab .Counter",
|
|
20
|
-
"tab-container .tabnav-tab",
|
|
21
19
|
".tabnav-extra",
|
|
22
20
|
".tabnav-extra>.octicon",
|
|
23
21
|
"a.tabnav-extra:hover",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.UnderlineNav{box-shadow:inset 0 -1px 0 var(--borderColor-muted);display:flex;min-height:var(--base-size-48);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:auto;justify-content:space-between}.UnderlineNav .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default);margin-left:var(--control-medium-gap)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.UnderlineNav
|
|
1
|
+
.UnderlineNav{box-shadow:inset 0 -1px 0 var(--borderColor-muted);display:flex;min-height:var(--base-size-48);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:auto;justify-content:space-between}.UnderlineNav .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default);margin-left:var(--control-medium-gap)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium);color:var(--fgColor-default);cursor:pointer;display:flex;font-size:var(--text-body-size-medium);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--borderColor-neutral-muted);color:var(--fgColor-default);outline-offset:-2px;-webkit-text-decoration:none;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--control-transparent-bgColor-hover);color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--underlineNav-borderColor-active);color:var(--fgColor-default);font-weight:var(--base-text-weight-semibold)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--underlineNav-borderColor-active);border-radius:var(--borderRadius-medium);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%;z-index:1}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48)}.UnderlineNav-octicon{color:var(--fgColor-muted);display:inline!important;margin-right:var(--control-medium-gap);fill:var(--fgColor-muted)}.UnderlineNav-container{display:flex;justify-content:space-between}
|
|
@@ -4,9 +4,7 @@
|
|
|
4
4
|
".UnderlineNav",
|
|
5
5
|
".UnderlineNav .Counter",
|
|
6
6
|
".UnderlineNav .Counter--primary",
|
|
7
|
-
".UnderlineNav::part(tablist-wrapper)",
|
|
8
7
|
".UnderlineNav-body",
|
|
9
|
-
".UnderlineNav::part(tablist)",
|
|
10
8
|
".UnderlineNav-item",
|
|
11
9
|
".UnderlineNav-item:focus",
|
|
12
10
|
".UnderlineNav-item:focus-visible",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/view-components",
|
|
3
|
-
"version": "0.24.
|
|
3
|
+
"version": "0.24.1-rc.46e71d00",
|
|
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",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@github/image-crop-element": "^5.0.0",
|
|
51
51
|
"@github/include-fragment-element": "^6.1.1",
|
|
52
52
|
"@github/relative-time-element": "^4.0.0",
|
|
53
|
-
"@github/tab-container-element": "^
|
|
53
|
+
"@github/tab-container-element": "^3.1.2",
|
|
54
54
|
"@oddbird/popover-polyfill": "^0.4.0",
|
|
55
55
|
"@primer/behaviors": "^1.3.4"
|
|
56
56
|
},
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"@github/prettier-config": "0.0.6",
|
|
64
64
|
"@playwright/test": "^1.35.1",
|
|
65
65
|
"@primer/css": "21.2.2",
|
|
66
|
-
"@primer/primitives": "^
|
|
66
|
+
"@primer/primitives": "^8.1.0",
|
|
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",
|
package/static/arguments.json
CHANGED
|
@@ -2462,6 +2462,18 @@
|
|
|
2462
2462
|
"default": "N/A",
|
|
2463
2463
|
"description": "One of `:left` or `:right`. - Defaults to left"
|
|
2464
2464
|
},
|
|
2465
|
+
{
|
|
2466
|
+
"name": "body_arguments",
|
|
2467
|
+
"type": "Hash",
|
|
2468
|
+
"default": "`{}`",
|
|
2469
|
+
"description": "[System arguments](/system-arguments) for the body wrapper."
|
|
2470
|
+
},
|
|
2471
|
+
{
|
|
2472
|
+
"name": "wrapper_arguments",
|
|
2473
|
+
"type": "Hash",
|
|
2474
|
+
"default": "`{}`",
|
|
2475
|
+
"description": "[System arguments](/system-arguments) for the `TabContainer` wrapper."
|
|
2476
|
+
},
|
|
2465
2477
|
{
|
|
2466
2478
|
"name": "system_arguments",
|
|
2467
2479
|
"type": "Hash",
|
package/static/info_arch.json
CHANGED
|
@@ -2284,7 +2284,7 @@
|
|
|
2284
2284
|
{
|
|
2285
2285
|
"fully_qualified_name": "Primer::Alpha::Banner",
|
|
2286
2286
|
"description": "Use `Banner` to highlight important information.",
|
|
2287
|
-
"accessibility_docs": "
|
|
2287
|
+
"accessibility_docs": "### Improve discoverability with a heading and landmark\nBanners are made visually prominent with icons and colors to immediately draw attention.\n\nTo ensure the Banner is also easily discoverable for assistive technology users, consider:\n1. Providing a heading inside of the Banner that describes the purpose of the Banner.\n2. Designating the Banner as a `region` landmark. This can be achieved by rendering the Banner as a `section` with an `aria-labelledby` pointing to the heading.\n\n### Communicating feedback\nWhen a Banner is used to communicate feedback, a live region or focus management technique should be in place to ensure that assistive technology users are aware of the feedback, especially when the Banner is shown client-side. Visit the [Banner's Accessibility section](https://primer.style/components/banner#accessibility), or defer to the accessibility team.\n\n#### Approach 1: Announcing a Banner\nA live region announcement can be used to communicate non-critical feedback, such as a success message.\n\nTo successfully trigger a live region announcement for a Banner that is un-`hidden` or dynamically injected onto the page, **do not** set the live region attribute/role on the Banner itself. Instead, it's important to rely on a live region that is already guaranteed to be on the page. Learn more about specific techniques at: [Staff only: Challenges with live regions](https://github.com/github/accessibility/blob/main/docs/coaching-recommendations/toast-flash-banner/accessible-banner-prototype.md#challenges-with-dynamically-inserted-live-region).\n\n#### Approach 2: Focusing a Banner\nFocusing the Banner can be appropriate for critical feedback scenarios, such as a [form validation error summary](https://primer.style/ui-patterns/forms/overview#interactive-summary-of-errors) where the Banner contains actions to help unblock the user.\n\nTo properly focus a Banner, add a `tabindex=\"-1\"` place focus with JavaScript (using the [`focus()` API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)).",
|
|
2288
2288
|
"is_form_component": false,
|
|
2289
2289
|
"is_published": true,
|
|
2290
2290
|
"requires_js": true,
|
|
@@ -7628,6 +7628,18 @@
|
|
|
7628
7628
|
"default": "N/A",
|
|
7629
7629
|
"description": "One of `:left` or `:right`. - Defaults to left"
|
|
7630
7630
|
},
|
|
7631
|
+
{
|
|
7632
|
+
"name": "body_arguments",
|
|
7633
|
+
"type": "Hash",
|
|
7634
|
+
"default": "`{}`",
|
|
7635
|
+
"description": "{{link_to_system_arguments_docs}} for the body wrapper."
|
|
7636
|
+
},
|
|
7637
|
+
{
|
|
7638
|
+
"name": "wrapper_arguments",
|
|
7639
|
+
"type": "Hash",
|
|
7640
|
+
"default": "`{}`",
|
|
7641
|
+
"description": "{{link_to_system_arguments_docs}} for the `TabContainer` wrapper."
|
|
7642
|
+
},
|
|
7631
7643
|
{
|
|
7632
7644
|
"name": "system_arguments",
|
|
7633
7645
|
"type": "Hash",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
tab-container.UnderlineNav{box-shadow:none;flex-direction:column}
|