primer_view_components 0.0.111 → 0.0.112

data/app/components/primer/dropdown.rb

@@ -1,150 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # `Dropdown` is a lightweight context menu for housing navigation and actions.
-  # They're great for instances where you don't need the full power (and code) of the SelectMenu.
-  class Dropdown < Primer::Component
-    # Required trigger for the dropdown. Has the same arguments as <%= link_to_component(Primer::ButtonComponent) %>,
-    # but it is locked as a `summary` tag.
-    renders_one :button, lambda { |**system_arguments|
-      @button_arguments = system_arguments
-      @button_arguments[:button] = true
-      @button_arguments[:dropdown] = @with_caret
-
-      Primer::Content.new
-    }
-
-    # Required context menu for the dropdown.
-    #
-    # @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
-    # @param direction [Symbol] <%= one_of(Primer::Dropdown::Menu::DIRECTION_OPTIONS) %>
-    # @param scheme [Symbol] Pass `:dark` for dark mode theming
-    # @param header [String] Optional string to display as the header
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :menu, "Primer::Dropdown::Menu"
-
-    # @example Default
-    #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.with_button do %>
-    #       Dropdown
-    #     <% end %>
-    #
-    #     <% c.with_menu(header: "Options") do |menu|
-    #       menu.item { "Item 1" }
-    #       menu.item { "Item 2" }
-    #       menu.item { "Item 3" }
-    #     end %>
-    #   <% end %>
-    #
-    # @example With dividers
-    #
-    #   @description
-    #     Dividers can be used to separate a group of items. They don't have any content.
-    #   @code
-    #     <%= render(Primer::Dropdown.new) do |c| %>
-    #       <% c.with_button do %>
-    #         Dropdown
-    #       <% end %>
-    #
-    #       <% c.with_menu(header: "Options") do |menu|
-    #         menu.item { "Item 1" }
-    #         menu.item { "Item 2" }
-    #         menu.item(divider: true)
-    #         menu.item { "Item 3" }
-    #         menu.item { "Item 4" }
-    #         menu.item(divider: true)
-    #         menu.item { "Item 5" }
-    #         menu.item { "Item 6" }
-    #       end %>
-    #     <% end %>
-    #
-    # @example With direction
-    #   <%= render(Primer::Dropdown.new(display: :inline_block)) do |c| %>
-    #     <% c.with_button do %>
-    #       Dropdown
-    #     <% end %>
-    #
-    #     <% c.with_menu(header: "Options", direction: :s) do |menu|
-    #       menu.item { "Item 1" }
-    #       menu.item { "Item 2" }
-    #       menu.item { "Item 3" }
-    #       menu.item { "Item 4" }
-    #     end %>
-    #   <% end %>
-    #
-    # @example With caret
-    #   <%= render(Primer::Dropdown.new(with_caret: true)) do |c| %>
-    #     <% c.with_button do %>
-    #       Dropdown
-    #     <% end %>
-    #
-    #     <% c.with_menu(header: "Options") do |menu|
-    #       menu.item { "Item 1" }
-    #       menu.item { "Item 2" }
-    #       menu.item { "Item 3" }
-    #       menu.item { "Item 4" }
-    #     end %>
-    #   <% end %>
-    #
-    # @example Customizing the button
-    #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.with_button(scheme: :primary, size: :small) do %>
-    #       Dropdown
-    #     <% end %>
-    #
-    #     <% c.with_menu(header: "Options") do |menu|
-    #       menu.item { "Item 1" }
-    #       menu.item { "Item 2" }
-    #       menu.item { "Item 3" }
-    #       menu.item { "Item 4" }
-    #     end %>
-    #   <% end %>
-    #
-    # @example Menu as list
-    #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.with_button do %>
-    #       Dropdown
-    #     <% end %>
-    #
-    #     <% c.with_menu(as: :list, header: "Options") do |menu|
-    #       menu.item { "Item 1" }
-    #       menu.item { "Item 2" }
-    #       menu.item(divider: true)
-    #       menu.item { "Item 3" }
-    #       menu.item { "Item 4" }
-    #     end %>
-    #   <% end %>
-    #
-    # @example Customizing menu items
-    #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.with_button do %>
-    #       Dropdown
-    #     <% end %>
-    #
-    #     <% c.with_menu(header: "Options") do |menu|
-    #       menu.item(tag: :button) { "Item 1" }
-    #       menu.item(classes: "custom-class") { "Item 2" }
-    #       menu.item { "Item 3" }
-    #     end %>
-    #   <% end %>
-    #
-    # @param overlay [Symbol] <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
-    # @param with_caret [Boolean] Whether or not a caret should be rendered in the button.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(overlay: :default, with_caret: false, **system_arguments)
-      @with_caret = with_caret
-
-      @system_arguments = system_arguments
-      @system_arguments[:overlay] = overlay
-      @system_arguments[:reset] = true
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "dropdown"
-      )
-    end
-
-    def render?
-      button.present? && menu.present?
-    end
+  class Dropdown < Primer::Alpha::Dropdown
+    status :deprecated
   end
 end

