@openproject/primer-view-components 0.17.1 → 0.18.0-rc.3f51ce9a

package/app/components/primer/open_project/input_group.css

@@ -0,0 +1 @@
+.InputGroup.InputGroup-input-width--auto{width:auto}.InputGroup.InputGroup-input-width--small{max-width:min(256px,100vw - 2rem)}.InputGroup.InputGroup-input-width--medium{max-width:min(320px,100vw - 2rem)}.InputGroup.InputGroup-input-width--large{max-width:min(480px,100vw - 2rem)}.InputGroup.InputGroup-input-width--xlarge{max-width:min(640px,100vw - 2rem)}.InputGroup.InputGroup-input-width--xxlarge{max-width:min(960px,100vw - 2rem)}

package/app/components/primer/open_project/input_group.css.json

@@ -0,0 +1,11 @@
+{
+  "name": "open_project/input_group",
+  "selectors": [
+    ".InputGroup.InputGroup-input-width--auto",
+    ".InputGroup.InputGroup-input-width--small",
+    ".InputGroup.InputGroup-input-width--medium",
+    ".InputGroup.InputGroup-input-width--large",
+    ".InputGroup.InputGroup-input-width--xlarge",
+    ".InputGroup.InputGroup-input-width--xxlarge"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.17.1",
+  "version": "0.18.0-rc.3f51ce9a",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/arguments.json

@@ -4810,6 +4810,22 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::InputGroup",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectInputGroup",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/input_group.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/input_group/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "OpenProject::PageHeader",
     "status": "open_project",

package/static/audited_at.json

@@ -115,6 +115,7 @@
   "Primer::OpenProject::FlexLayout": "",
   "Primer::OpenProject::GridLayout": "",
   "Primer::OpenProject::GridLayout::Area": "",
+  "Primer::OpenProject::InputGroup": "",
   "Primer::OpenProject::PageHeader": "",
   "Primer::Tooltip": "",
   "Primer::Truncate": ""

package/static/classes.json

@@ -302,6 +302,9 @@
   "FormControl-toggleSwitchInput": [
     "Primer::Alpha::TextField"
   ],
+  "InputGroup": [
+    "Primer::OpenProject::InputGroup"
+  ],
   "Label": [
     "Primer::Beta::Label"
   ],

package/static/constants.json

@@ -1374,6 +1374,25 @@
       "span"
     ]
   },
+  "Primer::OpenProject::InputGroup": {
+    "DEFAULT_INPUT_WIDTH": "auto",
+    "INPUT_WIDTH_MAPPINGS": {
+      "auto": "InputGroup-input-width--auto",
+      "small": "InputGroup-input-width--small",
+      "medium": "InputGroup-input-width--medium",
+      "large": "InputGroup-input-width--large",
+      "xlarge": "InputGroup-input-width--xlarge",
+      "xxlarge": "InputGroup-input-width--xxlarge"
+    },
+    "INPUT_WIDTH_OPTIONS": [
+      "auto",
+      "small",
+      "medium",
+      "large",
+      "xlarge",
+      "xxlarge"
+    ]
+  },
   "Primer::OpenProject::PageHeader": {
     "BACK_BUTTON_ICON_OPTIONS": [
       "arrow-left",

package/static/info_arch.json

@@ -15722,6 +15722,115 @@
 
     ]
   },
+  {
+    "fully_qualified_name": "Primer::OpenProject::InputGroup",
+    "description": "`InputGroup` is composed of a text field input with a trailing action",
+    "accessibility_docs": null,
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "OpenProject::InputGroup",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectInputGroup",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/input_group.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/input_group/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "{{link_to_system_arguments_docs}}"
+      }
+    ],
+    "slots": [
+      {
+        "name": "trailing_action",
+        "description": "A component that will render to the right of the label.\n\nTo render a clipboardCopyButton, call the `with_trailing_action_clipboard_copy_button` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::ClipboardCopyButton{{/link_to_component}}.\n\nTo render an iconButton, call the `with_trailing_action_icon` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.",
+        "parameters": [
+
+        ]
+      },
+      {
+        "name": "text_input",
+        "description": "Input that is the central part of the input group\n\nSince the central use case of this component is a copyClipboard Button next to the input, it is readonly by default",
+        "parameters": [
+          {
+            "name": "readonly",
+            "type": "Boolean",
+            "default": "N/A",
+            "description": "Shall the text field be editable."
+          },
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      }
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+      {
+        "preview_path": "primer/open_project/input_group/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/input_group/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/input_group/icon_button",
+        "name": "icon_button",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/input_group/small_input_width",
+        "name": "small_input_width",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ],
+    "subcomponents": [
+
+    ]
+  },
   {
     "fully_qualified_name": "Primer::OpenProject::PageHeader",
     "description": "A ViewComponent PageHeader inspired by the primer react variant",

package/static/previews.json

@@ -3849,6 +3849,66 @@
       }
     ]
   },
+  {
+    "name": "input_group",
+    "component": "OpenProject::InputGroup",
+    "status": "open_project",
+    "lookup_path": "primer/open_project/input_group",
+    "examples": [
+      {
+        "preview_path": "primer/open_project/input_group/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/input_group/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/input_group/icon_button",
+        "name": "icon_button",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/input_group/small_input_width",
+        "name": "small_input_width",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ]
+  },
   {
     "name": "label",
     "component": "Label",

package/static/statuses.json

@@ -115,6 +115,7 @@
   "Primer::OpenProject::FlexLayout": "open_project",
   "Primer::OpenProject::GridLayout": "open_project",
   "Primer::OpenProject::GridLayout::Area": "open_project",
+  "Primer::OpenProject::InputGroup": "open_project",
   "Primer::OpenProject::PageHeader": "open_project",
   "Primer::Tooltip": "deprecated",
   "Primer::Truncate": "deprecated"