primer_view_components 0.0.45 → 0.0.46

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8953ba874b51d234f8b42590fb30c2cc073c54ffd3b7a56dad24b9e6aa4d2f26
-  data.tar.gz: a0ac7e3a02d41fde2096547c8c68a91f99c003dee28bcb18a5e0862f46c1058f
+  metadata.gz: 19a15f3c293e45a99165f8fe3ceb6967626cabfa15e726cdbcb614223c6e39c5
+  data.tar.gz: 6554eeda36440b40d83ee5b5cd395fd6af3cfc9e35c0ac971e14be31dae5d5bf
 SHA512:
-  metadata.gz: 89aa1e3a6f977a4bf25675092205034efc9797d275ea9d8e01b7bc50423506f67b2d05ca03a74b69dd3b16b669c6fa68d12b96895647218ca758034ed00d29ab
-  data.tar.gz: 46eead3cd6ae2b57008f2f7699e572029e736c5000dfd480c0cd5f399de7ac6160f746ccfab2d79305216f7e0602fc280b356051cd120e796f88988dde0fe303
+  metadata.gz: d480348ff38e2a89907c58c352632bf3462f1bb8a2cd365e70a04318e9843bf7bf5ba9f4d945d4a51601b5d6786afb2db323d7dd237101ad200f62a297e0d299
+  data.tar.gz: dc0876004af2d8e32cb06b8b703ea0290f764c4d53333b3d0c9053bd73e2f8d87facb12f76776c54d03ca4a7a73fd2e41e1b41db0600a32a4039f442db0840f1

data/CHANGELOG.md

@@ -1,7 +1,95 @@
 # CHANGELOG
 
+<!--
+Authoring changelog entries
+
+This file holds all the changes made in previous versions of Primer View Components and the ones coming to the next version.
+To add yours, you need to find in which category to write it under the `main` section. `Main` is the first section on top of the document.
+There are six categories currently in use, `New`, `Updates`, `Bug fixes`, `Breaking changes`, `Deprecations` and `Misc`.
+
+- New
+Category for new components, system behaviours, options and arguments changes
+
+- Updates
+Every non-breaking change to the source code go there.
+
+- Bug Fixes
+Non-breaking bug fixes to existing code.
+
+- Breaking Changes
+The category for changes creating incompatibilities to code written with previous versions.
+It includes any changes to components name, signature and behaviour. Also, include removing tags options or changing file location.
+If you are not sure you made breaking changes, ask us in your pull request.
+
+- Deprecations
+For changes that explicitly deprecate part of the code base.
+
+- Misc
+The category for changes related to documentation, testing and tooling. Also, for pull requests that can't fit in other sections.
+-->
+
 ## main
 
+## 0.0.46
+
+### Updates
+
+* Default to matching `name` and `id` of `input`.
+
+    *Kate Higa*
+
+* Restrict usage of padding system arguments on BorderBox, recommending use of `padding` density instead.
+
+    *Joel Hawksley*
+
+### Breaking changes
+
+* Restrict `TabNav`and `Tab` tags.
+
+    *Kate Higa*
+
+* Restrict `AvatarStack` body slot tag and `ImageCrop` spinner tag.
+
+    *Kate Higa*
+
+* Restrict `Details` body slot tags and `UnderlineNav` body slot tags.
+
+    *Kate Higa*
+
+* Move Primer::Classify from `app/lib/` to `lib/`. This requires an extra `require "primer/classify"` statement for anywhere Classify is needed.
+
+    *Manuel Puyol, Jon Rohan*
+
+* Restrict `Menu` heading slot tags to heading tags and require `tag` argument.
+
+    *Kate Higa*
+
+* Adding animation, vertical_align, word_break, display, visibility, & position arguments to the utilities class. `animation: :grow` is now `animation: :hover_grow` this was a change because we changed the class name in primer.
+
+    *Jon Rohan*
+
+### Misc
+
+* Update contributing guidelines with release instructions.
+
+    *Kate Higa*
+
+* Prevent flexible tag syntax with rubocop rule.
+
+    *Kate Higa*
+
+* Update linter autocorrection to use `""` instead of `true` for boolean attributes.
+
+    *Manuel Puyol*
+
+* Update Storybook version.
+
+    *Manuel Puyol*
+
+* Added a changelog authoring guide to `CHANGELOG.md`.
+
+    *Amélia Chavot*
+
 ## 0.0.45
 
 ### Updates