data/app/components/primer/menu_component.css

@@ -0,0 +1 @@
+.menu{background-color:var(--color-canvas-default);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);list-style:none;margin-bottom:var(--primer-stack-gap-normal,16px)}.menu-item{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;padding:var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-medium-paddingInline-spacious,16px);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--primer-borderRadius-medium,6px)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--primer-borderRadius-medium,6px)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--primer-borderRadius-medium,6px)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--primer-borderRadius-medium,6px)}.menu-item:hover{background-color:var(--color-neutral-subtle);text-decoration:none}.menu-item:active{background-color:var(--color-canvas-subtle)}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--color-menu-bg-active);cursor:default}:is(.menu-item.selected,.menu-item[aria-selected=true],.menu-item[aria-current]:not([aria-current=false])):before{background-color:var(--color-primer-border-active);bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--color-fg-muted);margin-right:var(--primer-control-medium-gap,8px);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--primer-control-small-gap,4px)}.menu-item .menu-warning{color:var(--color-attention-fg);float:right}.menu-item .avatar{float:left;margin-right:var(--primer-control-small-gap,4px)}.menu-item.alert .Counter{color:var(--color-danger-fg)}.menu-heading{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin-bottom:0;margin-top:0;padding:var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-medium-paddingInline-spacious,16px)}.menu-heading:hover{text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--primer-borderRadius-medium,6px);border-top-right-radius:var(--primer-borderRadius-medium,6px)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--primer-borderRadius-medium,6px);border-bottom-right-radius:var(--primer-borderRadius-medium,6px)}

data/app/components/primer/menu_component.css.json

@@ -0,0 +1 @@
+{"name":"menu_component","selectors":[".menu",".menu-item",".menu-item:first-child",".menu-item:first-child:before",".menu-item:last-child",".menu-item:last-child:before",".menu-item:hover",".menu-item:active",".menu-item.selected",".menu-item[aria-current]:not([aria-current=false])",".menu-item[aria-selected=true]",":is(.menu-item.selected",".menu-item[aria-current]:not([aria-current=false])):before",".menu-item .octicon",".menu-item .Counter",".menu-item .menu-warning",".menu-item .avatar",".menu-item.alert .Counter",".menu-heading",".menu-heading:hover",".menu-heading:first-child",".menu-heading:last-child"]}

