@openproject/primer-view-components 0.82.1 → 0.83.0-rc.0d7454d16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.82.1",
+  "version": "0.83.0-rc.0d7454d16",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -45,7 +45,7 @@
   "dependencies": {
     "@github/auto-check-element": "^6.0.0",
     "@github/auto-complete-element": "^3.8.0",
-    "@github/catalyst": "^1.6.0",
+    "@github/catalyst": "^1.8.0",
     "@github/clipboard-copy-element": "^1.3.0",
     "@github/details-menu-element": "^1.0.12",
     "@github/image-crop-element": "^5.0.0",
@@ -69,6 +69,7 @@
     "@github/prettier-config": "0.0.6",
     "@playwright/test": "^1.57.0",
     "@primer/css": "22.1.0",
+    "@primer/primitives": "^11.4.0",
     "@primer/stylelint-config": "^13.1.1",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^8.3.3",
@@ -78,14 +79,14 @@
     "eslint": "^9.10.0",
     "eslint-plugin-github": "^6.0.0",
     "glob": "^11.0.2",
-    "markdownlint-cli2": "^0.19.1",
+    "markdownlint-cli2": "^0.20.0",
     "mocha": "^11.0.1",
     "playwright": "^1.57.0",
     "postcss": "^8.4.16",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.0.0",
     "postcss-mixins": "^12.1.2",
-    "postcss-preset-env": "^10.0.2",
+    "postcss-preset-env": "^11.1.2",
     "prettier": "^3.3.2",
     "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",

package/static/arguments.json

@@ -464,6 +464,12 @@
         "default": "N/A",
         "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "N/A",
+        "description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
+      },
       {
         "name": "menu_id",
         "type": "String",
@@ -540,6 +546,12 @@
         "default": "`:outside_bottom`",
         "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "`:inherit`",
+        "description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
+      },
       {
         "name": "dynamic_label",
         "type": "Boolean",
@@ -586,6 +598,12 @@
         "default": "`:outside_right`",
         "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "`:inherit`",
+        "description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
+      },
       {
         "name": "overlay_arguments",
         "type": "Hash",
@@ -2009,6 +2027,12 @@
         "default": "`:normal`",
         "description": "The anchor offset to give the Overlay. One of `:normal` or `:spacious`."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "`:inherit`",
+        "description": "The position of the Overlay when in a narrow viewport. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
+      },
       {
         "name": "allow_out_of_bounds",
         "type": "Boolean",
@@ -3336,6 +3360,12 @@
         "type": "String",
         "default": "`nil`",
         "description": "Custom label to show when the switch is OFF. Defaults to (\"Off\"). Only customize this label if it makes the toggle’s state more meaningful in its specific context. For example, for a \"Show images\" setting, you might use \"Show\" when the switch is OFF."
+      },
+      {
+        "name": "button_type",
+        "type": "Symbol",
+        "default": "`nil`",
+        "description": "The type attribute for the underlying button element. If `nil`, the button will not have a type attribute, which means it will default to \"submit\" if it's inside a form and \"button\" otherwise."
       }
     ]
   },
@@ -4003,7 +4033,14 @@
     "short_name": "AutoCompleteNoResultItem",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
