openproject-primer_view_components 0.92.0 → 0.94.0

data/app/lib/primer/forms/primer_color_input.ts

@@ -0,0 +1,121 @@
+import {attr, controller, target} from '@github/catalyst'
+
+const HEX_PATTERN = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i
+
+// Returns the canonical uppercase `#RRGGBB` form of the given text, or null
+// if it is not a three- or six-digit hex color.
+export function parseHex(text: string): string | null {
+  const match = HEX_PATTERN.exec(text.trim())
+  if (!match) return null
+
+  let digits = match[1]
+  if (digits.length === 3) digits = digits.replace(/./g, '$&$&')
+
+  return `#${digits.toUpperCase()}`
+}
+
+@controller('primer-color-input')
+export class PrimerColorInputElement extends HTMLElement {
+  @target inputElement: HTMLInputElement
+  @target pickerElement: HTMLInputElement
+
+  // The text input is empty.
+  @attr blank = false
+  // There is no color to show in the swatch.
+  @attr empty = false
+
+  #abortController: AbortController | null = null
+  #observer: MutationObserver | null = null
+
+  connectedCallback(): void {
+    this.#abortController?.abort()
+    const {signal} = (this.#abortController = new AbortController())
+
+    this.syncDisabled()
+    this.sync()
+
+    // The server always renders the picker disabled. Whatever rewrites
+    // attributes without reconnecting this element, a Turbo morph for one,
+    // puts that back, so the rule is re-applied on every such change.
+    this.#observer?.disconnect()
+    this.#observer = new MutationObserver(() => this.syncDisabled())
+    this.#observer.observe(this, {attributes: true, attributeFilter: ['disabled', 'readonly'], subtree: true})
+
+    // The form is outside this element's subtree, so data-action cannot
+    // reach it. Reset restores the text value after the event, hence the tick.
+    this.inputElement.form?.addEventListener('reset', () => setTimeout(() => this.sync()), {signal})
+  }
+
+  disconnectedCallback(): void {
+    this.#abortController?.abort()
+    this.#observer?.disconnect()
+  }
+
+  // The picker is operable only while its value can reach the submitted text
+  // input and that input accepts edits.
+  private syncDisabled(): void {
+    const disabled = this.inputElement.disabled || this.inputElement.readOnly
+
+    // Assigning the same value again would still rewrite the attribute and
+    // wake the observer, which would then never settle.
+    if (this.pickerElement.disabled !== disabled) this.pickerElement.disabled = disabled
+  }
+
+  // Text → picker. Bound to `input` on the text input, so the swatch follows
+  // every keystroke: text that is not a whole color yet shows none. The
+  // picker itself has no empty value and keeps the last color to open on.
+  syncPicker(): void {
+    const text = this.inputElement.value.trim()
+    const color = parseHex(text)
+
+    this.blank = text === ''
+    this.empty = color === null
+
+    if (color) this.pickerElement.value = color.toLowerCase()
+  }
+
+  // Bound to `change` on the text input.
+  normalize(): void {
+    const color = parseHex(this.inputElement.value)
+    if (color) this.inputElement.value = color
+  }
+
+  // Bound to `paste` on the text input. The browser cuts a paste to the
+  // input's `maxlength` first, so padding around a copied color would push
+  // its last digits out. The padding is dropped and the rest inserted as an
+  // edit of the user's own, which keeps undo, `maxlength` and read-only
+  // intact and still ends in a `change` event.
+  trimPaste(event: ClipboardEvent): void {
+    const text = event.clipboardData?.getData('text/plain') ?? ''
+    const trimmed = text.trim()
+    if (trimmed === text) return
+
+    event.preventDefault()
+    document.execCommand('insertText', false, trimmed)
+  }
+
+  // Picker → text. Bound to `input` on the picker. The picker's own event
+  // stops here: the one forwarded from the text input stands in for it, and
+  // listeners further up would otherwise hear of each pick twice.
+  syncInput(event: Event): void {
+    /* eslint-disable-next-line no-restricted-syntax */
+    event.stopPropagation()
+
+    this.inputElement.value = this.pickerElement.value.toUpperCase()
+    this.inputElement.dispatchEvent(new Event('input', {bubbles: true}))
+  }
+
+  // Bound to `change` on the picker, whose own event stops here as well.
+  commit(event: Event): void {
+    /* eslint-disable-next-line no-restricted-syntax */
+    event.stopPropagation()
+
+    this.inputElement.dispatchEvent(new Event('change', {bubbles: true}))
+  }
+
+  // Resynchronises from the text input's current value. Call this after
+  // setting the value from script, which fires no event.
+  sync(): void {
+    this.syncPicker()
+  }
+}

data/config/locales/en.yml

@@ -9,6 +9,10 @@ en:
   button_filter: "Filter"
   button_save: "Save"
 
+  color_field:
+    picker_label: "Pick color for %{label}"
+    picker_label_generic: "Pick color"
+
   drag_handle:
     button_drag: "Drag to reorder"
 

data/lib/primer/view_components/version.rb

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

data/lib/primer/yard/component_manifest.rb

@@ -96,7 +96,8 @@ module Primer
         Primer::Alpha::CheckBox => { form_component: true },
         Primer::Alpha::CheckBoxGroup => { form_component: true },
         Primer::Alpha::SubmitButton => { form_component: true },
-        Primer::Alpha::FormButton => { form_component: true }
+        Primer::Alpha::FormButton => { form_component: true },
+        Primer::OpenProject::ColorField => { form_component: true, js: true }
       }.freeze
 
       include Enumerable