data/app/components/primer/menu_component.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["menu_component.pcss"],"names":[],"mappings":"AAIA,MAGE,4CAA6C,CAC7C,2EAA6E,CAC7E,mDAAqD,CAHrD,eAAgB,CADhB,iDAKF,CAEA,WAKE,gFAAkF,CADlF,6BAA8B,CAF9B,aAAc,CACd,yHAA4H,CAF5H,iBA+EF,CAzEE,uBACE,YAAa,CAEb,6DAKF,CAHE,qDAHA,4DAKA,CAGF,sBACE,eAAgB,CAChB,gEAMF,CAHE,mDAFA,+DAIA,CAGF,iBAEE,4CAA6C,CAD7C,oBAEF,CAEA,kBACE,2CACF,CAEA,sGAIE,4CAA6C,CAD7C,cAYF,CATE,kHAOE,kDAAmD,CAJnD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,2BAA4B,CAD5B,iDAAmD,CAEnD,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,+CACF,CAEA,yBAEE,+BAAgC,CADhC,WAEF,CAEA,mBACE,UAAW,CACX,gDACF,CAGE,0BACE,4BACF,CAIJ,cAQE,gFAAkF,CADlF,6BAA8B,CAN9B,aAAc,CAId,iBAAkB,CAClB,gDAAkD,CAFlD,eAAgB,CADhB,YAAa,CADb,yHAsBF,CAdE,oBACE,oBACF,CAEA,0BACE,4DAA8D,CAC9D,6DACF,CAEA,yBACE,eAAgB,CAEhB,+DAAiE,CADjE,gEAEF","file":"menu_component.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n  margin-bottom: var(--primer-stack-gap-normal, 16px);\n  list-style: none;\n  background-color: var(--color-canvas-default);\n  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n.menu-item {\n  position: relative;\n  display: block;\n  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n  color: var(--color-fg-default);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n  &:first-child {\n    border-top: 0;\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n\n    &::before {\n      border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    }\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n\n    &::before {\n      border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n    }\n  }\n\n  &:hover {\n    text-decoration: none;\n    background-color: var(--color-neutral-subtle);\n  }\n\n  &:active {\n    background-color: var(--color-canvas-subtle);\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    cursor: default;\n    background-color: var(--color-menu-bg-active);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      width: 2px;\n      content: '';\n      background-color: var(--color-primer-border-active);\n    }\n  }\n\n  & .octicon {\n    width: 16px;\n    margin-right: var(--primer-control-medium-gap, 8px);\n    color: var(--color-fg-muted);\n    text-align: center;\n  }\n\n  & .Counter {\n    float: right;\n    margin-left: var(--primer-control-small-gap, 4px);\n  }\n\n  & .menu-warning {\n    float: right;\n    color: var(--color-attention-fg);\n  }\n\n  & .avatar {\n    float: left;\n    margin-right: var(--primer-control-small-gap, 4px);\n  }\n\n  &.alert {\n    & .Counter {\n      color: var(--color-danger-fg);\n    }\n  }\n}\n\n.menu-heading {\n  display: block;\n  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold, 600);\n  color: var(--color-fg-default);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:first-child {\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  &:last-child {\n    border-bottom: 0;\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n  }\n}\n"]}

data/app/components/primer/menu_component.pcss

@@ -0,0 +1,119 @@
+/* menu */
+
+/* A menu on the side of a page, defaults to left side. e.g. github.com/about */
+
+.menu {
+  margin-bottom: var(--primer-stack-gap-normal, 16px);
+  list-style: none;
+  background-color: var(--color-canvas-default);
+  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+}
+
+.menu-item {
+  position: relative;
+  display: block;
+  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
+  color: var(--color-fg-default);
+  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);
+
+  &:first-child {
+    border-top: 0;
+    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+
+    &::before {
+      border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+    }
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+
+    &::before {
+      border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+    }
+  }
+
+  &:hover {
+    text-decoration: none;
+    background-color: var(--color-neutral-subtle);
+  }
+
+  &:active {
+    background-color: var(--color-canvas-subtle);
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    cursor: default;
+    background-color: var(--color-menu-bg-active);
+
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 2px;
+      content: '';
+      background-color: var(--color-primer-border-active);
+    }
+  }
+
+  & .octicon {
+    width: 16px;
+    margin-right: var(--primer-control-medium-gap, 8px);
+    color: var(--color-fg-muted);
+    text-align: center;
+  }
+
+  & .Counter {
+    float: right;
+    margin-left: var(--primer-control-small-gap, 4px);
+  }
+
+  & .menu-warning {
+    float: right;
+    color: var(--color-attention-fg);
+  }
+
+  & .avatar {
+    float: left;
+    margin-right: var(--primer-control-small-gap, 4px);
+  }
+
+  &.alert {
+    & .Counter {
+      color: var(--color-danger-fg);
+    }
+  }
+}
+
+.menu-heading {
+  display: block;
+  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: inherit;
+  font-weight: var(--base-text-weight-semibold, 600);
+  color: var(--color-fg-default);
+  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:first-child {
+    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+  }
+}

