primer_view_components 0.1.1 → 0.1.2

data/app/components/primer/alpha/action_list/divider.rb

@@ -16,8 +16,8 @@ module Primer
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         def initialize(scheme: DEFAULT_SCHEME, **system_arguments)
           @system_arguments = system_arguments
-          @system_arguments[:tag] = :div
-          @system_arguments[:role] = :separator
+          @system_arguments[:tag] = :li
+          @system_arguments[:role] = :presentation
           @system_arguments[:'aria-hidden'] = true
           @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)
           @system_arguments[:classes] = class_names(

data/app/components/primer/alpha/action_list/heading.rb

@@ -27,7 +27,7 @@ module Primer
 
           @heading_level = heading_level
           @tag = :"h#{heading_level}"
-          @system_arguments = system_arguments
+          @system_arguments = deny_tag_argument(**system_arguments)
           @list_id = list_id
           @title = title
           @subtitle = subtitle

data/app/components/primer/alpha/action_list/item.rb

@@ -84,12 +84,16 @@ module Primer
         # A button rendered after the trailing icon that can be used to show a menu, activate
         # a dialog, etc.
         #
-        # @param show_on_hover [Boolean] Whether or not to show the button when the list item is hovered. If `true`, the button will be invisible until hovered. If `false`, the button will always be visible. Defaults to `false`.
         # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::IconButton) %>.
-        renders_one :trailing_action, lambda { |show_on_hover: false, **system_arguments|
-          @trailing_action_on_hover = show_on_hover
+        renders_one :trailing_action, lambda { |**system_arguments|
+          Primer::Beta::IconButton.new(
+            classes: class_names(
+              system_arguments[:classes],
+              "ActionListItem-trailingAction"
+            ),
 
-          Primer::Beta::IconButton.new(scheme: :invisible, classes: ["ActionListItem-trailingAction"], **system_arguments)
+            **system_arguments
+          )
         }
 
         # `Tooltip` that appears on mouse hover or keyboard focus over the trailing action button. Use tooltips sparingly and as
@@ -167,7 +171,6 @@ module Primer
           @truncate_label = truncate_label
           @disabled = disabled
           @active = active
-          @trailing_action_on_hover = false
           @id = id
           @system_arguments = system_arguments
           @content_arguments = content_arguments
@@ -209,12 +212,14 @@ module Primer
             SIZE_MAPPINGS[@size]
           )
 
-          if @href && !@disabled
-            @content_arguments[:tag] = :a
-            @content_arguments[:href] = @href
-          else
-            @content_arguments[:tag] = :button
-            @content_arguments[:onclick] = on_click if on_click
+          unless @content_arguments[:tag]
+            if @href && !@disabled
+              @content_arguments[:tag] = :a
+              @content_arguments[:href] = @href
+            else
+              @content_arguments[:tag] = :button
+              @content_arguments[:onclick] = on_click if on_click
+            end
           end
 
           @description_wrapper_arguments = {
@@ -231,7 +236,6 @@ module Primer
           @system_arguments[:classes] = class_names(
             @system_arguments[:classes],
             "ActionListItem--withActions" => trailing_action.present?,
-            "ActionListItem--trailingActionHover" => @trailing_action_on_hover,
             "ActionListItem--navActive" => active?
           )
 

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

@@ -4,7 +4,8 @@
   <% end %>
   <%= render(Primer::BaseComponent.new(tag: :ul, **@system_arguments)) do %>
     <% items.each_with_index do |item, index| %>
-      <% if index > 0 && @show_dividers %>
+      <%# the conditions here make sure two dividers are never rendered one after the other %>
+      <% if index > 0 && @show_dividers && !item.is_a?(Divider) && !items[index - 1].is_a?(Divider) %>
         <%= render(Primer::Alpha::ActionList::Divider.new) %>
       <% end %>
       <%= item %>

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

@@ -48,6 +48,15 @@ module Primer
         end
       }
 
+      # Adds a divider to the list of items.
+      #
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Divider) %>.
+      def with_divider(**system_arguments, &block)
+        # This is a giant hack that should be removed when :items can be converted into a polymorphic slot.
+        # This feature needs to land in view_component first: https://github.com/ViewComponent/view_component/pull/1652
+        set_slot(:items, { renderable: Divider, collection: true }, **system_arguments, &block)
+      end
+
       # @param role [Boolean] ARIA role describing the function of the list. listbox and menu are a common values.
       # @param item_classes [String] Additional CSS classes to attach to items.
       # @param scheme [Symbol] <%= one_of(Primer::Alpha::ActionList::SCHEME_OPTIONS) %>. `inset` children are offset (vertically and horizontally) from list edges. `full` (default) children are flush (vertically and horizontally) with list edges.
