openproject-primer_view_components 0.24.0 → 0.25.1

data/app/components/primer/open_project/page_header.rb

@@ -20,10 +20,12 @@ module Primer
         "triangle-left"
       ].freeze
 
+      DEFAULT_ACTION_SCHEME = :default
+      MORE_MENU_DISPLAY = [:flex, :none].freeze
+
       DEFAULT_LEADING_ACTION_DISPLAY = [:none, :flex].freeze
       DEFAULT_BREADCRUMBS_DISPLAY = [:none, :flex].freeze
       DEFAULT_PARENT_LINK_DISPLAY = [:block, :none].freeze
-      DEFAULT_CONTEXT_BAR_ACTIONS_DISPLAY = [:flex, :none].freeze
 
       status :open_project
 
@@ -54,24 +56,50 @@ module Primer
       # Actions
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_many :actions, lambda { |**system_arguments|
-        deny_tag_argument(**system_arguments)
-        system_arguments[:tag] = :div
-        system_arguments[:ml] ||= 2
+      renders_many :actions, types: {
+        icon_button: lambda { |icon:, mobile_icon:, label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
+          deny_tag_argument(**system_arguments)
+          system_arguments = set_action_arguments(system_arguments, scheme: scheme)
+          add_option_to_mobile_menu(system_arguments, mobile_icon, label, scheme)
 
-        Primer::BaseComponent.new(**system_arguments)
-      }
+          Primer::Beta::IconButton.new(icon: icon, "aria-label": label, **system_arguments)
+        },
+        button: lambda { |mobile_icon:, mobile_label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
+          deny_tag_argument(**system_arguments)
+          system_arguments = set_action_arguments(system_arguments, scheme: scheme)
+          add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)
 
-      # Context Bar Actions
-      # By default shown on narrow screens. Can be overridden with system_argument: display
-      #
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_many :context_bar_actions, lambda { |**system_arguments|
-        deny_tag_argument(**system_arguments)
-        system_arguments[:tag] = :div
-        system_arguments[:ml] ||= 2
+          Primer::Beta::Button.new(**system_arguments)
+        },
+        link: lambda { |mobile_icon:, mobile_label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
+          deny_tag_argument(**system_arguments)
+          system_arguments = set_action_arguments(system_arguments, scheme: scheme)
+          add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)
 
-        Primer::BaseComponent.new(**system_arguments)
+          Primer::Beta::Link.new(**system_arguments)
+        },
+        # Should only be used rarely on a per-need basis
+        text: lambda { |**system_arguments|
+          system_arguments = set_action_arguments(system_arguments)
+
+          system_arguments[:color] ||= :muted
+
+          # Enforce that texts are hidden on mobile
+          system_arguments[:display] = [:none, :flex]
+
+          Primer::Beta::Text.new(**system_arguments)
+        },
+        menu: {
+          renders: lambda { |**system_arguments, &block|
+            deny_tag_argument(**system_arguments)
+            system_arguments[:menu_arguments] = set_action_arguments(system_arguments[:menu_arguments])
+
+            # Add the options individually to the mobile menu in the template
+            @desktop_menu_block = block
+
+            PageHeaderActionMenu.new(**system_arguments)
+          },
+        },
       }
 
       # Optional leading action prepend the title
@@ -93,21 +121,6 @@ module Primer
         Primer::Beta::IconButton.new(icon: icon, **system_arguments)
       }
 
-      # Optional parent link in the context area
-      # By default shown on narrow screens. Can be overridden with system_argument: display
-      #
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :parent_link, lambda { |icon: DEFAULT_BACK_BUTTON_ICON, **system_arguments, &block|
-        deny_tag_argument(**system_arguments)
-        system_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, icon, DEFAULT_BACK_BUTTON_ICON)
-        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-parentLink")
-        system_arguments[:display] ||= DEFAULT_PARENT_LINK_DISPLAY
-
-        render(Primer::Beta::Link.new(scheme: :primary, muted: true, **system_arguments)) do
-          render(Primer::Beta::Octicon.new(icon: "arrow-left", "aria-label": "aria_label", mr: 2)) + content_tag(:span, &block)
-        end
-      }
-
       # Optional breadcrumbs above the title row
       # By default shown on wider screens. Can be overridden with system_argument: display
       #
@@ -117,6 +130,25 @@ module Primer
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-breadcrumbs")
         system_arguments[:display] ||= DEFAULT_BREADCRUMBS_DISPLAY
 