data/app/components/primer/popover_component.rb

@@ -1,125 +1,8 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `Popover` to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
-  #
-  # By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.
-  class PopoverComponent < Primer::Component
-    status :beta
-
-    CARET_DEFAULT = :top
-    CARET_MAPPINGS = {
-      CARET_DEFAULT => "",
-      :bottom => "Popover-message--bottom",
-      :bottom_right => "Popover-message--bottom-right",
-      :bottom_left => "Popover-message--bottom-left",
-      :left => "Popover-message--left",
-      :left_bottom => "Popover-message--left-bottom",
-      :left_top => "Popover-message--left-top",
-      :right => "Popover-message--right",
-      :right_bottom => "Popover-message--right-bottom",
-      :right_top => "Popover-message--right-top",
-      :top_left => "Popover-message--top-left",
-      :top_right => "Popover-message--top-right"
-    }.freeze
-
-    DEFAULT_HEADING_TAG = :h4
-
-    # The heading
-    #
-    # @param tag [Symbol] (Primer::PopoverComponent::DEFAULT_HEADING_TAG) <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, **system_arguments|
-      system_arguments[:tag] = tag
-      system_arguments[:mb] ||= 2
-
-      Primer::Beta::Heading.new(**system_arguments)
-    }
-
-    # The body
-    #
-    # @param caret [Symbol] <%= one_of(Primer::PopoverComponent::CARET_MAPPINGS.keys) %>
-    # @param large [Boolean] Whether to use the large version of the component.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :body, lambda { |caret: CARET_DEFAULT, large: false, **system_arguments|
-      @body_arguments = system_arguments
-      @body_arguments[:classes] = class_names(
-        @body_arguments[:classes],
-        "Popover-message Box",
-        CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
-        "Popover-message--large" => large
-      )
-      @body_arguments[:p] ||= 4
-      @body_arguments[:mt] ||= 2
-      @body_arguments[:mx] ||= :auto
-      @body_arguments[:text_align] ||= :left
-      @body_arguments[:box_shadow] ||= :large
-
-      Primer::Content.new
-    }
-
-    # @example Default
-    #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.with_heading do %>
-    #       Activity feed
-    #     <% end %>
-    #     <% component.with_body do %>
-    #       This is the Popover body.
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Large
-    #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.with_heading do %>
-    #       Activity feed
-    #     <% end %>
-    #     <% component.with_body(large: true) do %>
-    #       This is the large Popover body.
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Caret position
-    #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.with_heading do %>
-    #       Activity feed
-    #     <% end %>
-    #     <% component.with_body(caret: :left) do %>
-    #       This is the Popover body.
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example With multiple elements in the body
-    #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.with_heading do %>
-    #       Activity feed
-    #     <% end %>
-    #     <% component.with_body(caret: :left) do %>
-    #       <p>This is the Popover body.</p>
-    #       <%= render Primer::ButtonComponent.new(type: :submit) do %>
-    #         Got it!
-    #       <% end %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(**system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = :div
-      @system_arguments[:classes] = class_names(
-        system_arguments[:classes],
-        "Popover"
-      )
-      @system_arguments[:position] ||= :relative
-      @system_arguments[:right] = false unless @system_arguments.delete(:right)
-      @system_arguments[:left] = false unless @system_arguments.delete(:left)
-    end
-
-    def render?
-      body.present?
-    end
-
-    def body_component
-      Primer::Box.new(**@body_arguments)
-    end
+  # :nodoc:
+  class PopoverComponent < Primer::Beta::Popover
+    status :deprecated
   end
 end

data/app/components/primer/primer.d.ts

@@ -1,3 +1,4 @@
+import './alpha/dropdown';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './alpha/nav_list';
@@ -7,7 +8,6 @@ import './alpha/tool_tip';
 import './alpha/x_banner';
 import './beta/auto_complete/auto_complete';
 import './clipboard_copy';