data/app/components/primer/auto_complete.rb

@@ -34,7 +34,8 @@ module Primer
         system_arguments[:aria]&.delete(:label)
       end
 
-      Input.new(id: @input_id, **system_arguments)
+      name = system_arguments[:name] || @input_id
+      Input.new(id: @input_id, name: name, **system_arguments)
     }
 
     # Optional icon to be rendered before the input. Has the same arguments as <%= link_to_component(Primer::OcticonComponent) %>.

data/app/components/primer/avatar_stack_component.rb

@@ -10,6 +10,9 @@ module Primer
 
     DEFAULT_TAG = :div
     TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
+
+    DEFAULT_BODY_TAG = :div
+    BODY_TAG_OPTIONS = TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
     # Required list of stacked avatars.
     #
     # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::AvatarComponent) %>.
@@ -40,6 +43,8 @@ module Primer
     # @param align [Symbol] <%= one_of(Primer::AvatarStackComponent::ALIGN_OPTIONS) %>
     # @param tooltipped [Boolean] Whether to add a tooltip to the stack or not.
     # @param body_arguments [Hash] Parameters to add to the Body. If `tooltipped` is set, has the same arguments as <%= link_to_component(Primer::Tooltip) %>.
+    #   The default tag is <%= pretty_value(Primer::AvatarStackComponent::DEFAULT_BODY_TAG) %> but can be changed using `tag:`
+    #   to <%= one_of(Primer::AvatarStackComponent::BODY_TAG_OPTIONS, lower: true) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_arguments: {}, **system_arguments)
       @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
@@ -47,7 +52,8 @@ module Primer
       @tooltipped = tooltipped
       @body_arguments = body_arguments
 
-      @body_arguments[:tag] ||= :div
+      body_tag = @body_arguments[:tag] || DEFAULT_BODY_TAG
+      @body_arguments[:tag] = fetch_or_fallback(BODY_TAG_OPTIONS, body_tag, DEFAULT_BODY_TAG)
       @body_arguments[:classes] = class_names(
         "AvatarStack-body",
         @body_arguments[:classes]

data/app/components/primer/base_component.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "primer/classify"
+
 module Primer
   # All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) used by [Primer React](https://primer.style/components/system-props).
   #
@@ -43,7 +45,7 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `animation` | Symbol | <%= one_of([:fade_in, :fade_out, :fade_up, :fade_down, :scale_in, :pulse, :grow_x, :grow]) %> |
+    # | `animation` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:animation)) %> |
     #
     # ## Border
     #
@@ -61,7 +63,7 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `bg` | String, Symbol | Background color. Accepts either a hex value as a String or <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS, lower: true) %> |
+    # | `bg` | String, Symbol | Background color. Accepts either a hex value as a String or <%= one_of(Primer::Classify::FunctionalBackgroundColors::OPTIONS, lower: true) %> |
     # | `border_color` | Symbol | Border color. <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS) %> |
     # | `color` | Symbol | Text color. <%= one_of(Primer::Classify::FunctionalTextColors::OPTIONS) %> |
     #
@@ -91,11 +93,11 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `display` | Symbol | <%= one_of([:none, :block, :flex, :inline, :inline_block, :inline_flex, :table, :table_cell]) %> |
+    # | `display` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:display)) %> |
     # | `height` | Symbol | <%= one_of([:fit]) %> |
     # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of(Primer::Classify::Utilities.mappings(:hide)) %> |
-    # | `v` | Symbol | Visibility. <%= one_of([:hidden, :visible]) %> |
-    # | `vertical_align` | Symbol | <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %> |
+    # | `visibility` | Symbol | Visibility. <%= one_of(Primer::Classify::Utilities.mappings(:visibility)) %> |
+    # | `vertical_align` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:vertical_align)) %> |
     #
     # ## Position
     #
@@ -104,7 +106,7 @@ module Primer
     # | `bottom` | Boolean | If `false`, sets `bottom: 0`. |
     # | `float` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:float)) %> |
     # | `left` | Boolean | If `false`, sets `left: 0`. |
-    # | `position` | Symbol | <%= one_of([:relative, :absolute, :fixed]) %> |
+    # | `position` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:position)) %> |
     # | `right` | Boolean | If `false`, sets `right: 0`. |
     # | `top` | Boolean | If `false`, sets `top: 0`. |
     #