data/lib/primer/yard/lookbook_pages_backend.rb

@@ -17,7 +17,8 @@ module Primer
         Primer::Alpha::CheckBox => [:check_box_with_nested_form],
         Primer::Alpha::CheckBoxGroup => [:check_box_group_form],
         Primer::Alpha::SubmitButton => [:submit_button_form],
-        Primer::Alpha::FormButton => [:submit_button_form]
+        Primer::Alpha::FormButton => [:submit_button_form],
+        Primer::OpenProject::ColorField => []
       }.freeze
 
       attr_reader :component_ref, :backend, :docs

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

@@ -0,0 +1,10 @@
+<%= render(Primer::OpenProject::CollapsibleSection.new(collapsed: :locked)) 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

@@ -1,4 +1,4 @@
-<%= render(Primer::OpenProject::CollapsibleSection.new) do |section| %>
+<%= render(Primer::OpenProject::CollapsibleSection.new(collapsed: collapsed)) do |section| %>
   <% section.with_title { "Advanced settings" } %>
 
   <% if caption.present? %>

data/previews/primer/open_project/collapsible_section_preview.rb

@@ -10,10 +10,12 @@ module Primer
       # @label Playground
       # @param caption [String] text
       # @param show_additional_information [Boolean] toggle
-      def playground(caption: "(optional)", show_additional_information: false)
+      # @param collapsed [String] select ["false", "true", "locked"]
+      def playground(caption: "(optional)", show_additional_information: false, collapsed: "false")
+        collapsed = { "false" => false, "true" => true, "locked" => :locked }.fetch(collapsed)
         render_with_template(
           template: "primer/open_project/collapsible_section_preview/playground",
-          locals: { caption: caption, show_additional_information: show_additional_information}
+          locals: { caption: caption, show_additional_information: show_additional_information, collapsed: collapsed }
         )
       end
 
@@ -53,6 +55,15 @@ module Primer
         )
       end
 
+      # @label Non-collapsible
+      # @snapshot
+      def non_collapsible
+        render_with_template(
+          template: "primer/open_project/collapsible_section_preview/non_collapsible",
+          locals: { }
+        )
+      end
+
       # @label With link in title
       # @hidden
       def with_link_in_title

data/previews/primer/open_project/color_field_preview/in_form.html.erb

@@ -0,0 +1,6 @@
+<%= primer_form_with(url: "/foo", method: :get) do |f| %>
+  <%= render_inline_form(f) do |form|
+    form.color_field(name: :hexcode, label: "Primary color", value: value, input_width: :small)
+  end %>
+  <%= render(Primer::Beta::Button.new(type: :reset, mt: 2)) { "Reset" } %>
+<% end %>

data/previews/primer/open_project/color_field_preview/in_multi.html.erb