-    "parameters": []
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
   },
   {
     "component": "Avatar",

package/static/classes.json

@@ -467,6 +467,9 @@
   "Overlay--full-whenNarrow": [
     "Primer::Alpha::Dialog"
   ],
+  "Overlay--fullscreen-whenNarrow": [
+    "Primer::Alpha::Dialog"
+  ],
   "Overlay--hidden": [
     "Primer::Alpha::Dialog"
   ],

package/static/constants.json

@@ -193,11 +193,13 @@
   "Primer::Alpha::ActionMenu::PrimaryMenu": {
     "DEFAULT_ANCHOR_ALIGN": "start",
     "DEFAULT_ANCHOR_SIDE": "outside_bottom",
+    "DEFAULT_ANCHOR_WHEN_NARROW": "inherit",
     "GeneratedSlotMethods": "Primer::Alpha::ActionMenu::PrimaryMenu::GeneratedSlotMethods"
   },
   "Primer::Alpha::ActionMenu::SubMenu": {
     "DEFAULT_ANCHOR_ALIGN": "start",
     "DEFAULT_ANCHOR_SIDE": "outside_right",
+    "DEFAULT_ANCHOR_WHEN_NARROW": "inherit",
     "GeneratedSlotMethods": "Primer::Alpha::ActionMenu::SubMenu::GeneratedSlotMethods"
   },
   "Primer::Alpha::ActionMenu::SubMenuItem": {
@@ -599,11 +601,26 @@
       "outside_left",
       "outside_right"
     ],
+    "ANCHOR_WHEN_NARROW_MAPPINGS": {
+      "inherit": "",
+      "bottom": "Overlay--placement-bottom-whenNarrow",
+      "fullscreen": "Overlay--fullscreen-whenNarrow",
+      "left": "Overlay--placement-left-whenNarrow",
+      "right": "Overlay--placement-right-whenNarrow"
+    },
+    "ANCHOR_WHEN_NARROW_OPTIONS": [
+      "inherit",
+      "bottom",
+      "fullscreen",
+      "left",
+      "right"
+    ],
     "Body": "Primer::Alpha::Overlay::Body",
     "DEFAULT_ALIGN_CONTENT": "end",
     "DEFAULT_ANCHOR_ALIGN": "start",
     "DEFAULT_ANCHOR_OFFSET": "normal",
     "DEFAULT_ANCHOR_SIDE": "outside_bottom",
+    "DEFAULT_ANCHOR_WHEN_NARROW": "inherit",
     "DEFAULT_PADDING": "normal",
     "DEFAULT_POPOVER": "auto",
     "DEFAULT_SIZE": "auto",

package/static/info_arch.json

@@ -1633,6 +1633,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/action_menu/fullscreen_when_narrow",
+        "name": "fullscreen_when_narrow",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/action_menu/sub_menus",
         "name": "sub_menus",
@@ -1674,6 +1687,12 @@
             "default": "N/A",
             "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
           },
+          {
+            "name": "anchor_when_narrow",
+            "type": "Symbol",
+            "default": "N/A",
+            "description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
+          },
           {
             "name": "menu_id",
             "type": "String",
@@ -1749,6 +1768,12 @@
             "parameters": [],
             "return_types": []
           },
+          {
+            "name": "anchor_when_narrow",
+            "description": "Returns the value of attribute anchor_when_narrow.",
+            "parameters": [],
+            "return_types": []
+          },
           {
             "name": "list",
             "description": "Returns the value of attribute list.",
@@ -1927,6 +1952,12 @@
             "default": "`:outside_right`",
             "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
           },
+          {
+            "name": "anchor_when_narrow",
+            "type": "Symbol",
+            "default": "`:inherit`",
+            "description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
+          },
           {
             "name": "overlay_arguments",
             "type": "Hash",
@@ -2045,6 +2076,12 @@
             "default": "`:outside_bottom`",
             "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
           },