@@ -138,7 +140,7 @@ module Primer
     # | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
     # | `text_transform` | Symbol | Text alignment. <%= one_of([:uppercase]) %> |
     # | `underline` | Boolean | Whether text should be underlined. |
-    # | `word_break` | Symbol | Whether to break words on line breaks. Can only be `:break_all`. |
+    # | `word_break` | Symbol | Whether to break words on line breaks. <%= one_of(Primer::Classify::Utilities.mappings(:word_break)) %> |
     #
     # ## Other
     #
@@ -152,6 +154,33 @@ module Primer
 
       raise ArgumentError, "`class` is an invalid argument. Use `classes` instead." if system_arguments.key?(:class) && !Rails.env.production?
 
+      if (denylist = system_arguments[:system_arguments_denylist])
+        if force_system_arguments? && !ENV["PRIMER_WARNINGS_DISABLED"]
+          # Convert denylist from:
+          # { [:p, :pt] => "message" } to:
+          # { p: "message", pt: "message" }
+          unpacked_denylist =
+            denylist.each_with_object({}) do |(keys, value), memo|
+              keys.each { |key| memo[key] = value }
+            end
+
+          violations = unpacked_denylist.keys & @system_arguments.keys
+
+          if violations.any?
+            message = "Found #{violations.count} #{'violation'.pluralize(violations)}:"
+            violations.each do |violation|
+              message += "\n The #{violation} system argument is not allowed here. #{unpacked_denylist[violation]}"
+            end
+
+            raise(ArgumentError, message)
+          end
+        end
+
+        # Remove :system_arguments_denylist key and any denied keys from system arguments
+        @system_arguments.except!(:system_arguments_denylist)
+        @system_arguments.except!(*denylist.keys.flatten)
+      end
+
       @result = Primer::Classify.call(**@system_arguments.merge(classes: classes))
 
       @system_arguments[:"data-view-component"] = true

data/app/components/primer/border_box_component.rb

@@ -11,6 +11,7 @@ module Primer
       :condensed => "Box--condensed",
       :spacious => "Box--spacious"
     }.freeze
+    PADDING_SUGGESTION = "Perhaps you could consider using :padding options of #{PADDING_MAPPINGS.keys.to_sentence}?"
 
     # Optional Header.
     #
@@ -111,6 +112,8 @@ module Primer
         PADDING_MAPPINGS[fetch_or_fallback(PADDING_MAPPINGS.keys, padding, DEFAULT_PADDING)],
         system_arguments[:classes]
       )
+
+      @system_arguments[:system_arguments_denylist] = { [:p, :pt, :pb, :pr, :pl] => PADDING_SUGGESTION }
     end
 
     def render?

data/app/components/primer/component.rb

@@ -15,6 +15,10 @@ module Primer
 
     private
 
+    def force_system_arguments?
+      Rails.application.config.primer_view_components.force_system_arguments
+    end
+
     def deprecated_component_warning(new_class: nil, version: nil)
       return if Rails.env.production? || silence_deprecations?
 

data/app/components/primer/details_component.rb

@@ -5,6 +5,8 @@ module Primer
   class DetailsComponent < Primer::Component
     status :beta
 
