primer_view_components 0.2.0 → 0.3.0

data/app/components/primer/beta/timeline_item.css

@@ -1 +1 @@
-.TimelineItem{display:flex;margin-left:var(--stack-gap-normal,1rem);padding:var(--stack-padding-normal,1rem) 0;position:relative}.TimelineItem:before{background-color:var(--color-border-muted);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--borderWidth-thick,max(2px,.125rem))}.TimelineItem:target .TimelineItem-badge{border-color:var(--color-accent-emphasis);box-shadow:0 0 .2em var(--color-accent-muted)}.TimelineItem-badge{align-items:center;background-color:var(--color-timeline-badge-bg);border:var(--borderWidth-thick,max(2px,.125rem)) solid var(--color-canvas-default);border-radius:50%;color:var(--color-fg-muted);display:flex;flex-shrink:0;height:var(--control-medium-size,2rem);justify-content:center;margin-left:calc(var(--control-medium-size,2rem)/-2 + 1px);margin-right:var(--controlStack-medium-gap-condensed,.5rem);position:relative;width:var(--control-medium-size,2rem);z-index:1}.TimelineItem-badge--success{background-color:var(--color-success-emphasis);border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;color:var(--color-fg-on-emphasis)}.TimelineItem-body{color:var(--color-fg-muted);flex:auto;margin-top:var(--base-size-4,.25rem);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--color-canvas-default);border:0;border-top:var(--borderWidth-thicker,max(4px,.25rem)) solid var(--color-border-default);height:var(--stack-gap-spacious,1.5rem);margin:0;margin-bottom:calc(var(--stack-gap-normal,1rem)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal,1rem)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--color-canvas-default);border:0;color:var(--color-fg-muted);height:var(--base-size-16,1rem);margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}
+.TimelineItem{display:flex;margin-left:var(--stack-gap-normal,1rem);padding:var(--stack-padding-normal,1rem) 0;position:relative}.TimelineItem:before{background-color:var(--borderColor-muted,var(--color-neutral-muted));bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--borderWidth-thick,max(2px,.125rem))}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis,var(--color-accent-fg));box-shadow:0 0 .2em var(--borderColor-accent-muted,var(--color-accent-muted))}.TimelineItem-badge{align-items:center;background-color:var(--timelineBadge-bgColor,var(--color-timeline-badge-bg));border:var(--borderWidth-thick,max(2px,.125rem)) solid var(--bgColor-default,var(--color-canvas-default));border-radius:50%;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-shrink:0;height:var(--control-medium-size,2rem);justify-content:center;margin-left:calc(var(--control-medium-size,2rem)/-2 + 1px);margin-right:var(--controlStack-medium-gap-condensed,.5rem);position:relative;width:var(--control-medium-size,2rem);z-index:1}.TimelineItem-badge--success{background-color:var(--bgColor-success-emphasis,var(--color-success-fg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.TimelineItem-body{color:var(--fgColor-muted,var(--color-fg-muted));flex:auto;margin-top:var(--base-size-4,.25rem);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;border-top:var(--borderWidth-thicker,max(4px,.25rem)) solid var(--borderColor-default,var(--color-border-default));height:var(--stack-gap-spacious,1.5rem);margin:0;margin-bottom:calc(var(--stack-gap-normal,1rem)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal,1rem)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;color:var(--fgColor-muted,var(--color-fg-muted));height:var(--base-size-16,1rem);margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}

data/app/components/primer/beta/timeline_item.css.map

@@ -1 +1 @@
-{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,wCAAoC,CADpC,0CAAsC,CAFtC,iBAqBF,CAfE,qBAQE,0CAA2C,CAL3C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,+CAGF,CAEA,yCACE,yCAA0C,CAC1C,6CACF,CAGF,oBASE,kBAAmB,CACnB,+CAAgD,CAChD,kFAAkE,CAClE,iBAAkB,CAJlB,2BAA4B,CAL5B,YAAa,CAWb,aAAc,CATd,sCAAkC,CAQlC,sBAAuB,CANvB,0DAAwD,CADxD,2DAAsD,CALtD,iBAAkB,CAGlB,qCAAiC,CAFjC,SAaF,CAEA,6BAEE,8CAA+C,CAC/C,4DAAiD,CAFjD,iCAGF,CAEA,mBAIE,2BAA4B,CAC5B,SAAU,CAFV,oCAA8B,CAD9B,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,4CAA6C,CAC7C,QAAS,CACT,uFAAwE,CANxE,uCAAiC,CACjC,QAAS,CACT,mDAAiD,CACjD,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,qCAgBF,CAZE,oCACE,2CACF,CAEA,6CAKE,4CAA6C,CAC7C,QAAS,CAFT,2BAA4B,CAH5B,+BAA2B,CAE3B,sCAAiC,CADjC,mCAKF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--stack-padding-normal) 0;\n  margin-left: var(--stack-gap-normal);\n\n  /* The Timeline */\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: var(--borderWidth-thick);\n    content: '';\n    background-color: var(--color-border-muted);\n  }\n\n  &:target .TimelineItem-badge {\n    border-color: var(--color-accent-emphasis);\n    box-shadow: 0 0 0.2em var(--color-accent-muted);\n  }\n}\n\n.TimelineItem-badge {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: var(--control-medium-size);\n  height: var(--control-medium-size);\n  margin-right: var(--controlStack-medium-gap-condensed);\n  margin-left: calc(var(--control-medium-size) / -2 + 1px);\n  color: var(--color-fg-muted);\n  align-items: center;\n  background-color: var(--color-timeline-badge-bg);\n  border: var(--borderWidth-thick) solid var(--color-canvas-default);\n  border-radius: 50%;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-success-emphasis);\n  border: var(--borderWidth-thin) solid transparent;\n}\n\n.TimelineItem-body {\n  min-width: 0;\n  max-width: 100%;\n  margin-top: var(--base-size-4);\n  color: var(--color-fg-muted);\n  flex: auto;\n}\n\n.TimelineItem-avatar {\n  position: absolute;\n  left: -72px;\n  z-index: 1;\n}\n\n.TimelineItem-break {\n  position: relative;\n  z-index: 1;\n  height: var(--stack-gap-spacious);\n  margin: 0;\n  margin-bottom: calc(var(--stack-gap-normal) * -1);\n  margin-left: -56px;\n  background-color: var(--color-canvas-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker) solid var(--color-border-default);\n}\n\n.TimelineItem--condensed {\n  padding-top: var(--base-size-4);\n  padding-bottom: 0;\n\n  /* TimelineItem--condensed is often grouped. (commits) */\n  &:last-child {\n    padding-bottom: var(--stack-gap-normal);\n  }\n\n  & .TimelineItem-badge {\n    height: var(--base-size-16);\n    margin-top: var(--base-size-8);\n    margin-bottom: var(--base-size-8);\n    color: var(--color-fg-muted);\n    background-color: var(--color-canvas-default);\n    border: 0;\n  }\n}\n"]}
+{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,wCAAoC,CADpC,0CAAsC,CAFtC,iBAqBF,CAfE,qBAQE,oEAA0C,CAL1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,+CAGF,CAEA,yCACE,sEAAgD,CAChD,6EACF,CAGF,oBASE,kBAAmB,CACnB,4EAA8C,CAC9C,yGAA6D,CAC7D,iBAAkB,CAJlB,gDAA2B,CAL3B,YAAa,CAWb,aAAc,CATd,sCAAkC,CAQlC,sBAAuB,CANvB,0DAAwD,CADxD,2DAAsD,CALtD,iBAAkB,CAGlB,qCAAiC,CAFjC,SAaF,CAEA,6BAEE,wEAAiD,CACjD,4DAAiD,CAFjD,2DAGF,CAEA,mBAIE,gDAA2B,CAC3B,SAAU,CAFV,oCAA8B,CAD9B,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,mEAAwC,CACxC,QAAS,CACT,kHAAuE,CANvE,uCAAiC,CACjC,QAAS,CACT,mDAAiD,CACjD,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,qCAgBF,CAZE,oCACE,2CACF,CAEA,6CAKE,mEAAwC,CACxC,QAAS,CAFT,gDAA2B,CAH3B,+BAA2B,CAE3B,sCAAiC,CADjC,mCAKF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--stack-padding-normal) 0;\n  margin-left: var(--stack-gap-normal);\n\n  /* The Timeline */\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: var(--borderWidth-thick);\n    content: '';\n    background-color: var(--borderColor-muted);\n  }\n\n  &:target .TimelineItem-badge {\n    border-color: var(--borderColor-accent-emphasis);\n    box-shadow: 0 0 0.2em var(--borderColor-accent-muted);\n  }\n}\n\n.TimelineItem-badge {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: var(--control-medium-size);\n  height: var(--control-medium-size);\n  margin-right: var(--controlStack-medium-gap-condensed);\n  margin-left: calc(var(--control-medium-size) / -2 + 1px);\n  color: var(--fgColor-muted);\n  align-items: center;\n  background-color: var(--timelineBadge-bgColor);\n  border: var(--borderWidth-thick) solid var(--bgColor-default);\n  border-radius: 50%;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-success-emphasis);\n  border: var(--borderWidth-thin) solid transparent;\n}\n\n.TimelineItem-body {\n  min-width: 0;\n  max-width: 100%;\n  margin-top: var(--base-size-4);\n  color: var(--fgColor-muted);\n  flex: auto;\n}\n\n.TimelineItem-avatar {\n  position: absolute;\n  left: -72px;\n  z-index: 1;\n}\n\n.TimelineItem-break {\n  position: relative;\n  z-index: 1;\n  height: var(--stack-gap-spacious);\n  margin: 0;\n  margin-bottom: calc(var(--stack-gap-normal) * -1);\n  margin-left: -56px;\n  background-color: var(--bgColor-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n}\n\n.TimelineItem--condensed {\n  padding-top: var(--base-size-4);\n  padding-bottom: 0;\n\n  /* TimelineItem--condensed is often grouped. (commits) */\n  &:last-child {\n    padding-bottom: var(--stack-gap-normal);\n  }\n\n  & .TimelineItem-badge {\n    height: var(--base-size-16);\n    margin-top: var(--base-size-8);\n    margin-bottom: var(--base-size-8);\n    color: var(--fgColor-muted);\n    background-color: var(--bgColor-default);\n    border: 0;\n  }\n}\n"]}

data/app/components/primer/beta/timeline_item.pcss

@@ -15,12 +15,12 @@
     display: block;
     width: var(--borderWidth-thick);
     content: '';
-    background-color: var(--color-border-muted);
+    background-color: var(--borderColor-muted);
   }
 
   &:target .TimelineItem-badge {
-    border-color: var(--color-accent-emphasis);
-    box-shadow: 0 0 0.2em var(--color-accent-muted);
+    border-color: var(--borderColor-accent-emphasis);
+    box-shadow: 0 0 0.2em var(--borderColor-accent-muted);
   }
 }
 
