openproject-primer_view_components 0.13.1 → 0.15.0

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

@@ -1,5 +1,4 @@
 import '@github/include-fragment-element';
-import '@oddbird/popover-polyfill';
 import './alpha/action_bar_element';
 import './alpha/dropdown';
 import './anchored_position';

data/app/components/primer/primer.js

@@ -1,5 +1,4 @@
 import '@github/include-fragment-element';
-import '@oddbird/popover-polyfill';
 import './alpha/action_bar_element';
 import './alpha/dropdown';
 import './anchored_position';

data/app/components/primer/primer.pcss

@@ -1,5 +1,3 @@
-@import "@oddbird/popover-polyfill/dist/popover.css";
-
 /* CSS component styles here */
 
 /* alpha */

data/app/components/primer/primer.ts

@@ -1,5 +1,4 @@
 import '@github/include-fragment-element'
-import '@oddbird/popover-polyfill'
 import './alpha/action_bar_element'
 import './alpha/dropdown'
 import './anchored_position'

data/app/forms/custom_width_fields_form.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class CustomWidthFieldsForm < ApplicationForm
+  form do |f|
+    f.text_field(
+      name: :ultimate_answer,
+      label: "Ultimate answer",
+      required: true,
+      caption: "The answer to life, the universe, and everything",
+      input_width: :medium
+    )
+
+    f.select_list(
+      name: "cities",
+      label: "Cool cities",
+      caption: "Select your favorite!",
+      include_blank: true,
+      input_width: :small
+    ) 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")
+    end
+  end
+end

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

@@ -45,6 +45,17 @@ module Primer
         }.freeze
         SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
+        DEFAULT_INPUT_WIDTH = :auto
+        INPUT_WIDTH_MAPPINGS = {
+          DEFAULT_INPUT_WIDTH => "FormControl-input-width--auto",
+          :small => "FormControl-input-width--small",
+          :medium => "FormControl-input-width--medium",
+          :large => "FormControl-input-width--large",
+          :xlarge => "FormControl-input-width--xlarge",
+          :xxlarge => "FormControl-input-width--xxlarge"
+        }.freeze
+        INPUT_WIDTH_OPTIONS = INPUT_WIDTH_MAPPINGS.keys
+
         include Primer::ClassNameHelper
 
         attr_reader :builder, :form, :input_arguments, :label_arguments, :caption, :validation_message, :ids, :form_control, :base_id
@@ -73,6 +84,7 @@ module Primer
           @invalid = @input_arguments.delete(:invalid)
           @full_width = @input_arguments.delete(:full_width)
           @size = @input_arguments.delete(:size)
+          @input_width = @input_arguments.delete(:input_width)
 
           # If scope_name_to_model is false, the name of the input for eg. `my_field`
           # will be `my_field` instead of the Rails default of `model[my_field]`.
@@ -152,6 +164,7 @@ module Primer
         def remove_input_data(key)
           input_data.delete(key)
         end
+
         # :nocov:
 
         def merge_input_arguments!(arguments)
@@ -226,6 +239,10 @@ module Primer
           @size ||= SIZE_MAPPINGS.include?(@size) ? @size : DEFAULT_SIZE
         end
 
+        def input_width
+          @input_width ||= INPUT_WIDTH_MAPPINGS.include?(@input_width) ? @input_width : DEFAULT_INPUT_WIDTH
+        end
+
         def validation_messages
           @validation_messages ||=
             if validation_message
@@ -257,6 +274,7 @@ module Primer
         def to_component
           raise_for_abstract_method!(__method__)
         end
+
         # :nocov:
 
         def focusable?
@@ -309,6 +327,7 @@ module Primer
         def raise_for_abstract_method!(method_name)
           raise NotImplementedError, "subclasses must implement ##{method_name}."
         end
+
         # :nocov:
       end
     end

data/lib/primer/forms/select.rb

