primer_view_components 0.0.85 → 0.0.86

data/app/components/primer/alpha/auto_complete/item.rb

@@ -5,7 +5,7 @@ module Primer
     class AutoComplete
       # Use `AutoCompleteItem` to list results of an auto-completed search.
       class Item < Primer::Component
-        status :alpha
+        status :deprecated
 
         # @example Default
         #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>

data/app/components/primer/alpha/auto_complete.rb

@@ -12,7 +12,7 @@ module Primer
     #   However, please note that a visible label should almost always
     #   be used unless there is compelling reason not to. A placeholder is not a label.
     class AutoComplete < Primer::Component
-      status :alpha
+      status :deprecated
 
       # Customizable results list.
       #

data/app/components/primer/alpha/button_marketing.rb

@@ -63,7 +63,7 @@ module Primer
       end
 
       def call
-        render(Primer::BaseButton.new(**@system_arguments)) { content }
+        render(Primer::Beta::BaseButton.new(**@system_arguments)) { content }
       end
     end
   end

data/app/components/primer/alpha/text_field.rb

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    TextField = Primer::FormComponents.from_input(Primer::Forms::Dsl::TextFieldInput)
+
+    # A text field suitable for use outside a form. For a text field input suitable for use
+    # within an HTML form, see the `Primer::Forms` namespace.
+    class TextField
+      status :alpha
+
+      # @!method initialize
+      #
+      # @example Default
+      #   <%= render(Primer::Alpha::TextField.new(name: :first_name, label: "First name")) %>
+      #
+      # @example With a clear button
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       show_clear_button: true
+      #     )
+      #   ) %>
+      #
+      # @example Full width
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       full_width: true
+      #     )
+      #   ) %>
+      #
+      # @example Disabled
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       disabled: true
+      #     )
+      #   ) %>
+      #
+      # @example Invalid
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       invalid: true
+      #     )
+      #   ) %>
+      #
+      # @example With a leading visual
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       leading_visual: {
+      #         icon: :person
+      #       }
+      #     )
+      #   ) %>
+      #
+      # @example With a caption
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       caption: "What your friends call you"
+      #     )
+      #   ) %>
+      #
+      # @example With a validation message
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       validation_message: "Hmm, that doesn't look right"
+      #     )
+      #   ) %>
+      #
+      # @param name [String] Value for the HTML name attribute.
+      # @param id [String] Value for the HTML id attribute.
+      # @param class [String] A list of CSS classes to add to the input. Exists for compatibility with Rails form builders.
+      # @param classes [String] A list of CSS classes to add to the input. Combined with the `:class` argument.
+      # @param caption [String] Caption text to render below the input.
+      # @param label [String] Label text displayed above the input.
+      # @param visually_hide_label [Boolean] Whether or not to visually hide the label. If `true` the label will be hidden visually but still available to screen readers.
+      # @param size [Symbol] The size of the field. <%= one_of(Primer::Forms::Dsl::Input::SIZE_OPTIONS) %>
+      # @param show_clear_button [Boolean] Whether or not to include a clear button inside the input that clears the input's contents when clicked.
+      # @param clear_button_id [String] The HTML id attribute of the clear button.
+      # @param full_width [Boolean] Controls whether or not the input takes the full width of its container.
+      # @param disabled [Boolean] Whether or not the input should accept keyboard and mouse input.
+      # @param invalid [Boolean] If `true`, renders the input in a visually invalid state.
+      # @param placeholder [String] Placeholder text.
+      # @param inset [Boolean] If `true`, renders the input in a visually inset state.
+      # @param monospace [Boolean] If `true`, uses a monospace font for the input field.
+      # @param leading_visual [Hash] Renders a leading visual icon before the text field's cursor. The hash will be passed to Primer's [Octicon component](https://primer.style/view-components/components/octicon).
+      # @param validation_message [String] A validation message to display beneath the input. Implicitly sets `invalid` to `true`.
+      # @param label_arguments [Hash] System arugments passed to the Rails builder's `#label` method. These arguments will appear as HTML attributes on the `<label>` tag.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      # @param block [Proc] Unused.
+    end
+  end
+end

data/app/components/primer/alpha/tool-tip-element.d.ts

@@ -9,11 +9,13 @@ declare class ToolTipElement extends HTMLElement {
     get direction(): Direction;
     set direction(value: Direction);
     get control(): HTMLElement | null;
+    set visibilityHidden(value: true | false);
+    get visibilityHidden(): true | false;
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleEvent(event: Event): void;
     static observedAttributes: string[];
-    attributeChangedCallback(name: string): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
 }
 declare global {
     interface Window {

data/app/components/primer/alpha/tool-tip-element.js

@@ -176,6 +176,12 @@ class ToolTipElement extends HTMLElement {
     get control() {
         return this.ownerDocument.getElementById(this.htmlFor);
     }
+    set visibilityHidden(value) {
+        this.style.visibility = value ? 'hidden' : '';
+    }
+    get visibilityHidden() {
+        return this.style.visibility === 'hidden';
+    }
     connectedCallback() {
         var _a;
         if (!this.shadowRoot) {
@@ -188,7 +194,7 @@ class ToolTipElement extends HTMLElement {
         <slot></slot>
       `;
         }
-        this.hidden = true;
+        this.visibilityHidden = true;
         __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
         if (!this.id) {
             this.id = `tooltip-${Date.now()}-${(Math.random() * 10000).toFixed(0)}`;
@@ -216,27 +222,28 @@ class ToolTipElement extends HTMLElement {
             return;
         // Ensures that tooltip stays open when hovering between tooltip and element
         // WCAG Success Criterion 1.4.13 Hoverable
-        if ((event.type === 'mouseenter' || event.type === 'focus') && this.hidden) {
-            this.hidden = false;
+        if ((event.type === 'mouseenter' || event.type === 'focus') && this.visibilityHidden) {
+            this.visibilityHidden = false;
         }
         else if (event.type === 'blur') {
-            this.hidden = true;
+            this.visibilityHidden = true;
         }
         else if (event.type === 'mouseleave' &&
             event.relatedTarget !== this.control &&
             event.relatedTarget !== this) {
-            this.hidden = true;
+            this.visibilityHidden = true;
         }
-        else if (event.type === 'keydown' && event.key === 'Escape' && !this.hidden) {
-            this.hidden = true;
+        else if (event.type === 'keydown' && event.key === 'Escape' && !this.visibilityHidden) {
+            this.visibilityHidden = true;
         }
     }
-    attributeChangedCallback(name) {
+    attributeChangedCallback(name, oldValue, newValue) {
         if (name === 'id' || name === 'data-type') {
             if (!this.id || !this.control)
                 return;
             if (this.type === 'label') {
                 this.control.setAttribute('aria-labelledby', this.id);
+                this.setAttribute('aria-hidden', 'true');
             }
             else {
                 let describedBy = this.control.getAttribute('aria-describedby');
@@ -244,7 +251,7 @@ class ToolTipElement extends HTMLElement {
                 this.control.setAttribute('aria-describedby', describedBy);
             }
         }
-        else if (this.isConnected && name === 'hidden') {
+        else if (this.isConnected && name === 'style' && (oldValue && oldValue.includes('visibility')) || (newValue && newValue.includes('visibility'))) {
             __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
         }
         else if (name === 'data-direction') {
@@ -286,21 +293,21 @@ class ToolTipElement extends HTMLElement {
     }
 }
 _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update() {
-    if (this.hidden) {
+    if (this.visibilityHidden) {
         this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES);
     }
     else {
         this.classList.add(TOOLTIP_OPEN_CLASS);
         for (const tooltip of this.ownerDocument.querySelectorAll(this.tagName)) {
             if (tooltip !== this)
-                tooltip.hidden = true;
+                tooltip.visibilityHidden = true;
         }
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
     }
 }, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
     if (!this.control)
         return;
-    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.hidden)
+    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.visibilityHidden)
         return;
     const TOOLTIP_OFFSET = 10;
     this.style.left = `0px`; // Ensures we have reliable tooltip width in `getAnchoredPosition`
@@ -344,7 +351,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
     }
     this.classList.add(`tooltip-${direction}`);
 };
-ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'hidden'];
+ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'style'];
 if (!window.customElements.get('tool-tip')) {
     window.ToolTipElement = ToolTipElement;
     window.customElements.define('tool-tip', ToolTipElement);

data/app/components/primer/alpha/tool-tip-element.ts

@@ -176,6 +176,14 @@ class ToolTipElement extends HTMLElement {
     return this.ownerDocument.getElementById(this.htmlFor)
   }
 
+  set visibilityHidden(value: true | false) {
+    this.style.visibility = value ? 'hidden' : ''
+  }
+
+  get visibilityHidden() {
+    return this.style.visibility === 'hidden'
+  }
+
   connectedCallback() {
     if (!this.shadowRoot) {
       const shadow = this.attachShadow({mode: 'open'})
@@ -187,7 +195,7 @@ class ToolTipElement extends HTMLElement {
         <slot></slot>
       `
     }
-    this.hidden = true
+    this.visibilityHidden = true
     this.#allowUpdatePosition = true
 
     if (!this.id) {
@@ -220,46 +228,47 @@ class ToolTipElement extends HTMLElement {
 
     // Ensures that tooltip stays open when hovering between tooltip and element
     // WCAG Success Criterion 1.4.13 Hoverable
-    if ((event.type === 'mouseenter' || event.type === 'focus') && this.hidden) {
-      this.hidden = false
+    if ((event.type === 'mouseenter' || event.type === 'focus') && this.visibilityHidden) {
+      this.visibilityHidden = false
     } else if (event.type === 'blur') {
-      this.hidden = true
+      this.visibilityHidden = true
     } else if (
       event.type === 'mouseleave' &&
       (event as MouseEvent).relatedTarget !== this.control &&
       (event as MouseEvent).relatedTarget !== this
     ) {
-      this.hidden = true
-    } else if (event.type === 'keydown' && (event as KeyboardEvent).key === 'Escape' && !this.hidden) {
-      this.hidden = true
+      this.visibilityHidden = true
+    } else if (event.type === 'keydown' && (event as KeyboardEvent).key === 'Escape' && !this.visibilityHidden) {
+      this.visibilityHidden = true
     }
   }
 
-  static observedAttributes = ['data-type', 'data-direction', 'id', 'hidden']
+  static observedAttributes = ['data-type', 'data-direction', 'id', 'style']
 
   #update() {
-    if (this.hidden) {
+    if (this.visibilityHidden) {
       this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES)
     } else {
       this.classList.add(TOOLTIP_OPEN_CLASS)
-      for (const tooltip of this.ownerDocument.querySelectorAll<HTMLElement>(this.tagName)) {
-        if (tooltip !== this) tooltip.hidden = true
+      for (const tooltip of this.ownerDocument.querySelectorAll<ToolTipElement>(this.tagName)) {
+        if (tooltip !== this) tooltip.visibilityHidden = true
       }
       this.#updatePosition()
     }
   }
 
-  attributeChangedCallback(name: string) {
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
     if (name === 'id' || name === 'data-type') {
       if (!this.id || !this.control) return
       if (this.type === 'label') {
         this.control.setAttribute('aria-labelledby', this.id)
+        this.setAttribute('aria-hidden', 'true')
       } else {
         let describedBy = this.control.getAttribute('aria-describedby')
         describedBy ? (describedBy = `${describedBy} ${this.id}`) : (describedBy = this.id)
         this.control.setAttribute('aria-describedby', describedBy)
       }
-    } else if (this.isConnected && name === 'hidden') {
+    } else if (this.isConnected && name === 'style' && (oldValue && oldValue.includes('visibility')) || (newValue && newValue.includes('visibility'))) {
       this.#update()
     } else if (name === 'data-direction') {
       this.classList.remove(...DIRECTION_CLASSES)
@@ -294,7 +303,7 @@ class ToolTipElement extends HTMLElement {
 
   #updatePosition() {
     if (!this.control) return
-    if (!this.#allowUpdatePosition || this.hidden) return
+    if (!this.#allowUpdatePosition || this.visibilityHidden) return
 
     const TOOLTIP_OFFSET = 10
 

data/app/components/primer/alpha/tooltip.rb

@@ -88,8 +88,8 @@ module Primer
 
         @text = text
         @system_arguments = system_arguments
-        @system_arguments[:hidden] = true
         @system_arguments[:tag] = :"tool-tip"
+        @system_arguments[:style] = join_style_arguments(@system_arguments[:style], "visibility: hidden")
         @system_arguments[:for] = for_id
         @system_arguments[:"data-direction"] = fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT).to_s
         @system_arguments[:"data-type"] = fetch_or_fallback(TYPE_OPTIONS, type, TYPE_FALLBACK).to_s

data/app/components/primer/beta/base_button.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `BaseButton` to render an unstyled `<button>` tag that can be customized.
+    class BaseButton < Primer::Component
+      status :beta
+
+      DEFAULT_TAG = :button
+      TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
+
+      DEFAULT_TYPE = :button
+      TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
+
+      # @example Block
+      #   <%= render(Primer::Beta::BaseButton.new(block: :true)) { "Block" } %>
+      #   <%= render(Primer::Beta::BaseButton.new(block: :true, scheme: :primary)) { "Primary block" } %>
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
+      # @param type [Symbol] <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
+      # @param block [Boolean] Whether button is full-width with `display: block`.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        tag: DEFAULT_TAG,
+        type: DEFAULT_TYPE,
+        block: false,
+        **system_arguments
+      )
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+
+        @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE) if @system_arguments[:tag] == :button
+
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "btn-block" => block
+        )
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end
+
+Primer::BaseButton = Primer::Beta::BaseButton

data/app/components/primer/{alpha → beta}/border_box/header.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Primer
-  module Alpha
-    module BorderBox
+  module Beta
+    class BorderBox
       # `BorderBox::Header` is used inside `BorderBox` to render its header slot.
       #
       # @accessibility When using `header.title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>
@@ -12,7 +12,7 @@ module Primer
 
         # Optional Title.
         #
-        # @param tag [Symbol] <%= one_of(Primer::Alpha::BorderBox::Header::TITLE_TAG_OPTIONS) %>
+        # @param tag [Symbol] <%= one_of(Primer::Beta::BorderBox::Header::TITLE_TAG_OPTIONS) %>
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         renders_one :title, lambda { |tag:, **system_arguments|
           system_arguments[:tag] = fetch_or_fallback(TITLE_TAG_OPTIONS, tag, TITLE_TAG_FALLBACK)
@@ -24,14 +24,14 @@ module Primer
           Primer::BaseComponent.new(**system_arguments)
         }
 
-        # @example default use case
+        # @example Default
         #
-        #   <%= render(Primer::Alpha::BorderBox::Header.new) do %>
+        #   <%= render(Primer::Beta::BorderBox::Header.new) do %>
         #     Header
         #   <% end %>
         #
         # @example with title
-        #   <%= render(Primer::Alpha::BorderBox::Header.new) do |h| %>
+        #   <%= render(Primer::Beta::BorderBox::Header.new) do |h| %>
         #     <% h.title(tag: :h3) do %>I am a title<% end %>
         #   <% end %>
         #

data/app/components/primer/beta/border_box.rb

@@ -0,0 +1,147 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # `BorderBox` is a Box component with a border.
+    class BorderBox < Primer::Component
+      status :beta
+
+      DEFAULT_PADDING = :default
+      PADDING_MAPPINGS = {
+        DEFAULT_PADDING => "",
+        :condensed => "Box--condensed",
+        :spacious => "Box--spacious"
+      }.freeze
+      PADDING_SUGGESTION = "Perhaps you could consider using :padding options of #{PADDING_MAPPINGS.keys.to_sentence}?"
+
+      DEFAULT_ROW_SCHEME = :default
+      ROW_SCHEME_MAPPINGS = {
+        DEFAULT_ROW_SCHEME => "",
+        :neutral => "Box-row--gray",
+        :info => "Box-row--blue",
+        :warning => "Box-row--yellow"
+      }.freeze
+
+      # Optional Header.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      # @accessibility
+      # When using header.title, the recommended tag is a heading tag, such as h1, h2, h3, etc.
+      renders_one :header, "Primer::Beta::BorderBox::Header"
+
+      # Optional Body.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :body, lambda { |**system_arguments|
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(
+          "Box-body",
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Optional Footer.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :footer, lambda { |**system_arguments|
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(
+          "Box-footer",
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Use Rows to add rows with borders and maintain the same padding.
+      #
+      # @param scheme [Symbol] Color scheme. <%= one_of(Primer::Beta::BorderBox::ROW_SCHEME_MAPPINGS.keys) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :rows, lambda { |scheme: DEFAULT_ROW_SCHEME, **system_arguments|
+        system_arguments[:tag] = :li
+        system_arguments[:classes] = class_names(
+          "Box-row",
+          ROW_SCHEME_MAPPINGS[fetch_or_fallback(ROW_SCHEME_MAPPINGS.keys, scheme, DEFAULT_ROW_SCHEME)],
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Header with title, body, rows, and footer
+      #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
+      #     <% component.header do |h| %>
+      #       <% h.title(tag: :h2) do %>
+      #         Header
+      #       <% end %>
+      #     <% end %>
+      #     <% component.body do %>
+      #       Body
+      #     <% end %>
+      #     <% component.row do %>
+      #       <% if true %>
+      #         Row one
+      #       <% end %>
+      #     <% end %>
+      #     <% component.row do %>
+      #       Row two
+      #     <% end %>
+      #     <% component.footer do %>
+      #       Footer
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Padding density
+      #   <%= render(Primer::Beta::BorderBox.new(padding: :condensed)) do |component| %>
+      #     <% component.header do %>
+      #       Header
+      #     <% end %>
+      #     <% component.body do %>
+      #       Body
+      #     <% end %>
+      #     <% component.row do %>
+      #       Row two
+      #     <% end %>
+      #     <% component.footer do %>
+      #       Footer
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Row colors
+      #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
+      #     <% component.row do %>
+      #       Default
+      #     <% end %>
+      #     <% component.row(scheme: :neutral) do %>
+      #       Neutral
+      #     <% end %>
+      #     <% component.row(scheme: :info) do %>
+      #       Info
+      #     <% end %>
+      #     <% component.row(scheme: :warning) do %>
+      #       Warning
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param padding [Symbol] <%= one_of(Primer::Beta::BorderBox::PADDING_MAPPINGS.keys) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(padding: DEFAULT_PADDING, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          "Box",
+          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?
+        rows.any? || header.present? || body.present? || footer.present?
+      end
+    end
+  end
+end