ActionMenu: Add fullscreen option to ActionMenu for narrow viewports (#3955)

Co-authored-by: primer-css <primer-css@users.noreply.github.com>

Author: TylerJDev

.changeset/easy-zoos-leave.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+ActionMenu: Add fullscreen option to ActionMenu

app/components/primer/alpha/action_menu.rb

@@ -187,6 +187,7 @@ class ActionMenu < Primer::Component
       # @param menu_id [String] Id of the menu.
       # @param anchor_align [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>.
       # @param anchor_side [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>.
+      # @param anchor_when_narrow [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_WHEN_NARROW_OPTIONS) %>.
       # @param size [Symbol] <%= one_of(Primer::Alpha::Overlay::SIZE_OPTIONS) %>.
       # @param src [String] Used with an `include-fragment` element to load menu content from the given source URL.
       # @param preload [Boolean] When true, and src is present, loads the `include-fragment` on trigger hover.
@@ -200,6 +201,7 @@ def initialize(
         menu_id: self.class.generate_id,
         anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN,
         anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
+        anchor_when_narrow: Primer::Alpha::Overlay::DEFAULT_ANCHOR_WHEN_NARROW,
         size: Primer::Alpha::Overlay::DEFAULT_SIZE,
         src: nil,
         preload: DEFAULT_PRELOAD,
@@ -236,6 +238,7 @@ def initialize(
           visually_hide_title: true,
           anchor_align: anchor_align,
           anchor_side: anchor_side,
+          anchor_when_narrow: anchor_when_narrow,
           size: size,
           **overlay_arguments
         )

app/components/primer/alpha/dialog.pcss

@@ -422,6 +422,18 @@ dialog.Overlay:not([open]) {
     border-radius: unset !important;
     flex-grow: 1;
   }
+
+  .Overlay--fullscreen-whenNarrow {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    max-width: none !important;
+    height: 100vh;
+    max-height: none !important;
+    margin: 0;
+    border-radius: unset !important;
+  }
 }
 
 @keyframes Overlay--motion-slideDown {

app/components/primer/alpha/overlay.rb

@@ -65,6 +65,16 @@ class Overlay < Primer::Component
 
       ROLE_OPTIONS = [:dialog, :menu, nil].freeze
 
+      DEFAULT_ANCHOR_WHEN_NARROW = :inherit
+      ANCHOR_WHEN_NARROW_MAPPINGS = {
+        DEFAULT_ANCHOR_WHEN_NARROW => "",
+        :bottom => "Overlay--placement-bottom-whenNarrow",
+        :fullscreen => "Overlay--fullscreen-whenNarrow",
+        :left => "Overlay--placement-left-whenNarrow",
+        :right => "Overlay--placement-right-whenNarrow"
+      }.freeze
+      ANCHOR_WHEN_NARROW_OPTIONS = ANCHOR_WHEN_NARROW_MAPPINGS.keys
+
       # Optional button to open the Overlay.
       #
       # @param icon [String] Name of <%= link_to_octicons %> to use instead of text. If provided, a <%= link_to_component(Primer::Beta::IconButton) %> will be rendered. Otherwise a <%= link_to_component(Primer::Beta::Button) %> will be rendered.
@@ -132,6 +142,7 @@ class Overlay < Primer::Component
       # @param anchor_align [Symbol] The anchor alignment of the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
       # @param anchor_side [Symbol] The side to anchor the Overlay to. <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>
       # @param anchor_offset [Symbol] The anchor offset to give the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_OFFSET_OPTIONS) %>
+      # @param anchor_when_narrow [Symbol] The position of the Overlay when in a narrow viewport. <%= one_of(Primer::Alpha::Overlay::ANCHOR_WHEN_NARROW_OPTIONS) %>
       # @param allow_out_of_bounds [Boolean] Allow the Overlay to overflow its container.
       # @param visually_hide_title [Boolean] If true will hide the heading title, while still making it available to Screen Readers.
       # @param role [String] The ARIA role. <%= one_of(Primer::Alpha::Overlay::ROLE_OPTIONS) %>
@@ -147,6 +158,7 @@ def initialize(
         anchor_align: DEFAULT_ANCHOR_ALIGN,
         anchor_offset: DEFAULT_ANCHOR_OFFSET,
         anchor_side: DEFAULT_ANCHOR_SIDE,
+        anchor_when_narrow: DEFAULT_ANCHOR_WHEN_NARROW,
         allow_out_of_bounds: false,
         visually_hide_title: false,
         id: self.class.generate_id,
@@ -159,7 +171,8 @@ def initialize(
         @system_arguments[:id] = id.to_s
         @wrapper_classes = class_names(
           "Overlay",
-          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
+          ANCHOR_WHEN_NARROW_MAPPINGS[fetch_or_fallback(ANCHOR_WHEN_NARROW_OPTIONS, anchor_when_narrow, DEFAULT_ANCHOR_WHEN_NARROW)]
         )
         @system_arguments[:tag] = "anchored-position"
         @system_arguments[:anchor] = anchor || "overlay-show-#{@system_arguments[:id]}"

previews/primer/alpha/action_menu_preview.rb

@@ -9,12 +9,14 @@ class ActionMenuPreview < ViewComponent::Preview
       # @param select_variant [Symbol] select [single, multiple, none]
       # @param anchor_align [Symbol] select [start, center, end]
       # @param anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
+      # @param anchor_when_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
       # @param size [Symbol] select [auto, small, medium, large, xlarge]
       def playground(
         select_variant: Primer::Alpha::ActionMenu::DEFAULT_SELECT_VARIANT, anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN, anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
+        anchor_when_narrow: Primer::Alpha::Overlay::DEFAULT_ANCHOR_WHEN_NARROW,
         size: Primer::Alpha::Overlay::DEFAULT_SIZE
       )
-        render(Primer::Alpha::ActionMenu.new(select_variant: select_variant, anchor_align: anchor_align, anchor_side: anchor_side, size: size)) do |menu|
+        render(Primer::Alpha::ActionMenu.new(select_variant: select_variant, anchor_align: anchor_align, anchor_side: anchor_side, anchor_when_narrow: anchor_when_narrow, size: size)) do |menu|
           menu.with_show_button { "Menu" }
           menu.with_item(label: "Copy link")
           menu.with_item(label: "Quote reply")
@@ -405,6 +407,35 @@ def leading_visual_single_select
       # @label Two menus
       #
       def two_menus; end
+
+      # @label Fullscreen when narrow
+      #
+      def fullscreen_when_narrow
+        render(Primer::Alpha::ActionMenu.new(anchor_when_narrow: :fullscreen)) do |menu|
+          menu.with_show_button do |button|
+            button.with_trailing_action_icon(icon: :"triangle-down")
+            "Options"
+          end
+
+          menu.with_item(label: "Edit profile") do |item|
+            item.with_description.with_content("Update your profile information")
+          end
+
+          menu.with_item(label: "Settings") do |item|
+            item.with_description.with_content("Configure your preferences")
+          end
+
+          menu.with_item(label: "Notifications") do |item|
+            item.with_description.with_content("Manage notification settings")
+          end
+
+          menu.with_divider
+
+          menu.with_item(label: "Sign out", scheme: :danger) do |item|
+            item.with_description.with_content("Log out of your account")
+          end
+        end
+      end
     end
   end
 end

static/arguments.json

@@ -343,6 +343,12 @@
         "default": "`:outside_bottom`",
         "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`.."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "`:inherit`",
+        "description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
+      },
       {
         "name": "size",
         "type": "Symbol",
@@ -1910,6 +1916,12 @@
         "default": "`:normal`",
         "description": "The anchor offset to give the Overlay. One of `:normal` or `:spacious`."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "`:inherit`",
+        "description": "The position of the Overlay when in a narrow viewport. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
+      },
       {
         "name": "allow_out_of_bounds",
         "type": "Boolean",

static/classes.json

@@ -423,6 +423,9 @@
   "Overlay--full-whenNarrow": [
     "Primer::Alpha::Dialog"
   ],
+  "Overlay--fullscreen-whenNarrow": [
+    "Primer::Alpha::Dialog"
+  ],
   "Overlay--hidden": [
     "Primer::Alpha::Dialog"
   ],

static/constants.json

@@ -579,11 +579,26 @@
       "outside_left",
       "outside_right"
     ],
+    "ANCHOR_WHEN_NARROW_MAPPINGS": {
+      "inherit": "",
+      "bottom": "Overlay--placement-bottom-whenNarrow",
+      "fullscreen": "Overlay--fullscreen-whenNarrow",
+      "left": "Overlay--placement-left-whenNarrow",
+      "right": "Overlay--placement-right-whenNarrow"
+    },
+    "ANCHOR_WHEN_NARROW_OPTIONS": [
+      "inherit",
+      "bottom",
+      "fullscreen",
+      "left",
+      "right"
+    ],
     "Body": "Primer::Alpha::Overlay::Body",
     "DEFAULT_ALIGN_CONTENT": "end",
     "DEFAULT_ANCHOR_ALIGN": "start",
     "DEFAULT_ANCHOR_OFFSET": "normal",
     "DEFAULT_ANCHOR_SIDE": "outside_bottom",
+    "DEFAULT_ANCHOR_WHEN_NARROW": "inherit",
     "DEFAULT_PADDING": "normal",
     "DEFAULT_POPOVER": "auto",
     "DEFAULT_SIZE": "auto",

static/info_arch.json

@@ -1203,6 +1203,12 @@
         "default": "`:outside_bottom`",
         "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`.."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "`:inherit`",
+        "description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
+      },
       {
         "name": "size",
         "type": "Symbol",
@@ -1763,6 +1769,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/action_menu/fullscreen_when_narrow",
+        "name": "fullscreen_when_narrow",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -5915,6 +5934,12 @@
         "default": "`:normal`",
         "description": "The anchor offset to give the Overlay. One of `:normal` or `:spacious`."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "`:inherit`",
+        "description": "The position of the Overlay when in a narrow viewport. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
+      },
       {
         "name": "allow_out_of_bounds",
         "type": "Boolean",

static/previews.json

@@ -826,6 +826,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/action_menu/fullscreen_when_narrow",
+        "name": "fullscreen_when_narrow",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },