@primer/view-components 0.1.1-rc.f673cd08 → 0.1.1

package/app/components/primer/alpha/underline_nav.css

@@ -1 +1 @@
-.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,48px);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--primer-control-medium-gap,8px)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--primer-control-medium-gap,8px);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--primer-text-body-size-medium,14px);line-height:30px;padding:0 var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color:var(--color-fg-default);outline-offset:-2px;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,600);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(--color-action-list-item-default-hover-bg);color:var(--color-fg-default);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(--color-primer-border-active);color:var(--color-fg-default);font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--color-primer-border-active);border-radius:var(--primer-borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%}.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,48px)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--primer-control-medium-gap,8px)}.UnderlineNav-container{display:flex;justify-content:space-between}
+.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,48px);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--primer-control-medium-gap,8px)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--primer-control-medium-gap,8px);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--primer-text-body-size-medium,14px);line-height:30px;padding:0 var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color:var(--color-fg-default);outline-offset:-2px;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,600);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(--color-action-list-item-default-hover-bg);color:var(--color-fg-default);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(--color-primer-border-active);color:var(--color-fg-default);font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--color-primer-border-active);border-radius:var(--primer-borderRadius-medium,6px);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,48px)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--primer-control-medium-gap,8px)}.UnderlineNav-container{display:flex;justify-content:space-between}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.1.1-rc.f673cd08",
+  "version": "0.1.1",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -53,15 +53,15 @@
     "@github/mini-throttle": "^2.1.0",
     "@github/relative-time-element": "^4.0.0",
     "@github/tab-container-element": "^3.1.2",
-    "@oddbird/popover-polyfill": "^0.0.8",
+    "@oddbird/popover-polyfill": "^0.0.10",
     "@primer/behaviors": "^1.2.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.6",
     "@changesets/cli": "^2.24.1",
     "@github/browserslist-config": "^1.0.0",
-    "@github/prettier-config": "0.0.4",
     "@github/markdownlint-github": "^0.2.2",
+    "@github/prettier-config": "0.0.4",
     "@playwright/test": "^1.27.1",
     "@primer/css": "20.4.7",
     "@primer/primitives": "^7.11.1",

package/static/arguments.json

@@ -355,56 +355,6 @@
       }
     ]
   },
-  {
-    "component": "Navigation::Tab",
-    "status": "alpha",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/navigation/tab.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/navigation/tab_preview/default/",
-    "parameters": [
-      {
-        "name": "list",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Whether the Tab is an item in a `<ul>` list."
-      },
-      {
-        "name": "selected",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Whether the Tab is selected or not."
-      },
-      {
-        "name": "with_panel",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Whether the Tab has an associated panel."
-      },
-      {
-        "name": "panel_id",
-        "type": "String",
-        "default": "`\"\"`",
-        "description": "Only applies if `with_panel` is `true`. Unique id of panel."
-      },
-      {
-        "name": "icon_classes",
-        "type": "Boolean",
-        "default": "`\"\"`",
-        "description": "Classes that must always be applied to icons."
-      },
-      {
-        "name": "wrapper_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "[System arguments](/system-arguments) to be used in the `<li>` wrapper when the tab is an item in a list."
-      },
-      {
-        "name": "system_arguments",
-        "type": "Hash",
-        "default": "N/A",
-        "description": "[System arguments](/system-arguments)"
-      }
-    ]
-  },
   {
     "component": "OcticonSymbols",
     "status": "alpha",
@@ -1493,6 +1443,106 @@
       }
     ]
   },
+  {
+    "component": "Navigation::Tab",
+    "status": "deprecated",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/navigation/tab/default/",
+    "parameters": [
+      {
+        "name": "list",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the Tab is an item in a `<ul>` list."
+      },
+      {
+        "name": "selected",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the Tab is selected or not."
+      },
+      {
+        "name": "with_panel",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the Tab has an associated panel."
+      },
+      {
+        "name": "panel_id",
+        "type": "String",
+        "default": "`\"\"`",
+        "description": "Only applies if `with_panel` is `true`. Unique id of panel."
+      },
+      {
+        "name": "icon_classes",
+        "type": "Boolean",
+        "default": "`\"\"`",
+        "description": "Classes that must always be applied to icons."
+      },
+      {
+        "name": "wrapper_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "[System arguments](/system-arguments) to be used in the `<li>` wrapper when the tab is an item in a list."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "Navigation::Tab",
+    "status": "alpha",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/navigation/tab.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/navigation/tab/default/",
+    "parameters": [
+      {
+        "name": "list",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the Tab is an item in a `<ul>` list."
+      },
+      {
+        "name": "selected",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the Tab is selected or not."
+      },
+      {
+        "name": "with_panel",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the Tab has an associated panel."
+      },
+      {
+        "name": "panel_id",
+        "type": "String",
+        "default": "`\"\"`",
+        "description": "Only applies if `with_panel` is `true`. Unique id of panel."
+      },
+      {
+        "name": "icon_classes",
+        "type": "Boolean",
+        "default": "`\"\"`",
+        "description": "Classes that must always be applied to icons."
+      },
+      {
+        "name": "wrapper_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "[System arguments](/system-arguments) to be used in the `<li>` wrapper when the tab is an item in a list."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "Octicon",
     "status": "beta",

package/static/previews.json

@@ -1557,6 +1557,11 @@
         "inspect_path": "/lookbook/inspect/primer/alpha/tab_nav/with_icons_and_counters",
         "preview_path": "/lookbook/preview/primer/alpha/tab_nav/with_icons_and_counters",
         "name": "with_icons_and_counters"
+      },
+      {
+        "inspect_path": "/lookbook/inspect/primer/alpha/tab_nav/with_extra",
+        "preview_path": "/lookbook/preview/primer/alpha/tab_nav/with_extra",
+        "name": "with_extra"
       }
     ]
   },
@@ -1573,6 +1578,11 @@
         "inspect_path": "/lookbook/inspect/primer/alpha/tab_panels/default",
         "preview_path": "/lookbook/preview/primer/alpha/tab_panels/default",
         "name": "default"
+      },
+      {
+        "inspect_path": "/lookbook/inspect/primer/alpha/tab_panels/with_extra",
+        "preview_path": "/lookbook/preview/primer/alpha/tab_panels/with_extra",
+        "name": "with_extra"
       }
     ]
   },