openproject-primer_view_components 0.19.0 → 0.21.0

data/previews/primer/alpha/dialog_preview.rb

@@ -128,10 +128,12 @@ module Primer
       # @param subtitle [String] text
       # @param button_text [String] text
       # @param show_divider [Boolean] toggle
-      def nested_dialog(title: "Test Dialog", subtitle: nil, button_text: "Show Dialog", show_divider: true)
+      # @param position [Symbol] select [center, left, right]
+      def nested_dialog(title: "Test Dialog", subtitle: nil, position: :center, button_text: "Show Dialog", show_divider: true)
         render_with_template(locals: {
                                title: title,
                                subtitle: subtitle,
+                               position: position,
                                button_text: button_text,
                                show_divider: show_divider
                              })
@@ -188,6 +190,64 @@ module Primer
       def autofocus_element
         render_with_template(locals: {})
       end
+
+      # @label Left Side
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param size [Symbol] select [small, medium, medium_portrait, large, xlarge]
+      # @param position_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
+      # @param visually_hide_title [Boolean] toggle
+      # @param button_text [String] text
+      # @param body_text [String] text
+      # @snapshot interactive
+      def left_side(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "Show Dialog", body_text: "Content", position: :center, position_narrow: :fullscreen, visually_hide_title: false)
+        render(Primer::Alpha::Dialog.new(title: title, subtitle: subtitle, size: size, position: :left, position_narrow: position_narrow, visually_hide_title: visually_hide_title)) do |d|
+          d.with_show_button { button_text }
+          d.with_body { body_text }
+        end
+      end
+
+      # @label Right Side
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param size [Symbol] select [small, medium, medium_portrait, large, xlarge]
+      # @param position_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
+      # @param visually_hide_title [Boolean] toggle
+      # @param button_text [String] text
+      # @param body_text [String] text
+      # @snapshot interactive
+      def right_side(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "Show Dialog", body_text: "Content", position: :center, position_narrow: :fullscreen, visually_hide_title: false)
+        render(Primer::Alpha::Dialog.new(title: title, subtitle: subtitle, size: size, position: :right, position_narrow: position_narrow, visually_hide_title: visually_hide_title)) do |d|
+          d.with_show_button { button_text }
+          d.with_body { body_text }
+        end
+      end
+
+      # @label Scroll container
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param size [Symbol] select [small, medium, medium_portrait, large, xlarge]
+      # @param position [Symbol] select [center, right, left]
+      # @param position_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
+      # @param visually_hide_title [Boolean] toggle
+      # @param button_text [String] text
+      # @param body_text [String] text
+      # @snapshot interactive
+      def scroll_container(title: "Test Dialog", subtitle: nil, position: :center, size: :medium, button_text: "Show Dialog", body_text: "Content", position_narrow: :fullscreen, visually_hide_title: false)
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               position: position,
+                               size: size,
+                               button_text: button_text,
+                               body_text: body_text,
+                               position_narrow: position_narrow,
+                               visually_hide_title: visually_hide_title
+                             })
+      end
     end
   end
 end

data/previews/primer/alpha/tooltip_preview/tooltip_with_dialog_moving_focus_to_input.html.erb

@@ -16,8 +16,7 @@
   <input type="text" id="input">
 </label>
 <script>
-  document.querySelector('#my-dialog').addEventListener('cancel', function () {
-    console.log('!!')
-    setTimeout(() => document.querySelector('#input').focus(), 0);
+  document.querySelector('#my-dialog').addEventListener('close', function () {
+    document.querySelector('#input').focus();
   });
 </script>

data/previews/primer/alpha/tooltip_preview.rb

@@ -72,7 +72,7 @@ module Primer
       end
 
       # @label Tooltip with Primer::IconButton
-      def tooltip_with_icon_button(direction: :s, tooltip_text: "You can press a button")
+      def tooltip_with_icon_button(direction: :s, tooltip_text: "Search")
         render(Primer::Beta::IconButton.new(icon: :search, "aria-label": tooltip_text, tooltip_direction: direction))
       end
       # @!endgroup

data/previews/primer/beta/button_preview/trailing_visual.html.erb

@@ -4,7 +4,8 @@
     block: block,
     id: id,
     align_content: align_content,
-    tag: tag
+    tag: tag,
+    href: '#'
 )) do |component| %>
   <% component.with_trailing_visual_counter(count: "15") %>
   Comment

