openproject-primer_view_components 0.59.2 → 0.61.0

data/app/components/primer/open_project/input_group.rb

@@ -9,6 +9,7 @@ module Primer
       DEFAULT_INPUT_WIDTH = :auto
       INPUT_WIDTH_MAPPINGS = {
         DEFAULT_INPUT_WIDTH => "InputGroup-input-width--auto",
+        :xsmall => "InputGroup-input-width--xsmall",
         :small => "InputGroup-input-width--small",
         :medium => "InputGroup-input-width--medium",
         :large => "InputGroup-input-width--large",

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

@@ -30,4 +30,6 @@ import './open_project/page_header_element';
 import './open_project/zen_mode_button';
 import './open_project/sub_header_element';
 import './open_project/danger_dialog_form_helper';
+import './open_project/collapsible';
 import './open_project/border_box/collapsible_header';
+import './open_project/collapsible_section';

data/app/components/primer/primer.js

@@ -30,4 +30,6 @@ import './open_project/page_header_element';
 import './open_project/zen_mode_button';
 import './open_project/sub_header_element';
 import './open_project/danger_dialog_form_helper';
+import './open_project/collapsible';
 import './open_project/border_box/collapsible_header';
+import './open_project/collapsible_section';

data/app/components/primer/primer.pcss

@@ -50,3 +50,4 @@
 @import "./open_project/sub_header.pcss";
 @import "./open_project/side_panel/section.pcss";
 @import "./open_project/border_box/collapsible_header.pcss";
+@import "./open_project/collapsible_section.pcss";

data/app/components/primer/primer.ts

@@ -30,4 +30,6 @@ import './open_project/page_header_element'
 import './open_project/zen_mode_button'
 import './open_project/sub_header_element'
 import './open_project/danger_dialog_form_helper'
+import './open_project/collapsible'
 import './open_project/border_box/collapsible_header'
+import './open_project/collapsible_section'

data/app/lib/primer/forms/dsl/input.rb

@@ -33,6 +33,9 @@ module Primer
         # @!macro [new] form_full_width_arguments
         #   @param full_width [Boolean] When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`.
 
+        # @!macro [new] form_input_width_arguments
+        #   @param input_width [Symbol] The width of the field. <%= one_of(Primer::Forms::Dsl::Input::INPUT_WIDTH_OPTIONS) %>
+
         # @!macro [new] form_system_arguments
         #   @param system_arguments [Hash] A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details.
 
@@ -48,6 +51,7 @@ module Primer
         DEFAULT_INPUT_WIDTH = :auto
         INPUT_WIDTH_MAPPINGS = {
           DEFAULT_INPUT_WIDTH => "FormControl-input-width--auto",
+          :xsmall => "FormControl-input-width--xsmall",
           :small => "FormControl-input-width--small",
           :medium => "FormControl-input-width--medium",
           :large => "FormControl-input-width--large",

data/lib/primer/view_components/version.rb

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

data/previews/primer/alpha/banner_preview.rb

@@ -11,7 +11,7 @@ module Primer
       # @param dismiss_scheme [Symbol] select [none, remove, hide]
       # @param dismiss_label text
       # @param icon [Symbol] octicon
-      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param scheme [Symbol] select [default, warning, danger, success, upsell]
       # @param content text
       # @param description text
       def playground(full: false, full_when_narrow: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME,  dismiss_label: Primer::Alpha::Banner::DEFAULT_DISMISS_LABEL, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "This is a banner!", description: nil)
@@ -49,6 +49,12 @@ module Primer
       def scheme_warning
         render(Primer::Alpha::Banner.new(scheme: :warning)) { "This is a warning banner!" }
       end
+
+      # @label Upsell
+      # @snapshot
+      def scheme_upsell
+        render(Primer::Alpha::Banner.new(scheme: :upsell)) { "This is a upsell banner!" }
+      end
       #
       # @!endgroup
 
@@ -78,7 +84,7 @@ module Primer
       # @param full toggle
       # @param dismiss_scheme [Symbol] select [none, remove, hide]
       # @param icon [Symbol] octicon
-      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param scheme [Symbol] select [default, warning, danger, success, upsell]
       # @param content text
       # @snapshot
       def with_action_button(full: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "This is a banner with an action!")
@@ -91,7 +97,7 @@ module Primer
       # @param full toggle
       # @param dismiss_scheme [Symbol] select [none, remove, hide]
       # @param icon [Symbol] octicon
-      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param scheme [Symbol] select [default, warning, danger, success, upsell]
       # @param content text
       # @snapshot
       def with_action_content(full: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "Did you know? Comments can be edited.")

data/previews/primer/alpha/select_preview.rb

@@ -18,7 +18,7 @@ module Primer
       # @param disabled toggle
       # @param invalid toggle
       # @param validation_message text
-      # @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
+      # @param input_width [Symbol] select [auto, xsmall, small, medium, large, xlarge, xxlarge]
       def playground(
         name: "my-select-list",
         id: "my-select-list",

data/previews/primer/alpha/text_area_preview.rb

@@ -16,7 +16,7 @@ module Primer
       # @param disabled toggle
       # @param invalid toggle
       # @param validation_message text
-      # @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
+      # @param input_width [Symbol] select [auto, xsmall, small, medium, large, xlarge, xxlarge]
       def playground(
         name: "my-text-area",
         id: "my-text-area",

data/previews/primer/alpha/text_field_preview.rb

@@ -24,7 +24,7 @@ module Primer
       # @param monospace toggle
       # @param leading_visual_icon octicon
       # @param leading_spinner toggle
-      # @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
+      # @param input_width [Symbol] select [auto, xsmall, small, medium, large, xlarge, xxlarge]
       def playground(
         name: "my-text-field",
         id: "my-text-field",
@@ -200,7 +200,7 @@ module Primer
       end
 
       # @label With trailing label
-      # @snapshot 
+      # @snapshot
       def with_trailing_label
         render(Primer::Alpha::TextField.new(trailing_visual: { label: { text: "Hello" } }, name: "my-text-field-15", label: "My text field"))
       end
@@ -219,7 +219,7 @@ module Primer
       #
       # @!endgroup
 
-      # @!group Auto check 
+      # @!group Auto check
       #
       # @label Auto check request ok
       def with_auto_check_ok

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

@@ -28,6 +28,15 @@
         caption: "What else do you need?",
         input_width: :small
       )
+
+      f.text_field(
+        name: :hours,
+        label: "hours",
+        type: :number,
+        required: true,
+        trailing_visual: { text: { text: "min" } },
+        input_width: :xsmall
+      )
     end
   end
 %>

data/previews/primer/open_project/border_box/collapsible_header_preview/playground.html.erb

@@ -1,10 +1,11 @@
 <%= render(Primer::Beta::BorderBox.new) do |component| %>
   <% component.with_header do %>
     <%= render(Primer::OpenProject::BorderBox::CollapsibleHeader.new(box: component,
-                                                                     title: title,
-                                                                     description: description,
-                                                                     count: count,
-                                                                     collapsed: collapsed)) %>
+                                                                     collapsed: collapsed)) do |header| %>
+      <% header.with_title { title } %>
+      <% header.with_count(count: count) %>
+      <% header.with_description { description } %>
+    <% end %>
   <% end %>
   <% component.with_body { "Body" } %>
   <% component.with_row { "Row 1" } %>

data/previews/primer/open_project/collapsible_section_preview/collapsed.html.erb

@@ -0,0 +1,9 @@
+<%= render(Primer::OpenProject::CollapsibleSection.new(collapsed: true)) do |section| %>
+  <% section.with_title { "Final question" } %>
+  <% section.with_collapsible_content do %>
+    <%= render(Primer::Alpha::Banner.new(mb: 3)) { "Please take one minute time to answer this question" } %>
+    <%= primer_form_with(url: "/foo") do |f| %>
+      <%= render(RadioButtonGroupForm.new(f)) %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/open_project/collapsible_section_preview/default.html.erb

@@ -0,0 +1,10 @@
+<%= render(Primer::OpenProject::CollapsibleSection.new) do |section| %>
+  <% section.with_title { "Feedback" } %>
+  <% section.with_collapsible_content do %>
+    <%= render(Primer::Alpha::Banner.new(mb: 3)) { "Please take one minute time to answer this question" } %>
+    <%= primer_form_with(url: "/foo") do |f| %>
+      <%= render(RadioButtonGroupForm.new(f)) %>
+    <% end %>
+
+  <% end %>
+<% end %>

data/previews/primer/open_project/collapsible_section_preview/playground.html.erb

@@ -0,0 +1,22 @@
+<%= render(Primer::OpenProject::CollapsibleSection.new) do |section| %>
+  <% section.with_title { "Advanced settings" } %>
+
+  <% if caption.present? %>
+    <% section.with_caption { caption } %>
+  <% end %>
+
+  <% if show_additional_information %>
+    <% section.with_additional_information do %>
+      <%= render(Primer::Beta::Link.new(href: "/")) do |component|
+        component.with_trailing_visual_icon(icon: :"link-external")
+        "More information"
+      end %>
+    <% end %>
+  <% end %>
+
+  <% section.with_collapsible_content do %>
+    <%= primer_form_with(url: "/foo") do |f| %>
+      <%= render(ArrayCheckBoxGroupForm.new(f)) %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/open_project/collapsible_section_preview/with_additional_information.html.erb

@@ -0,0 +1,16 @@
+<%= render(Primer::OpenProject::CollapsibleSection.new) do |section| %>
+  <% section.with_title { "Wednesday 11" } %>
+
+  <% section.with_additional_information do %>
+    <%= render(Primer::Beta::Text.new) { "6h 30min" } %>
+  <% end %>
+
+  <% section.with_collapsible_content do %>
+    <%= render(Primer::Beta::BorderBox.new) do |component|
+      component.with_header { "Header" }
+      component.with_body { "Body" }
+      component.with_row { "Row one" }
+      component.with_row { "Row two" }
+    end %>
+  <% end %>
+<% end %>

data/previews/primer/open_project/collapsible_section_preview/with_caption.html.erb

@@ -0,0 +1,14 @@
+<%= render(Primer::OpenProject::CollapsibleSection.new) do |section| %>
+  <% section.with_title { "Wednesday 11" } %>
+
+  <% section.with_caption { "Today" } %>
+
+  <% section.with_collapsible_content do %>
+    <%= render(Primer::Beta::BorderBox.new) do |component|
+      component.with_header { "Header" }
+      component.with_body { "Body" }
+      component.with_row { "Row one" }
+      component.with_row { "Row two" }
+    end %>
+  <% end %>
+<% end %>

data/previews/primer/open_project/collapsible_section_preview.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Primer
+  module OpenProject
+    # @label CollapsibleSection
+    class CollapsibleSectionPreview < ViewComponent::Preview
+      # @label Playground
+      # @param caption [String] text
+      # @param show_additional_information [Boolean] toggle
+      def playground(caption: "(optional)", show_additional_information: false)
+        render_with_template(
+          template: "primer/open_project/collapsible_section_preview/playground",
+          locals: { caption: caption, show_additional_information: show_additional_information}
+        )
+      end
+
+      # @label Default
+      # @snapshot
+      def default
+        render_with_template(
+          template: "primer/open_project/collapsible_section_preview/default",
+          locals: { }
+        )
+      end
+
+      # @label With additional information
+      # @snapshot
+      def with_additional_information
+        render_with_template(
+          template: "primer/open_project/collapsible_section_preview/with_additional_information",
+          locals: { }
+        )
+      end
+
+      # @label With caption
+      # @snapshot
+      def with_caption
+        render_with_template(
+          template: "primer/open_project/collapsible_section_preview/with_caption",
+          locals: { }
+        )
+      end
+
+      # @label Collapsed
+      # @snapshot
+      def collapsed
+        render_with_template(
+          template: "primer/open_project/collapsible_section_preview/collapsed",
+          locals: { }
+        )
+      end
+    end
+  end
+end

data/previews/primer/open_project/input_group_preview.rb

@@ -21,7 +21,7 @@ module Primer
       # @param value [String]
       # @param visually_hide_label toggle
       # @param readonly toggle
-      # @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
+      # @param input_width [Symbol] select [auto, xsmall, small, medium, large, xlarge, xxlarge]
       # @param caption [String]
       def playground(
         trailing_action: :clipboardCopy,

data/static/arguments.json

@@ -674,7 +674,7 @@
         "name": "scheme",
         "type": "Symbol",
         "default": "`:default`",
-        "description": "One of `:danger`, `:default`, `:success`, or `:warning`."
+        "description": "One of `:danger`, `:default`, `:success`, `:upsell`, or `:warning`."
       },
       {
         "name": "system_arguments",
@@ -2316,6 +2316,12 @@
         "default": "N/A",
         "description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
       },
+      {
+        "name": "input_width",
+        "type": "Symbol",
+        "default": "N/A",
+        "description": "The width of the field. One of `:auto`, `:large`, `:medium`, `:small`, `:xlarge`, `:xsmall`, or `:xxlarge`."
+      },
       {
         "name": "multiple",
         "type": "Boolean",
@@ -2344,11 +2350,95 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/default/",
     "parameters": [
+      {
+        "name": "src",
+        "type": "String",
+        "default": "`nil`",
+        "description": "The URL to fetch search results from."
+      },
+      {
+        "name": "title",
+        "type": "String",
+        "default": "`\"Menu\"`",
+        "description": "The title that appears at the top of the panel."
+      },
+      {
+        "name": "id",
+        "type": "String",
+        "default": "`self.class.generate_id`",
+        "description": "The unique ID of the panel."
+      },
+      {
+        "name": "size",
+        "type": "Symbol",
+        "default": "`:small`",
+        "description": "The size of the panel. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
+      },
+      {
+        "name": "select_variant",
+        "type": "Symbol",
+        "default": "`:single`",
+        "description": "One of `:multiple`, `:none`, or `:single`."
+      },
+      {
+        "name": "fetch_strategy",
+        "type": "Symbol",
+        "default": "`:remote`",
+        "description": "One of `:eventually_local`, `:local`, or `:remote`."
+      },
+      {
+        "name": "no_results_label",
+        "type": "String",
+        "default": "`\"No results found\"`",
+        "description": "The label to display when no results are found."
+      },
+      {
+        "name": "preload",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened."
+      },
+      {
+        "name": "dynamic_label",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether or not to display the text of the currently selected item in the show button."
+      },
+      {
+        "name": "dynamic_label_prefix",
+        "type": "String",
+        "default": "`nil`",
+        "description": "If provided, the prefix is prepended to the dynamic label and displayed in the show button."
+      },
+      {
+        "name": "dynamic_aria_label_prefix",
+        "type": "String",
+        "default": "`nil`",
+        "description": "If provided, the prefix is prepended to the dynamic label and set as the value of the `aria-label` attribute on the show button."
+      },
+      {
+        "name": "body_id",
+        "type": "String",
+        "default": "`nil`",
+        "description": "The unique ID of the panel body. If not provided, the body ID will be set to the panel ID with a \"-body\" suffix."
+      },
+      {
+        "name": "list_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Arguments to pass to the underlying [ActionList](/components/alpha/actionlist) component. Only has an effect for the local fetch strategy."
+      },
+      {
+        "name": "form_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag."
+      },
       {
         "name": "use_experimental_non_local_form",
         "type": "Boolean",
         "default": "`false`",
-        "description": "A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values."
+        "description": "A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values. At this time, support is only available for the :single select variant. See: https://github.com/github/primer/issues/4923."
       },
       {
         "name": "show_filter",
@@ -2771,6 +2861,12 @@
         "type": "Hash",
         "default": "N/A",
         "description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
+      },
+      {
+        "name": "input_width",
+        "type": "Symbol",
+        "default": "N/A",
+        "description": "The width of the field. One of `:auto`, `:large`, `:medium`, `:small`, `:xlarge`, `:xsmall`, or `:xxlarge`."
       }
     ]
   },
@@ -2902,6 +2998,12 @@
         "default": "N/A",
         "description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
       },
+      {
+        "name": "input_width",
+        "type": "Symbol",
+        "default": "N/A",
+        "description": "The width of the field. One of `:auto`, `:large`, `:medium`, `:small`, `:xlarge`, `:xsmall`, or `:xxlarge`."
+      },
       {
         "name": "placeholder",
         "type": "String",
@@ -5026,6 +5128,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/border_box/collapsible_header.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/border_box/collapsible_header/default/",
     "parameters": [
+      {
+        "name": "collapsed",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the header is collapsed on initial render."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -5072,6 +5180,28 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::CollapsibleSection",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectCollapsibleSection",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/collapsible_section.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/collapsible_section/default/",
+    "parameters": [
+      {
+        "name": "collapsed",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the section is collapsed on initial render."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "OpenProject::DangerDialog",
     "status": "open_project",

data/static/audited_at.json

@@ -120,6 +120,7 @@
   "Primer::OpenProject::BorderBox::CollapsibleHeader": "",
   "Primer::OpenProject::BorderGrid": "",
   "Primer::OpenProject::BorderGrid::Cell": "",
+  "Primer::OpenProject::CollapsibleSection": "",
   "Primer::OpenProject::DangerDialog": "",
   "Primer::OpenProject::DangerDialog::ConfirmationCheckBox": "",
   "Primer::OpenProject::DangerDialog::FormWrapper": "",

data/static/classes.json

@@ -243,6 +243,9 @@
   "CollapsibleHeader": [
     "Primer::OpenProject::BorderBox::CollapsibleHeader"
   ],
+  "CollapsibleSection--triggerArea": [
+    "Primer::OpenProject::CollapsibleSection"
+  ],
   "Counter": [
     "Primer::Beta::Counter"
   ],

data/static/constants.json

@@ -197,7 +197,8 @@
       "default": "bell",
       "warning": "alert",
       "danger": "stop",
-      "success": "check-circle"
+      "success": "check-circle",
+      "upsell": "info"
     },
     "DEFAULT_SCHEME": "default",
     "DEFAULT_TAG": "div",
@@ -217,7 +218,8 @@
       "default": "",
       "warning": "Banner--warning",
       "danger": "Banner--error",
-      "success": "Banner--success"
+      "success": "Banner--success",
+      "upsell": "Banner--upsell"
     },
     "TAG_OPTIONS": [
       "div",
@@ -1572,6 +1574,19 @@
   "Primer::OpenProject::BorderGrid::Cell": {
     "GeneratedSlotMethods": "Primer::OpenProject::BorderGrid::Cell::GeneratedSlotMethods"
   },
+  "Primer::OpenProject::CollapsibleSection": {
+    "GeneratedSlotMethods": "Primer::OpenProject::CollapsibleSection::GeneratedSlotMethods",
+    "TITLE_TAG_FALLBACK": "h2",
+    "TITLE_TAG_OPTIONS": [
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "span"
+    ]
+  },
   "Primer::OpenProject::DangerDialog": {
     "ConfirmationCheckBox": "Primer::OpenProject::DangerDialog::ConfirmationCheckBox",
     "FormWrapper": "Primer::OpenProject::DangerDialog::FormWrapper",
@@ -1621,6 +1636,7 @@
     "GeneratedSlotMethods": "Primer::OpenProject::InputGroup::GeneratedSlotMethods",
     "INPUT_WIDTH_MAPPINGS": {
       "auto": "InputGroup-input-width--auto",
+      "xsmall": "InputGroup-input-width--xsmall",
       "small": "InputGroup-input-width--small",
       "medium": "InputGroup-input-width--medium",
       "large": "InputGroup-input-width--large",
@@ -1629,6 +1645,7 @@
     },
     "INPUT_WIDTH_OPTIONS": [
       "auto",
+      "xsmall",
       "small",
       "medium",
       "large",