@primer/view-components 0.35.0-rc.9bea5b2d → 0.35.0-rc.a50fd5c0

package/app/components/primer/primer.d.ts

@@ -0,0 +1,28 @@
+import '@github/include-fragment-element';
+import '@github/remote-input-element';
+import './alpha/action_list';
+import './alpha/action_bar_element';
+import './alpha/dropdown';
+import './anchored_position';
+import './dialog_helper';
+import './focus_group';
+import './scrollable_region';
+import './aria_live';
+import './shared_events';
+import './alpha/image_crop';
+import './alpha/modal_dialog';
+import './beta/nav_list';
+import './beta/nav_list_group_element';
+import './alpha/segmented_control';
+import './alpha/toggle_switch';
+import './alpha/tool_tip';
+import './alpha/x_banner';
+import './beta/auto_complete/auto_complete';
+import './beta/clipboard_copy';
+import './beta/relative_time';
+import './alpha/tab_container';
+import '../../lib/primer/forms/primer_multi_input';
+import '../../lib/primer/forms/primer_text_field';
+import '../../lib/primer/forms/toggle_switch_input';
+import './alpha/action_menu/action_menu_element';
+import './alpha/select_panel_element';

package/app/components/primer/scrollable_region.d.ts

@@ -0,0 +1,13 @@
+export declare class ScrollableRegionElement extends HTMLElement {
+    hasOverflow: boolean;
+    labelledBy: string;
+    observer: ResizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+}
+declare global {
+    interface Window {
+        ScrollableRegionElement: typeof ScrollableRegionElement;
+    }
+}

package/app/components/primer/shared_events.d.ts

@@ -0,0 +1,11 @@
+export type ItemActivatedEvent = {
+    item: Element;
+    checked: boolean;
+    value: string | null;
+};
+declare global {
+    interface HTMLElementEventMap {
+        itemActivated: CustomEvent<ItemActivatedEvent>;
+        beforeItemActivated: CustomEvent<ItemActivatedEvent>;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.35.0-rc.9bea5b2d",
+  "version": "0.35.0-rc.a50fd5c0",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -27,16 +27,14 @@
     "app/components/primer/**/*.css.json",
     "app/components/primer/**/*.d.ts",
     "app/lib/primer/forms/**/*.js",
-    "app/lib/primer/forms/**/*.d.ts",
-    "lib/primer/forms/**/*.js",
-    "lib/primer/forms/**/*.d.ts"
+    "app/lib/primer/forms/**/*.d.ts"
   ],
   "scripts": {
     "clean": "git clean -fdX -- app/",
     "prepare": "script/build-assets",
     "lint": "npm run lint:stylelint && npm run lint:eslint",
-    "lint:stylelint": "stylelint 'app/components/**/*.pcss'",
-    "lint:stylelint:fix": "stylelint 'app/components/**/*.pcss' --fix",
+    "lint:stylelint": "stylelint --rd -q 'app/components/**/*.pcss'",
+    "lint:stylelint:fix": "npm run lint:stylelint --  --fix",
     "lint:eslint": "eslint 'app/components/**/*.ts'",
     "lint:eslint:fix": "eslint 'app/components/**/*.ts' --fix",
     "changeset:version": "changeset version && script/version",
@@ -66,9 +64,9 @@
     "@github/markdownlint-github": "^0.6.0",
     "@github/prettier-config": "0.0.6",
     "@playwright/test": "^1.35.1",
-    "@primer/css": "21.3.6",
+    "@primer/css": "21.5.0",
     "@primer/primitives": "^9.0.2",
-    "@primer/stylelint-config": "^13.0.1",
+    "@primer/stylelint-config": "^13.1.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^7.0.1",

package/static/arguments.json

@@ -974,6 +974,12 @@
         "default": "`false`",
         "description": "If true will hide the heading title, while still making it available to Screen Readers."
       },
+      {
+        "name": "disable_scroll",
+        "type": "Boolean",
+        "default": "`true`",
+        "description": "When true, disables scrolling the page when the dialog is open."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -2510,6 +2516,92 @@
       }
     ]
   },