-import './dropdown';
 import './local_time';
 import './tab_container_component';
 import './time_ago_component';

data/app/components/primer/primer.js

@@ -1,3 +1,4 @@
+import './alpha/dropdown';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './alpha/nav_list';
@@ -7,7 +8,6 @@ import './alpha/tool_tip';
 import './alpha/x_banner';
 import './beta/auto_complete/auto_complete';
 import './clipboard_copy';
-import './dropdown';
 import './local_time';
 import './tab_container_component';
 import './time_ago_component';

data/app/components/primer/primer.pcss

@@ -1,20 +1,27 @@
 /* CSS component styles here */
 @import "./alpha/action_list.pcss";
+@import "./alpha/auto_complete.pcss";
 @import "./alpha/banner.pcss";
+@import "./alpha/dropdown.pcss";
+@import "./alpha/tab_nav.pcss";
+@import "./alpha/button_marketing.pcss";
 @import "./alpha/toggle_switch.pcss";
+@import "./alpha/underline_nav.pcss";
 @import "./alpha/segmented_control.pcss";
 @import "./beta/avatar.pcss";
 @import "./beta/avatar_stack.pcss";
+@import "./beta/border_box.pcss";
+@import "./beta/blankslate.pcss";
 @import "./beta/breadcrumbs.pcss";
 @import "./beta/button.pcss";
 @import "./beta/counter.pcss";
 @import "./beta/flash.pcss";
 @import "./beta/label.pcss";
-@import "./beta/blankslate.pcss";
+@import "./beta/link.pcss";
+@import "./beta/popover.pcss";
 @import "./beta/progress_bar.pcss";
 @import "./beta/truncate.pcss";
-@import "./dropdown.pcss";
-@import "./popover_component.pcss";
+@import "./menu_component.pcss";
 @import "./state_component.pcss";
 @import "./subhead_component.pcss";
 @import "./timeline_item_component.pcss";

data/app/components/primer/primer.ts

@@ -1,3 +1,4 @@
+import './alpha/dropdown'
 import './alpha/image_crop'
 import './alpha/modal_dialog'
 import './alpha/nav_list'
@@ -7,7 +8,6 @@ import './alpha/tool_tip'
 import './alpha/x_banner'
 import './beta/auto_complete/auto_complete'
 import './clipboard_copy'
-import './dropdown'
 import './local_time'
 import './tab_container_component'
 import './time_ago_component'

data/lib/primer/deprecations.rb

@@ -7,15 +7,17 @@ module Primer
     DEPRECATED_COMPONENTS = {
       "Primer::LabelComponent" => "Primer::Beta::Label",
       "Primer::LinkComponent" => "Primer::Beta::Link",
-      "Primer::Image" => "Primer::Alpha::Image",
       "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",
       "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",
       "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
       "Primer::BoxComponent" => "Primer::Box",
       "Primer::DropdownMenuComponent" => nil,
+      "Primer::Dropdown" => "Primer::Alpha::Dropdown",
+      "Primer::Dropdown::Menu" => "Primer::Alpha::Dropdown::Menu",
+      "Primer::Dropdown::Menu::Item" => "Primer::Alpha::Dropdown::Menu::Item",
       "Primer::IconButton" => "Primer::Beta::IconButton",
       "Primer::Tooltip" => "Primer::Alpha::Tooltip",
-      "Primer::ProgressBarComponent" => "Primer::Beta::ProgressBar"
+      "Primer::PopoverComponent" => "Primer::Beta::Popover"
     }.freeze
 
     def self.deprecated?(name)

data/lib/primer/view_components/linters/deprecated_components_counter.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 require_relative "helpers/deprecated_components_helpers"
+require_relative "severity_schema"
+
 require "erblint-github/linters/custom_helpers"
 
 module ERBLint
@@ -11,6 +13,8 @@ module ERBLint
       include ERBLint::LinterRegistry
       include Helpers::DeprecatedComponentsHelpers
 