data/previews/primer/beta/button_preview.rb

@@ -206,7 +206,8 @@ module Primer
         block: false,
         id: "button-preview",
         align_content: :center,
-        tag: :a
+        tag: :a,
+        href: "#"
       )
         render(Primer::Beta::Button.new(
                  scheme: scheme,
@@ -214,7 +215,8 @@ module Primer
                  block: block,
                  id: id,
                  align_content: align_content,
-                 tag: tag
+                 tag: tag,
+                 href: href
                )) do |_c|
           "Button"
         end

data/previews/primer/open_project/page_header_preview.rb

@@ -25,7 +25,7 @@ module Primer
       # @param with_context_bar_actions [Boolean]
       # @param with_parent_link [Boolean]
       def playground(
-        variant: :medium,
+        variant: :large,
         title: "Hello",
         description: "Last updated 5 minutes ago by XYZ.",
         with_back_button: false,
@@ -49,10 +49,10 @@ module Primer
                                        breadcrumb_items: breadcrumb_items })
       end
 
-      # @label Large
-      def large_title
+      # @label Medium title
+      def medium_title
         render(Primer::OpenProject::PageHeader.new) do |header|
-          header.with_title(variant: :large) { "Hello" }
+          header.with_title(variant: :medium) { "Hello" }
           header.with_description { "Last updated 5 minutes ago by XYZ." }
         end
       end

data/static/arguments.json