@@ -81,12 +90,13 @@ module Primer
       # @private
       def before_render
         aria_label = aria(:label, @system_arguments)
+        aria_labelledby = aria(:labelledby, @system_arguments)
 
         if heading.present?
           @system_arguments[:"aria-labelledby"] = @id
           raise ArgumentError, "An aria-label should not be provided if a heading is present" if aria_label.present?
-        elsif aria_label.blank?
-          raise ArgumentError, "An aria-label or heading must be provided"
+        elsif aria_label.blank? && aria_labelledby.blank?
+          raise ArgumentError, "An aria-label, aria-labelledby, or heading must be provided"
         end
       end
 

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

@@ -94,10 +94,10 @@ module Primer
       #     <% component.with_group do |group| %>
       #       <% group.with_heading(title: "My Favorite Foods") %>
       #       <% group.with_item(label: "Popplers", selected_by_ids: :popplers, href: "/foods/popplers") do |item| %>
-      #         <% item.with_trailing_action(show_on_hover: false, icon: "plus", "aria-label": "Add new food", size: :medium) %>
+      #         <% item.with_trailing_action(icon: "plus", "aria-label": "Add new food", size: :medium) %>
       #       <% end %>
       #       <% group.with_item(label: "Slurm", selected_by_ids: :slurm, href: "/foods/slurm") do |item| %>
-      #         <% item.with_trailing_action(show_on_hover: true, icon: "plus", "aria-label": "Add new food", size: :medium) %>
+      #         <% item.with_trailing_action(icon: "plus", "aria-label": "Add new food", size: :medium) %>
       #       <% end %>
       #     <% end %>
       #   <% end %>

data/app/components/primer/alpha/overlay/header.html.erb

@@ -1,11 +1,11 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <div class="Overlay-headerContentWrap">
     <div class="Overlay-titleWrap">
-      <h1 class="Overlay-title <% if @visually_hide_title || content.present? %>sr-only<% end %>"><%= @title %></h1>
+      <h1 id="<%= @id %>" class="Overlay-title <% if @visually_hide_title || content.present? %>sr-only<% end %>"><%= @title %></h1>
       <% if content.present? %>
         <%= content %>
       <% elsif @subtitle.present? %>
-        <h2 id="<%= @id %>-description" class="Overlay-description"><%= @subtitle %></h2>
+        <h2 class="Overlay-description"><%= @subtitle %></h2>
       <% end %>
     </div>
     <div class="Overlay-actionWrap">

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