+      self.config_schema = SeveritySchema
+
       def run(processed_source)
         processed_source.ast.descendants(:erb).each do |erb_node|
           _, _, code_node = *erb_node
@@ -21,10 +25,7 @@ module ERBLint
           deprecated_components.each do |component|
             next unless code.include?(component)
 
-            add_offense(
-              erb_node.loc,
-              message(component)
-            )
+            add_offense(erb_node.loc, message(component))
           end
         end
 
@@ -44,6 +45,16 @@ module ERBLint
           end
         end
       end
+
+      # this override is necessary because of the github/erblint-github `CustomHelpers`
+      # module. `counter_correct?` is provided by this module, and calls `add_offense`
+      # directly. there is no simple way to modify this without updating the gem and
+      # creating what would likely be an API that is non-standard and/or difficult to use
+      #
+      # https://github.com/github/erblint-github/blob/main/lib/erblint-github/linters/custom_helpers.rb
+      def add_offense(source_range, message, context = nil, severity = nil)
+        super(source_range, message, context, severity || @config.severity)
+      end
     end
   end
 end

data/lib/primer/view_components/linters/severity_schema.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require "erb_lint/utils/severity_levels"
+
+module ERBLint
+  module Linters
+    class SeveritySchema < LinterConfig
+      # SEVERITY_NAMES :info, :refactor, :convention, :warning, :error, :fatal
+      # see https://github.com/Shopify/erb-lint/blob/main/lib/erb_lint/utils/severity_levels.rb
+
+      property :severity, accepts: ERBLint::Utils::SeverityLevels::SEVERITY_NAMES, default: nil, reader: :severity
+    end
+  end
+end

data/lib/primer/view_components/version.rb

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

data/lib/tasks/docs.rake

@@ -58,7 +58,7 @@ namespace :docs do
       Primer::Beta::Counter,
       Primer::Beta::Details,
       Primer::Alpha::Dialog,
-      Primer::Dropdown,
+      Primer::Alpha::Dropdown,
       Primer::DropdownMenuComponent,
       Primer::Beta::Flash,
       Primer::Beta::Heading,
@@ -70,7 +70,7 @@ namespace :docs do
       Primer::MenuComponent,
       Primer::Navigation::TabComponent,
       Primer::OcticonComponent,
-      Primer::PopoverComponent,
+      Primer::Beta::Popover,
       Primer::Beta::ProgressBar,
       Primer::StateComponent,
       Primer::SpinnerComponent,
@@ -99,7 +99,7 @@ namespace :docs do
     ]
 
     js_components = [
-      Primer::Dropdown,
+      Primer::Alpha::Dropdown,
       Primer::LocalTime,
       Primer::Alpha::ImageCrop,
       Primer::Beta::AutoComplete,

data/previews/primer/alpha/button_marketing_preview.rb

@@ -21,6 +21,42 @@ module Primer
       def default(tag: :button, type: :button, scheme: :default, variant: :default)
         render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant)) { "Default" }
       end
+
+      # @!group Size Variants
+      #
+      # @label Default
+      def sizes_default
+        render(Primer::Alpha::ButtonMarketing.new) { "Default" }
+      end
+
+      # @label Large
+      def sizes_large
+        render(Primer::Alpha::ButtonMarketing.new(variant: :large)) { "Large" }
+      end
+      # @!endgroup
+
+      # @!group Schemes
+      #
+      # @label Default
+      def scheme_default
+        render(Primer::Alpha::ButtonMarketing.new) { "Default" }
+      end
+
+      # @label Primary
+      def scheme_primary
+        render(Primer::Alpha::ButtonMarketing.new(scheme: :primary)) { "Primary" }
+      end
+
+      # @label Outline
+      def scheme_outline
+        render(Primer::Alpha::ButtonMarketing.new(scheme: :outline)) { "Outline" }
+      end
+
+      # @label Transparent
+      def scheme_transparent
+        render(Primer::Alpha::ButtonMarketing.new(scheme: :transparent)) { "Transparent" }
+      end
+      # @!endgroup
     end
   end
 end