primer_view_components 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 67cf7f6a0ffa0d4f358845a0523723352fdbe8635c8192005ef22c957066d752
-  data.tar.gz: 513340d84fb91861a3f776c4d68da8bab7fcfd39f638946c43eec5590a763a92
+  metadata.gz: 95202a9f56eb3628d554ce3b16f89042465dd91ad9fb4a08df6ab20b18240a93
+  data.tar.gz: 70a7b1e0f4fa4955f007f52ffaca6a5eb18338daebe49ed223189cc652a2e50e
 SHA512:
-  metadata.gz: 187142bccdd6a1f38c7174caf61a247ad72ac844153368d233f83ec21caac72b5e3bac56887e19ba5ab9a7a951e6e56828a9cdb762b9bd46ad46896e7294ea2f
-  data.tar.gz: 80952f4fd8e2e66b2bd06977b21835f013c390b4a957e4187235976d73a73c8709ea5dadc7f8e0f79bb8bc680f58ddf6de33cc5bed41133d98275b12dba416a4
+  metadata.gz: 9edab351da16983c31fee3178b81abcf69347c506dc3bead36bc3529cbc8a3bc8a3b795f18b5de56a7f54741b9ad82aa10fe6e2c35443510a7e9db2fd01c4aed
+  data.tar.gz: a54dee217b6d46790bc06a58007bd0608042ea1e7d123fb6cd6debd5abb3274b38184d4a5a4318d4f95b7fa43271672e6658837ff473d1199ddc7c274b04fd63

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 0.1.4
+
+### Patch Changes
+
+- [#1829](https://github.com/primer/view_components/pull/1829) [`bb54d982`](https://github.com/primer/view_components/commit/bb54d982433910ae28005b72de73ca69a6f8a8f3) Thanks [@josepmartins](https://github.com/josepmartins)! - Add responsive values for `border` and `border-radius` system argument
+
+* [#1897](https://github.com/primer/view_components/pull/1897) [`eae7a7f8`](https://github.com/primer/view_components/commit/eae7a7f8a4891efa4873558d380eabb638272095) Thanks [@camertron](https://github.com/camertron)! - Fix widths of text fields and multi inputs.
+
 ## 0.1.3
 
 ### Patch Changes

data/app/forms/select_form.rb

@@ -2,8 +2,8 @@
 
 # :nodoc:
 class SelectForm < ApplicationForm
-  form do |check_form|
-    check_form.select_list(name: "cities", label: "Cool cities", caption: "Select your favorite!", include_blank: true) do |city_list|
+  form do |select_form|
+    select_form.select_list(name: "cities", label: "Cool cities", caption: "Select your favorite!", include_blank: true) do |city_list|
       city_list.option(label: "Lopez Island", value: "lopez_island")
       city_list.option(label: "Bellevue", value: "bellevue")
       city_list.option(label: "Seattle", value: "seattle")

data/lib/primer/classify/utilities.yml

@@ -1606,45 +1606,105 @@
 :border:
   :left:
   - border-left
+  - border-sm-left
+  - border-md-left
+  - border-lg-left
+  - border-xl-left
   :top:
   - border-top
+  - border-sm-top
+  - border-md-top
+  - border-lg-top
+  - border-xl-top
   :bottom:
   - border-bottom
+  - border-sm-bottom
+  - border-md-bottom
+  - border-lg-bottom
+  - border-xl-bottom
   :right:
   - border-right
+  - border-sm-right
+  - border-md-right
+  - border-lg-right
+  - border-xl-right
   :y:
   - border-y
   :x:
   - border-x
   true:
   - border
+  - border-sm
+  - border-md
+  - border-lg
+  - border-xl
   0:
   - border-0
+  - border-sm-0
+  - border-md-0
+  - border-lg-0
+  - border-xl-0
   false:
   - border-0
+  - border-sm-0
+  - border-md-0
+  - border-lg-0
+  - border-xl-0
   :dashed:
   - border-dashed
 :border_top:
   0:
   - border-top-0
+  - border-sm-top-0
+  - border-md-top-0
+  - border-lg-top-0
+  - border-xl-top-0
 :border_bottom:
   0:
   - border-bottom-0
+  - border-sm-bottom-0
+  - border-md-bottom-0
+  - border-lg-bottom-0
+  - border-xl-bottom-0
 :border_left:
   0:
   - border-left-0
+  - border-sm-left-0
+  - border-md-left-0
+  - border-lg-left-0
+  - border-xl-left-0
 :border_right:
   0:
   - border-right-0
+  - border-sm-right-0
+  - border-md-right-0
+  - border-lg-right-0
+  - border-xl-right-0
 :border_radius:
   0:
   - rounded-0
+  - rounded-sm-0
+  - rounded-md-0
+  - rounded-lg-0
+  - rounded-xl-0
   1:
   - rounded-1
+  - rounded-sm-1
+  - rounded-md-1
+  - rounded-lg-1
+  - rounded-xl-1
   2:
   - rounded-2
+  - rounded-sm-2
+  - rounded-md-2
+  - rounded-lg-2
+  - rounded-xl-2
   3:
   - rounded-3
+  - rounded-sm-3
+  - rounded-md-3
+  - rounded-lg-3
+  - rounded-xl-3
 :justify_content:
   :flex_start:
   - flex-justify-start

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

@@ -1,5 +1,5 @@
 <% if @input.form_control? %>
-  <%= content_tag(:div, **@form_group_arguments) do %>
+  <%= content_tag(@tag, **@form_group_arguments) do %>
     <% if @input.label %>
       <%= builder.label(@input.name, **@input.label_arguments) do %>
         <%= @input.label %>

data/lib/primer/forms/form_control.rb

@@ -6,11 +6,15 @@ module Primer
     class FormControl < BaseComponent
       delegate :builder, :form, to: :@input
 
-      def initialize(input:)
+      def initialize(input:, tag: :div, **system_arguments)
         @input = input
+        @tag = tag
         @input.add_label_classes("FormControl-label")
         @form_group_arguments = {
+          **system_arguments,
           class: class_names(
+            system_arguments[:class],
+            system_arguments[:classes],
             "FormControl",
             "width-full",
             "FormControl--fullWidth" => @input.full_width?

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

@@ -1,9 +1,7 @@
-<%= content_tag(:div, **@input.input_arguments) do %>
-  <%= render(FormControl.new(input: @input)) do %>
-    <primer-multi-input data-name="<%= @input.name %>">
-      <% @input.inputs.each do |child_input| %>
-        <%= render(child_input.to_component) %>
-      <% end %>
-    </primer-multi-input>
-  <% end %>
+<%= render(FormControl.new(input: @input, **@input.input_arguments)) do %>
+  <primer-multi-input data-name="<%= @input.name %>">
+    <% @input.inputs.each do |child_input| %>
+      <%= render(child_input.to_component) %>
+    <% end %>
+  </primer-multi-input>
 <% end %>

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

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

data/lib/primer/view_components/version.rb

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

data/lib/tasks/custom_utilities.yml

@@ -99,45 +99,105 @@
 :border:
   :left:
   - border-left
+  - border-sm-left
+  - border-md-left
+  - border-lg-left
+  - border-xl-left
   :top:
   - border-top
+  - border-sm-top
+  - border-md-top
+  - border-lg-top
+  - border-xl-top
   :bottom:
   - border-bottom
+  - border-sm-bottom
+  - border-md-bottom
+  - border-lg-bottom
+  - border-xl-bottom
   :right:
   - border-right
+  - border-sm-right
+  - border-md-right
+  - border-lg-right
+  - border-xl-right
   :y:
   - border-y
   :x:
   - border-x
   true:
   - border
+  - border-sm
+  - border-md
+  - border-lg
+  - border-xl
   0:
   - border-0
+  - border-sm-0
+  - border-md-0
+  - border-lg-0
+  - border-xl-0
   false:
   - border-0
+  - border-sm-0
+  - border-md-0
+  - border-lg-0
+  - border-xl-0
   :dashed:
   - border-dashed
 :border_top:
   0:
   - border-top-0
+  - border-sm-top-0
+  - border-md-top-0
+  - border-lg-top-0
+  - border-xl-top-0
 :border_bottom:
   0:
   - border-bottom-0
+  - border-sm-bottom-0
+  - border-md-bottom-0
+  - border-lg-bottom-0
+  - border-xl-bottom-0
 :border_left:
   0:
   - border-left-0
+  - border-sm-left-0
+  - border-md-left-0
+  - border-lg-left-0
+  - border-xl-left-0
 :border_right:
   0:
   - border-right-0
+  - border-sm-right-0
+  - border-md-right-0
+  - border-lg-right-0
+  - border-xl-right-0
 :border_radius:
   0:
   - rounded-0
+  - rounded-sm-0
+  - rounded-md-0
+  - rounded-lg-0
+  - rounded-xl-0
   1:
   - rounded-1
+  - rounded-sm-1
+  - rounded-md-1
+  - rounded-lg-1
+  - rounded-xl-1
   2:
   - rounded-2
+  - rounded-sm-2
+  - rounded-md-2
+  - rounded-lg-2
+  - rounded-xl-2
   3:
   - rounded-3
+  - rounded-sm-3
+  - rounded-md-3
+  - rounded-lg-3
+  - rounded-xl-3
 :justify_content:
   :flex_start:
   - flex-justify-start

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-03-23 00:00:00.000000000 Z
+date: 2023-03-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview