Merge branch 'main' into dependabot/bundler/demo/hotwire-livereload-2…

….0.0

.changeset/great-students-wave.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Add more support for ruby 3.4 in tests

.changeset/new-students-change.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Add trailing visuals to the text field

.changeset/nice-suns-fold.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Fix incorrect classname keys when generating `lib/primer/classify/utilities.yml` with `bundle exec rake utilities:build`.

.changeset/tall-cats-cry.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Fix memory leak in forms framework causing form templates to be compiled on each render in development

.changeset/two-rings-jog.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+add support for Ruby 3.4 in test suite

.github/workflows/accessibility-alt-text-bot.yml

@@ -5,9 +5,11 @@ on:
   pull_request:
     types: [opened, edited]
   issue_comment:
-    types: [created, edited]
+    types: [created, edited, deleted]
   discussion:
     types: [created, edited]
+  discussion_comment:
+    types: [created, edited, deleted]
 
 permissions:
   issues: write
@@ -21,4 +23,4 @@ jobs:
     if: ${{ github.event.issue || github.event.pull_request || github.event.discussion }}
     steps:
       - name: Get action 'github/accessibility-alt-text-bot'
-        uses: github/accessibility-alt-text-bot@v1.5.0
+        uses: github/accessibility-alt-text-bot@v1.6.0

.github/workflows/lint.yml

@@ -12,7 +12,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get specific changed files
       id: changed-files
-      uses: tj-actions/[email protected].5
+      uses: tj-actions/[email protected].6
       with:
         files: |
           docs/**/*.md
@@ -38,7 +38,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get specific changed files
       id: changed-files
-      uses: tj-actions/[email protected].5
+      uses: tj-actions/[email protected].6
       with:
         files: |
           app/**/*.rb
@@ -58,7 +58,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/[email protected].5
+      uses: tj-actions/[email protected].6
       with:
         files: |
           app/components/**/*.erb
@@ -75,7 +75,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/[email protected].5
+      uses: tj-actions/[email protected].6
       with:
         files: |
           app/components/**/*.ts
@@ -95,7 +95,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/[email protected].5
+      uses: tj-actions/[email protected].6
       with:
         files: |
           app/components/**/*.pcss

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 0.36.3
+
+### Patch Changes
+
+- [#3254](https://github.com/primer/view_components/pull/3254) [`1bb7ad7`](https://github.com/primer/view_components/commit/1bb7ad71239ee6b6ef158dac7f1aad3bd76ea404) Thanks [@camertron](https://github.com/camertron)! - Fix `NoMethodError` when checking if `ActionList::Divider`s are active
+
+- [#3253](https://github.com/primer/view_components/pull/3253) [`3a63cf0`](https://github.com/primer/view_components/commit/3a63cf01377ccb71654f69e7840c5bc52fe802b2) Thanks [@joshblack](https://github.com/joshblack)! - Add top spacing to Dialog::Body to avoid it being glued to the divider
+
 ## 0.36.2
 
 ### Patch Changes

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    primer_view_components (0.36.2)
+    primer_view_components (0.36.3)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
       octicons (>= 18.0.0)

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

@@ -29,6 +29,10 @@ def initialize(scheme: DEFAULT_SCHEME, **system_arguments)
         def call
           render(Primer::BaseComponent.new(**@system_arguments)) { content }
         end
+
+        def active?
+          false
+        end
       end
     end
   end

app/components/primer/alpha/dialog.pcss

@@ -231,10 +231,6 @@ dialog.Overlay:not([open]) {
     padding-bottom: var(--stack-padding-condensed);
     /* stylelint-disable-next-line primer/box-shadow */
     box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);
-
-    & + .Overlay-body {
-      padding-top: var(--stack-padding-normal);
-    }
   }
 
   &.Overlay-header--large {
@@ -296,7 +292,6 @@ dialog.Overlay:not([open]) {
 /* generic body content slot */
 .Overlay-body {
   padding: var(--stack-padding-normal);
-  padding-top: 0;
   overflow-y: auto;
   scrollbar-width: thin;
   font-size: var(--text-body-size-medium);

app/components/primer/alpha/text_field.pcss

@@ -121,6 +121,8 @@
 ** .FormControl
 ** ├─ .FormControl-label
 ** │  ├─ .FormControl-input-wrap
+** │  │  ├─ .FormControl-input-trailingVisualWrap
+** │  │  │  ├─ .FormControl-input-trailingVisual
 ** │  │  ├─ .FormControl-input-leadingVisualWrap
 ** │  │  │  ├─ .FormControl-input-leadingVisual
 ** │  │  ├─ .FormControl-input
@@ -253,6 +255,32 @@
     }
   }
 
+  & .FormControl-input-trailingVisualWrap {
+    position: absolute;
+    top: var(--base-size-8);
+    right: var(--base-size-8);
+    display: flex;
+    height: var(--base-size-16);
+    align-items: center;
+    gap: var(--base-size-4);
+    color: var(--fgColor-muted);
+    pointer-events: none;
+
+    &:has( .FormControl-input-trailingVisualText) {
+      max-width: 25%;
+      padding-left: var(--base-size-8);
+    }
+
+    &:has( .FormControl-input-trailingVisualLabel) {
+      max-width: 25%;
+      padding-left: var(--base-size-8);
+    }
+
+    & .FormControl-input-trailingVisualLabel {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
   /* TODO: replace with new Button component */
   & .FormControl-input-trailingAction {
     position: absolute;
@@ -320,7 +348,7 @@
   /*
 	┌──32px──┬────────────────────┐
 	╎  ┌───┐   ┌────────────────┐ ╎
-	╎   16px    16px                ╎
+	╎   16px    16px              ╎
 	╎  └───┘   └────────────────┘ ╎
 	└───────8px───────────────────┘
 	*/
@@ -333,10 +361,34 @@
     }
   }
 
+  /* if trailingVisual is present */
+
   /*
 	┌──────────────────┬──32px──┐
 	╎  ┌──────────────┐  ┌────┐ ╎
-	╎   24px               24px   ╎
+	╎   24px               24px ╎
+	╎  └──────────────┘  └────┘ ╎
+	└──────────────────┴────────┘
+  */
+
+  &.FormControl-input-wrap--trailingVisual {
+    & .FormControl-input {
+      padding-inline-end: calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap));
+    }
+
+    &:has(.FormControl-input-trailingVisualText) .FormControl-input {
+      padding-inline-end: 25%
+    }
+
+    &:has(.FormControl-input-trailingVisualLabel) .FormControl-input {
+      padding-inline-end: 25%
+    }
+  }
+
+  /*
+	┌──────────────────┬──32px──┐
+	╎  ┌──────────────┐  ┌────┐ ╎
+	╎   24px               24px ╎
 	╎  └──────────────┘  └────┘ ╎
 	└──────────────────┴────────┘
   */
@@ -378,6 +430,11 @@
       left: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
     }
 