@@ -13,8 +13,11 @@ module Primer
           Primer::Forms::Dsl::Input::SIZE_MAPPINGS[@input.size]
         )
 
+        wrap_classes = ["FormControl-select-wrap"]
+        wrap_classes << Primer::Forms::Dsl::Input::INPUT_WIDTH_MAPPINGS[@input.input_width] if @input.input_width
+
         @field_wrap_arguments = {
-          class: "FormControl-select-wrap",
+          class: class_names(wrap_classes),
           hidden: @input.hidden?
         }
       end

data/lib/primer/forms/text_field.rb

@@ -19,14 +19,16 @@ module Primer
           Primer::Forms::Dsl::Input::SIZE_MAPPINGS[@input.size]
         )
 
-        @field_wrap_arguments = {
-          class: class_names(
-            "FormControl-input-wrap",
-            INPUT_WRAP_SIZE[input.size],
-            "FormControl-input-wrap--trailingAction": @input.show_clear_button?,
-            "FormControl-input-wrap--leadingVisual": @input.leading_visual?
-          ),
+        wrap_classes = [
+          "FormControl-input-wrap",
+          INPUT_WRAP_SIZE[input.size],
+          { "FormControl-input-wrap--trailingAction": @input.show_clear_button? },
+          { "FormControl-input-wrap--leadingVisual": @input.leading_visual? }
+        ]
+        wrap_classes << Primer::Forms::Dsl::Input::INPUT_WIDTH_MAPPINGS[@input.input_width] if @input.input_width
 
+        @field_wrap_arguments = {
+          class: class_names(wrap_classes),
           hidden: @input.hidden?
         }
       end

data/lib/primer/static/generate_info_arch.rb

@@ -70,10 +70,15 @@ module Primer
                 render_erb_ignoring_markdown_code_fences(docs.base_docstring)
               end
 
+            accessibility_docs =
+              if (accessibility_tag_text = docs.tags(:accessibility)&.first&.text)
+                render_erb_ignoring_markdown_code_fences(accessibility_tag_text)
+              end
+
             memo[component] = {
               "fully_qualified_name" => component.name,
               "description" => description,
-              "accessibility_docs" => docs.tags(:accessibility)&.first&.text,
+              "accessibility_docs" => accessibility_docs,
               "is_form_component" => docs.manifest_entry.form_component?,
               "is_published" => docs.manifest_entry.published?,
               "requires_js" => docs.manifest_entry.requires_js?,

data/lib/primer/view_components/version.rb

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

data/previews/primer/alpha/select_preview.rb

@@ -17,6 +17,7 @@ module Primer
       # @param disabled toggle
       # @param invalid toggle
       # @param validation_message text
+      # @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
       def playground(
         name: "my-select-list",
         id: "my-select-list",
@@ -28,7 +29,8 @@ module Primer
         full_width: false,
         disabled: false,
         invalid: false,
-        validation_message: nil
+        validation_message: nil,
+        input_width: nil
       )
         system_arguments = {
           name: name,
@@ -41,7 +43,8 @@ module Primer
           full_width: full_width,
           disabled: disabled,
           invalid: invalid,
-          validation_message: validation_message
+          validation_message: validation_message,
+          input_width: input_width
         }
 
         render(Primer::Alpha::Select.new(**system_arguments)) do |component|

data/previews/primer/alpha/text_field_preview.rb

@@ -23,6 +23,7 @@ module Primer
       # @param inset toggle
       # @param monospace toggle
       # @param leading_visual_icon octicon
+      # @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
       def playground(
         name: "my-text-field",
         id: "my-text-field",
@@ -40,7 +41,8 @@ module Primer
         placeholder: nil,
         inset: false,
         monospace: false,
-        leading_visual_icon: nil
+        leading_visual_icon: nil,
+        input_width: nil
       )
         system_arguments = {
           name: name,
@@ -58,7 +60,8 @@ module Primer
           validation_message: validation_message,
           placeholder: placeholder,
           inset: inset,
-          monospace: monospace
+          monospace: monospace,
+          input_width: input_width
         }
 
         if leading_visual_icon

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

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

data/previews/primer/forms_preview.rb

@@ -7,6 +7,8 @@ module Primer
 
     def multi_text_field_form; end
 
+    def custom_width_fields_form; end
+
     def text_field_and_checkbox_form; end
 
     def horizontal_form; end

data/previews/primer/open_project/page_header_preview.rb

@@ -18,10 +18,24 @@ module Primer
       # @param variant [Symbol] select [medium, large]
       # @param title [String] text
       # @param description [String] text
-      def playground(variant: :medium, title: "Hello", description: "Last updated 5 minutes ago by XYZ.")
+      # @param with_back_button [Boolean]
+      # @param back_button_size [Symbol] select [small, medium, large]
+      # @param with_breadcrumbs [Boolean]
+      def playground(
+        variant: :medium,
+        title: "Hello",
+        description: "Last updated 5 minutes ago by XYZ.",
+        with_back_button: false,
+        back_button_size: :medium,
+        with_breadcrumbs: false
+      )
+        breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
+
         render(Primer::OpenProject::PageHeader.new) do |header|
           header.with_title(variant: variant) { title }
           header.with_description { description }
+          header.with_back_button(href: "#", size: back_button_size, 'aria-label': "Back") if with_back_button
+          header.with_breadcrumbs(breadcrumb_items) if with_breadcrumbs
         end
       end
 
@@ -37,6 +51,30 @@ module Primer
       def actions
         render_with_template(locals: {})
       end
+
+      # @label With back button
+      # @param href [String] text
+      # @param size [Symbol] select [small, medium, large]
+      # @param icon [String] select ["arrow-left", "chevron-left", "triangle-left"]
+      def back_button(href: "#", size: :medium, icon: "arrow-left")
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title { "Hello" }
+          header.with_back_button(href: href, size: size, icon: icon, 'aria-label': "Back")
+        end
+      end
+
+      # @label With breadcrumbs
+      def breadcrumbs
+        breadcrumb_items = [
+          { href: "/foo", text: "Foo" },
+          "\u003ca href=\"/foo/bar\"\u003eBar\u003c/a\u003e",
+          "Baz"
+        ]
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title { "A title" }
+          header.with_breadcrumbs(breadcrumb_items)
+        end
+      end
     end
   end
 end

data/static/classes.json

@@ -435,6 +435,12 @@
   "PageHeader-actions": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader-backButton": [
+    "Primer::OpenProject::PageHeader"
+  ],
+  "PageHeader-breadcrumbs": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader-description": [
     "Primer::OpenProject::PageHeader"
   ],