+          {
+            "name": "anchor_when_narrow",
+            "type": "Symbol",
+            "default": "`:inherit`",
+            "description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
+          },
           {
             "name": "dynamic_label",
             "type": "Boolean",
@@ -5119,7 +5156,7 @@
   {
     "fully_qualified_name": "Primer::Alpha::Layout",
     "description": "`Layout` provides foundational patterns for responsive pages.\n`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences.\n On smaller screens, `Layout` uses vertically stacked rows to display content.\n\n`Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Sidebar`side-by-side (on a desktop of tablet device, per instance);\nor it flows as a row, when `Main` and `Sidebar` are stacked vertically (e.g. on a mobile device).\n`Layout` should always work in any screen size.",
-    "accessibility_docs": "Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether\n`main` or `sidebar` comes first in code. The code order won’t affect the visual position.",
+    "accessibility_docs": "Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether\n`main` or `sidebar` comes first in code. The code order won't affect the visual position.\n\nWhen using `row_placement: :none` on the sidebar, the sidebar content will be hidden at narrow viewports.\nThis may cause WCAG 1.4.10 Reflow failures if the sidebar contains essential content. Only use `:none`\nwhen the sidebar content is non-essential or available elsewhere on the page.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -5194,7 +5231,7 @@
             "name": "row_placement",
             "type": "Symbol",
             "default": "N/A",
-            "description": "Sidebar placement when `Layout` is in row mode. One of `:end`, `:none`, or `:start`."
+            "description": "Sidebar placement when `Layout` is in row mode. One of `:end`, `:none`, or `:start`. **Note:** Using `:none` hides the sidebar at narrow viewports, which may cause WCAG 1.4.10 Reflow issues if the sidebar contains essential content."
           },
           {
             "name": "system_arguments",
@@ -6405,6 +6442,12 @@
         "default": "`:normal`",
         "description": "The anchor offset to give the Overlay. One of `:normal` or `:spacious`."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "`:inherit`",
+        "description": "The position of the Overlay when in a narrow viewport. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
+      },
       {
         "name": "allow_out_of_bounds",
         "type": "Boolean",
@@ -10060,6 +10103,12 @@
         "type": "String",
         "default": "`nil`",
         "description": "Custom label to show when the switch is OFF. Defaults to (\"Off\"). Only customize this label if it makes the toggle’s state more meaningful in its specific context. For example, for a \"Show images\" setting, you might use \"Show\" when the switch is OFF."
+      },
+      {
+        "name": "button_type",
+        "type": "Symbol",
+        "default": "`nil`",
+        "description": "The type attribute for the underlying button element. If `nil`, the button will not have a type attribute, which means it will default to \"submit\" if it's inside a form and \"button\" otherwise."
       }
     ],
     "slots": [],
@@ -12382,6 +12431,32 @@
       }
     ],
     "subcomponents": [
+      {
+        "fully_qualified_name": "Primer::Beta::AutoComplete::NoResultItem",
+        "description": "Use `NoResultItem` to display a message when no autocomplete results are found.\nRenders as a simple div inside the overlay, not as a list item.",
+        "accessibility_docs": null,
+        "is_form_component": false,
+        "is_published": true,
+        "requires_js": false,
+        "component": "AutoComplete::NoResultItem",
+        "status": "beta",
+        "a11y_reviewed": false,
+        "short_name": "AutoCompleteNoResultItem",
+        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
+        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ],
+        "slots": [],
+        "methods": [],
+        "previews": [],
+        "subcomponents": []
+      },
       {
         "fully_qualified_name": "Primer::Beta::AutoComplete::Item",
         "description": "Use `AutoCompleteItem` to list results of an auto-completed search.",
@@ -12474,62 +12549,6 @@
         "methods": [],
         "previews": [],
         "subcomponents": []
-      },
-      {
-        "fully_qualified_name": "Primer::Beta::AutoComplete::NoResultItem",
-        "description": "",
-        "accessibility_docs": null,
-        "is_form_component": false,
-        "is_published": true,
-        "requires_js": false,
-        "component": "AutoComplete::NoResultItem",
-        "status": "beta",
-        "a11y_reviewed": false,
-        "short_name": "AutoCompleteNoResultItem",
-        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
-        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
-        "parameters": [],
-        "slots": [
-          {
-            "name": "leading_visual",
-            "description": "The leading visual rendered before the link.",
-            "parameters": [
-              {
-                "name": "kwargs",
-                "type": "Hash",
-                "default": "N/A",
-                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}} or {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}"
-              }
-            ]
-          },
-          {
-            "name": "trailing_visual",
-            "description": "The trailing visual rendered after the link.",
-            "parameters": [
-              {
-                "name": "kwargs",
-                "type": "Hash",
-                "default": "N/A",
-                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Label{{/link_to_component}}, or {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}"
-              }
-            ]
-          },
-          {
-            "name": "description",
-            "description": "Optional description",
-            "parameters": [
-              {
-                "name": "system_arguments",
-                "type": "Hash",
-                "default": "N/A",
-                "description": "{{link_to_system_arguments_docs}}"
-              }
-            ]
-          }
-        ],
-        "methods": [],
-        "previews": [],
-        "subcomponents": []
       }
     ]
   },

package/static/previews.json

@@ -827,6 +827,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/action_menu/fullscreen_when_narrow",
+        "name": "fullscreen_when_narrow",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/action_menu/sub_menus",
         "name": "sub_menus",