primer_view_components 0.1.0 → 0.1.1

data/app/components/primer/alpha/overlay.rb

@@ -68,14 +68,18 @@ module Primer
       # Optional button to open the Overlay.
       #
       # @param system_arguments [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %>.
-      renders_one :show_button, lambda { |**system_arguments|
+      renders_one :show_button, lambda { |icon: nil, **system_arguments|
         system_arguments[:classes] = class_names(
           system_arguments[:classes]
         )
-        system_arguments[:id] = "overlay-show-#{@system_arguments[:id]}"
-        system_arguments["popovertoggletarget"] = @system_arguments[:id]
-        system_arguments[:data] = (system_arguments[:data] || {}).merge({ "show-dialog-id": @system_arguments[:id] })
-        Primer::Beta::Button.new(**system_arguments)
+        system_arguments[:id] = show_button_id
+        system_arguments["popovertoggletarget"] = overlay_id
+        system_arguments[:aria] = (system_arguments[:aria] || {}).merge({ controls: overlay_id, haspopup: "true" })
+        if icon.present?
+          Primer::Beta::IconButton.new(icon: icon, **system_arguments)
+        else
+          Primer::Beta::Button.new(**system_arguments)
+        end
       }
 
       # Header content.
@@ -165,7 +169,6 @@ module Primer
         @system_arguments[:classes] = class_names(
           "Overlay",
           SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
-          "Overlay--motion-scaleFade",
           system_arguments[:classes]
         )
         @system_arguments[:tag] = "anchored-position"
@@ -189,6 +192,16 @@ module Primer
         with_header unless header?
         with_body unless body?
       end
+
+      private
+
+      def overlay_id
+        @system_arguments[:id]
+      end
+
+      def show_button_id
+        "overlay-show-#{overlay_id}"
+      end
     end
   end
 end

data/app/components/primer/alpha/tab_nav.rb

@@ -9,7 +9,7 @@ module Primer
     #   - By default, `TabNav` renders links within a `<nav>` element. `<nav>` has an
     #     implicit landmark role of `navigation` which should be reserved for main links.
     #     For all other set of links, set tag to `:div`.
-    #   - See <%= link_to_component(Primer::Navigation::TabComponent) %> for additional
+    #   - See <%= link_to_component(Primer::Alpha::Navigation::Tab) %> for additional
     #     accessibility considerations.
     class TabNav < Primer::Component
       include Primer::TabbedComponentHelper
@@ -22,13 +22,13 @@ module Primer
       TAG_DEFAULT = :nav
       TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
 
-      # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
+      # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Alpha::Navigation::Tab) %>.
       #
       # @param selected [Boolean] Whether the tab is selected.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_many :tabs, lambda { |selected: false, **system_arguments|
         system_arguments[:classes] = tab_nav_tab_classes(system_arguments[:classes])
-        Primer::Navigation::TabComponent.new(
+        Primer::Alpha::Navigation::Tab.new(
           list: true,
           selected: selected,
           **system_arguments
@@ -124,6 +124,13 @@ module Primer
 
         aria_label_for_page_nav(label)
       end
+
+      def before_render
+        # Eagerly evaluate content to avoid https://github.com/primer/view_components/issues/1790
+        content
+
+        super
+      end
     end
   end
 end

data/app/components/primer/alpha/tab_panels.rb

@@ -14,7 +14,7 @@ module Primer
       TAG_DEFAULT = :nav
       TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
 
-      # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
+      # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Alpha::Navigation::Tab) %>.
       #
       # @param id [String] Unique ID of tab.
       # @param selected [Boolean] Whether the tab is selected.
@@ -23,7 +23,7 @@ module Primer
         system_arguments[:id] = id
         system_arguments[:classes] = tab_nav_tab_classes(system_arguments[:classes])
 
-        Primer::Navigation::TabComponent.new(
+        Primer::Alpha::Navigation::Tab.new(
           selected: selected,
           with_panel: true,
           list: true,

data/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}

data/app/components/primer/alpha/underline_nav.css.map

@@ -1 +1 @@
-{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAAqC,CACrC,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,gDAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,wCAA0C,CAC1C,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,mDAAqD,CANrD,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,kDAAoD,CACpD,gBAAiB,CAFjB,kEAAoE,CAFpE,iBAAkB,CAMlB,iBAAkB,CAClB,kBA6DF,CAtDE,mFAKE,8CAA+C,CAF/C,6BAA8B,CAG9B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,yDAA0D,CAF1D,6BAA8B,CAC9B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,qDAAsD,CADtD,6BAA8B,CAD9B,gDAgBF,CAXE,0JAOE,4CAA6C,CAC7C,mDAAqD,CALrD,uBAAwB,CAGxB,UAAW,CADX,UAAW,CAJX,iBAAkB,CAClB,SAAU,CAOV,6BAA+B,CAL/B,UAMF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,iDAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48, 48px);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--color-border-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--primer-control-medium-gap, 8px);\n    color: var(--color-fg-default);\n    background-color: var(--color-neutral-muted);\n  }\n\n  & .Counter--primary {\n    color: var(--color-fg-on-emphasis);\n    background-color: var(--color-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--primer-control-medium-gap, 8px);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);\n  font-size: var(--primer-text-body-size-medium, 14px);\n  line-height: 30px;\n  color: var(--color-fg-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    border-bottom-color: var(--color-neutral-muted);\n    outline-offset: -2px;\n    transition: border-bottom-color 0.12s ease-out;\n  }\n\n  /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n  & [data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold, 600);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* increase touch target area */\n  &::before {\n    @mixin minTouchTarget 48px;\n  }\n\n  /* hover state was \"sticking\" on mobile after click */\n  @media (pointer: fine) {\n    &:hover {\n      color: var(--color-fg-default);\n      text-decoration: none;\n      background: var(--color-action-list-item-default-hover-bg);\n      transition: background 0.12s ease-out;\n    }\n  }\n\n  &.selected,\n  &[role='tab'][aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-default);\n    border-bottom-color: var(--color-primer-border-active);\n\n    /* current/selected underline */\n    &::after {\n      position: absolute;\n      right: 50%;\n      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n      width: 100%;\n      height: 2px;\n      content: '';\n      background: var(--color-primer-border-active);\n      border-radius: var(--primer-borderRadius-medium, 6px);\n      transform: translate(50%, -50%);\n    }\n  }\n}\n\n.UnderlineNav--right {\n  justify-content: flex-end;\n\n  & .UnderlineNav-actions {\n    flex: 1 1 auto;\n  }\n}\n\n.UnderlineNav-actions {\n  align-self: center;\n}\n\n.UnderlineNav--full {\n  display: block;\n\n  /* required for underline to align with additional wrapper element */\n  & .UnderlineNav-body {\n    min-height: var(--base-size-48, 48px);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--primer-control-medium-gap, 8px);\n  color: var(--color-fg-muted);\n  fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n  display: flex;\n  justify-content: space-between;\n}\n",null]}
+{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAAqC,CACrC,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,gDAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,wCAA0C,CAC1C,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,mDAAqD,CANrD,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,kDAAoD,CACpD,gBAAiB,CAFjB,kEAAoE,CAFpE,iBAAkB,CAMlB,iBAAkB,CAClB,kBA8DF,CAvDE,mFAKE,8CAA+C,CAF/C,6BAA8B,CAG9B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,yDAA0D,CAF1D,6BAA8B,CAC9B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,qDAAsD,CADtD,6BAA8B,CAD9B,gDAiBF,CAZE,0JAQE,4CAA6C,CAC7C,mDAAqD,CALrD,uBAAwB,CAGxB,UAAW,CADX,UAAW,CALX,iBAAkB,CAElB,SAAU,CAOV,6BAA+B,CAL/B,UAAW,CAHX,SASF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,iDAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48, 48px);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--color-border-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--primer-control-medium-gap, 8px);\n    color: var(--color-fg-default);\n    background-color: var(--color-neutral-muted);\n  }\n\n  & .Counter--primary {\n    color: var(--color-fg-on-emphasis);\n    background-color: var(--color-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--primer-control-medium-gap, 8px);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);\n  font-size: var(--primer-text-body-size-medium, 14px);\n  line-height: 30px;\n  color: var(--color-fg-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    border-bottom-color: var(--color-neutral-muted);\n    outline-offset: -2px;\n    transition: border-bottom-color 0.12s ease-out;\n  }\n\n  /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n  & [data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold, 600);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* increase touch target area */\n  &::before {\n    @mixin minTouchTarget 48px;\n  }\n\n  /* hover state was \"sticking\" on mobile after click */\n  @media (pointer: fine) {\n    &:hover {\n      color: var(--color-fg-default);\n      text-decoration: none;\n      background: var(--color-action-list-item-default-hover-bg);\n      transition: background 0.12s ease-out;\n    }\n  }\n\n  &.selected,\n  &[role='tab'][aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-default);\n    border-bottom-color: var(--color-primer-border-active);\n\n    /* current/selected underline */\n    &::after {\n      position: absolute;\n      z-index: 1; /* raise above full-width flash banner */\n      right: 50%;\n      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n      width: 100%;\n      height: 2px;\n      content: '';\n      background: var(--color-primer-border-active);\n      border-radius: var(--primer-borderRadius-medium, 6px);\n      transform: translate(50%, -50%);\n    }\n  }\n}\n\n.UnderlineNav--right {\n  justify-content: flex-end;\n\n  & .UnderlineNav-actions {\n    flex: 1 1 auto;\n  }\n}\n\n.UnderlineNav-actions {\n  align-self: center;\n}\n\n.UnderlineNav--full {\n  display: block;\n\n  /* required for underline to align with additional wrapper element */\n  & .UnderlineNav-body {\n    min-height: var(--base-size-48, 48px);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--primer-control-medium-gap, 8px);\n  color: var(--color-fg-muted);\n  fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n  display: flex;\n  justify-content: space-between;\n}\n",null]}

