openproject-primer_view_components 0.6.3

data/app/components/primer/alpha/dropdown/menu.rb

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class Dropdown
+      # This component is part of `Dropdown` and should not be
+      # used as a standalone component.
+      class Menu < Primer::Component
+        status :alpha
+
+        AS_DEFAULT = :default
+        AS_OPTIONS = [AS_DEFAULT, :list].freeze
+
+        SCHEME_DEFAULT = :default
+        SCHEME_MAPPINGS = {
+          SCHEME_DEFAULT => "",
+          :dark => "dropdown-menu-dark"
+        }.freeze
+
+        DIRECTION_DEFAULT = :se
+        DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
+
+        # @param tag [Symbol] <%= one_of(Primer::Alpha::Dropdown::Menu::Item::TAG_OPTIONS) %>.
+        # @param divider [Boolean] Whether the item is a divider without any function.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        renders_many :items, lambda { |divider: false, **system_arguments|
+          Primer::Alpha::Dropdown::Menu::Item.new(as: @as, divider: divider, **system_arguments)
+        }
+
+        # @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::Alpha::Dropdown::Menu::DIRECTION_OPTIONS) %>.
+        # @param header [String] Header to be displayed above the menu.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(as: AS_DEFAULT, direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
+          @header = header
+          @direction = direction
+          @as = fetch_or_fallback(AS_OPTIONS, as, AS_DEFAULT)
+
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = "details-menu"
+          @system_arguments[:role] = "menu"
+
+          @system_arguments[:classes] = class_names(
+            @system_arguments[:classes],
+            "dropdown-menu",
+            "dropdown-menu-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
+            SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, SCHEME_DEFAULT)]
+          )
+        end
+
+        private
+
+        def list?
+          @as == :list
+        end
+
+        # Items to be rendered in the `Dropdown` menu.
+        class Item < Primer::Component
+          status :alpha
+
+          TAG_DEFAULT = :a
+          BUTTON_TAGS = [:button, :summary].freeze
+          TAG_OPTIONS = [TAG_DEFAULT, *BUTTON_TAGS].freeze
+
+          def initialize(as:, tag: TAG_DEFAULT, divider: false, **system_arguments)
+            @divider = divider
+            @as = as
+
+            @system_arguments = system_arguments
+            @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+            @system_arguments[:tag] = :li if list? && divider?
+            @system_arguments[:role] ||= :menuitem
+            @system_arguments[:role] = :presentation if divider
+            @system_arguments[:classes] = class_names(
+              @system_arguments[:classes],
+              "dropdown-item" => !divider,
+              "dropdown-divider" => divider
+            )
+          end
+
+          def call
+            component = if BUTTON_TAGS.include?(@system_arguments[:tag])
+                          # rubocop:disable Primer/ComponentNameMigration
+                          Primer::ButtonComponent.new(scheme: :link, **@system_arguments)
+                          # rubocop:enable Primer/ComponentNameMigration
+                        else
+                          Primer::BaseComponent.new(**@system_arguments)
+                        end
+
+            # divider has no content
+            render(component) if divider?
+
+            render(component) { content }
+          end
+
+          def divider?
+            @divider
+          end
+
+          def list?
+            @as == :list
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/dropdown/menu.ts

@@ -0,0 +1 @@
+import '@github/details-menu-element'

data/app/components/primer/alpha/dropdown.css

@@ -0,0 +1 @@
+.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker,max(4px,.25rem)) var(--borderWidth-thicker,max(4px,.25rem)) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px);box-shadow:var(--shadow-floating-large,var(--color-shadow-large));left:0;list-style:none;margin-top:2px;padding-bottom:var(--control-small-paddingBlock,.25rem);padding-top:var(--control-small-paddingBlock,.25rem);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default,var(--color-border-default))}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor,var(--color-canvas-overlay))}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem);text-overflow:inherit}.dropdown-item{color:var(--fgColor-default,var(--color-fg-default));display:block;overflow:hidden;padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-condensed,.5rem) var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-fg));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-],.dropdown-item:hover>.Label{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));display:block;height:0;margin:var(--stack-gap-condensed,.5rem) 0}.dropdown-header{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:8px;margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--borderColor-default,var(--color-border-default));left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:auto;right:-14px;top:11px}.dropdown-menu-e{left:100%;margin-left:8px;margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--borderColor-default,var(--color-border-default));left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:-14px;top:11px}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:3px;top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--borderColor-default,var(--color-border-default));bottom:-8px;left:9px}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--overlay-bgColor,var(--color-canvas-overlay));bottom:-7px;left:10px}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:9px;top:-16px}.dropdown-menu-sw:after{left:auto;right:10px;top:-14px}.dropdown-menu-se:before{left:9px;top:-16px}.dropdown-menu-se:after{left:10px;top:-14px}