@@ -444,6 +450,9 @@
   "PageHeader-title--large": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader-titleBar": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "Popover": [
     "Primer::Beta::Popover"
   ],

data/static/constants.json

@@ -1360,6 +1360,18 @@
     ]
   },
   "Primer::OpenProject::PageHeader": {
+    "BACK_BUTTON_ICON_OPTIONS": [
+      "arrow-left",
+      "chevron-left",
+      "triangle-left"
+    ],
+    "BACK_BUTTON_SIZE_OPTIONS": [
+      "small",
+      "medium",
+      "large"
+    ],
+    "DEFAULT_BACK_BUTTON_ICON": "arrow-left",
+    "DEFAULT_BACK_BUTTON_SIZE": "medium",
     "DEFAULT_HEADER_VARIANT": "medium",
     "HEADER_VARIANT_OPTIONS": [
       "large",

data/static/info_arch.json

@@ -7062,7 +7062,7 @@
   {
     "fully_qualified_name": "Primer::Alpha::TabNav",
     "description": "Use `TabNav` to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.\nFor panel navigation, use {{#link_to_component}}Primer::Alpha::TabPanels{{/link_to_component}} instead.",
-    "accessibility_docs": "- By default, `TabNav` renders links within a `<nav>` element. `<nav>` has an\n  implicit landmark role of `navigation` which should be reserved for main links.\n  For all other set of links, set tag to `:div`.\n- See <%= link_to_component(Primer::Alpha::Navigation::Tab) %> for additional\n  accessibility considerations.",
+    "accessibility_docs": "- By default, `TabNav` renders links within a `<nav>` element. `<nav>` has an\n  implicit landmark role of `navigation` which should be reserved for main links.\n  For all other set of links, set tag to `:div`.\n- See {{#link_to_component}}Primer::Alpha::Navigation::Tab{{/link_to_component}} for additional\n  accessibility considerations.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -8461,7 +8461,7 @@
   {
     "fully_qualified_name": "Primer::Alpha::UnderlineNav",
     "description": "Use `UnderlineNav` to style navigation links with a minimal\nunderlined selected state, typically placed at the top\nof the page.\n\nFor panel navigation, use {{#link_to_component}}Primer::Alpha::UnderlinePanels{{/link_to_component}} instead.",
-    "accessibility_docs": "- By default, `UnderlineNav` renders links within a `<nav>` element. `<nav>` has an\n  implicit landmark role of `navigation` which should be reserved for main links.\n  For all other set of links, set tag to `:div`.\n- See <%= link_to_component(Primer::Alpha::Navigation::Tab) %> for additional\n  accessibility considerations.",
+    "accessibility_docs": "- By default, `UnderlineNav` renders links within a `<nav>` element. `<nav>` has an\n  implicit landmark role of `navigation` which should be reserved for main links.\n  For all other set of links, set tag to `:div`.\n- See {{#link_to_component}}Primer::Alpha::Navigation::Tab{{/link_to_component}} for additional\n  accessibility considerations.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -10189,7 +10189,7 @@
       {
         "fully_qualified_name": "Primer::Beta::BorderBox::Header",
         "description": "`BorderBox::Header` is used inside `BorderBox` to render its header slot.",
-        "accessibility_docs": "When using `header.with_title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>",
+        "accessibility_docs": "When using `header.with_title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. [Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)",
         "is_form_component": false,
         "is_published": true,
         "requires_js": false,
@@ -11589,7 +11589,7 @@
   {
     "fully_qualified_name": "Primer::Beta::Heading",
     "description": "`Heading` should be used to communicate page organization and hierarchy.\n\n- Set tag to one of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, `:h6` based on what is appropriate for the page context.\n- Use `Heading` as the title of a section or sub section.\n- Do not use `Heading` for styling alone. For simply styling text, consider using {{#link_to_component}}Primer::Beta::Text{{/link_to_component}} with relevant {{link_to_typography_docs}}\n  such as `font_size` and `font_weight`.\n- Do not jump heading levels. For instance, do not follow a `<h1>` with an `<h3>`. Heading levels should increase by one in ascending order.",
-    "accessibility_docs": "While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out.\nWhen text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be\nconsistent. [See WCAG success criteria: 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)\n\nHeadings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience.\n<%= link_to_heading_practices %>",
+    "accessibility_docs": "While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out.\nWhen text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be\nconsistent. [See WCAG success criteria: 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)\n\nHeadings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience.\n[Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -13751,7 +13751,7 @@
   {
     "fully_qualified_name": "Primer::Beta::Subhead",
     "description": "Use `Subhead` as the start of a section. The `:heading` slot will render an `<h2>` font-sized text.\n\n- Optionally set the `:description` slot to render a short description and the `:actions` slot for a related action.\n- Use a succinct, one-line description for the `:description` slot. For longer descriptions, omit the description slot and render a paragraph below the `Subhead`.\n- Use the actions slot to render a related action to the right of the heading. Use {{#link_to_component}}Primer::ButtonComponent{{/link_to_component}} or {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}.",
-    "accessibility_docs": "The `:heading` slot defaults to rendering a `<div>`. Update the tag to a heading element with the appropriate level to improve page navigation for assistive technologies.\n<%= link_to_heading_practices %>",
+    "accessibility_docs": "The `:heading` slot defaults to rendering a `<div>`. Update the tag to a heading element with the appropriate level to improve page navigation for assistive technologies.\n[Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -14288,7 +14288,7 @@
   {
     "fully_qualified_name": "Primer::BlankslateComponent",
     "description": "Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.",
-    "accessibility_docs": "`Blankslate` renders an `<h3>` element for the title by default. Update the heading level based on what is appropriate for your page hierarchy by setting `title_tag`.\n<%= link_to_heading_practices %>",
+    "accessibility_docs": "`Blankslate` renders an `<h3>` element for the title by default. Update the heading level based on what is appropriate for your page hierarchy by setting `title_tag`.\n[Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -15472,10 +15472,65 @@
             "description": "{{link_to_system_arguments_docs}}"
           }
         ]
+      },
+      {
+        "name": "back_button",
+        "description": "Optional back button prepend the title",
+        "parameters": [
+          {
+            "name": "size",
+            "type": "Symbol",
+            "default": "N/A",
+            "description": "One of `:large`, `:medium`, or `:small`."
+          },
+          {
+            "name": "icon",
+            "type": "String",
+            "default": "N/A",
+            "description": "One of `arrow-left`, `chevron-left`, or `triangle-left`."
+          },
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      },
+      {
+        "name": "breadcrumbs",
+        "description": "Optional breadcrumbs above the title row",
+        "parameters": [
+          {
+            "name": "items",
+            "type": "Array<String, Hash>",
+            "default": "N/A",
+            "description": "Items is an array of strings, hash {href, text} or an anchor tag string"
+          },
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
       }
     ],
     "methods": [
+      {
+        "name": "anchor_string_to_object",
+        "description": "transform anchor tag strings to {href, text} objects\ne.g \"\\u003ca href=\\\"/admin\\\"\\u003eAdministration\\u003c/a\\u003e\"",
+        "parameters": [
+
+        ]
+      },
+      {
+        "name": "anchor_tag_string?",
+        "description": "Check if the item is an anchor tag string e.g \"\\u003ca href=\\\"/admin\\\"\\u003eAdministration\\u003c/a\\u003e\"",
+        "parameters": [
 
+        ]
+      }
     ],
     "previews": [
       {
@@ -15529,6 +15584,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/back_button",
+        "name": "back_button",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/breadcrumbs",
+        "name": "breadcrumbs",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

data/static/previews.json

@@ -4755,6 +4755,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/back_button",
+        "name": "back_button",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/breadcrumbs",
+        "name": "breadcrumbs",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.13.1
+  version: 0.15.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-10-25 00:00:00.000000000 Z
+date: 2023-11-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -493,6 +493,7 @@ files:
 - app/forms/check_box_group_form.rb
 - app/forms/check_box_with_nested_form.rb
 - app/forms/composed_form.rb
+- app/forms/custom_width_fields_form.rb
 - app/forms/example_toggle_switch_form.rb
 - app/forms/example_toggle_switch_form/example_field_caption.html.erb
 - app/forms/first_name_form.rb
@@ -831,6 +832,7 @@ files:
 - previews/primer/forms_preview/check_box_group_form.html.erb
 - previews/primer/forms_preview/check_box_with_nested_form.html.erb
 - previews/primer/forms_preview/composed_form.html.erb
+- previews/primer/forms_preview/custom_width_fields_form.html.erb
 - previews/primer/forms_preview/example_toggle_switch_form.html.erb
 - previews/primer/forms_preview/horizontal_form.html.erb
 - previews/primer/forms_preview/immediate_validation_form.html.erb