+        # show parent link if there is a parent for current page
+        if items.length > 1
+          link_arguments = {}
+          parent_item = items[items.length - 2]
+          parsed_parent_item = anchor_tag_string?(parent_item) ? anchor_string_to_object(parent_item) : parent_item
+
+          link_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, DEFAULT_BACK_BUTTON_ICON)
+          link_arguments[:href] = parsed_parent_item[:href]
+          link_arguments[:classes] = class_names(link_arguments[:classes], "PageHeader-parentLink")
+          link_arguments[:display] ||= DEFAULT_PARENT_LINK_DISPLAY
+
+          @parent_link = render(Primer::Beta::Link.new(scheme: :primary, muted: true, **link_arguments)) do
+            render(Primer::Beta::Octicon.new(icon: "arrow-left",
+                                             "aria-label": I18n.t("button_back"),
+                                             mr: 2)
+            ) + content_tag(:span, parsed_parent_item[:text])
+          end
+        end
+
         render(Primer::Beta::Breadcrumbs.new(**system_arguments)) do |breadcrumbs|
           items.each do |item|
             item = anchor_string_to_object(item) if anchor_tag_string?(item)
@@ -130,23 +162,83 @@ module Primer
         end
       }
 
-      def initialize(**system_arguments)
+      # @param mobile_menu_label [String] The tooltip label of the mobile menu
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(mobile_menu_label: I18n.t("label_more"), **system_arguments)
         @system_arguments = deny_tag_argument(**system_arguments)
+        @mobile_menu_label = mobile_menu_label
 
-        @system_arguments[:tag] = :header
+        @system_arguments[:tag] = :"page-header"
         @system_arguments[:classes] =
           class_names(
             @system_arguments[:classes],
             "PageHeader"
           )
+
+        @mobile_action_menu = Primer::Alpha::ActionMenu.new(
+          display: MORE_MENU_DISPLAY,
+          anchor_align: :end
+        )
       end
 
       def render?
-        title?
+        raise ArgumentError, "PageHeader needs a title and a breadcrumb. Please use the `with_title` and `with_breadcrumbs` slot" unless breadcrumbs? || Rails.env.production?
+        title? && breadcrumbs?
+      end
+
+      def before_render
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "PageHeader--singleAction": !render_mobile_menu?
+        )
+
+        content
+      end
+
+      def render_mobile_menu?
+        actions.count > 1
       end
 
       private
 
+      def set_action_arguments(system_arguments, scheme: nil)
+        system_arguments[:ml] ||= 2
+        system_arguments[:display] = [:none, :flex]
+        system_arguments[:scheme] = scheme unless scheme.nil?
+        system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "PageHeader-action",
+        )
+
+        system_arguments[:id] ||= self.class.generate_id
+        system_arguments
+      end
+
+      def add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)
+        unless mobile_icon.nil? || mobile_label.nil?
+          # In action menus, only :default and :danger are allowed
+          scheme = DEFAULT_ACTION_SCHEME unless scheme == :danger
+
+          with_menu_item(id: system_arguments[:id], label: mobile_label, scheme: scheme) do |c|
+            c.with_leading_visual_icon(icon: mobile_icon)
+          end
+        end
+      end
+
+      def with_menu_item(id:, **system_arguments, &block)
+        system_arguments = {
+          **system_arguments,
+          "data-for": id,
+          "data-action": "click:page-header#menuItemClick"
+        }
+
+        @mobile_action_menu.with_item(
+          value: "",
+          **system_arguments,
+          &block
+        )
+      end
+
       # transform anchor tag strings to {href, text} objects
       # e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
       def anchor_string_to_object(html_string)
@@ -161,6 +253,32 @@ module Primer
       def anchor_tag_string?(item)
         item.is_a?(String) && item.start_with?("\u003c")
       end
+
+      # A Helper class to create ActionMenus inside the PageHeader action slot
+      class PageHeaderActionMenu < Primer::Component
+        status :open_project
+
+        # @param menu_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu) %>.
+        # @param button_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> or <%= link_to_component(Primer::Beta::IconButton) %>, depending on the value of the `icon:` argument.
+        def initialize(menu_arguments: {}, button_arguments: {})
+          @menu = Primer::Alpha::ActionMenu.new(**menu_arguments)
+          @button = @menu.with_show_button(icon: "triangle-down", **button_arguments)
+        end
+
+        def render_in(view_context, &block)
+          super(view_context) do
+            block.call(@menu, @button)
+          end
+        end
+
+        def before_render
+          content
+        end
+
+        def call
+          render(@menu)
+        end
+      end
     end
   end
 end

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

@@ -0,0 +1,9 @@
+declare class PageHeaderElement extends HTMLElement {
+    menuItemClick(event: Event): void;
+}
+declare global {
+    interface Window {
+        PageHeaderElement: typeof PageHeaderElement;
+    }
+}
+export {};

data/app/components/primer/open_project/page_header_element.js