+  {
+    "component": "Stack",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "Stack",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack/default/",
+    "parameters": [
+      {
+        "name": "tag",
+        "type": "Symbol",
+        "default": "`:div`",
+        "description": "Customize the element type of the rendered container."
+      },
+      {
+        "name": "gap",
+        "type": "Symbol",
+        "default": "`GapArg::DEFAULT`",
+        "description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:normal`, or `:spacious`."
+      },
+      {
+        "name": "direction",
+        "type": "Symbol",
+        "default": "`:vertical`",
+        "description": "Specify the direction for the stack container. One of `nil`, `:horizontal`, or `:vertical`."
+      },
+      {
+        "name": "align",
+        "type": "Symbol",
+        "default": "`:stretch`",
+        "description": "Specify the alignment between items in the cross-axis of the direction. One of `nil`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`."
+      },
+      {
+        "name": "wrap",
+        "type": "Symbol",
+        "default": "`:nowrap`",
+        "description": "Specify whether items are forced onto one line or can wrap onto multiple lines. One of `nil`, `:nowrap`, or `:wrap`."
+      },
+      {
+        "name": "justify",
+        "type": "Symbol",
+        "default": "`:start`",
+        "description": "Specify how items will be distributed in the stacking direction. One of `nil`, `:center`, `:end`, `:space_between`, `:space_evenly`, or `:start`."
+      },
+      {
+        "name": "padding",
+        "type": "Symbol",
+        "default": "`:none`",
+        "description": "Specify the padding of the stack container. One of `nil`, `:condensed`, `:none`, `:normal`, or `:spacious`."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "StackItem",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "StackItem",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack_item.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack_item/default/",
+    "parameters": [
+      {
+        "name": "tag",
+        "type": "Symbol",
+        "default": "`:div`",
+        "description": "Customize the element type of the rendered container."
+      },
+      {
+        "name": "grow",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Allow item to keep size or expand to fill the available space."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "SubmitButton",
     "status": "alpha",

package/static/audited_at.json

@@ -54,6 +54,8 @@
   "Primer::Alpha::Select": "",
   "Primer::Alpha::SelectPanel": "",
   "Primer::Alpha::SelectPanel::ItemList": "2023-07-10",
+  "Primer::Alpha::Stack": "",
+  "Primer::Alpha::StackItem": "",
   "Primer::Alpha::SubmitButton": "",
   "Primer::Alpha::TabContainer": "",
   "Primer::Alpha::TabNav": "",

package/static/constants.json

@@ -621,6 +621,30 @@
   },
   "Primer::Alpha::SelectPanel::ItemList": {
   },
+  "Primer::Alpha::Stack": {
+    "ARG_CLASSES": [
+      "Primer::Alpha::Stack::JustifyArg",
+      "Primer::Alpha::Stack::DirectionArg",
+      "Primer::Alpha::Stack::AlignArg",
+      "Primer::Alpha::Stack::WrapArg",
+      "Primer::Alpha::Stack::PaddingArg",
+      "Primer::Alpha::Stack::GapArg"
+    ],
+    "AlignArg": "Primer::Alpha::Stack::AlignArg",
+    "DEFAULT_TAG": "div",
+    "DirectionArg": "Primer::Alpha::Stack::DirectionArg",
+    "GapArg": "Primer::Alpha::Stack::GapArg",
+    "JustifyArg": "Primer::Alpha::Stack::JustifyArg",
+    "PaddingArg": "Primer::Alpha::Stack::PaddingArg",
+    "WrapArg": "Primer::Alpha::Stack::WrapArg"
+  },
+  "Primer::Alpha::StackItem": {
+    "ARG_CLASSES": [
+      "Primer::Alpha::StackItem::GrowArg"
+    ],
+    "DEFAULT_TAG": "div",
+    "GrowArg": "Primer::Alpha::StackItem::GrowArg"
+  },
   "Primer::Alpha::SubmitButton": {
   },
   "Primer::Alpha::TabContainer": {

package/static/info_arch.json

@@ -3306,6 +3306,12 @@
         "default": "`false`",
         "description": "If true will hide the heading title, while still making it available to Screen Readers."
       },
+      {
+        "name": "disable_scroll",
+        "type": "Boolean",
+        "default": "`true`",
+        "description": "When true, disables scrolling the page when the dialog is open."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -8185,6 +8191,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/select_panel/scroll_container",
+        "name": "scroll_container",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -8248,6 +8267,178 @@
       }
     ]
   },
+  {
+    "fully_qualified_name": "Primer::Alpha::Stack",
+    "description": "Stack is a layout component that creates responsive horizontal and vertical flows.",
+    "accessibility_docs": null,
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "Stack",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "Stack",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack/default/",
+    "parameters": [
+      {
+        "name": "tag",
+        "type": "Symbol",
+        "default": "`:div`",
+        "description": "Customize the element type of the rendered container."
+      },
+      {
+        "name": "gap",
+        "type": "Symbol",
+        "default": "`GapArg::DEFAULT`",
+        "description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:normal`, or `:spacious`."
+      },
+      {
+        "name": "direction",
+        "type": "Symbol",
+        "default": "`:vertical`",
+        "description": "Specify the direction for the stack container. One of `nil`, `:horizontal`, or `:vertical`."
+      },
+      {
+        "name": "align",
+        "type": "Symbol",
+        "default": "`:stretch`",
+        "description": "Specify the alignment between items in the cross-axis of the direction. One of `nil`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`."
+      },
+      {
+        "name": "wrap",
+        "type": "Symbol",
+        "default": "`:nowrap`",
+        "description": "Specify whether items are forced onto one line or can wrap onto multiple lines. One of `nil`, `:nowrap`, or `:wrap`."
+      },
+      {
+        "name": "justify",
+        "type": "Symbol",
+        "default": "`:start`",
+        "description": "Specify how items will be distributed in the stacking direction. One of `nil`, `:center`, `:end`, `:space_between`, `:space_evenly`, or `:start`."
+      },
+      {
+        "name": "padding",
+        "type": "Symbol",
+        "default": "`:none`",
+        "description": "Specify the padding of the stack container. One of `nil`, `:condensed`, `:none`, `:normal`, or `:spacious`."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "{{link_to_system_arguments_docs}}"
+      }
+    ],
+    "slots": [
+
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+      {
+        "preview_path": "primer/alpha/stack/default",
+        "name": "default",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/stack/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ],
+    "subcomponents": [
+
+    ]
+  },
+  {
+    "fully_qualified_name": "Primer::Alpha::StackItem",
+    "description": "StackItem is a layout component designed to be used as the child of a Stack.",
+    "accessibility_docs": null,
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "StackItem",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "StackItem",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack_item.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack_item/default/",
+    "parameters": [
+      {
+        "name": "tag",
+        "type": "Symbol",
+        "default": "`:div`",
+        "description": "Customize the element type of the rendered container."
+      },
+      {
+        "name": "grow",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Allow item to keep size or expand to fill the available space."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "{{link_to_system_arguments_docs}}"
+      }
+    ],
+    "slots": [
+
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+      {
+        "preview_path": "primer/alpha/stack_item/default",
+        "name": "default",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/stack_item/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ],
+    "subcomponents": [
+
+    ]
+  },
   {
     "fully_qualified_name": "Primer::Alpha::SubmitButton",
     "description": "A submit button input rendered using the HTML `<button type=\"submit\">` tag.\n\nThis component wraps the Primer button component and supports the same slots and arguments.",

package/static/previews.json

@@ -6212,6 +6212,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/select_panel/scroll_container",
+        "name": "scroll_container",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },
@@ -6249,6 +6262,74 @@
       }
     ]
   },
+  {
+    "name": "stack",
+    "component": "Stack",
+    "status": "alpha",
+    "lookup_path": "primer/alpha/stack",
+    "examples": [
+      {
+        "preview_path": "primer/alpha/stack/default",
+        "name": "default",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/stack/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ]
+  },
+  {
+    "name": "stack_item",
+    "component": "StackItem",
+    "status": "alpha",
+    "lookup_path": "primer/alpha/stack_item",
+    "examples": [
+      {
+        "preview_path": "primer/alpha/stack_item/default",
+        "name": "default",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/stack_item/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ]
+  },
   {
     "name": "state",
     "component": "State",

package/static/statuses.json

@@ -54,6 +54,8 @@
   "Primer::Alpha::Select": "alpha",
   "Primer::Alpha::SelectPanel": "alpha",
   "Primer::Alpha::SelectPanel::ItemList": "alpha",
+  "Primer::Alpha::Stack": "alpha",
+  "Primer::Alpha::StackItem": "alpha",
   "Primer::Alpha::SubmitButton": "alpha",
   "Primer::Alpha::TabContainer": "alpha",
   "Primer::Alpha::TabNav": "alpha",

package/lib/primer/forms/primer_multi_input.d.ts

@@ -1,10 +0,0 @@
-export declare class PrimerMultiInputElement extends HTMLElement {
-    fields: HTMLInputElement[];
-    activateField(name: string): void;
-    private findField;
-}
-declare global {
-    interface Window {
-        PrimerMultiInputElement: typeof PrimerMultiInputElement;
-    }
-}

package/lib/primer/forms/primer_text_field.d.ts

@@ -1,28 +0,0 @@
-import '@github/auto-check-element';
-import type { AutoCheckErrorEvent, AutoCheckSuccessEvent } from '@github/auto-check-element';
-declare global {
-    interface HTMLElementEventMap {
-        'auto-check-success': AutoCheckSuccessEvent;
-        'auto-check-error': AutoCheckErrorEvent;
-    }
-}
-export declare class PrimerTextFieldElement extends HTMLElement {
-    #private;
-    inputElement: HTMLInputElement;
-    validationElement: HTMLElement;
-    validationMessageElement: HTMLElement;
-    validationSuccessIcon: HTMLElement;
-    validationErrorIcon: HTMLElement;
-    leadingVisual: HTMLElement;
-    leadingSpinner: HTMLElement;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    clearContents(): void;
-    clearError(): void;
-    setValidationMessage(message: string): void;
-    toggleValidationStyling(isError: boolean): void;
-    setSuccess(message: string): void;
-    setError(message: string): void;
-    showLeadingSpinner(): void;
-    hideLeadingSpinner(): void;
-}

package/lib/primer/forms/toggle_switch_input.d.ts

@@ -1,5 +0,0 @@
-export declare class ToggleSwitchInputElement extends HTMLElement {
-    validationElement: HTMLElement;
-    validationMessageElement: HTMLElement;
-    connectedCallback(): void;
-}