data/app/components/primer/alpha/underline_nav.pcss

@@ -87,6 +87,7 @@
     /* current/selected underline */
     &::after {
       position: absolute;
+      z-index: 1; /* raise above full-width flash banner */
       right: 50%;
       bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */
       width: 100%;

data/app/components/primer/alpha/underline_nav.rb

@@ -12,7 +12,7 @@ module Primer
     #   - By default, `UnderlineNav` renders links within a `<nav>` element. `<nav>` has an
     #     implicit landmark role of `navigation` which should be reserved for main links.
     #     For all other set of links, set tag to `:div`.
-    #   - See <%= link_to_component(Primer::Navigation::TabComponent) %> for additional
+    #   - See <%= link_to_component(Primer::Alpha::Navigation::Tab) %> for additional
     #     accessibility considerations.
     class UnderlineNav < Primer::Component
       include Primer::TabbedComponentHelper
@@ -29,7 +29,7 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_many :tabs, lambda { |selected: false, **system_arguments|
         system_arguments[:classes] = underline_nav_tab_classes(system_arguments[:classes])
-        Primer::Navigation::TabComponent.new(
+        Primer::Alpha::Navigation::Tab.new(
           list: true,
           selected: selected,
           icon_classes: "UnderlineNav-octicon",

data/app/components/primer/alpha/underline_panels.rb

@@ -6,7 +6,7 @@ module Primer
     class UnderlinePanels < Primer::Component
       include Primer::TabbedComponentHelper
       include Primer::UnderlineNavHelper
-      # Use to render a button and an associated panel slot. See the example below or refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
+      # Use to render a button and an associated panel slot. See the example below or refer to <%= link_to_component(Primer::Alpha::Navigation::Tab) %>.
       #
       # @param id [String] Unique ID of tab.
       # @param selected [Boolean] Whether the tab is selected.
@@ -15,7 +15,7 @@ module Primer
         system_arguments[:id] = id
         system_arguments[:classes] = underline_nav_tab_classes(system_arguments[:classes])
 
-        Primer::Navigation::TabComponent.new(
+        Primer::Alpha::Navigation::Tab.new(
           selected: selected,
           with_panel: true,
           list: true,

data/app/components/primer/beta/button.html.erb

@@ -1,4 +1,4 @@
-<%= render Primer::ConditionalWrapper.new(condition: tooltip.present?, tag: :div, classes: "Button-withTooltip") do -%>
+<%= render Primer::ConditionalWrapper.new(condition: tooltip.present?, tag: :div, display: (:block if @block), classes: "Button-withTooltip") do -%>
   <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
     <span class="<%= @align_content_classes %>">
       <% if leading_visual %>

data/app/components/primer/beta/button.rb

@@ -144,6 +144,7 @@ module Primer
         **system_arguments
       )
         @scheme = scheme
+        @block = block
 
         @system_arguments = system_arguments
 
@@ -162,7 +163,7 @@ module Primer
           SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
           SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
           "Button",
-          "Button--fullWidth" => block
+          "Button--fullWidth" => @block
         )
       end
 

data/app/components/primer/component.rb

@@ -58,6 +58,40 @@ module Primer
       system_arguments[:"aria-#{val}"] || system_arguments.dig(:aria, val.to_sym)
     end
 
+    # Merges hashes that contain "aria-*" keys and nested aria: hashes. Removes keys from
+    # each hash and returns them in the new hash.
+    #
+    # Eg. merge_aria({ "aria-disabled": "true" }, { aria: { invalid: "true" } })
+    #     => { disabled: "true", invalid: "true" }
+    #
+    # It's designed to be used to normalize and merge aria information from system_arguments
+    # hashes. Consider using this pattern in component initializers:
+    #
+    # @system_arguments[:aria] = merge_aria(
+    #   @system_arguments,
+    #   { aria: { labelled_by: id } }
+    # )
+    def merge_aria(*hashes)
+      {}.tap do |result|
+        hashes.each do |hash|
+          next unless hash
+
+          result.merge!(hash.delete(:aria) || {})
+
+          hash.delete_if do |key, val|
+            key_s = key.to_s
+
+            if key.start_with?("aria-")
+              result[key_s.sub("aria-", "").to_sym] = val
+              true
+            else
+              false
+            end
+          end
+        end
+      end
+    end
+
     def validate_aria_label
       aria_label = aria("label", @system_arguments)
       aria_labelledby = aria("labelledby", @system_arguments)

data/app/components/primer/navigation/tab_component.rb

@@ -2,163 +2,9 @@
 
 module Primer
   module Navigation
-    # This component is part of navigation components such as `Primer::Alpha::TabNav`
-    # and `Primer::Alpha::UnderlineNav` and should not be used by itself.
-    #
-    # @accessibility
-    #   `TabComponent` renders the selected anchor tab with `aria-current="page"` by default.
-    #    When the selected tab does not correspond to the current page, such as in a nested inner tab, make sure to use aria-current="true"
-    class TabComponent < Primer::Component
-      DEFAULT_ARIA_CURRENT_FOR_ANCHOR = :page
-      ARIA_CURRENT_OPTIONS_FOR_ANCHOR = [true, DEFAULT_ARIA_CURRENT_FOR_ANCHOR].freeze
-      # Panel controlled by the Tab. This will not render anything in the tab itself.
-      # It will provide a accessor for the Tab's parent to call and render the panel
-      # content in the appropriate place.
-      # Refer to `UnderlineNav` and `TabNav` implementations for examples.
-      #
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :panel, lambda { |**system_arguments|
-        return unless @with_panel
-
-        deny_tag_argument(**system_arguments)
-        system_arguments[:id] = @panel_id
-        system_arguments[:tag] = :div
-        system_arguments[:role] ||= :tabpanel
-        system_arguments[:tabindex] = 0
-        system_arguments[:hidden] = true unless @selected
-
-        label_present = aria("label", system_arguments) || aria("labelledby", system_arguments)
-        unless label_present
-          if @id.present?
-            system_arguments[:"aria-labelledby"] = @id
-          elsif !Rails.env.production?
-            raise ArgumentError, "Panels must be labelled. Either set a unique `id` on the tab, or set an `aria-label` directly on the panel"
-          end
-        end
-
-        Primer::BaseComponent.new(**system_arguments)
-      }
-
-      # Icon to be rendered in the Tab left.
-      #
-      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
-      renders_one :icon, lambda { |icon = nil, **system_arguments|
-        system_arguments[:classes] = class_names(
-          @icon_classes,
-          system_arguments[:classes]
-        )
-        Primer::Beta::Octicon.new(icon, **system_arguments)
-      }
-
-      # The Tab's text.
-      #
-      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Text) %>.
-      renders_one :text, Primer::Beta::Text
-
-      # Counter to be rendered in the Tab right.
-      #
-      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
-      renders_one :counter, Primer::Beta::Counter
-
-      attr_reader :selected
-
-      # @example Default
-      #   <%= render(Primer::Navigation::TabComponent.new(selected: true)) do |component| %>
-      #     <% component.with_text { "Selected" } %>
-      #   <% end %>
-      #   <%= render(Primer::Navigation::TabComponent.new) do |component| %>
-      #     <% component.with_text { "Not selected" } %>
-      #   <% end %>
-      #
-      # @example With icons and counters
-      #   <%= render(Primer::Navigation::TabComponent.new) do |component| %>
-      #     <% component.with_icon(:star) %>
-      #     <% component.with_text { "Tab" } %>
-      #   <% end %>
-      #   <%= render(Primer::Navigation::TabComponent.new) do |component| %>
-      #     <% component.with_icon(:star) %>
-      #     <% component.with_text { "Tab" } %>
-      #     <% component.with_counter(count: 10) %>
-      #   <% end %>
-      #   <%= render(Primer::Navigation::TabComponent.new) do |component| %>
-      #     <% component.with_text { "Tab" } %>
-      #     <% component.with_counter(count: 10) %>
-      #   <% end %>
-      #
-      # @example Inside a list
-      #   <%= render(Primer::Navigation::TabComponent.new(list: true)) do |component| %>
-      #     <% component.with_text { "Tab" } %>
-      #   <% end %>
-      #
-      # @example With custom HTML
-      #   <%= render(Primer::Navigation::TabComponent.new) do %>
-      #     <div>
-      #       This is my <strong>custom HTML</strong>
-      #     </div>
-      #   <% end %>
-      #
-      # @param list [Boolean] Whether the Tab is an item in a `<ul>` list.
-      # @param selected [Boolean] Whether the Tab is selected or not.
-      # @param with_panel [Boolean] Whether the Tab has an associated panel.
-      # @param panel_id [String] Only applies if `with_panel` is `true`. Unique id of panel.
-      # @param icon_classes [Boolean] Classes that must always be applied to icons.
-      # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> to be used in the `<li>` wrapper when the tab is an item in a list.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(list: false, selected: false, with_panel: false, panel_id: "", icon_classes: "", wrapper_arguments: {}, **system_arguments)
-        @selected = selected
-        @icon_classes = icon_classes
-        @list = list
-        @with_panel = with_panel
-
-        @system_arguments = system_arguments
-        @id = @system_arguments[:id]
-        @wrapper_arguments = wrapper_arguments
-
-        if with_panel || @system_arguments[:tag] == :button
-          @system_arguments[:tag] = :button
-          @system_arguments[:type] = :button
-          @system_arguments[:role] = :tab
-          panel_id(panel_id)
-          # https://www.w3.org/TR/wai-aria-practices/#presentation_role
-          @wrapper_arguments[:role] = :presentation
-        else
-          @system_arguments[:tag] = :a
-        end
-
-        @wrapper_arguments[:tag] = :li
-        @wrapper_arguments[:display] ||= :inline_flex
-
-        return unless @selected
-
-        if @system_arguments[:tag] == :a
-          aria_current = aria("current", system_arguments) || DEFAULT_ARIA_CURRENT_FOR_ANCHOR
-          @system_arguments[:"aria-current"] = fetch_or_fallback(ARIA_CURRENT_OPTIONS_FOR_ANCHOR, aria_current, DEFAULT_ARIA_CURRENT_FOR_ANCHOR)
-        else
-          @system_arguments[:"aria-selected"] = true
-        end
-      end
-
-      def wrapper
-        unless @list
-          yield
-          return # returning `yield` caused a double render
-        end
-
-        render(Primer::BaseComponent.new(**@wrapper_arguments)) do
-          yield if block_given?
-        end
-      end
-
-      private
-
-      def panel_id(panel_id)
-        if panel_id.blank?
-          raise ArgumentError, "`panel_id` is required" unless Rails.env.production?
-        else
-          @panel_id = panel_id
-          @system_arguments[:"aria-controls"] = @panel_id
-        end
-      end
+    # nodoc
+    class TabComponent < Primer::Alpha::Navigation::Tab
+      status :deprecated
     end
   end
 end

data/lib/primer/deprecations.yml

@@ -26,6 +26,10 @@ deprecations:
     autocorrect: true
     replacement: "Primer::Beta::IconButton"
 
+  - component: "Primer::Navigation::TabComponent"
+    autocorrect: true
+    replacement: "Primer::Alpha::Navigation::Tab"
+
   - component: "Primer::Tooltip"
     autocorrect: true
     replacement: "Primer::Alpha::Tooltip"

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 1
-      PATCH = 0
+      PATCH = 1
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/primer/yard/component_manifest.rb

@@ -45,6 +45,7 @@ module Primer
         Primer::Beta::Markdown => {},
         Primer::Alpha::Menu => {},
         Primer::Navigation::TabComponent => {},
+        Primer::Alpha::Navigation::Tab => {},
         Primer::Beta::Octicon => {},
         Primer::Beta::Popover => {},
         Primer::Beta::ProgressBar => {},
@@ -68,7 +69,7 @@ module Primer
         # Examples can be seen in the NavList docs
         Primer::Alpha::NavList => { js: true },
         Primer::Alpha::NavList::Item => { js: true, examples: false },
-        Primer::Alpha::NavList::Section => { js: true, examples: false },
+        Primer::Alpha::NavList::Group => { js: true, examples: false },
 
         # ActionList is a base component that should not be used by itself, and thus
         # does not have examples of its own

data/lib/tasks/docs.rake

@@ -64,7 +64,7 @@ namespace :docs do
 
     if components_needing_docs.any?
       puts
-      puts "The following components needs docs. Care to contribute them? #{components_needing_docs.map(&:name).join(', ')}"
+      puts "The following components need docs. Care to contribute them? #{components_needing_docs.map(&:name).join(', ')}"
     end
   end
 

data/previews/primer/alpha/action_list_preview.rb

@@ -17,8 +17,7 @@ module Primer
         render(Primer::Alpha::ActionList.new(
                  role: role,
                  scheme: scheme,
-                 show_dividers: show_dividers,
-                 aria: { label: "Action List" }
+                 show_dividers: show_dividers
                )) do |component|
           component.with_heading(title: "Action List")
           component.with_item(label: "Item one", href: "/") do |item|
@@ -46,8 +45,7 @@ module Primer
         render(Primer::Alpha::ActionList.new(
                  role: role,
                  scheme: scheme,
-                 show_dividers: show_dividers,
-                 aria: { label: "Action List" }
+                 show_dividers: show_dividers
                )) do |component|
           component.with_heading(title: "Action List")
           component.with_item(label: "Item one", href: "/") do |item|
@@ -75,8 +73,7 @@ module Primer
         render(Primer::Alpha::ActionList.new(
                  role: role,
                  scheme: scheme,
-                 show_dividers: show_dividers,
-                 aria: { label: "Action List" }
+                 show_dividers: show_dividers
                )) do |component|
           component.with_heading(title: "Action List")
           component.with_item(label: "Leading SVG visual", href: "/") do |item|
@@ -113,14 +110,9 @@ module Primer
         list_id: "unique-id",
         subtitle: "This is a subtitle"
       )
-        render_with_template(
-          locals: {
-            scheme: scheme,
-            title: title,
-            list_id: list_id,
-            subtitle: subtitle
-          }
-        )
+        render(Primer::Alpha::ActionList::Heading.new(
+          scheme: scheme, list_id: list_id, title: title, subtitle: subtitle
+        ))
       end
 
       # @label Item [playground]

data/previews/primer/alpha/nav_list_preview/trailing_action.html.erb

@@ -0,0 +1,19 @@
+<%= render(Primer::Alpha::NavList.new) do |list| %>
+  <% list.with_group do |group| %>
+    <%= group.with_heading(title: "Shopping list") %>
+    <% group.with_item(label: "Bread", href: "/list/1") do |item| %>
+      <%= item.with_trailing_action(show_on_hover: true, icon: :plus, aria: { label: "Activate alert" }, name: "bread_button") %>
+    <% end %>
+    <% group.with_item(label: "Cheese", href: "/list/2") do |item| %>
+      <%= item.with_trailing_action(icon: :plus, aria: { label: "Activate alert" }, name: "cheese_button") %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<script type="text/javascript" data-eval="true">
+  const breadButton = document.querySelector("[name=bread_button]")
+  breadButton.addEventListener("click", () => alert("You selected bread."))
+
+  const cheeseButton = document.querySelector("[name=cheese_button]")
+  cheeseButton.addEventListener("click", () => alert("You selected cheese."))
+</script>

data/previews/primer/alpha/nav_list_preview.rb

@@ -7,22 +7,22 @@ module Primer
       # @label Playground
       def playground
         render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
-          list.with_section(aria: { label: "Repository settings" }) do |section|
-            section.with_heading(title: "Repository settings")
+          list.with_group do |group|
+            group.with_heading(title: "Repository settings")
 
-            section.with_item(label: "General", href: "/general") do |item|
+            group.with_item(label: "General", href: "/general") do |item|
               item.with_leading_visual_icon(icon: :gear)
             end
           end
 
-          list.with_section(aria: { label: "Access" }) do |section|
-            section.with_heading(title: "Access")
+          list.with_group do |group|
+            group.with_heading(title: "Access")
 
-            section.with_item(label: "Collaborators and teams", href: "/collaborators", selected_by_ids: :collaborators) do |item|
+            group.with_item(label: "Collaborators and teams", href: "/collaborators", selected_by_ids: :collaborators) do |item|
               item.with_leading_visual_icon(icon: :people)
             end
 
-            section.with_item(label: "Moderation options", href: "/moderation") do |item|
+            group.with_item(label: "Moderation options") do |item|
               item.with_leading_visual_icon(icon: :"comment-discussion")
 
               item.with_item(label: "Interaction limits", href: "/interaction-limits", selected_by_ids: :interaction_limits)
@@ -36,22 +36,22 @@ module Primer
       # @label Default
       def default
         render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
-          list.with_section(aria: { label: "Repository settings" }) do |section|
-            section.with_heading(title: "Repository settings")
+          list.with_group do |group|
+            group.with_heading(title: "Repository settings")
 
-            section.with_item(label: "General", href: "/general") do |item|
+            group.with_item(label: "General", href: "/general") do |item|
               item.with_leading_visual_icon(icon: :gear)
             end
           end
 
-          list.with_section(aria: { label: "Access" }) do |section|
-            section.with_heading(title: "Access")
+          list.with_group do |group|
+            group.with_heading(title: "Access")
 
-            section.with_item(label: "Collaborators and teams", href: "/collaborators", selected_by_ids: :collaborators) do |item|
+            group.with_item(label: "Collaborators and teams", href: "/collaborators", selected_by_ids: :collaborators) do |item|
               item.with_leading_visual_icon(icon: :people)
             end
 
-            section.with_item(label: "Moderation options", href: "/moderation") do |item|
+            group.with_item(label: "Moderation options") do |item|
               item.with_leading_visual_icon(icon: :"comment-discussion")
 
               item.with_item(label: "Interaction limits", href: "/interaction-limits", selected_by_ids: :interaction_limits)
@@ -65,28 +65,17 @@ module Primer
       # @label Show more item
       def show_more_item
         render(Primer::Alpha::NavList.new) do |list|
-          list.with_section(aria: { label: "List of foods" }) do |section|
-            section.with_heading(title: "My favorite foods")
-            section.with_item(label: "Popplers", href: "/foods/popplers")
-            section.with_item(label: "Slurm", href: "/foods/slurm")
-            section.with_show_more_item(label: "Show more", src: "/nav_list_items", pages: 2)
+          list.with_group do |group|
+            group.with_heading(title: "My favorite foods")
+            group.with_item(label: "Popplers", href: "/foods/popplers")
+            group.with_item(label: "Slurm", href: "/foods/slurm")
+            group.with_show_more_item(label: "Show more", src: "/nav_list_items", pages: 2)
           end
         end
       end
 
       # @label Trailing action
       def trailing_action
-        render(Primer::Alpha::NavList.new) do |list|
-          list.with_section(aria: { label: "List of items to buy" }) do |section|
-            section.with_heading(title: "Shopping list")
-            section.with_item(label: "Bread", href: "/list/1") do |item|
-              item.with_trailing_action(show_on_hover: true, icon: :plus, aria: { label: "Button tooltip" })
-            end
-            section.with_item(label: "Cheese", href: "/list/2") do |item|
-              item.with_trailing_action(icon: :plus, aria: { label: "Button tooltip" })
-            end
-          end
-        end
       end
     end
   end