@@ -89,7 +89,7 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :header, lambda { |divider: false, size: :medium, visually_hide_title: @visually_hide_title, **system_arguments|
         Primer::Alpha::Overlay::Header.new(
-          id: @id,
+          id: title_id,
           title: @title,
           subtitle: @subtitle,
           size: size,
@@ -185,11 +185,14 @@ module Primer
 
         @system_arguments[:popover] = popover
         @system_arguments[:aria] ||= {}
-        @system_arguments[:aria][:describedby] ||= "#{@id}-description"
       end
 
       def before_render
-        with_header unless header?
+        if header?
+          @system_arguments[:aria][:labelledby] ||= title_id
+        else
+          @system_arguments[:aria][:label] = @title
+        end
         with_body unless body?
       end
 
@@ -199,6 +202,10 @@ module Primer
         @system_arguments[:id]
       end
 
+      def title_id
+        "overlay-title-#{overlay_id}"
+      end
+
       def show_button_id
         "overlay-show-#{overlay_id}"
       end

data/app/components/primer/truncate.rb

@@ -3,7 +3,7 @@
 module Primer
   # Use `Truncate` to shorten overflowing text with an ellipsis.
   class Truncate < Primer::Component
-    status :beta
+    status :deprecated
 
     DEFAULT_TAG = :div
     TAG_OPTIONS = [DEFAULT_TAG, :span, :p, :strong].freeze

data/lib/primer/deprecations.yml

@@ -33,3 +33,8 @@ deprecations:
   - component: "Primer::Tooltip"
     autocorrect: true
     replacement: "Primer::Alpha::Tooltip"
+
+  - component: "Primer::Truncate"
+    autocorrect: false
+    replacement: "Primer::Beta::Truncate"
+    guide: "https://primer.style/view-components/guides/primer_truncate"

data/lib/primer/forms/dsl/text_field_input.rb

@@ -32,7 +32,7 @@ module Primer
 
           super(**system_arguments)
 
-          add_input_data(:target, "primer-text-field.inputElement") if auto_check_src.present?
+          add_input_data(:target, "primer-text-field.inputElement")
           add_input_classes("FormControl-inset") if inset?
           add_input_classes("FormControl-monospace") if monospace?
         end

data/lib/primer/forms/primer_text_field.js

@@ -18,7 +18,10 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 var _PrimerTextFieldElement_abortController;
 import '@github/auto-check-element';
 import { controller, target } from '@github/catalyst';
-let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
+// eslint-disable-next-line custom-elements/expose-class-on-global
+let PrimerTextFieldElement = 
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+class PrimerTextFieldElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _PrimerTextFieldElement_abortController.set(this, void 0);
@@ -27,22 +30,29 @@ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
         var _a;
         (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
         const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
-        this.inputElement.addEventListener('auto-check-success', () => { this.clearError(); }, { signal });
-        this.inputElement.addEventListener('auto-check-error', (event) => {
-            event.detail.response.text().then((error_message) => { this.setError(error_message); });
+        this.inputElement.addEventListener('auto-check-success', () => {
+            this.clearError();
+        }, { signal });
+        this.inputElement.addEventListener('auto-check-error', async (event) => {
+            const errorMessage = await event.detail.response.text();
+            this.setError(errorMessage);
         }, { signal });
     }
     disconnectedCallback() {
         var _a;
         (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
     }
+    clearContents() {
+        this.inputElement.value = '';
+        this.inputElement.focus();
+    }
     clearError() {
         this.inputElement.removeAttribute('invalid');
         this.validationElement.hidden = true;
-        this.validationMessageElement.innerText = '';
+        this.validationMessageElement.textContent = '';
     }
     setError(message) {
-        this.validationMessageElement.innerText = message;
+        this.validationMessageElement.textContent = message;
         this.validationElement.hidden = false;
         this.inputElement.setAttribute('invalid', 'true');
     }
@@ -59,4 +69,5 @@ __decorate([
 ], PrimerTextFieldElement.prototype, "validationMessageElement", void 0);
 PrimerTextFieldElement = __decorate([
     controller
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
 ], PrimerTextFieldElement);

data/lib/primer/forms/primer_text_field.ts

@@ -1,7 +1,9 @@
 import '@github/auto-check-element'
 import {controller, target} from '@github/catalyst'
 
+// eslint-disable-next-line custom-elements/expose-class-on-global
 @controller
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
 class PrimerTextFieldElement extends HTMLElement {
   @target inputElement: HTMLInputElement
   @target validationElement: HTMLElement
@@ -15,16 +17,17 @@ class PrimerTextFieldElement extends HTMLElement {
 
     this.inputElement.addEventListener(
       'auto-check-success',
-      () => { this.clearError() },
+      () => {
+        this.clearError()
+      },
       {signal}
     )
 
     this.inputElement.addEventListener(
       'auto-check-error',
-      (event: any) => {
-        event.detail.response.text().then(
-          (error_message: string) => { this.setError(error_message) }
-        )
+      async (event: any) => {
+        const errorMessage = await event.detail.response.text()
+        this.setError(errorMessage)
       },
       {signal}
     )
@@ -34,14 +37,19 @@ class PrimerTextFieldElement extends HTMLElement {
     this.#abortController?.abort()
   }
 
+  clearContents() {
+    this.inputElement.value = ''
+    this.inputElement.focus()
+  }
+
   clearError(): void {
     this.inputElement.removeAttribute('invalid')
     this.validationElement.hidden = true
-    this.validationMessageElement.innerText = ''
+    this.validationMessageElement.textContent = ''
   }
 
   setError(message: string): void {
-    this.validationMessageElement.innerText = message
+    this.validationMessageElement.textContent = message
     this.validationElement.hidden = false
     this.inputElement.setAttribute('invalid', 'true')
   }

data/lib/primer/forms/text_field.html.erb

@@ -1,4 +1,4 @@
-<%= render Primer::ConditionalWrapper.new(condition: @input.auto_check_src, tag: "primer-text-field") do %>
+<primer-text-field>
   <%= render(FormControl.new(input: @input)) do %>
     <%= content_tag(:div, **@field_wrap_arguments) do %>
       <% if @input.leading_visual %>
@@ -10,10 +10,10 @@
         <%= builder.text_field(@input.name, **@input.input_arguments) %>
       <% end %>
       <% if @input.show_clear_button? %>
-        <button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="Clear">
+        <button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="Clear" data-action="click:primer-text-field#clearContents">
           <%= render(Primer::Beta::Octicon.new(icon: :"x-circle-fill")) %>
         </button>
       <% end %>
     <% end %>
   <% end %>
-<% end %>
+</primer-text-field>

data/lib/primer/view_components/version.rb

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

data/previews/primer/alpha/action_list_preview.rb

@@ -89,6 +89,39 @@ module Primer
         end
       end
 
+      # @label With manual dividers
+      #
+      # @param role text
+      # @param scheme [Symbol] select [full, inset]
+      # @param show_dividers toggle
+      def with_manual_dividers(
+        role: Primer::Alpha::ActionList::DEFAULT_ROLE,
+        scheme: Primer::Alpha::ActionList::DEFAULT_SCHEME,
+        show_dividers: false
+      )
+        render(Primer::Alpha::ActionList.new(
+          role: role,
+          scheme: scheme,
+          show_dividers: show_dividers
+        )) do |component|
+          component.with_heading(title: "Action List")
+          component.with_item(label: "Item one", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :gear)
+          end
+          component.with_divider
+          component.with_item(label: "Item two", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :star)
+          end
+          component.with_item(label: "Item three", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :heart)
+          end
+          component.with_divider
+          component.with_item(label: "Item four", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :bug)
+          end
+        end
+      end
+
       # @label Divider
       #
       # @param scheme [Symbol] select [subtle, filled]
@@ -135,7 +168,6 @@ module Primer
       # @param private_leading_action_icon [Symbol] octicon
       # @param private_trailing_action_icon [Symbol] octicon
       # @param trailing_action toggle
-      # @param trailing_action_on_hover toggle
       # @param tooltip toggle
       def item(
         label: "Label",
@@ -156,7 +188,6 @@ module Primer
         trailing_visual_text: nil,
         private_leading_action_icon: nil,
         private_trailing_action_icon: nil,
-        trailing_action_on_hover: false,
         trailing_action: false,
         tooltip: false
       )
@@ -195,7 +226,7 @@ module Primer
             item.with_private_trailing_action_icon(icon: private_trailing_action_icon)
           end
 
-          item.with_trailing_action(show_on_hover: trailing_action_on_hover, icon: "plus", "aria-label": "Button tooltip", size: :medium) if trailing_action && trailing_action != :none
+          item.with_trailing_action(icon: "plus", "aria-label": "Button tooltip", size: :medium) if trailing_action && trailing_action != :none
 
           item.description { description } if description
 
@@ -294,18 +325,7 @@ module Primer
                  aria: { label: "List heading" }
                )) do |component|
           component.with_item(label: "Default item", href: "/") do |item|
-            item.with_trailing_action(show_on_hover: false, icon: "plus", "aria-label": "Button tooltip", size: :medium)
-          end
-        end
-      end
-
-      # @label Item [trailing action on hover]
-      def item_trailing_action_hover
-        render(Primer::Alpha::ActionList.new(
-                 aria: { label: "List heading" }
-               )) do |component|
-          component.with_item(label: "Default item", href: "/") do |item|
-            item.with_trailing_action(show_on_hover: true, icon: "plus", "aria-label": "Button tooltip", size: :medium)
+            item.with_trailing_action(icon: "plus", "aria-label": "Button tooltip", size: :medium)
           end
         end
       end

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

@@ -2,7 +2,7 @@
   <% list.with_group do |group| %>
     <%= group.with_heading(title: "Shopping list") %>
     <% group.with_item(label: "Bread", href: "/list/1") do |item| %>
-      <%= item.with_trailing_action(show_on_hover: true, icon: :plus, aria: { label: "Activate alert" }, name: "bread_button") %>
+      <%= item.with_trailing_action(icon: :plus, aria: { label: "Activate alert" }, name: "bread_button") %>
     <% end %>
     <% group.with_item(label: "Cheese", href: "/list/2") do |item| %>
       <%= item.with_trailing_action(icon: :plus, aria: { label: "Activate alert" }, name: "cheese_button") %>

data/previews/primer/alpha/overlay_preview.rb

@@ -32,10 +32,10 @@ module Primer
                  anchor_offset: anchor_offset,
                  anchor_side: anchor_side,
                  allow_out_of_bounds: allow_out_of_bounds,
-                 visually_hide_title: visually_hide_title,
+                 visually_hide_title: visually_hide_title
                )) do |d|
           d.with_header(title: title, size: header_size)
-          if icon.present? and icon != :none
+          if icon.present? && (icon != :none)
             d.with_show_button(icon: icon, "aria-label": icon.to_s)
           else
             d.with_show_button { button_text }
@@ -69,7 +69,7 @@ module Primer
                  anchor_align: anchor_align,
                  anchor_side: anchor_side,
                  allow_out_of_bounds: allow_out_of_bounds,
-                 visually_hide_title: visually_hide_title,
+                 visually_hide_title: visually_hide_title
                )) do |d|
           d.with_header(title: title, size: header_size)
           d.with_show_button { button_text }
@@ -77,6 +77,31 @@ module Primer
         end
       end
 
+      # @label Menu No Header
+      #
+      # @param size [Symbol] select [auto, small, medium, medium_portrait, large, xlarge]
+      # @param padding [Symbol] select [normal, condensed, none]
+      # @param anchor_align [Symbol] select [start, center, end]
+      # @param anchor_side [Symbol] select [inside_top, inside_bottom, inside_left, inside_right, inside_center, outside_top, outside_bottom, outside_left, outside_right]
+      # @param allow_out_of_bounds [Boolean] toggle
+      #
+      # @param button_text [String] text
+      # @param body_text [String] text
+      def menu_no_header(size: :auto, padding: :normal, anchor_align: :center, anchor_side: :outside_bottom, allow_out_of_bounds: false, button_text: "Show Overlay Menu", body_text: "This is a menu")
+        render(Primer::Alpha::Overlay.new(
+                 title: "Menu",
+                 role: :menu,
+                 size: size,
+                 padding: padding,
+                 anchor_align: anchor_align,
+                 anchor_side: anchor_side,
+                 allow_out_of_bounds: allow_out_of_bounds
+               )) do |d|
+          d.with_show_button { button_text }
+          d.with_body { body_text }
+        end
+      end
+
       # @label Middle Of Page
       #
       # @param title [String] text

data/static/arguments.json

@@ -1805,7 +1805,7 @@
   },
   {
     "component": "Truncate",
-    "status": "beta",
+    "status": "deprecated",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/truncate.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/truncate/default/",
     "parameters": [

data/static/previews.json

@@ -18,6 +18,11 @@
         "preview_path": "/lookbook/preview/primer/alpha/action_list/leading_visuals",
         "name": "leading_visuals"
       },
+      {
+        "inspect_path": "/lookbook/inspect/primer/alpha/action_list/with_manual_dividers",
+        "preview_path": "/lookbook/preview/primer/alpha/action_list/with_manual_dividers",
+        "name": "with_manual_dividers"
+      },
       {
         "inspect_path": "/lookbook/inspect/primer/alpha/action_list/divider",
         "preview_path": "/lookbook/preview/primer/alpha/action_list/divider",
@@ -78,11 +83,6 @@
         "preview_path": "/lookbook/preview/primer/alpha/action_list/item_trailing_action",
         "name": "item_trailing_action"
       },
-      {
-        "inspect_path": "/lookbook/inspect/primer/alpha/action_list/item_trailing_action_hover",
-        "preview_path": "/lookbook/preview/primer/alpha/action_list/item_trailing_action_hover",
-        "name": "item_trailing_action_hover"
-      },
       {
         "inspect_path": "/lookbook/inspect/primer/alpha/action_list/item_danger",
         "preview_path": "/lookbook/preview/primer/alpha/action_list/item_danger",
@@ -1277,6 +1277,11 @@
         "preview_path": "/lookbook/preview/primer/alpha/overlay/default",
         "name": "default"
       },
+      {
+        "inspect_path": "/lookbook/inspect/primer/alpha/overlay/menu_no_header",
+        "preview_path": "/lookbook/preview/primer/alpha/overlay/menu_no_header",
+        "name": "menu_no_header"
+      },
       {
         "inspect_path": "/lookbook/inspect/primer/alpha/overlay/middle_of_page",
         "preview_path": "/lookbook/preview/primer/alpha/overlay/middle_of_page",

data/static/statuses.json

@@ -95,5 +95,5 @@
   "Primer::LayoutComponent": "alpha",
   "Primer::Navigation::TabComponent": "deprecated",
   "Primer::Tooltip": "deprecated",
-  "Primer::Truncate": "beta"
+  "Primer::Truncate": "deprecated"
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-03-07 00:00:00.000000000 Z
+date: 2023-03-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 17.0.0
+        version: 18.0.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 17.0.0
+        version: 18.0.0
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement