primer_view_components 0.19.0 → 0.20.1

data/lib/primer/view_components/version.rb

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

data/previews/primer/alpha/action_list_preview.rb

@@ -459,6 +459,48 @@ module Primer
           component.with_item(label: "Active item", href: "/", active: true)
         end
       end
+
+      # @label Long label
+      #
+      # @param truncate_label [Symbol] select [none, truncate, show_tooltip]
+      # @snapshot
+      def long_label_with_tooltip(truncate_label: :show_tooltip)
+        render(Primer::Alpha::ActionList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
+        end
+      end
+
+      def long_label_wrap(truncate_label: :none)
+        render(Primer::Alpha::ActionList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
+        end
+      end
+
+      def long_label_truncate_no_tooltip(truncate_label: :truncate)
+        render(Primer::Alpha::ActionList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
+        end
+      end
+
+      def long_label_show_tooltip_with_truncate_label(truncate_label: :none)
+        render(Primer::Alpha::ActionList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          ) do |item|
+            item.with_tooltip(text: "this is a tooltip")
+          end
+        end
+      end
     end
   end
 end

data/previews/primer/alpha/select_preview.rb

@@ -25,7 +25,7 @@ module Primer
         required: false,
         visually_hide_label: false,
         size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
-        full_width: false,
+        full_width: true,
         disabled: false,
         invalid: false,
         validation_message: nil
@@ -97,6 +97,17 @@ module Primer
         end
       end
 
+      # @label Not full width
+      # @snapshot
+      def not_full_width
+        render(Primer::Alpha::Select.new(full_width: false, name: "my-select-list", label: "Favorite place to visit")) do |component|
+          component.option(label: "Lopez Island", value: "lopez")
+          component.option(label: "Shaw Island", value: "shaw")
+          component.option(label: "Orcas Island", value: "orcas")
+          component.option(label: "San Juan Island", value: "san_juan")
+        end
+      end
+
       # @label Disabled
       # @snapshot
       def disabled

data/previews/primer/alpha/text_area_preview.rb

@@ -23,7 +23,7 @@ module Primer
         caption: "You can trust me, I'm a website",
         required: false,
         visually_hide_label: false,
-        full_width: false,
+        full_width: true,
         disabled: false,
         invalid: false,
         validation_message: nil
@@ -70,6 +70,12 @@ module Primer
         render(Primer::Alpha::TextArea.new(full_width: true, name: "my-text-area", label: "Tell me about yourself"))
       end
 
+      # @label Not full width
+      # @snapshot
+      def not_full_width
+        render(Primer::Alpha::TextArea.new(full_width: false, name: "my-text-area", label: "Tell me about yourself"))
+      end
+
       # @label Disabled
       # @snapshot
       def disabled

data/previews/primer/alpha/text_field_preview.rb

@@ -33,7 +33,7 @@ module Primer
         size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
         show_clear_button: false,
         clear_button_id: "my-text-field-clear-button",
-        full_width: false,
+        full_width: true,
         disabled: false,
         invalid: false,
         validation_message: nil,
@@ -125,6 +125,12 @@ module Primer
         render(Primer::Alpha::TextField.new(full_width: true, name: "my-text-field", label: "My text field"))
       end
 
+      # @label Not full width
+      # @snapshot
+      def not_full_width
+        render(Primer::Alpha::TextField.new(full_width: false, name: "my-text-field", label: "My text field"))
+      end
+
       # @label Disabled
       # @snapshot
       def disabled

data/previews/primer/beta/nav_list_preview.rb

@@ -129,6 +129,49 @@ module Primer
       # @label Trailing action
       # @snapshot
       def trailing_action; end
+
+      # @label Long label truncate overflow
+      #
+      # @param truncate_label [Symbol] select [none, truncate, show_tooltip]
+      # @snapshot
+      def long_label_with_tooltip(truncate_label: :show_tooltip)
+        render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          ) do |item|
+            item.with_trailing_visual_icon(icon: :plus)
+          end
+        end
+      end
+
+      def long_label_wrap(truncate_label: :none)
+        render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
+        end
+      end
+
+      def long_label_truncate_no_tooltip(truncate_label: :truncate)
+        render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
+        end
+      end
+
+      def long_label_show_tooltip_no_truncate_label
+        render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+          ) do |item|
+            item.with_tooltip(text: "this is a tooltip")
+          end
+        end
+      end
     end
   end
 end

data/previews/primer/forms_preview/auto_complete_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: generic_form_submission_path) do |f| %>
+  <%= render(AutoCompleteForm.new(f)) %>
+<% end %>

data/previews/primer/forms_preview/select_form.html.erb

@@ -1,3 +1,3 @@
-<%= primer_form_with(url: "/foo") do |f| %>
+<%= primer_form_with(url: generic_form_submission_path) do |f| %>
   <%= render(SelectForm.new(f)) %>
 <% end %>

data/previews/primer/forms_preview.rb

@@ -44,5 +44,7 @@ module Primer
     def immediate_validation_form; end
 
     def example_toggle_switch_form; end
+
+    def auto_complete_form; end
   end
 end

data/static/arguments.json

@@ -249,9 +249,9 @@
       },
       {
         "name": "truncate_label",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Truncate label with ellipsis."
+        "type": "Boolean | Symbol",
+        "default": "`:none`",
+        "description": "How the label should be truncated when the text does not fit inside the bounds of the list item. One of `false`, `:none`, `:show_tooltip`, `:truncate`, or `true`. Pass `false` or `:none` to wrap label text. Pass `true` or `:truncate` to truncate labels with ellipses. Pass `:show_tooltip` to show the entire label contents in a tooltip when the item is hovered."
       },
       {
         "name": "href",
@@ -2494,7 +2494,7 @@
         "name": "full_width",
         "type": "Boolean",
         "default": "N/A",
-        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container."
+        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
       },
       {
         "name": "name",
@@ -2624,7 +2624,7 @@
         "name": "full_width",
         "type": "Boolean",
         "default": "N/A",
-        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container."
+        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
       },
       {
         "name": "name",
@@ -2814,13 +2814,13 @@
         "name": "size",
         "type": "Symbol",
         "default": "`:medium`",
-        "description": "What size toggle switch to render. One of `:end` or `:start`."
+        "description": "What size toggle switch to render. One of `:medium` or `:small`."
       },
       {
         "name": "status_label_position",
         "type": "Symbol",
         "default": "`:start`",
-        "description": "Which side of the toggle switch to render the status label. One of `:medium` or `:small`."
+        "description": "Which side of the toggle switch to render the status label. One of `:end` or `:start`."
       },
       {
         "name": "system_arguments",

data/static/constants.json

@@ -95,6 +95,7 @@
     "DEFAULT_DESCRIPTION_SCHEME": "block",
     "DEFAULT_SCHEME": "default",
     "DEFAULT_SIZE": "medium",
+    "DEFAULT_TRUNCATION_BEHAVIOR": "none",
     "DESCRIPTION_SCHEME_MAPPINGS": {
       "inline": "ActionListItem-descriptionWrap--inline",
       "block": "ActionListItem-descriptionWrap"
@@ -120,6 +121,20 @@
       "medium",
       "large",
       "xlarge"
+    ],
+    "TRUNCATION_BEHAVIOR_MAPPINGS": {
+      "none": null,
+      "false": null,
+      "show_tooltip": "ActionListItem-label--truncate",
+      "truncate": "ActionListItem-label--truncate",
+      "true": "ActionListItem-label--truncate"
+    },
+    "TRUNCATION_BEHAVIOR_OPTIONS": [
+      "none",
+      false,
+      "show_tooltip",
+      "truncate",
+      true
     ]
   },
   "Primer::Alpha::ActionMenu": {

data/static/info_arch.json

@@ -746,6 +746,58 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/action_list/long_label_with_tooltip",
+        "name": "long_label_with_tooltip",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/action_list/long_label_wrap",
+        "name": "long_label_wrap",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/action_list/long_label_truncate_no_tooltip",
+        "name": "long_label_truncate_no_tooltip",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/action_list/long_label_show_tooltip_with_truncate_label",
+        "name": "long_label_show_tooltip_with_truncate_label",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -813,9 +865,9 @@
           },
           {
             "name": "truncate_label",
-            "type": "Boolean",
-            "default": "`false`",
-            "description": "Truncate label with ellipsis."
+            "type": "Boolean | Symbol",
+            "default": "`:none`",
+            "description": "How the label should be truncated when the text does not fit inside the bounds of the list item. One of `false`, `:none`, `:show_tooltip`, `:truncate`, or `true`. Pass `false` or `:none` to wrap label text. Pass `true` or `:truncate` to truncate labels with ellipses. Pass `:show_tooltip` to show the entire label contents in a tooltip when the item is hovered."
           },
           {
             "name": "href",
@@ -7127,6 +7179,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/select/not_full_width",
+        "name": "not_full_width",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/select/disabled",
         "name": "disabled",
@@ -7562,7 +7627,7 @@
         "name": "full_width",
         "type": "Boolean",
         "default": "N/A",
-        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container."
+        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
       },
       {
         "name": "name",
@@ -7745,6 +7810,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/text_area/not_full_width",
+        "name": "not_full_width",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/text_area/disabled",
         "name": "disabled",
@@ -7813,7 +7891,7 @@
         "name": "full_width",
         "type": "Boolean",
         "default": "N/A",
-        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container."
+        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
       },
       {
         "name": "name",
@@ -8090,6 +8168,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/text_field/not_full_width",
+        "name": "not_full_width",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/text_field/disabled",
         "name": "disabled",
@@ -8319,13 +8410,13 @@
         "name": "size",
         "type": "Symbol",
         "default": "`:medium`",
-        "description": "What size toggle switch to render. One of `:end` or `:start`."
+        "description": "What size toggle switch to render. One of `:medium` or `:small`."
       },
       {
         "name": "status_label_position",
         "type": "Symbol",
         "default": "`:start`",
-        "description": "Which side of the toggle switch to render the status label. One of `:medium` or `:small`."
+        "description": "Which side of the toggle switch to render the status label. One of `:end` or `:start`."
       },
       {
         "name": "system_arguments",
@@ -13115,6 +13206,58 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/nav_list/long_label_with_tooltip",
+        "name": "long_label_with_tooltip",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/nav_list/long_label_wrap",
+        "name": "long_label_wrap",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/nav_list/long_label_truncate_no_tooltip",
+        "name": "long_label_truncate_no_tooltip",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/nav_list/long_label_show_tooltip_no_truncate_label",
+        "name": "long_label_show_tooltip_no_truncate_label",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

data/static/previews.json

@@ -376,6 +376,58 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/action_list/long_label_with_tooltip",
+        "name": "long_label_with_tooltip",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/action_list/long_label_wrap",
+        "name": "long_label_wrap",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/action_list/long_label_truncate_no_tooltip",
+        "name": "long_label_truncate_no_tooltip",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/action_list/long_label_show_tooltip_with_truncate_label",
+        "name": "long_label_show_tooltip_with_truncate_label",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },
@@ -4577,6 +4629,58 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/nav_list/long_label_with_tooltip",
+        "name": "long_label_with_tooltip",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/nav_list/long_label_wrap",
+        "name": "long_label_wrap",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/nav_list/long_label_truncate_no_tooltip",
+        "name": "long_label_truncate_no_tooltip",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/nav_list/long_label_show_tooltip_no_truncate_label",
+        "name": "long_label_show_tooltip_no_truncate_label",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },
@@ -5451,6 +5555,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/select/not_full_width",
+        "name": "not_full_width",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/select/disabled",
         "name": "disabled",
@@ -5975,6 +6092,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/text_area/not_full_width",
+        "name": "not_full_width",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/text_area/disabled",
         "name": "disabled",
@@ -6139,6 +6269,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/text_field/not_full_width",
+        "name": "not_full_width",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/text_field/disabled",
         "name": "disabled",