@@ -0,0 +1,8 @@
+<%= primer_form_with(url: "/foo", method: :get) do |f| %>
+  <%= render_inline_form(f) do |form|
+    form.multi(name: :color, label: "Brand color") do |multi|
+      multi.color_field(name: :hex, value: "#1A67A3", input_width: :small)
+      multi.text_field(name: :token, hidden: true)
+    end
+  end %>
+<% end %>

data/previews/primer/open_project/color_field_preview/multiple.html.erb

@@ -0,0 +1,4 @@
+<%= render(Primer::Alpha::Stack.new) do %>
+  <%= render(Primer::OpenProject::ColorField.new(name: "primary", id: "primary", label: "Primary color", value: "#1A67A3", input_width: :small)) %>
+  <%= render(Primer::OpenProject::ColorField.new(name: "accent", id: "accent", label: "Accent color", value: "#35C53F", input_width: :small)) %>
+<% end %>

data/previews/primer/open_project/color_field_preview.rb

@@ -0,0 +1,108 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # @label ColorField
+    class ColorFieldPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param label text
+      # @param value text
+      # @param placeholder text
+      # @param caption text
+      # @param size [Symbol] select [small, medium, large]
+      # @param input_width [Symbol] select [auto, xsmall, small, medium, large, xlarge, xxlarge]
+      # @param full_width toggle
+      # @param visually_hide_label toggle
+      # @param required toggle
+      # @param disabled toggle
+      # @param readonly toggle
+      # @param validation_message text
+      def playground(
+        label: "Primary color",
+        value: "#1A67A3",
+        placeholder: "#1A67A3",
+        caption: nil,
+        size: :medium,
+        input_width: :small,
+        full_width: true,
+        visually_hide_label: false,
+        required: false,
+        disabled: false,
+        readonly: false,
+        validation_message: nil
+      )
+        render(
+          Primer::OpenProject::ColorField.new(
+            name: "color",
+            id: "color",
+            label: label,
+            value: value,
+            placeholder: placeholder,
+            caption: caption.presence,
+            size: size.to_sym,
+            input_width: input_width.to_sym,
+            full_width: full_width,
+            visually_hide_label: visually_hide_label,
+            required: required,
+            disabled: disabled,
+            readonly: readonly,
+            validation_message: validation_message.presence
+          )
+        )
+      end
+
+      # @label Default
+      # @snapshot
+      def default
+        render(Primer::OpenProject::ColorField.new(name: "color", id: "color", label: "Primary color", input_width: :small, value: "#1A67A3"))
+      end
+
+      # @!group States
+      #
+      # @label Blank with placeholder
+      # @snapshot
+      def blank_with_placeholder
+        render(Primer::OpenProject::ColorField.new(name: "color", id: "color", label: "Primary color", input_width: :small, placeholder: "#1A67A3"))
+      end
+
+      # @label Blank without placeholder
+      # @snapshot
+      def blank_without_placeholder
+        render(Primer::OpenProject::ColorField.new(name: "color", id: "color", label: "Primary color", input_width: :small))
+      end
+
+      # @label Disabled
+      # @snapshot
+      def disabled
+        render(Primer::OpenProject::ColorField.new(name: "color", id: "color", label: "Primary color", input_width: :small, value: "#1A67A3", disabled: true))
+      end
+
+      # @label Read-only
+      # @snapshot
+      def readonly
+        render(Primer::OpenProject::ColorField.new(name: "color", id: "color", label: "Primary color", input_width: :small, value: "#1A67A3", readonly: true))
+      end
+
+      # @label Invalid
+      # @snapshot
+      def invalid
+        render(Primer::OpenProject::ColorField.new(name: "color", id: "color", label: "Primary color", input_width: :small, value: "zzz", validation_message: "Hex code is invalid"))
+      end
+      #
+      # @!endgroup
+
+      # @label In a form
+      # @param value text
+      def in_form(value: "#1A67A3")
+        render_with_template(locals: { value: value })
+      end
+
+      # @label Multiple fields
+      def multiple; end
+
+      # @label In a multi input
+      def in_multi; end
+    end
+  end
+end

data/static/arguments.json