data/app/components/primer/alpha/dropdown.css.json

@@ -0,0 +1,40 @@
+{
+  "name": "alpha/dropdown",
+  "selectors": [
+    ".dropdown",
+    ".dropdown-caret",
+    ".dropdown-menu",
+    ".dropdown-menu:after",
+    ".dropdown-menu:before",
+    ".dropdown-menu>ul",
+    ".dropdown-menu-no-overflow",
+    ".dropdown-menu-no-overflow .dropdown-item",
+    ".dropdown-item",
+    ".dropdown-item:hover",
+    ".dropdown-item:hover>.octicon",
+    ".dropdown-item:hover [class*=color-fg-]",
+    ".dropdown-item:hover>.Label",
+    ".dropdown-item.btn-link",
+    ".dropdown-signout",
+    ".dropdown-divider",
+    ".dropdown-header",
+    ".dropdown-item[aria-checked=false] .octicon-check",
+    ".dropdown-menu-w",
+    ".dropdown-menu-w:before",
+    ".dropdown-menu-w:after",
+    ".dropdown-menu-e",
+    ".dropdown-menu-e:before",
+    ".dropdown-menu-e:after",
+    ".dropdown-menu-ne",
+    ".dropdown-menu-ne:after",
+    ".dropdown-menu-ne:before",
+    ".dropdown-menu-s",
+    ".dropdown-menu-s:before",
+    ".dropdown-menu-s:after",
+    ".dropdown-menu-sw",
+    ".dropdown-menu-sw:before",
+    ".dropdown-menu-sw:after",
+    ".dropdown-menu-se:before",
+    ".dropdown-menu-se:after"
+  ]
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,oGAAqE,CAFrE,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAWE,2BAA4B,CAD5B,mEAAwC,CAExC,6GAAgE,CAChE,4CAAyC,CACzC,iEAAwC,CAXxC,MAAO,CAMP,eAAgB,CADhB,cAAe,CADf,uDAAiD,CADjD,oDAA8C,CAL9C,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAkCF,CAtBE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAEE,sBAA+C,CAA/C,8EACF,CAGA,qBAEE,sBAA2C,CAA3C,0EACF,CAEA,kBACE,eACF,CAGF,2BACE,UAOF,CALE,0CAEE,gBAAiB,CADjB,kGAAuF,CAEvF,qBACF,CAIF,eAKE,oDAA6B,CAJ7B,aAAc,CAGd,eAAgB,CAFhB,+LACgF,CAGhF,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,sEAAgD,CAFhD,2DAAgC,CAChC,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAMA,oEACE,uBAEF,CAHA,4BAEE,yBACF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAIE,iHAAoE,CAHpE,aAAc,CACd,QAAS,CACT,yCAEF,CAEA,iBAGE,gDAA2B,CAD3B,4CAAsC,CADtC,kGAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,gBAAiB,CADjB,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAmBF,CAfE,wBAIE,kBAAyB,CACzB,wEAA6C,CAF7C,SAAU,CADV,WAAY,CADZ,QAKF,CAEA,uBAIE,kBAAyB,CACzB,oEAAyC,CAFzC,SAAU,CADV,WAAY,CADZ,QAKF,CAGF,iBAEE,SAAU,CAGV,eAAgB,CADhB,YAAa,CAHb,KAAM,CAEN,UAiBF,CAbE,wBAGE,kBAAyB,CACzB,yEAA8C,CAF9C,UAAW,CADX,QAIF,CAEA,uBAGE,kBAAyB,CACzB,qEAA0C,CAF1C,UAAW,CADX,QAIF,CAGF,kBAEE,WAAY,CACZ,MAAO,CACP,iBAAkB,CAHlB,QA4BF,CAvBE,iDAGE,UAAW,CADX,QAEF,CAEA,yBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,2EAAgD,CAFhD,WAAY,CACZ,QAKF,CAEA,wBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,uEAA4C,CAF5C,WAAY,CACZ,SAKF,CAGF,iBAEE,SAAU,CADV,SAAU,CAEV,yBAaF,CAXE,wBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAEA,uBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAGF,kBAEE,SAAU,CADV,OAcF,CAXE,yBAGE,SAAU,CADV,SAAU,CADV,SAGF,CAEA,wBAGE,SAAU,CADV,UAAW,CADX,SAGF,CAIA,yBAEE,QAAS,CADT,SAEF,CAEA,wBAEE,SAAU,CADV,SAEF","file":"dropdown.css","sourcesContent":["/* dropdown */\n\n.dropdown {\n  position: relative;\n}\n\n.dropdown-caret {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  vertical-align: middle;\n  content: '';\n  border-style: solid;\n  border-width: var(--borderWidth-thicker) var(--borderWidth-thicker) 0;\n  border-right-color: transparent;\n  border-bottom-color: transparent;\n  border-left-color: transparent;\n}\n\n/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which\n** way the menu should render from the element triggering it. */\n\n.dropdown-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 100;\n  width: 160px;\n  padding-top: var(--control-small-paddingBlock);\n  padding-bottom: var(--control-small-paddingBlock);\n  margin-top: 2px;\n  list-style: none;\n  background-color: var(--overlay-bgColor);\n  background-clip: padding-box;\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-floating-large);\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: inline-block;\n    content: '';\n  }\n\n  /* caret border */\n  &::before {\n    border: 8px solid transparent;\n    border-bottom-color: var(--borderColor-default);\n  }\n\n  /* caret background (should match dropdown background) */\n  &::after {\n    border: 7px solid transparent;\n    border-bottom-color: var(--overlay-bgColor);\n  }\n\n  & > ul {\n    list-style: none;\n  }\n}\n\n.dropdown-menu-no-overflow {\n  width: auto;\n\n  & .dropdown-item {\n    padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n    overflow: visible;\n    text-overflow: inherit;\n  }\n}\n\n/* Dropdown items (can be links or buttons) */\n.dropdown-item {\n  display: block;\n  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed)\n    var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n  overflow: hidden;\n  color: var(--fgColor-default);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    & > .octicon {\n      color: inherit;\n      opacity: 1;\n    }\n\n    & [class*='color-fg-'] {\n      color: inherit !important;\n    }\n\n    & > .Label {\n      color: inherit !important;\n      border-color: currentcolor;\n    }\n  }\n\n  &.btn-link {\n    width: 100%;\n    text-align: left;\n  }\n}\n\n.dropdown-signout {\n  width: 100%;\n  text-align: left;\n  background: none;\n  border: 0;\n}\n\n.dropdown-divider {\n  display: block;\n  height: 0;\n  margin: var(--stack-gap-condensed) 0;\n  border-top: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.dropdown-header {\n  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n}\n\n.dropdown-item[aria-checked='false'] .octicon-check {\n  display: none;\n}\n\n/* Directional classes\n**\n** Move the menu and the caret attached to it. Requires at least one of these on\n** the `.dropdown-menu` element. */\n\n.dropdown-menu-w {\n  top: 0;\n  right: 100%;\n  left: auto;\n  width: auto;\n  margin-top: 0;\n  margin-right: 8px;\n\n  &::before {\n    top: 10px;\n    right: -16px;\n    left: auto;\n    border-color: transparent;\n    border-left-color: var(--borderColor-default);\n  }\n\n  &::after {\n    top: 11px;\n    right: -14px;\n    left: auto;\n    border-color: transparent;\n    border-left-color: var(--overlay-bgColor);\n  }\n}\n\n.dropdown-menu-e {\n  top: 0;\n  left: 100%;\n  width: auto;\n  margin-top: 0;\n  margin-left: 8px;\n\n  &::before {\n    top: 10px;\n    left: -16px;\n    border-color: transparent;\n    border-right-color: var(--borderColor-default);\n  }\n\n  &::after {\n    top: 11px;\n    left: -14px;\n    border-color: transparent;\n    border-right-color: var(--overlay-bgColor);\n  }\n}\n\n.dropdown-menu-ne {\n  top: auto;\n  bottom: 100%;\n  left: 0;\n  margin-bottom: 3px;\n\n  &::before,\n  &::after {\n    top: auto;\n    right: auto;\n  }\n\n  &::before {\n    bottom: -8px;\n    left: 9px;\n    border-top: 8px solid var(--borderColor-default);\n    border-right: 8px solid transparent;\n    border-bottom: 0;\n    border-left: 8px solid transparent;\n  }\n\n  &::after {\n    bottom: -7px;\n    left: 10px;\n    border-top: 7px solid var(--overlay-bgColor);\n    border-right: 7px solid transparent;\n    border-bottom: 0;\n    border-left: 7px solid transparent;\n  }\n}\n\n.dropdown-menu-s {\n  right: 50%;\n  left: auto;\n  transform: translateX(50%);\n\n  &::before {\n    top: -16px;\n    right: 50%;\n    transform: translateX(50%);\n  }\n\n  &::after {\n    top: -14px;\n    right: 50%;\n    transform: translateX(50%);\n  }\n}\n\n.dropdown-menu-sw {\n  right: 0;\n  left: auto;\n\n  &::before {\n    top: -16px;\n    right: 9px;\n    left: auto;\n  }\n\n  &::after {\n    top: -14px;\n    right: 10px;\n    left: auto;\n  }\n}\n\n.dropdown-menu-se {\n  &::before {\n    top: -16px;\n    left: 9px;\n  }\n\n  &::after {\n    top: -14px;\n    left: 10px;\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+import './dropdown/menu';

data/app/components/primer/alpha/dropdown.html.erb

@@ -0,0 +1,9 @@
+<%= render(Primer::Beta::Details.new(**@system_arguments)) do |component| %>
+  <% component.with_summary(**@button_arguments) do %>
+    <%= button %>
+  <% end %>
+
+  <% component.with_body do %>
+    <%= menu %>
+  <% end %>
+<% end %>

data/app/components/primer/alpha/dropdown.js

@@ -0,0 +1 @@
+import './dropdown/menu';

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

@@ -0,0 +1,261 @@
+/* dropdown */
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown-caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: middle;
+  content: '';
+  border-style: solid;
+  border-width: var(--borderWidth-thicker) var(--borderWidth-thicker) 0;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which
+** way the menu should render from the element triggering it. */
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  width: 160px;
+  padding-top: var(--control-small-paddingBlock);
+  padding-bottom: var(--control-small-paddingBlock);
+  margin-top: 2px;
+  list-style: none;
+  background-color: var(--overlay-bgColor);
+  background-clip: padding-box;
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+  box-shadow: var(--shadow-floating-large);
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: inline-block;
+    content: '';
+  }
+
+  /* caret border */
+  &::before {
+    border: 8px solid transparent;
+    border-bottom-color: var(--borderColor-default);
+  }
+
+  /* caret background (should match dropdown background) */
+  &::after {
+    border: 7px solid transparent;
+    border-bottom-color: var(--overlay-bgColor);
+  }
+
+  & > ul {
+    list-style: none;
+  }
+}
+
+.dropdown-menu-no-overflow {
+  width: auto;
+
+  & .dropdown-item {
+    padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
+    overflow: visible;
+    text-overflow: inherit;
+  }
+}
+
+/* Dropdown items (can be links or buttons) */
+.dropdown-item {
+  display: block;
+  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed)
+    var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
+  overflow: hidden;
+  color: var(--fgColor-default);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover {
+    color: var(--fgColor-onEmphasis);
+    text-decoration: none;
+    background-color: var(--bgColor-accent-emphasis);
+
+    & > .octicon {
+      color: inherit;
+      opacity: 1;
+    }
+
+    & [class*='color-fg-'] {
+      color: inherit !important;
+    }
+
+    & > .Label {
+      color: inherit !important;
+      border-color: currentcolor;
+    }
+  }
+
+  &.btn-link {
+    width: 100%;
+    text-align: left;
+  }
+}
+
+.dropdown-signout {
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+}
+
+.dropdown-divider {
+  display: block;
+  height: 0;
+  margin: var(--stack-gap-condensed) 0;
+  border-top: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
+.dropdown-header {
+  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
+  font-size: var(--text-body-size-small);
+  color: var(--fgColor-muted);
+}
+
+.dropdown-item[aria-checked='false'] .octicon-check {
+  display: none;
+}
+
+/* Directional classes
+**
+** Move the menu and the caret attached to it. Requires at least one of these on
+** the `.dropdown-menu` element. */
+
+.dropdown-menu-w {
+  top: 0;
+  right: 100%;
+  left: auto;
+  width: auto;
+  margin-top: 0;
+  margin-right: 8px;
+
+  &::before {
+    top: 10px;
+    right: -16px;
+    left: auto;
+    border-color: transparent;
+    border-left-color: var(--borderColor-default);
+  }
+
+  &::after {
+    top: 11px;
+    right: -14px;
+    left: auto;
+    border-color: transparent;
+    border-left-color: var(--overlay-bgColor);
+  }
+}
+
+.dropdown-menu-e {
+  top: 0;
+  left: 100%;
+  width: auto;
+  margin-top: 0;
+  margin-left: 8px;
+
+  &::before {
+    top: 10px;
+    left: -16px;
+    border-color: transparent;
+    border-right-color: var(--borderColor-default);
+  }
+
+  &::after {
+    top: 11px;
+    left: -14px;
+    border-color: transparent;
+    border-right-color: var(--overlay-bgColor);
+  }
+}
+
+.dropdown-menu-ne {
+  top: auto;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 3px;
+
+  &::before,
+  &::after {
+    top: auto;
+    right: auto;
+  }
+
+  &::before {
+    bottom: -8px;
+    left: 9px;
+    border-top: 8px solid var(--borderColor-default);
+    border-right: 8px solid transparent;
+    border-bottom: 0;
+    border-left: 8px solid transparent;
+  }
+
+  &::after {
+    bottom: -7px;
+    left: 10px;
+    border-top: 7px solid var(--overlay-bgColor);
+    border-right: 7px solid transparent;
+    border-bottom: 0;
+    border-left: 7px solid transparent;
+  }
+}
+
+.dropdown-menu-s {
+  right: 50%;
+  left: auto;
+  transform: translateX(50%);
+
+  &::before {
+    top: -16px;
+    right: 50%;
+    transform: translateX(50%);
+  }
+
+  &::after {
+    top: -14px;
+    right: 50%;
+    transform: translateX(50%);
+  }
+}
+
+.dropdown-menu-sw {
+  right: 0;
+  left: auto;
+
+  &::before {
+    top: -16px;
+    right: 9px;
+    left: auto;
+  }
+
+  &::after {
+    top: -14px;
+    right: 10px;
+    left: auto;
+  }
+}
+
+.dropdown-menu-se {
+  &::before {
+    top: -16px;
+    left: 9px;
+  }
+
+  &::after {
+    top: -14px;
+    left: 10px;
+  }
+}

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

@@ -0,0 +1,154 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # `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
+      status :alpha
+
+      # 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::Alpha::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::Alpha::Dropdown::Menu"
+
+      # @example Default
+      #   <%= render(Primer::Alpha::Dropdown.new) do |component| %>
+      #     <% component.with_button do %>
+      #       Dropdown
+      #     <% end %>
+      #
+      #     <% component.with_menu(header: "Options") do |menu|
+      #       menu.with_item { "Item 1" }
+      #       menu.with_item { "Item 2" }
+      #       menu.with_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::Alpha::Dropdown.new) do |component| %>
+      #       <% component.with_button do %>
+      #         Dropdown
+      #       <% end %>
+      #
+      #       <% component.with_menu(header: "Options") do |menu|
+      #         menu.with_item { "Item 1" }
+      #         menu.with_item { "Item 2" }
+      #         menu.with_item(divider: true)
+      #         menu.with_item { "Item 3" }
+      #         menu.with_item { "Item 4" }
+      #         menu.with_item(divider: true)
+      #         menu.with_item { "Item 5" }
+      #         menu.with_item { "Item 6" }
+      #       end %>
+      #     <% end %>
+      #
+      # @example With direction
+      #   <%= render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component| %>
+      #     <% component.with_button do %>
+      #       Dropdown
+      #     <% end %>
+      #
+      #     <% component.with_menu(header: "Options", direction: :s) do |menu|
+      #       menu.with_item { "Item 1" }
+      #       menu.with_item { "Item 2" }
+      #       menu.with_item { "Item 3" }
+      #       menu.with_item { "Item 4" }
+      #     end %>
+      #   <% end %>
+      #
+      # @example With caret
+      #   <%= render(Primer::Alpha::Dropdown.new(with_caret: true)) do |component| %>
+      #     <% component.with_button do %>
+      #       Dropdown
+      #     <% end %>
+      #
+      #     <% component.with_menu(header: "Options") do |menu|
+      #       menu.with_item { "Item 1" }
+      #       menu.with_item { "Item 2" }
+      #       menu.with_item { "Item 3" }
+      #       menu.with_item { "Item 4" }
+      #     end %>
+      #   <% end %>
+      #
+      # @example Customizing the button
+      #   <%= render(Primer::Alpha::Dropdown.new) do |component| %>
+      #     <% component.with_button(scheme: :primary, size: :small) do %>
+      #       Dropdown
+      #     <% end %>
+      #
+      #     <% component.with_menu(header: "Options") do |menu|
+      #       menu.with_item { "Item 1" }
+      #       menu.with_item { "Item 2" }
+      #       menu.with_item { "Item 3" }
+      #       menu.with_item { "Item 4" }
+      #     end %>
+      #   <% end %>
+      #
+      # @example Menu as list
+      #   <%= render(Primer::Alpha::Dropdown.new) do |component| %>
+      #     <% component.with_button do %>
+      #       Dropdown
+      #     <% end %>
+      #
+      #     <% component.with_menu(as: :list, header: "Options") do |menu|
+      #       menu.with_item { "Item 1" }
+      #       menu.with_item { "Item 2" }
+      #       menu.with_item(divider: true)
+      #       menu.with_item { "Item 3" }
+      #       menu.with_item { "Item 4" }
+      #     end %>
+      #   <% end %>
+      #
+      # @example Customizing menu items
+      #   <%= render(Primer::Alpha::Dropdown.new) do |component| %>
+      #     <% component.with_button do %>
+      #       Dropdown
+      #     <% end %>
+      #
+      #     <% component.with_menu(header: "Options") do |menu|
+      #       menu.with_item(tag: :button) { "Item 1" }
+      #       menu.with_item(classes: "custom-class") { "Item 2" }
+      #       menu.with_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? && menu?
+      end
+    end
+  end
+end

data/app/components/primer/alpha/dropdown.ts

@@ -0,0 +1 @@
+import './dropdown/menu'

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

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    FormButton = Primer::FormComponents.from_input(Primer::Forms::Dsl::ButtonInput)
+
+    # A button input rendered using the HTML `<button type="button">` tag.
+    #
+    # This component wraps the Primer button component and supports the same slots and arguments.
+    #
+    # @form_usage
+    #   class ExampleForm < ApplicationForm
+    #     form do |example_form|
+    #       example_form.button(attributes)
+    #     end
+    #   end
+    class FormButton < Primer::Component
+      status :alpha
+
+      # @!method initialize
+      #
+      # @param name [String] Value for the HTML name attribute.
+      # @param id [String] Value for the HTML id attribute.
+      # @param class [String] CSS classes to include in the input's HTML `class` attribute. Exists for compatibility with Rails form builders.
+      # @param classes [Array] CSS classes to include in the input's HTML `class` attribute. Combined with the `:class` argument. The list may contain strings, hashes, or `nil` values, and is automatically cleaned up by Primer's [`class_name` helper](https://github.com/primer/view_components/blob/c9cb95c98fee3e2e27f4a10683f555e22285e7f1/app/lib/primer/class_name_helper.rb) (`nils`, falsy entries, and blank strings are ignored).
+      # @param label [String] Label text displayed above the input.
+      # @param aria [Hash] Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current="true"`.
+      # @param data [Hash] Key/value pairs that represent data attributes and their values. Eg. `data: { foo: "bar" }` becomes `data-foo="bar"`.
+      # @macro form_system_arguments
+    end
+  end
+end

data/app/components/primer/alpha/form_control.html.erb

@@ -0,0 +1,26 @@
+<%= render(Primer::BaseComponent.new(tag: :div, **@system_arguments)) do %>
+  <%= render(Primer::BaseComponent.new(tag: :label, **@label_arguments)) do %>
+    <%= @label %>
+    <% if required? %>
+      <span aria-hidden="true">*</span>
+    <% end %>
+  <% end %>
+  <% if @input_block %>
+    <%= view_context.capture { @input_block.call(@input_arguments) } %>
+  <% end %>
+  <% if @validation_message %>
+    <%= render(Primer::BaseComponent.new(tag: :div, **@validation_arguments)) do %>
+      <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
+      <span><%= @validation_message %></span>
+    <% end %>
+  <% end %>
+  <% if @init_caption || caption? %>
+    <span class="FormControl-caption" id="<%= @caption_id %>">
+      <% if caption? %>
+        <%= caption %>
+      <% else %>
+        <%= @init_caption %>
+      <% end %>
+    </span>
+  <% end %>
+<% end %>