@@ -610,6 +610,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/banner.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/banner/default/",
     "parameters": [
+      {
+        "name": "tag",
+        "type": "Symbol",
+        "default": "`:div`",
+        "description": "One of `:div` or `:section`."
+      },
       {
         "name": "full",
         "type": "Boolean",
@@ -628,6 +634,12 @@
         "default": "`:none`",
         "description": "Whether the component can be dismissed with an \"x\" button. One of `:hide`, `:none`, or `:remove`."
       },
+      {
+        "name": "dismiss_label",
+        "type": "String",
+        "default": "`Dismiss`",
+        "description": "The aria-label text of the dismiss \"x\" button"
+      },
       {
         "name": "description",
         "type": "String",

data/static/classes.json

@@ -390,34 +390,19 @@
     "Primer::Alpha::Dialog",
     "Primer::Alpha::Overlay"
   ],
-  "Overlay--hidden": [
-    "Primer::Alpha::Dialog"
-  ],
-  "Overlay--visibilityHidden": [
-    "Primer::Alpha::Dialog"
-  ],
-  "Overlay-backdrop--anchor": [
-    "Primer::Alpha::Dialog"
-  ],
-  "Overlay-backdrop--anchor-whenNarrow": [
-    "Primer::Alpha::Dialog"
-  ],
-  "Overlay-backdrop--center": [
+  "Overlay--full": [
     "Primer::Alpha::Dialog"
   ],
-  "Overlay-backdrop--center-whenNarrow": [
+  "Overlay--full-whenNarrow": [
     "Primer::Alpha::Dialog"
   ],
-  "Overlay-backdrop--full": [
-    "Primer::Alpha::Dialog"
-  ],
-  "Overlay-backdrop--full-whenNarrow": [
+  "Overlay--hidden": [
     "Primer::Alpha::Dialog"
   ],
-  "Overlay-backdrop--side": [
+  "Overlay--placement-right-whenNarrow": [
     "Primer::Alpha::Dialog"
   ],
-  "Overlay-backdrop--side-whenNarrow": [
+  "Overlay--visibilityHidden": [
     "Primer::Alpha::Dialog"
   ],
   "Overlay-body": [

data/static/constants.json

@@ -155,6 +155,7 @@
   "Primer::Alpha::AutoComplete::Item": {
   },
   "Primer::Alpha::Banner": {
+    "DEFAULT_DISMISS_LABEL": "Dismiss",
     "DEFAULT_DISMISS_SCHEME": "none",
     "DEFAULT_ICONS": {
       "default": "bell",
@@ -163,6 +164,7 @@
       "success": "check-circle"
     },
     "DEFAULT_SCHEME": "default",
+    "DEFAULT_TAG": "div",
     "DISMISS_SCHEMES": [
       "none",
       "remove",
@@ -179,7 +181,11 @@
       "warning": "Banner--warning",
       "danger": "Banner--error",
       "success": "Banner--success"
-    }
+    },
+    "TAG_OPTIONS": [
+      "div",
+      "section"
+    ]
   },
   "Primer::Alpha::ButtonMarketing": {
     "DEFAULT_SCHEME": "default",
@@ -227,16 +233,16 @@
     "Footer": "Primer::Alpha::Dialog::Footer",
     "Header": "Primer::Alpha::Dialog::Header",
     "POSITION_MAPPINGS": {
-      "center": "Overlay-backdrop--center",
-      "left": "Overlay-backdrop--side Overlay-backdrop--placement-left",
-      "right": "Overlay-backdrop--side Overlay-backdrop--placement-right"
+      "center": "",
+      "left": "Overlay--placement-left",
+      "right": "Overlay--placement-right"
     },
     "POSITION_NARROW_MAPPINGS": {
       "inherit": "",
-      "bottom": "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-bottom-whenNarrow",
-      "fullscreen": "Overlay-backdrop--full-whenNarrow",
-      "left": "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-left-whenNarrow",
-      "right": "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-right-whenNarrow"
+      "bottom": "Overlay--placement-bottom-whenNarrow",
+      "fullscreen": "Overlay--full-whenNarrow",
+      "left": "Overlay--placement-left-whenNarrow",
+      "right": "Overlay--placement-right-whenNarrow"
     },
     "POSITION_NARROW_OPTIONS": [
       "inherit",
@@ -1427,14 +1433,14 @@
       "block",
       "none"
     ],
-    "DEFAULT_HEADER_VARIANT": "medium",
+    "DEFAULT_HEADER_VARIANT": "large",
     "DEFAULT_PARENT_LINK_DISPLAY": [
       "block",
       "none"
     ],
     "HEADER_VARIANT_OPTIONS": [
-      "large",
-      "medium"
+      "medium",
+      "large"
     ],
     "HEADING_TAG_FALLBACK": "h2",
     "HEADING_TAG_OPTIONS": [

data/static/info_arch.json

@@ -1627,6 +1627,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/action_menu/in_scroll_container",
+        "name": "in_scroll_container",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/action_menu/align_end",
         "name": "align_end",
@@ -2230,6 +2243,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/banner.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/banner/default/",
     "parameters": [
+      {
+        "name": "tag",
+        "type": "Symbol",
+        "default": "`:div`",
+        "description": "One of `:div` or `:section`."
+      },
       {
         "name": "full",
         "type": "Boolean",
@@ -2248,6 +2267,12 @@
         "default": "`:none`",
         "description": "Whether the component can be dismissed with an \"x\" button. One of `:hide`, `:none`, or `:remove`."
       },
+      {
+        "name": "dismiss_label",
+        "type": "String",
+        "default": "`Dismiss`",
+        "description": "The aria-label text of the dismiss \"x\" button"
+      },
       {
         "name": "description",
         "type": "String",
@@ -3311,6 +3336,45 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/left_side",
+        "name": "left_side",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/right_side",
+        "name": "right_side",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/scroll_container",
+        "name": "scroll_container",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -16200,8 +16264,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/large_title",
-        "name": "large_title",
+        "preview_path": "primer/open_project/page_header/medium_title",
+        "name": "medium_title",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -16408,6 +16472,6 @@
     "component": "BaseComponent",
     "fully_qualified_name": "Primer::BaseComponent",
     "description_md": "All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) used by [Primer React](https://primer.style/components/system-props).\n\nUnder the hood, system arguments are [mapped](https://github.com/primer/view_components/blob/main/lib/primer/classify.rb) to Primer CSS classes, with any remaining options passed to Rails' [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).\n\n## Responsive values\n\nTo apply different values across responsive breakpoints, pass an array with up to five values in the order `[default, small, medium, large, xlarge]`. To skip a breakpoint, pass `nil`.\n\nFor example:\n\n```erb\n<%= render Primer::Beta::Heading.new(mt: [0, nil, nil, 4, 2]) do %>\n  Hello world\n<% end %>\n```\n\nRenders:\n\n```html\n<h1 class=\"mt-0 mt-lg-4 mt-xl-2\">Hello world</h1>\n```",
-    "args_md": "## HTML attributes\n\nSystem arguments include most HTML attributes. For example:\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n| `height` | `Integer` | Height. |\n| `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |\n| `style` | `String` | Inline styles. |\n| `title` | `String` | The `title` attribute. |\n| `width` | `Integer` | Width. |\n\n## Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n## Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n## Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n## Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n## Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n## Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n## Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n## Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `px` | Integer | Horizontal padding. One of `0`, `1`, `2`, `3`, `4`, `5`, or `6`. |\n| `py` | Integer | Vertical padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n\n## Typography\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `font_family` | Symbol | Font family. One of `:mono`. |\n| `font_size` | String, Integer, Symbol | One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `00`, `:normal`, or `:small`. |\n| `font_style` | Symbol | Font style. One of `:italic`. |\n| `font_weight` | Symbol | Font weight. One of `:bold`, `:emphasized`, `:light`, or `:normal`. |\n| `text_align` | Symbol | Text alignment. One of `:center`, `:left`, or `:right`. |\n| `text_transform` | Symbol | Text transformation. One of `:capitalize` or `:uppercase`. |\n| `underline` | Boolean | Whether text should be underlined. |\n| `word_break` | Symbol | Whether to break words on line breaks. One of `:break_all` or `:break_word`. |\n\n## Other\n\n| Name | Type | Description |\n| :- | :- | :- |\n| classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |\n| test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |"
+    "args_md": "## HTML attributes\n\nUse system arguments to add HTML attributes to elements. For the most part, system arguments map 1:1 to\nHTML attributes. For example, `render(Component.new(title: \"Foo\"))` will result in eg. `<div title=\"foo\">`.\nHowever, ViewComponents applies special handling to certain system arguments. See the table below for details.\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n\n## Utility classes\n\nViewComponents provides a convenient way to add Primer CSS utility classes to HTML elements. Use the shorthand\ndocumented in the tables below instead of adding CSS classes directly.\n\n### Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n### Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n### Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n### Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n### Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n### Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | Sets the element's width. One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | Sets the element's height. One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n### Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n### Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `px` | Integer | Horizontal padding. One of `0`, `1`, `2`, `3`, `4`, `5`, or `6`. |\n| `py` | Integer | Vertical padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n\n### Typography\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `font_family` | Symbol | Font family. One of `:mono`. |\n| `font_size` | String, Integer, Symbol | One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `00`, `:normal`, or `:small`. |\n| `font_style` | Symbol | Font style. One of `:italic`. |\n| `font_weight` | Symbol | Font weight. One of `:bold`, `:emphasized`, `:light`, or `:normal`. |\n| `text_align` | Symbol | Text alignment. One of `:center`, `:left`, or `:right`. |\n| `text_transform` | Symbol | Text transformation. One of `:capitalize` or `:uppercase`. |\n| `underline` | Boolean | Whether text should be underlined. |\n| `word_break` | Symbol | Whether to break words on line breaks. One of `:break_all` or `:break_word`. |\n\n### Other\n\n| Name | Type | Description |\n| :- | :- | :- |\n| classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |\n| test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |"
   }
 ]

data/static/previews.json

@@ -658,6 +658,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/action_menu/in_scroll_container",
+        "name": "in_scroll_container",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/action_menu/align_end",
         "name": "align_end",
@@ -3134,6 +3147,45 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/left_side",
+        "name": "left_side",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/right_side",
+        "name": "right_side",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/scroll_container",
+        "name": "scroll_container",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },
@@ -4950,8 +5002,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/large_title",
-        "name": "large_title",
+        "preview_path": "primer/open_project/page_header/medium_title",
+        "name": "medium_title",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.19.0
+  version: 0.21.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-12-11 00:00:00.000000000 Z
+date: 2024-01-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -99,8 +99,10 @@ files:
 - app/assets/javascripts/app/components/primer/beta/nav_list.d.ts
 - app/assets/javascripts/app/components/primer/beta/nav_list_group_element.d.ts
 - app/assets/javascripts/app/components/primer/beta/relative_time.d.ts
+- app/assets/javascripts/app/components/primer/dialog_helper.d.ts
 - app/assets/javascripts/app/components/primer/focus_group.d.ts
 - app/assets/javascripts/app/components/primer/primer.d.ts
+- app/assets/javascripts/app/components/primer/scrollable_region.d.ts
 - app/assets/javascripts/lib/primer/forms/primer_multi_input.d.ts
 - app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts
 - app/assets/javascripts/lib/primer/forms/toggle_switch_input.d.ts
@@ -444,6 +446,9 @@ files:
 - app/components/primer/component.rb
 - app/components/primer/conditional_wrapper.rb
 - app/components/primer/content.rb
+- app/components/primer/dialog_helper.d.ts
+- app/components/primer/dialog_helper.js
+- app/components/primer/dialog_helper.ts
 - app/components/primer/focus_group.d.ts
 - app/components/primer/focus_group.js
 - app/components/primer/focus_group.ts
@@ -487,6 +492,9 @@ files:
 - app/components/primer/primer.js
 - app/components/primer/primer.pcss
 - app/components/primer/primer.ts
+- app/components/primer/scrollable_region.d.ts
+- app/components/primer/scrollable_region.js
+- app/components/primer/scrollable_region.ts
 - app/components/primer/tooltip.rb
 - app/components/primer/truncate.css
 - app/components/primer/truncate.css.json
@@ -733,6 +741,7 @@ files:
 - previews/primer/alpha/action_menu_preview.rb
 - previews/primer/alpha/action_menu_preview/align_end.html.erb
 - previews/primer/alpha/action_menu_preview/content_labels.html.erb
+- previews/primer/alpha/action_menu_preview/in_scroll_container.html.erb
 - previews/primer/alpha/action_menu_preview/multiple_select_form.html.erb
 - previews/primer/alpha/action_menu_preview/opens_dialog.html.erb
 - previews/primer/alpha/action_menu_preview/single_select_form.html.erb
@@ -752,6 +761,7 @@ files:
 - previews/primer/alpha/dialog_preview/body_has_scrollbar_overflow.html.erb
 - previews/primer/alpha/dialog_preview/custom_header.html.erb
 - previews/primer/alpha/dialog_preview/nested_dialog.html.erb
+- previews/primer/alpha/dialog_preview/scroll_container.html.erb
 - previews/primer/alpha/dialog_preview/test.html.erb
 - previews/primer/alpha/dialog_preview/with_auto_complete.html.erb
 - previews/primer/alpha/dialog_preview/with_footer.html.erb
@@ -912,7 +922,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.10
+rubygems_version: 3.4.19
 signing_key: 
 specification_version: 4
 summary: ViewComponents of the Primer Design System for OpenProject