+    & .FormControl-input-trailingVisualWrap {
+      top: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
+      right: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
+    }
+
     /*
     ┌──────────────────┬──28px──┐
     ╎  ┌──────────────┐  ┌────┐ ╎
@@ -428,6 +485,11 @@
       left: var(--control-medium-paddingInline-normal);
     }
 
+    & .FormControl-input-trailingVisualWrap {
+      top: var(--control-medium-paddingInline-normal);
+      right: var(--control-medium-paddingInline-normal);
+    }
+
     /*
     ┌──36px──┬───12px padding──────┐
     ╎  ┌───┐   ┌────────────────┐ ╎
@@ -444,6 +506,31 @@
       }
     }
 
+    &.FormControl-input-wrap--trailingVisual {
+      & .FormControl-input {
+        padding-inline-end: calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap));
+      }
+
+      &:has(.FormControl-input-trailingVisualText) .FormControl-input {
+        padding-inline-end: 25%
+      }
+
+      &:has(.FormControl-input-trailingVisualLabel) .FormControl-input {
+        padding-inline-end: 25%
+      }
+    }
+
+    &.FormControl-input-wrap--trailingText {
+      & .FormControl-input.FormControl-large {
+        padding-inline-end: 25%;
+      }
+    }
+
+    &.FormControl-input-wrap--trailingLabel {
+      & .FormControl-input.FormControl-large {
+        padding-inline-end: 25%;
+      }
+    }
     /*
     ┌──────────────────┬──36px──┐
     ╎  ┌──────────────┐  ┌────┐ ╎

app/lib/primer/forms/acts_as_component.rb

@@ -66,30 +66,45 @@ def compile!
         @compiled = true
       end
 
-      private
-
       def template_root_path
         return @template_root_path if defined?(@template_root_path)
 
         form_path = Utils.const_source_location(self.name)
-        @template_root_path = if form_path
-          File.join(File.dirname(form_path), self.name.demodulize.underscore)
+        @template_root_path =
+          if form_path
+            File.join(File.dirname(form_path), self.name.demodulize.underscore)
+          end
+      end
+
+      def base_template_path
+        return @base_template_path if defined?(@base_template_path)
+        base_path = Utils.const_source_location(self.name)
+
+        if base_path
+          @base_template_path = File.dirname(base_path)
+        else
+          warn "Could not identify the template for #{self}"
         end
       end
 
+      private
+
       def template_globs
         @template_globs ||= []
       end
 
       def compile_templates_in(template_glob)
-        pattern = if Pathname(template_glob.glob_pattern).absolute?
-                    template_glob.glob_pattern
-                  else
-                    # skip compilation for anonymous form classes, as in tests
-                    return unless template_root_path
-
-                    File.join(template_root_path, template_glob.glob_pattern)
-                  end
+        pattern = template_glob.glob_pattern
+        pattern = pattern.gsub("%{base_template_path}", base_template_path) if base_template_path
+        pattern =
+          if Pathname(pattern).absolute?
+            pattern
+          else
+            # skip compilation for anonymous form classes, as in tests
+            return unless template_root_path
+
+            File.join(template_root_path, pattern)
+          end
 
         template_paths = Dir.glob(pattern)
 
@@ -117,11 +132,11 @@ def compile_template(path)
         handler = ActionView::Template.handler_for_extension("erb")
         template = File.read(path)
         template_params = TemplateParams.new({
-                                               source: template,
-                                               identifier: __FILE__,
-                                               type: "text/html",
-                                               format: "text/html"
-                                             })
+          source: template,
+          identifier: __FILE__,
+          type: "text/html",
+          format: "text/html"
+        })
 
         # change @output_buffer ivar to output_buffer method call
         BufferRewriter.rewrite(

app/lib/primer/forms/base_component.rb

@@ -7,18 +7,11 @@ class BaseComponent
       include Primer::ClassNameHelper
       extend ActsAsComponent
 
-      def self.compile!
-        base_path = Utils.const_source_location(self.name)
-
-        unless base_path
-          warn "Could not identify the template for #{base}"
-          return
-        end
-
-        dir = File.dirname(base_path)
-        renders_template File.join(dir, "#{self.name.demodulize.underscore}.html.erb"), :render_template
-
-        super
+      def self.inherited(base)
+        base.renders_template(
+          File.join("%{base_template_path}", "#{base.name.demodulize.underscore}.html.erb"),
+          :render_template
+        )
       end
 
       delegate :required?, :disabled?, :hidden?, to: :@input