@@ -0,0 +1,23 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { controller } from '@github/catalyst';
+let PageHeaderElement = class PageHeaderElement extends HTMLElement {
+    menuItemClick(event) {
+        const currentTarget = event.currentTarget;
+        const id = currentTarget?.getAttribute('data-for');
+        if (id) {
+            document.getElementById(id)?.click();
+        }
+    }
+};
+PageHeaderElement = __decorate([
+    controller
+], PageHeaderElement);
+if (!window.customElements.get('page-header')) {
+    window.PageHeaderElement = PageHeaderElement;
+    window.customElements.define('page-header', PageHeaderElement);
+}

data/app/components/primer/open_project/page_header_element.ts

@@ -0,0 +1,25 @@
+import {controller} from '@github/catalyst'
+
+@controller
+class PageHeaderElement extends HTMLElement {
+  menuItemClick(event: Event) {
+    const currentTarget = event.currentTarget as HTMLButtonElement
+
+    const id = currentTarget?.getAttribute('data-for')
+
+    if (id) {
+      document.getElementById(id)?.click()
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    PageHeaderElement: typeof PageHeaderElement
+  }
+}
+
+if (!window.customElements.get('page-header')) {
+  window.PageHeaderElement = PageHeaderElement
+  window.customElements.define('page-header', PageHeaderElement)
+}

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

@@ -22,3 +22,4 @@ import '../../../lib/primer/forms/primer_multi_input';
 import '../../../lib/primer/forms/primer_text_field';
 import '../../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
+import './open_project/page_header_element';

data/app/components/primer/primer.js

@@ -22,3 +22,4 @@ import '../../../lib/primer/forms/primer_multi_input';
 import '../../../lib/primer/forms/primer_text_field';
 import '../../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
+import './open_project/page_header_element';

data/app/components/primer/primer.ts

@@ -22,3 +22,4 @@ import '../../../lib/primer/forms/primer_multi_input'
 import '../../../lib/primer/forms/primer_text_field'
 import '../../../lib/primer/forms/toggle_switch_input'
 import './alpha/action_menu/action_menu_element'
+import './open_project/page_header_element'

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 24
-      PATCH = 0
+      MINOR = 25
+      PATCH = 1
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/action_menu_preview.rb

@@ -326,7 +326,7 @@ module Primer
       # @label In Scoll container
       #
       def in_scroll_container
-        render_with_template()
+        render_with_template
       end
 
 

data/previews/primer/alpha/dialog_preview.rb

@@ -272,6 +272,30 @@ module Primer
                                visually_hide_title: visually_hide_title
                              })
       end
+
+      # @label Initially Open
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param size [Symbol] select [small, medium, medium_portrait, large, xlarge]
+      # @param position [Symbol] select [center, left, right]
+      # @param position_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
+      # @param visually_hide_title [Boolean] toggle
+      # @param disable_button [Boolean] toggle
+      # @param button_text [String] text
+      # @param body_text [String] text
+      # @param icon [Symbol] octicon
+      # @snapshot interactive
+      def initally_open(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "Show Dialog", body_text: "Content", position: :center, position_narrow: :fullscreen, visually_hide_title: false, icon: nil, disable_button: false)
+        render(Primer::Alpha::Dialog.new(open: true, title: title, subtitle: subtitle, size: size, position: position, position_narrow: position_narrow, visually_hide_title: visually_hide_title)) do |d|
+          if icon.present? && (icon != :none)
+            d.with_show_button(icon: icon, "aria-label": icon.to_s, disabled: disable_button)
+          else
+            d.with_show_button(disabled: disable_button) { button_text }
+          end
+          d.with_body { body_text }
+        end
+      end
     end
   end
 end

data/previews/primer/alpha/tooltip_preview/tooltip_e.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-e")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :e) %>
+      Tooltip east
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_n.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-n")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :n) %>
+      Tooltip north
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_ne.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-ne")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :ne) %>
+      Tooltip northeast
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_nw.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-nw")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :nw) %>
+      Tooltip northwest
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_s.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-s")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :s) %>
+      Tooltip south
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_se.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-se")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :se) %>
+      Tooltip southeast
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_sw.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-sw")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :sw) %>
+      Tooltip southwest
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview/tooltip_w.html.erb

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center; margin-top: 4rem;">
+    <%= render(Primer::Beta::Button.new(id: "tooltip-w")) do |b| %>
+      <% b.with_tooltip(text: "This is a tooltip", direction: :w) %>
+      Tooltip west
+    <% end %>
+</div>

data/previews/primer/alpha/tooltip_preview.rb

@@ -88,6 +88,86 @@ module Primer
       def tooltip_with_dialog_moving_focus_to_input
         render_with_template(locals: {})
       end