@@ -32,18 +32,18 @@
   height: var(--control-medium-size);
   margin-right: var(--controlStack-medium-gap-condensed);
   margin-left: calc(var(--control-medium-size) / -2 + 1px);
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted);
   align-items: center;
-  background-color: var(--color-timeline-badge-bg);
-  border: var(--borderWidth-thick) solid var(--color-canvas-default);
+  background-color: var(--timelineBadge-bgColor);
+  border: var(--borderWidth-thick) solid var(--bgColor-default);
   border-radius: 50%;
   justify-content: center;
   flex-shrink: 0;
 }
 
 .TimelineItem-badge--success {
-  color: var(--color-fg-on-emphasis);
-  background-color: var(--color-success-emphasis);
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-success-emphasis);
   border: var(--borderWidth-thin) solid transparent;
 }
 
@@ -51,7 +51,7 @@
   min-width: 0;
   max-width: 100%;
   margin-top: var(--base-size-4);
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted);
   flex: auto;
 }
 
@@ -68,9 +68,9 @@
   margin: 0;
   margin-bottom: calc(var(--stack-gap-normal) * -1);
   margin-left: -56px;
-  background-color: var(--color-canvas-default);
+  background-color: var(--bgColor-default);
   border: 0;
-  border-top: var(--borderWidth-thicker) solid var(--color-border-default);
+  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);
 }
 
 .TimelineItem--condensed {
@@ -86,8 +86,8 @@
     height: var(--base-size-16);
     margin-top: var(--base-size-8);
     margin-bottom: var(--base-size-8);
-    color: var(--color-fg-muted);
-    background-color: var(--color-canvas-default);
+    color: var(--fgColor-muted);
+    background-color: var(--bgColor-default);
     border: 0;
   }
 }