+    BODY_TAG_DEFAULT = :div
+    BODY_TAG_OPTIONS = [:ul, :"details-menu", :"details-dialog", BODY_TAG_DEFAULT].freeze
     NO_OVERLAY = :none
     OVERLAY_MAPPINGS = {
       NO_OVERLAY => "",
@@ -27,9 +29,11 @@ module Primer
 
     # Use the Body slot as the main content to be shown when triggered by the Summary.
     #
+    # @param tag [String] (Primer::DetailsComponent::BODY_TAG_DEFAULT) <%= one_of(Primer::DetailsComponent::BODY_TAG_OPTIONS) %>
     # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
-    renders_one :body, lambda { |**system_arguments|
-      system_arguments[:tag] ||= :div
+    renders_one :body, lambda { |tag: BODY_TAG_DEFAULT, **system_arguments|
+      system_arguments[:tag] = fetch_or_fallback(BODY_TAG_OPTIONS, tag, BODY_TAG_DEFAULT)
+
       Primer::BaseComponent.new(**system_arguments)
     }
 

data/app/components/primer/image_crop.rb

@@ -6,7 +6,7 @@ module Primer
     # A loading indicator that is shown while the image is loading.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :loading, lambda { |**system_arguments|
-      system_arguments[:tag] ||= :div
+      system_arguments[:tag] = :div
       system_arguments[:"data-loading-slot"] = true
 
       Primer::BaseComponent.new(**system_arguments)

data/app/components/primer/menu_component.rb

@@ -3,11 +3,15 @@
 module Primer
   # Use `Menu` to create vertical lists of navigational links.
   class MenuComponent < Primer::Component
+    HEADING_TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
+    HEADING_TAG_FALLBACK = :h2
+
     # Optional menu heading
     #
+    # @param tag [Symbol] <%= one_of(Primer::MenuComponent::HEADING_TAG_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :heading, lambda { |**system_arguments|
-      system_arguments[:tag] ||= :span
+    renders_one :heading, lambda { |tag:, **system_arguments|
+      system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, HEADING_TAG_FALLBACK)
       system_arguments[:classes] = class_names(
         "menu-heading",
         system_arguments[:classes]
@@ -35,7 +39,7 @@ module Primer
 
     # @example Default
     #   <%= render(Primer::MenuComponent.new) do |c| %>
-    #     <% c.heading do %>
+    #     <% c.heading(tag: :h2) do %>
     #       Heading
     #     <% end %>
     #     <% c.item(selected: true, href: "#url") do %>

data/app/components/primer/navigation/tab_component.rb

@@ -18,7 +18,7 @@ module Primer
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :panel, lambda { |**system_arguments|
-        system_arguments[:tag] ||= :div
+        system_arguments[:tag] = :div
         system_arguments[:role] ||= :tabpanel
         system_arguments[:hidden] = true unless @selected
 
@@ -96,12 +96,12 @@ module Primer
 
         @system_arguments = system_arguments
 
-        if with_panel
-          @system_arguments[:tag] ||= :button
+        if with_panel || @system_arguments[:tag] == :button
+          @system_arguments[:tag] = :button
           @system_arguments[:type] = :button
           @system_arguments[:role] = :tab
         else
-          @system_arguments[:tag] ||= :a
+          @system_arguments[:tag] = :a
         end
 
         @wrapper_arguments = wrapper_arguments

data/app/components/primer/popover_component.rb

@@ -28,7 +28,7 @@ module Primer
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :heading, lambda { |**system_arguments|
       system_arguments[:mb] ||= 2
-      system_arguments[:tag] ||= :h4
+      system_arguments[:tag] ||= :h4 # rubocop:disable Primer/NoTagMemoize
 
       Primer::HeadingComponent.new(**system_arguments)
     }
@@ -106,7 +106,7 @@ module Primer
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :div
+      @system_arguments[:tag] ||= :div # rubocop:disable Primer/NoTagMemoize
       @system_arguments[:classes] = class_names(
         system_arguments[:classes],
         "Popover"

data/app/components/primer/tab_nav_component.rb

@@ -10,7 +10,8 @@ module Primer
     DEFAULT_EXTRA_ALIGN = :left
     EXTRA_ALIGN_OPTIONS = [DEFAULT_EXTRA_ALIGN, :right].freeze
 
-    # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
+    # Tabs to be rendered. When `with_panel` is set on the parent, a button is rendered for panel navigation. Otherwise,
+    # an anchor tag is rendered for page navigation. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
     #
     # @param selected [Boolean] Whether the tab is selected.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -119,7 +120,8 @@ module Primer
     #   <% end %>
     #
     # @param label [String] Used to set the `aria-label` on the top level `<nav>` element.
-    # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels.
+    # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels. When true, <%= link_to_component(Primer::TabContainerComponent) %>
+    #   is rendered along with JavaScript behavior. Additionally, the `tab` slot will render as a button as opposed to an anchor.
     # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
     # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper. Only applies if `with_panel` is `true`.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -130,7 +132,7 @@ module Primer
       @body_arguments = body_arguments
       @wrapper_arguments = wrapper_arguments
 
-      @system_arguments[:tag] ||= :div
+      @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
         "tabnav",
         system_arguments[:classes]

data/app/components/primer/tooltip.rb

@@ -70,7 +70,7 @@ module Primer
       **system_arguments
     )
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :span
+      @system_arguments[:tag] ||= :span # rubocop:disable Primer/NoTagMemoize
       @system_arguments[:aria] = { label: label }
 
       @system_arguments[:classes] = class_names(

data/app/components/primer/underline_nav_component.rb

@@ -13,7 +13,11 @@ module Primer
     BODY_TAG_DEFAULT = :div
     BODY_TAG_OPTIONS = [BODY_TAG_DEFAULT, :ul].freeze
 
-    # Use the tabs to list navigation items. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
+    ACTIONS_TAG_DEFAULT = :div
+    ACTIONS_TAG_OPTIONS = [ACTIONS_TAG_DEFAULT, :span].freeze
+
+    # Use the tabs to list navigation items. When `with_panel` is set on the parent, a button is rendered for panel navigation. Otherwise,
+    # an anchor tag is rendered for page navigation. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
     #
     # @param selected [Boolean] Whether the tab is selected.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -34,9 +38,10 @@ module Primer
 
     # Use actions for a call to action.
     #
+    # @param tag [String] (Primer::UnderlineNavComponent::ACTIONS_TAG_DEFAULT) <%= one_of(Primer::UnderlineNavComponent::ACTIONS_TAG_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :actions, lambda { |**system_arguments|
-      system_arguments[:tag] ||= :div
+    renders_one :actions, lambda { |tag: ACTIONS_TAG_DEFAULT, **system_arguments|
+      system_arguments[:tag] = fetch_or_fallback(ACTIONS_TAG_OPTIONS, tag, ACTIONS_TAG_DEFAULT)
       system_arguments[:classes] = class_names("UnderlineNav-actions", system_arguments[:classes])
 
       Primer::BaseComponent.new(**system_arguments)
@@ -131,7 +136,8 @@ module Primer
     #   <% end %>
     #
     # @param label [String] The `aria-label` on top level `<nav>` element.
-    # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels.
+    # @param with_panel [Boolean] Whether the `UnderlineNav` should navigate through pages or panels. When true, <%= link_to_component(Primer::TabContainerComponent) %> is
+    #   rendered along with JavaScript behavior.
     # @param align [Symbol] <%= one_of(Primer::UnderlineNavComponent::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavComponent::ALIGN_DEFAULT %>
     # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
     # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper. Only applies if `with_panel` is `true`.

data/{app/lib → lib}/primer/classify.rb

@@ -1,5 +1,13 @@
 # frozen_string_literal: true
 
+require_relative "classify/cache"
+require_relative "classify/flex"
+require_relative "classify/functional_background_colors"
+require_relative "classify/functional_border_colors"
+require_relative "classify/functional_text_colors"
+require_relative "classify/grid"
+require_relative "classify/utilities"
+
 module Primer
   # :nodoc:
   class Classify
@@ -13,28 +21,22 @@ module Primer
     ).freeze
     # rubocop:enable Security/YAMLLoad
 
-    DISPLAY_KEY = :display
-
     # Keys where we can simply translate { key: value } into ".key-value"
-    CONCAT_KEYS = %i[position v text box_shadow].freeze
+    CONCAT_KEYS = %i[text box_shadow].freeze
 
     INVALID_CLASS_NAME_PREFIXES =
-      (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
+      (["bg-", "color-", "text-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
 
     COLOR_KEY = :color
     BG_KEY = :bg
-    VERTICAL_ALIGN_KEY = :vertical_align
-    WORD_BREAK_KEY = :word_break
     TEXT_KEYS = %i[font_family font_style font_weight text_align text_transform].freeze
     WIDTH_KEY = :width
     HEIGHT_KEY = :height
     BOX_SHADOW_KEY = :box_shadow
-    VISIBILITY_KEY = :visibility
-    ANIMATION_KEY = :animation
     CONTAINER_KEY = :container
 
     BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
-    RESPONSIVE_KEYS = ([DISPLAY_KEY, Primer::Classify::Grid::COL_KEY] + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
+    RESPONSIVE_KEYS = ([Primer::Classify::Grid::COL_KEY] + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
 
     BOOLEAN_MAPPINGS = {
       underline: {
@@ -102,14 +104,9 @@ module Primer
         BORDER_RADIUS_KEY,
         COLOR_KEY,
         BG_KEY,
-        DISPLAY_KEY,
-        VERTICAL_ALIGN_KEY,
-        WORD_BREAK_KEY,
         WIDTH_KEY,
         HEIGHT_KEY,
         BOX_SHADOW_KEY,
-        VISIBILITY_KEY,
-        ANIMATION_KEY,
         CONTAINER_KEY
       ]
     ).freeze
@@ -197,12 +194,6 @@ module Primer
           end
         elsif key == COLOR_KEY
           memo[:classes] << Primer::Classify::FunctionalTextColors.color(val)
-        elsif key == DISPLAY_KEY
-          memo[:classes] << "d#{breakpoint}-#{val.to_s.dasherize}"
-        elsif key == VERTICAL_ALIGN_KEY
-          memo[:classes] << "v-align-#{val.to_s.dasherize}"
-        elsif key == WORD_BREAK_KEY
-          memo[:classes] << "wb-#{val.to_s.dasherize}"
         elsif key == BORDER_KEY
           border_value = if val == true
                            "border"
@@ -243,14 +234,6 @@ module Primer
                             else
                               "color-shadow-#{val.to_s.dasherize}"
                             end
-        elsif key == VISIBILITY_KEY
-          memo[:classes] << "v-#{val.to_s.dasherize}"
-        elsif key == ANIMATION_KEY
-          memo[:classes] << if val == :grow
-                              "hover-grow"
-                            else
-                              "anim-#{val.to_s.dasherize}"
-                            end
         else
           memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{val.to_s.dasherize}"
         end

data/{app/lib → lib}/primer/classify/cache.rb

@@ -1,5 +1,11 @@
 # frozen_string_literal: true
 
+require_relative "flex"
+require_relative "functional_background_colors"
+require_relative "functional_border_colors"
+require_relative "functional_text_colors"
+require_relative "grid"
+
 module Primer
   class Classify
     # :nodoc:
@@ -49,11 +55,6 @@ module Primer
             values: Primer::Classify::Grid::COL_VALUES
           )
 
-          preload(
-            keys: Primer::Classify::DISPLAY_KEY,
-            values: [:flex, :block, :inline_block, :inline_flex, :none, :table, :table_cell]
-          )
-
           preload(
             keys: [Primer::Classify::COLOR_KEY],
             values: Primer::Classify::FunctionalTextColors::OPTIONS
@@ -64,16 +65,6 @@ module Primer
             values: Primer::Classify::FunctionalBackgroundColors::OPTIONS
           )
 
-          preload(
-            keys: Primer::Classify::VERTICAL_ALIGN_KEY,
-            values: [:baseline, :top, :middle, :bottom, :text_top, :text_bottom]
-          )
-
-          preload(
-            keys: Primer::Classify::WORD_BREAK_KEY,
-            values: [:break_all]
-          )
-
           preload(
             keys: :text_align,
             values: [:left, :center, :right]
@@ -113,11 +104,6 @@ module Primer
             keys: Primer::Classify::BOX_SHADOW_KEY,
             values: [true, :small, :medium, :large, :extra_large, :none]
           )
-
-          preload(
-            keys: Primer::Classify::VISIBILITY_KEY,
-            values: [:hidden, :visible]
-          )
         end
 
         def preload(keys:, values:)

data/{app/lib → lib}/primer/classify/functional_background_colors.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "functional_colors"
+
 module Primer
   class Classify
     # Background specific functional colors

data/{app/lib → lib}/primer/classify/functional_border_colors.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "functional_colors"
+
 module Primer
   class Classify
     # Border specific functional colors

data/{app/lib → lib}/primer/classify/functional_text_colors.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "functional_colors"
+
 module Primer
   class Classify
     # Text specific functional colors.

data/{app/lib → lib}/primer/classify/utilities.yml

@@ -1,4 +1,71 @@
 ---
+:animation:
+  :fade_in:
+  - anim-fade-in
+  :fade_out:
+  - anim-fade-out
+  :fade_up:
+  - anim-fade-up
+  :fade_down:
+  - anim-fade-down
+  :grow_x:
+  - anim-grow-x
+  :shrink_x:
+  - anim-shrink-x
+  :scale_in:
+  - anim-scale-in
+  :pulse:
+  - anim-pulse
+  :pulse_in:
+  - anim-pulse-in
+  :hover_grow:
+  - anim-hover-grow
+  :rotate:
+  - anim-rotate
+:position:
+  :static:
+  - position-static
+  - position-sm-static
+  - position-md-static
+  - position-lg-static
+  - position-xl-static
+  :relative:
+  - position-relative
+  - position-sm-relative
+  - position-md-relative
+  - position-lg-relative
+  - position-xl-relative
+  :absolute:
+  - position-absolute
+  - position-sm-absolute
+  - position-md-absolute
+  - position-lg-absolute
+  - position-xl-absolute
+  :fixed:
+  - position-fixed
+  - position-sm-fixed
+  - position-md-fixed
+  - position-lg-fixed
+  - position-xl-fixed
+  :sticky:
+  - position-sticky
+  - position-sm-sticky
+  - position-md-sticky
+  - position-lg-sticky
+  - position-xl-sticky
+:vertical_align:
+  :middle:
+  - v-align-middle
+  :top:
+  - v-align-top
+  :bottom:
+  - v-align-bottom
+  :text_top:
+  - v-align-text-top
+  :text_bottom:
+  - v-align-text-bottom
+  :baseline:
+  - v-align-baseline
 :float:
   :left:
   - float-left
@@ -1136,6 +1203,63 @@
   - py-md-12
   - py-lg-12
   - py-xl-12
+:word_break:
+  :break_all:
+  - wb-break-all
+:display:
+  :block:
+  - d-block
+  - d-sm-block
+  - d-md-block
+  - d-lg-block
+  - d-xl-block
+  :flex:
+  - d-flex
+  - d-sm-flex
+  - d-md-flex
+  - d-lg-flex
+  - d-xl-flex
+  :inline:
+  - d-inline
+  - d-sm-inline
+  - d-md-inline
+  - d-lg-inline
+  - d-xl-inline
+  :inline_block:
+  - d-inline-block
+  - d-sm-inline-block
+  - d-md-inline-block
+  - d-lg-inline-block
+  - d-xl-inline-block
+  :inline_flex:
+  - d-inline-flex
+  - d-sm-inline-flex
+  - d-md-inline-flex
+  - d-lg-inline-flex
+  - d-xl-inline-flex
+  :none:
+  - d-none
+  - d-sm-none
+  - d-md-none
+  - d-lg-none
+  - d-xl-none
+  :table:
+  - d-table
+  - d-sm-table
+  - d-md-table
+  - d-lg-table
+  - d-xl-table
+  :table_cell:
+  - d-table-cell
+  - d-sm-table-cell
+  - d-md-table-cell
+  - d-lg-table-cell
+  - d-xl-table-cell
+:visibility:
+  :hidden:
+  - v-hidden
+  :visible:
+  - v-visible
 :hide:
   :sm:
   - hide-sm

data/lib/primer/view_components.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+require "primer/classify"
 require "primer/view_components/version"
 require "primer/view_components/engine"
 

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

@@ -32,8 +32,7 @@ module ERBLint
           elsif attr_name.start_with?(*STRING_PARAMETERS)
             raise ConversionError, "Cannot convert attribute \"#{attr_name}\" because its value contains an erb block" if attribute.value_node&.children&.any? { |n| n.try(:type) == :erb }
 
-            # if attribute has no value_node, it means it is a boolean attribute.
-            { "\"#{attr_name}\"" => attribute.value_node ? attribute.value.to_json : true }
+            { "\"#{attr_name}\"" => attribute.value.to_json }
           else
             raise ConversionError, "Cannot convert attribute \"#{attr_name}\""
           end

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 45
+      PATCH = 46
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/tasks/docs.rake

@@ -176,10 +176,10 @@ namespace :docs do
             "name" => tag.name,
             "type" => tag.types.join(", "),
             "default" => default_value,
-            "description" => view_context.render(inline: tag.text)
+            "description" => view_context.render(inline: tag.text.squish)
           }
 
-          f.puts("| `#{tag.name}` | `#{tag.types.join(', ')}` | #{default_value} | #{view_context.render(inline: tag.text)} |")
+          f.puts("| `#{tag.name}` | `#{tag.types.join(', ')}` | #{default_value} | #{view_context.render(inline: tag.text.squish)} |")
         end
 
         component_args = {

data/lib/tasks/utilities.rake

@@ -8,14 +8,20 @@ namespace :utilities do
 
     # Keys that are looked for to be included in the utilities.yml file
     SUPPORTED_KEYS = %i[
-      hide
+      anim
+      d
       float
+      hide
       m mt mr mb ml mx my
       p pt pr pb pl px py
+      position
+      wb
+      v
     ].freeze
 
     # Replacements for some classnames that end up being a different argument key
     REPLACEMENT_KEYS = {
+      "^anim" => "animation",
       "^v-align" => "vertical_align",
       "^d" => "display",
       "^wb" => "word_break",
@@ -92,7 +98,7 @@ namespace :utilities do
       x.transform_values { |y| y.reverse.drop_while(&:nil?).reverse }
     end
 
-    File.open("app/lib/primer/classify/utilities.yml", "w") do |f|
+    File.open("lib/primer/classify/utilities.yml", "w") do |f|
       f.puts YAML.dump(output)
     end
   end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.45
+  version: 0.0.46
 platform: ruby
 authors:
 - GitHub Open Source
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-06-16 00:00:00.000000000 Z
+date: 2021-06-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -338,7 +338,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.9.25
-description: 
+description:
 email:
 - opensource+primer_view_components@github.com
 executables: []
@@ -356,9 +356,9 @@ files:
 - app/components/primer/auto_complete/auto_complete.html.erb
 - app/components/primer/auto_complete/auto_complete.js
 - app/components/primer/auto_complete/auto_complete.ts
+- app/components/primer/auto_complete/auto_component.d.ts
+- app/components/primer/auto_complete/auto_component.js
 - app/components/primer/auto_complete/item.rb
-- app/components/primer/auto_complete_component.d.ts
-- app/components/primer/auto_complete_component.js
 - app/components/primer/avatar_component.rb
 - app/components/primer/avatar_stack_component.html.erb
 - app/components/primer/avatar_stack_component.rb
@@ -386,8 +386,6 @@ files:
 - app/components/primer/counter_component.rb
 - app/components/primer/details_component.html.erb
 - app/components/primer/details_component.rb
-- app/components/primer/details_menu_component.d.ts
-- app/components/primer/details_menu_component.js
 - app/components/primer/dropdown.d.ts
 - app/components/primer/dropdown.html.erb
 - app/components/primer/dropdown.js
@@ -459,16 +457,6 @@ files:
 - app/components/primer/underline_nav_component.html.erb
 - app/components/primer/underline_nav_component.rb
 - app/lib/primer/class_name_helper.rb
-- app/lib/primer/classify.rb
-- app/lib/primer/classify/cache.rb
-- app/lib/primer/classify/flex.rb
-- app/lib/primer/classify/functional_background_colors.rb
-- app/lib/primer/classify/functional_border_colors.rb
-- app/lib/primer/classify/functional_colors.rb
-- app/lib/primer/classify/functional_text_colors.rb
-- app/lib/primer/classify/grid.rb
-- app/lib/primer/classify/utilities.rb
-- app/lib/primer/classify/utilities.yml
 - app/lib/primer/fetch_or_fallback_helper.rb
 - app/lib/primer/join_style_arguments_helper.rb
 - app/lib/primer/octicon/cache.rb
@@ -476,6 +464,16 @@ files:
 - app/lib/primer/tabbed_component_helper.rb
 - app/lib/primer/test_selector_helper.rb
 - app/lib/primer/view_helper.rb
+- lib/primer/classify.rb
+- lib/primer/classify/cache.rb
+- lib/primer/classify/flex.rb
+- lib/primer/classify/functional_background_colors.rb
+- lib/primer/classify/functional_border_colors.rb
+- lib/primer/classify/functional_colors.rb
+- lib/primer/classify/functional_text_colors.rb
+- lib/primer/classify/grid.rb
+- lib/primer/classify/utilities.rb
+- lib/primer/classify/utilities.yml
 - lib/primer/view_components.rb
 - lib/primer/view_components/engine.rb
 - lib/primer/view_components/linters.rb
@@ -499,7 +497,7 @@ licenses:
 - MIT
 metadata:
   allowed_push_host: https://rubygems.org
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -515,7 +513,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.1.2
-signing_key: 
+signing_key:
 specification_version: 4
 summary: ViewComponents for the Primer Design System
 test_files: []

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

@@ -1 +0,0 @@
-import '@github/details-menu-element';

data/app/components/primer/details_menu_component.js

@@ -1 +0,0 @@
-import '@github/details-menu-element';