+
+      # @label Direction: North
+      # @snapshot interactive
+      def tooltip_n(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: South
+      # @snapshot interactive
+      def tooltip_s(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: East
+      # @snapshot interactive
+      def tooltip_e(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: West
+      # @snapshot interactive
+      def tooltip_w(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: Southeast
+      # @snapshot interactive
+      def tooltip_se(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: Southwest
+      # @snapshot interactive
+      def tooltip_sw(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: Northeast
+      # @snapshot interactive
+      def tooltip_ne(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
+
+      # @label Direction: Northwest
+      # @snapshot interactive
+      def tooltip_nw(type: :description)
+        render_with_template(
+          locals: {
+            type: type,
+          }
+        )
+      end
     end
   end
 end

data/previews/primer/beta/button_group_preview/with_menu_button.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::Beta::ButtonGroup.new) do |component| %>
+<%= render(Primer::Beta::ButtonGroup.new(scheme: scheme, size: size)) do |component| %>
   <% component.with_button { "Main menu" } %>
   <% component.with_menu_button(button_arguments: { "aria-label": "secondary menu" }, menu_arguments: { anchor_align: :end }) do |menu, button| %>
     <% menu.with_item(label: "Item 1", item_id: :item1) %>

data/previews/primer/beta/button_group_preview.rb

@@ -41,8 +41,14 @@ module Primer
 
       # @label With menu button
       #
+      # @param scheme [Symbol] select [default, primary, secondary, danger, invisible]
+      # @param size [Symbol] select [medium, small]
       # @snapshot
-      def with_menu_button
+      def with_menu_button(scheme: :default, size: :medium)
+        render_with_template(locals: {
+          scheme: scheme,
+          size: size
+        })
       end
 
       # @label Icon buttons

data/previews/primer/beta/icon_button_preview.rb

@@ -87,6 +87,31 @@ module Primer
                ))
       end
 
+      # @label Primary
+      # @param size select [small, medium, large]
+      # @param aria_label text
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      # @snapshot
+      def primary(
+        size: :medium,
+        id: "button-preview",
+        tag: :button,
+        disabled: false,
+        icon: :x,
+        aria_label: "Button"
+      )
+        render(Primer::Beta::IconButton.new(
+                 scheme: :primary,
+                 size: size,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled,
+                 icon: icon,
+                 "aria-label": aria_label
+               ))
+      end
+
       # @label Danger
       # @param size select [small, medium, large]
       # @param aria_label text

data/previews/primer/open_project/border_grid_preview.rb

@@ -21,7 +21,7 @@ module Primer
       # @label Default Options
       #
       # @snapshot
-      def default()
+      def default
         render(Primer::OpenProject::BorderGrid.new) do |grid|
           grid.with_row { "Block 1" }
           grid.with_row { "Block 2" }
@@ -30,7 +30,7 @@ module Primer
       end
 
       # @label Spacious
-      def spacious()
+      def spacious
         render(Primer::OpenProject::BorderGrid.new(spacious: true)) do |grid|
           grid.with_row { "Block 1" }
           grid.with_row { "Block 2" }

data/previews/primer/open_project/input_group_preview.rb

@@ -11,7 +11,7 @@ module Primer
       # @snapshot
       def default
         render(Primer::OpenProject::InputGroup.new) do |menu|
-          menu.with_text_input(name: 'a name', label: 'My input group', value: "Copyable value")
+          menu.with_text_input(name: "a name", label: "My input group", value: "Copyable value")
           menu.with_trailing_action_clipboard_copy_button(id: "button", value: "Copyable value", aria: { label: "Copy some text" })
         end
       end
@@ -24,13 +24,13 @@ module Primer
       # @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
       def playground(
         trailing_action: :clipboardCopy,
-        value: 'Copyable value',
+        value: "Copyable value",
         visually_hide_label: false,
         readonly: true,
         input_width: :medium
       )
         render(Primer::OpenProject::InputGroup.new(input_width: input_width)) do |menu|
-          menu.with_text_input(name: 'Test', label: 'My input group', visually_hide_label: visually_hide_label, value: value, readonly: readonly)
+          menu.with_text_input(name: "Test", label: "My input group", visually_hide_label: visually_hide_label, value: value, readonly: readonly)
 
           case trailing_action
           when :icon
@@ -46,7 +46,7 @@ module Primer
       # @label With icon button
       def icon_button
         render(Primer::OpenProject::InputGroup.new) do |menu|
-          menu.with_text_input(name: 'a name', label: 'My input group', value: "Some value")
+          menu.with_text_input(name: "a name", label: "My input group", value: "Some value")
           menu.with_trailing_action_icon(icon: :check, aria: { label: "Successful" })
         end
       end
@@ -54,7 +54,7 @@ module Primer
       # @label With a small input
       def small_input_width
         render(Primer::OpenProject::InputGroup.new(input_width: :small)) do |menu|
-          menu.with_text_input(name: 'a name', label: 'My input group', value: "Some value")
+          menu.with_text_input(name: "a name", label: "My input group", value: "Some value")
           menu.with_trailing_action_clipboard_copy_button(id: "button-4", value: "Some value", aria: { label: "Copy some text" })
         end
       end