@@ -5961,9 +5961,9 @@
       },
       {
         "name": "collapsed",
-        "type": "Boolean",
+        "type": "Boolean, Symbol",
         "default": "`false`",
-        "description": "Whether the section is collapsed on initial render."
+        "description": "The initial state of the section. `false` renders it open and toggleable, `true` renders it collapsed and toggleable, and `:locked` keeps it permanently open with the toggle disabled."
       },
       {
         "name": "system_arguments",
@@ -5973,6 +5973,160 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::ColorField",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectColorField",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/color_field.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/color_field/default/",
+    "parameters": [
+      {
+        "name": "size",
+        "type": "Symbol",
+        "default": "N/A",
+        "description": "The size of the field. One of `:large`, `:medium`, or `:small`."
+      },
+      {
+        "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. Defaults to `true`."
+      },
+      {
+        "name": "name",
+        "type": "String",
+        "default": "N/A",
+        "description": "Value for the HTML name attribute."
+      },
+      {
+        "name": "id",
+        "type": "String",
+        "default": "N/A",
+        "description": "Value for the HTML id attribute."
+      },
+      {
+        "name": "class",
+        "type": "String",
+        "default": "N/A",
+        "description": "CSS classes to include in the input's HTML `class` attribute. Exists for compatibility with Rails form builders."
+      },
+      {
+        "name": "classes",
+        "type": "Array",
+        "default": "N/A",
+        "description": "CSS classes to include in the input's HTML `class` attribute. Combined with the `:class` argument. The list may contain strings, hashes, or `nil` values, and is automatically cleaned up by Primer's [`class_name` helper](https://github.com/primer/view_components/blob/c9cb95c98fee3e2e27f4a10683f555e22285e7f1/app/lib/primer/class_name_helper.rb) (`nils`, falsy entries, and blank strings are ignored)."
+      },
+      {
+        "name": "caption",
+        "type": "String",
+        "default": "N/A",
+        "description": "A string describing the field and what sorts of input it expects. Displayed below the input."
+      },
+      {
+        "name": "label",
+        "type": "String",
+        "default": "N/A",
+        "description": "Label text displayed above the input."
+      },
+      {
+        "name": "visually_hide_label",
+        "type": "Boolean",
+        "default": "N/A",
+        "description": "When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers."
+      },
+      {
+        "name": "disabled",
+        "type": "Boolean",
+        "default": "N/A",
+        "description": "When set to `true`, the input will not accept keyboard or mouse input."
+      },
+      {
+        "name": "hidden",
+        "type": "Boolean",
+        "default": "N/A",
+        "description": "When set to `true`, visually hides the field."
+      },
+      {
+        "name": "invalid",
+        "type": "Boolean",
+        "default": "N/A",
+        "description": "If set to `true`, the input will be rendered with a red border. Implied if `validation_message` is truthy. This option is set to `true` automatically if the model object associated with the form reports that the input is invalid via Rails validations. It is provided for cases where the form does not have an associated model. If the input is invalid as determined by Rails validations, setting `invalid` to `false` will have no effect."
+      },
+      {
+        "name": "validation_message",
+        "type": "String",
+        "default": "N/A",
+        "description": "A string displayed between the caption and the input indicating the input's contents are invalid. This option is, by default, set to the first Rails validation message for the input (assuming the form is associated with a model object). Use `validation_message` to override the default or to provide a validation message in case there is no associated model object."
+      },
+      {
+        "name": "label_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag."
+      },
+      {
+        "name": "scope_name_to_model",
+        "type": "Boolean",
+        "default": "N/A",
+        "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field name. For example, if the field name is `my_field`, Rails will normally emit an HTML name attribute of `model[my_field]`. Setting `scope_name_to_model` to `false` will cause Rails to emit `my_field` instead."
+      },
+      {
+        "name": "scope_id_to_model",
+        "type": "Boolean",
+        "default": "N/A",
+        "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field ID. For example, if the field name is `my_field`, Rails will normally emit an HTML ID attribute of `model_my_field`. Setting `scope_id_to_model` to `false` will cause Rails to emit `my_field` instead."
+      },
+      {
+        "name": "required",
+        "type": "Boolean",
+        "default": "N/A",
+        "description": "Default `false`. When set to `true`, causes an asterisk (*) to appear next to the field's label indicating it is a required field. Note that this option explicitly does _not_ add a `required` HTML attribute. Doing so would enable native browser validations, which are inaccessible and inconsistent with the Primer design system."
+      },
+      {
+        "name": "aria",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current=\"true\"`."
+      },
+      {
+        "name": "data",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "Key/value pairs that represent data attributes and their values. Eg. `data: { foo: \"bar\" }` becomes `data-foo=\"bar\"`."
+      },
+      {
+        "name": "system_arguments",
+        "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`."
+      },
+      {
+        "name": "maxlength",
+        "type": "Integer",
+        "default": "N/A",
+        "description": "Maximum number of characters the text input accepts. Defaults to 7, the length of `#RRGGBB`."
+      },
+      {
+        "name": "placeholder",
+        "type": "String",
+        "default": "N/A",
+        "description": "Placeholder text. It is not previewed in the swatch, which stays empty while the field is blank."
+      },
+      {
+        "name": "picker_label",
+        "type": "String",
+        "default": "N/A",
+        "description": "Accessible name of the native color picker. Defaults to `I18n.t(\"color_field.picker_label\", label: label)`, or to `I18n.t(\"color_field.picker_label_generic\")` when there is no label."
+      }
+    ]
+  },
   {
     "component": "OpenProject::DangerDialog",
     "status": "open_project",

data/static/audited_at.json

@@ -146,6 +146,7 @@
   "Primer::OpenProject::BorderGrid": "",
   "Primer::OpenProject::BorderGrid::Cell": "",
   "Primer::OpenProject::CollapsibleSection": "",
+  "Primer::OpenProject::ColorField": "",
   "Primer::OpenProject::DangerDialog": "",
   "Primer::OpenProject::DangerDialog::ConfirmationCheckBox": "",
   "Primer::OpenProject::DangerDialog::FormWrapper": "",

data/static/classes.json

@@ -265,6 +265,9 @@
   "CollapsibleSection--triggerArea": [
     "Primer::OpenProject::CollapsibleSection"
   ],
+  "ColorField": [
+    "Primer::OpenProject::ColorField"
+  ],
   "Counter": [
     "Primer::Beta::Counter"
   ],

data/static/classnames.cjs

@@ -122,6 +122,10 @@ module.exports = new Set([
   'CollapsibleHeader-title-line',
   'CollapsibleHeader-triggerArea',
   'CollapsibleSection--triggerArea',
+  'ColorField',
+  'ColorField-picker',
+  'ColorField-swatch',
+  'ColorField-wrap',
   'Counter',
   'Counter--primary',
   'Counter--secondary',

data/static/classnames.js

@@ -122,6 +122,10 @@ const classNames = new Set([
   'CollapsibleHeader-title-line',
   'CollapsibleHeader-triggerArea',
   'CollapsibleSection--triggerArea',
+  'ColorField',
+  'ColorField-picker',
+  'ColorField-swatch',
+  'ColorField-wrap',
   'Counter',
   'Counter--primary',
   'Counter--secondary',

data/static/constants.json

@@ -1747,6 +1747,11 @@
     "GeneratedSlotMethods": "Primer::OpenProject::BorderGrid::Cell::GeneratedSlotMethods"
   },
   "Primer::OpenProject::CollapsibleSection": {
+    "COLLAPSED_OPTIONS": [
+      false,
+      true,
+      "locked"
+    ],
     "GeneratedSlotMethods": "Primer::OpenProject::CollapsibleSection::GeneratedSlotMethods",
     "TITLE_TAG_FALLBACK": "h2",
     "TITLE_TAG_OPTIONS": [
@@ -1759,6 +1764,9 @@
       "span"
     ]
   },
+  "Primer::OpenProject::ColorField": {
+    "GeneratedSlotMethods": "Primer::OpenProject::ColorField::GeneratedSlotMethods"
+  },
   "Primer::OpenProject::DangerDialog": {
     "ConfirmationCheckBox": "Primer::OpenProject::DangerDialog::ConfirmationCheckBox",
     "FormWrapper": "Primer::OpenProject::DangerDialog::FormWrapper",