data/lib/postcss_mixins/activeIndicatorLine.pcss

@@ -6,6 +6,6 @@
   width: var(--base-size-4);
   height: var(--base-size-24);
   content: '';
-  background: var(--color-accent-fg);
+  background: var(--borderColor-accent-emphasis);
   border-radius: var(--borderRadius-medium);
 }

data/lib/postcss_mixins/focusBoxShadowInset.pcss

@@ -1,6 +1,6 @@
 /* inset box-shadow for form controls */
-@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--color-accent-fg) {
-  border-color: var(--color-accent-fg);
+@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {
+  border-color: var(--focus-outlineColor);
   outline: none;
   box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
 }

data/lib/postcss_mixins/focusOutline.pcss

@@ -1,4 +1,4 @@
-@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {
+@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
   box-shadow: none;

data/lib/postcss_mixins/focusOutlineOnEmphasis.pcss

@@ -1,6 +1,6 @@
 /* outline with fg box-shadow for buttons */
-@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {
+@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
-  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
 }

data/lib/postcss_mixins/targetBoxShadow.pcss

@@ -1,6 +1,6 @@
-/* box-shadow for :target styles (no inset) */
-/* !important to override PCSS utilities */
-@define-mixin targetBoxShadow $outlineWidth: 2px, $outlineColor: var(--color-accent-fg) {
+/* box-shadow for :target styles (no inset), !important to override PCSS utilities */
+
+@define-mixin targetBoxShadow $outlineWidth: 2px, $outlineColor: var(--focus-outlineColor) {
   outline: none !important;
   box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
 }

data/lib/primer/view_components/linters/accessibility.yml

@@ -0,0 +1,7 @@
+# Accessibility-focused lint rule configurations, tracked by accessibility scorecard.
+---
+linters:
+  NoUnusedDisable:
+    enabled: true
+  Primer::Accessibility::TooltippedMigration:
+    enabled: true

data/lib/primer/view_components/linters/argument_mappers/base.rb

@@ -53,7 +53,7 @@ module ERBLint
           system_arguments = system_arguments_to_args(classes_node.value)
           args = classes_to_args(system_arguments[:classes]&.split || [])
 
-          invalid_classes = args[:classes].select { |class_name| Primer::Classify::Validation.invalid?(class_name) }
+          invalid_classes = args[:classes].select { |class_name| ::Primer::Classify::Validation.invalid?(class_name) }
 
           raise ConversionError, "Cannot convert #{'class'.pluralize(invalid_classes.size)} #{invalid_classes.join(',')}" if invalid_classes.present?
 
@@ -81,7 +81,7 @@ module ERBLint
         end
 
         def system_arguments_to_args(classes)
-          system_arguments = Primer::Classify::Utilities.classes_to_hash(classes)
+          system_arguments = ::Primer::Classify::Utilities.classes_to_hash(classes)
 
           # need to transform symbols to strings with leading `:`
           system_arguments.transform_values do |v|

data/lib/primer/view_components/linters/base_linter.rb

@@ -5,7 +5,7 @@ require "openssl"
 require "primer/view_components/constants"
 
 require_relative "tag_tree_helpers"
-
+require_relative "helpers/rule_helpers"
 # :nocov:
 
 module ERBLint
@@ -17,6 +17,7 @@ module ERBLint
     # * `REQUIRED_ARGUMENTS` - optional - A list of HTML attributes that are required by the component.
     class BaseLinter < Linter
       include TagTreeHelpers
+      include Helpers::RuleHelpers
 
       DUMP_FILE = ".erblint-counter-ignore.json"
       DISALLOWED_CLASSES = [].freeze
@@ -134,10 +135,6 @@ module ERBLint
         end
       end
 
-      def tags(processed_source)
-        processed_source.parser.nodes_with_type(:tag).map { |tag_node| BetterHtml::Tree::Tag.from_node(tag_node) }
-      end
-
       def counter_correct?(processed_source)
         comment_node = nil
         expected_count = 0
@@ -178,13 +175,6 @@ module ERBLint
         end
       end
 
-      def generate_offense(klass, processed_source, tag, message = nil, replacement = nil)
-        message ||= klass::MESSAGE
-        klass_name = klass.name.demodulize
-        offense = ["#{klass_name}:#{message}", tag.node.loc.source].join("\n")
-        add_offense(processed_source.to_source_range(tag.loc), offense, replacement)
-      end
-
       def dump_data(processed_source)
         return if @total_offenses.zero?
 

data/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb

@@ -8,11 +8,11 @@ module ERBLint
       # Helpers to share between DeprecatedComponents ERB lint and Rubocop cop
       module DeprecatedComponentsHelpers
         def message(component_name)
-          Primer::Deprecations.deprecation_message(component_name)
+          ::Primer::Deprecations.deprecation_message(component_name)
         end
 
         def deprecated_components
-          Primer::Deprecations.deprecated_components
+          ::Primer::Deprecations.deprecated_components
         end
       end
     end

data/lib/primer/view_components/linters/helpers/rule_helpers.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module ERBLint
+  module Linters
+    module Helpers
+      # Helpers for writing rules
+      module RuleHelpers
+        def tags(processed_source)
+          processed_source.parser.nodes_with_type(:tag).map { |tag_node| BetterHtml::Tree::Tag.from_node(tag_node) }
+        end
+
+        def generate_offense(klass, processed_source, tag, message = nil, replacement = nil)
+          message ||= klass::MESSAGE
+          klass_name = klass.name.demodulize
+          offense = ["#{klass_name}:#{message}", tag.node.loc.source].join("\n")
+          add_offense(processed_source.to_source_range(tag.loc), offense, replacement)
+        end
+
+        # Generate offense for ERB node tag
+        def generate_node_offense(klass, processed_source, node, message = nil)
+          message ||= klass::MESSAGE
+          offense = ["#{klass.name}:#{message}", node.loc.source].join("\n")
+          add_offense(processed_source.to_source_range(node.loc), offense)
+        end
+
+        def erb_nodes(processed_source)
+          processed_source.parser.ast.descendants(:erb)
+        end
+
+        def extract_ruby_from_erb_node(erb_node)
+          return unless erb_node.type == :erb
+
+          _, _, code_node = *erb_node
+          code_node.loc.source.strip
+        end
+      end
+    end
+  end
+end

data/lib/primer/view_components/linters/tooltipped_migration.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+require_relative "helpers/rule_helpers"
+module ERBLint
+  module Linters
+    module Primer
+      module Accessibility
+        # Flag when `.tooltipped` is being used and offer alternatives.
+        class TooltippedMigration < Linter
+          include LinterRegistry
+          include Helpers::RuleHelpers
+
+          MIGRATE_TO_NEWER_TOOLTIP = ".tooltipped has been deprecated. Tooltip should never be set on a non-interactive element (e.g. <span>, <div>, <li>). " \
+            "Find alternatives in https://primer.style/design/guides/accessibility/tooltip-alternatives/. " \
+            "If you're setting a tooltip on an interactive element, use the latest tooltip in https://primer.style/view-components."
+          TOOLTIPPED_RUBY_PATTERN = /classes:.*tooltipped|class:.*tooltipped/.freeze
+
+          def run(processed_source)
+            # HTML tags
+            tags(processed_source).each do |tag|
+              next if tag.closing?
+
+              classes = tag.attributes["class"]&.value
+              generate_offense(self.class, processed_source, tag, MIGRATE_TO_NEWER_TOOLTIP) if classes&.include?("tooltipped")
+            end
+
+            # ERB nodes
+            erb_nodes(processed_source).each do |node|
+              code = extract_ruby_from_erb_node(node)
+              generate_node_offense(self.class, processed_source, node, MIGRATE_TO_NEWER_TOOLTIP) if code.match?(TOOLTIPPED_RUBY_PATTERN)
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 2
+      MINOR = 3
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/alpha/nav_list_preview.rb

@@ -6,7 +6,7 @@ module Primer
     class NavListPreview < ViewComponent::Preview
       # @label Playground
       def playground
-        render(Primer::Alpha::NavList.new(aria: { label: "Repository settings" }, selected_item_id: :collaborators)) do |list|
+        render(Primer::Alpha::NavList.new(selected_item_id: :collaborators)) do |list|
           list.with_heading(title: "Repository settings")
 
           list.with_item(label: "General", href: "/general") do |item|
@@ -33,7 +33,7 @@ module Primer
 
       # @label Default
       def default
-        render(Primer::Alpha::NavList.new(aria: { label: "Repository settings" }, selected_item_id: :code_review_limits)) do |list|
+        render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
           list.with_heading(title: "Repository settings")
 
           list.with_item(label: "General", href: "/general") do |item|
@@ -67,7 +67,7 @@ module Primer
       # @label Top-level items
       #
       def top_level_items
-        render(Primer::Alpha::NavList.new(aria: { label: "Account settings" })) do |list|
+        render(Primer::Alpha::NavList.new) do |list|
           list.with_heading(title: "Account settings")
 
           list.with_item(label: "General", href: "/general") do |item|
@@ -91,7 +91,9 @@ module Primer
             group.with_heading(title: "My favorite foods")
             group.with_item(label: "Popplers", href: "/foods/popplers")
             group.with_item(label: "Slurm", href: "/foods/slurm")
-            group.with_show_more_item(label: "Show more foods", src: UrlHelpers.nav_list_items_path, pages: 2)
+            group.with_show_more_item(label: "Show more foods", src: UrlHelpers.nav_list_items_path, pages: 2) do |item|
+              item.with_trailing_visual_icon(icon: :plus)
+            end
           end
         end
       end

data/previews/primer/alpha/overlay_preview.rb

@@ -163,6 +163,17 @@ module Primer
                                body_text: body_text
                              })
       end
+
+      # @label Dialog with header and footer
+      #
+      def dialog_with_header_footer
+        render(Primer::Alpha::Overlay.new(title: "Dialog", role: :dialog, size: :large, padding: :condensed)) do |d|
+          d.with_header(title: "Large Dialog Header", divider: true)
+          d.with_show_button { "Show Overlay" }
+          d.with_footer { "Large Dialog Footer" }
+          d.with_body { "This is a long body for the overlay dialog. <br>".html_safe * 20 }
+        end
+      end
     end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-06-16 00:00:00.000000000 Z
+date: 2023-06-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -492,6 +492,7 @@ files:
 - app/components/primer/alpha/nav_list/divider.rb
 - app/components/primer/alpha/nav_list/group.html.erb
 - app/components/primer/alpha/nav_list/group.rb
+- app/components/primer/alpha/nav_list/heading.rb
 - app/components/primer/alpha/nav_list/item.html.erb
 - app/components/primer/alpha/nav_list/item.rb
 - app/components/primer/alpha/navigation/tab.html.erb
@@ -874,6 +875,7 @@ files:
 - lib/primer/view_components/constants.rb
 - lib/primer/view_components/engine.rb
 - lib/primer/view_components/linters.rb
+- lib/primer/view_components/linters/accessibility.yml
 - lib/primer/view_components/linters/argument_mappers/base.rb
 - lib/primer/view_components/linters/argument_mappers/button.rb
 - lib/primer/view_components/linters/argument_mappers/clipboard_copy.rb
@@ -897,12 +899,14 @@ files:
 - lib/primer/view_components/linters/flash_migration_counter.rb
 - lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb
 - lib/primer/view_components/linters/helpers/rubocop_helpers.rb
+- lib/primer/view_components/linters/helpers/rule_helpers.rb
 - lib/primer/view_components/linters/label_component_migration_counter.rb
 - lib/primer/view_components/linters/migrate_deprecated_flash_arguments.rb
 - lib/primer/view_components/linters/severity_schema.rb
 - lib/primer/view_components/linters/subhead_component_migration_counter.rb
 - lib/primer/view_components/linters/super_in_component_templates.rb
 - lib/primer/view_components/linters/tag_tree_helpers.rb
+- lib/primer/view_components/linters/tooltipped_migration.rb
 - lib/primer/view_components/linters/two_column_layout_migration_counter.rb
 - lib/primer/view_components/statuses.rb
 - lib/primer/view_components/version.rb