@primer/view-components 0.14.0-rc.f4586ab9 → 0.14.0

package/app/components/primer/focus_group.js

@@ -15,7 +15,7 @@ const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role
 const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ');
 const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
 const printable = /^\S$/;
-export default class FocusGroupElement extends HTMLElement {
+class FocusGroupElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _FocusGroupElement_instances.add(this);
@@ -159,6 +159,7 @@ export default class FocusGroupElement extends HTMLElement {
 _FocusGroupElement_retainSignal = new WeakMap(), _FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
     return this.querySelectorAll(menuItemSelector);
 };
+export default FocusGroupElement;
 if (!customElements.get('focus-group')) {
     window.FocusGroupElement = FocusGroupElement;
     customElements.define('focus-group', FocusGroupElement);

package/lib/primer/forms/primer_text_field.js

@@ -30,8 +30,14 @@ class PrimerTextFieldElement extends HTMLElement {
         var _a;
         (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
         const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
-        this.inputElement.addEventListener('auto-check-success', () => {
-            this.clearError();
+        this.inputElement.addEventListener('auto-check-success', async (event) => {
+            const message = await event.detail.response.text();
+            if (message && message.length > 0) {
+                this.setSuccess(message);
+            }
+            else {
+                this.clearError();
+            }
         }, { signal });
         this.inputElement.addEventListener('auto-check-error', async (event) => {
             const errorMessage = await event.detail.response.text();
@@ -49,12 +55,35 @@ class PrimerTextFieldElement extends HTMLElement {
     clearError() {
         this.inputElement.removeAttribute('invalid');
         this.validationElement.hidden = true;
-        this.validationMessageElement.textContent = '';
+        this.validationMessageElement.replaceChildren();
+    }
+    setValidationMessage(message) {
+        const template = document.createElement('template');
+        // eslint-disable-next-line github/no-inner-html
+        template.innerHTML = message;
+        const fragment = document.importNode(template.content, true);
+        this.validationMessageElement.replaceChildren(fragment);
+    }
+    toggleValidationStyling(isError) {
+        if (isError) {
+            this.validationElement.classList.remove('FormControl-inlineValidation--success');
+        }
+        else {
+            this.validationElement.classList.add('FormControl-inlineValidation--success');
+        }
+        this.validationSuccessIcon.hidden = isError;
+        this.validationErrorIcon.hidden = !isError;
+        this.inputElement.setAttribute('invalid', isError ? 'true' : 'false');
+    }
+    setSuccess(message) {
+        this.toggleValidationStyling(false);
+        this.setValidationMessage(message);
+        this.validationElement.hidden = false;
     }
     setError(message) {
-        this.validationMessageElement.textContent = message;
+        this.toggleValidationStyling(true);
+        this.setValidationMessage(message);
         this.validationElement.hidden = false;
-        this.inputElement.setAttribute('invalid', 'true');
     }
 };
 _PrimerTextFieldElement_abortController = new WeakMap();
@@ -67,6 +96,12 @@ __decorate([
 __decorate([
     target
 ], PrimerTextFieldElement.prototype, "validationMessageElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationSuccessIcon", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationErrorIcon", void 0);
 PrimerTextFieldElement = __decorate([
     controller
     // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.14.0-rc.f4586ab9",
+  "version": "0.14.0",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -51,13 +51,13 @@
     "@github/include-fragment-element": "^6.1.1",
     "@github/relative-time-element": "^4.0.0",
     "@github/tab-container-element": "^3.1.2",
-    "@oddbird/popover-polyfill": "^0.3.0",
+    "@oddbird/popover-polyfill": "^0.3.2",
     "@primer/behaviors": "^1.3.4"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.6",
     "@changesets/cli": "^2.24.1",
-    "@github/axe-github": "^0.5.0",
+    "@github/axe-github": "^0.6.1",
     "@github/browserslist-config": "^1.0.0",
     "@github/markdownlint-github": "^0.2.2",
     "@github/prettier-config": "0.0.6",
@@ -65,10 +65,10 @@
     "@primer/css": "21.0.9",
     "@primer/primitives": "^7.14.0",
     "@primer/stylelint-config": "^12.7.2",
-    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^8.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.31.0",
-    "@typescript-eslint/parser": "^5.31.0",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.0.0",
     "axe-core": "^4.7.1",
     "chokidar-cli": "^3.0.0",
     "cssnano": "^6.0.1",
@@ -82,17 +82,16 @@
     "postcss": "^8.4.16",
     "postcss-cli": "^10.1.0",
     "postcss-custom-properties-fallback": "^1.0.2",
-    "postcss-import": "^14.1.0",
+    "postcss-import": "^15.1.0",
     "postcss-mixins": "^9.0.3",
     "postcss-preset-env": "^9.3.0",
-    "prettier": "2.7.1",
-    "rollup": "^2.77.1",
+    "prettier": "3.1.0",
+    "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",
-    "stylelint": "^14.13.0",
-    "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard": "^28.0.0",
+    "stylelint": "^15.11.0",
+    "stylelint-config-standard": "^34.0.0",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4"
+    "typescript": "^5.2.2"
   },
   "prettier": "@github/prettier-config",
   "browserslist": "extends @github/browserslist-config"

package/static/arguments.json

@@ -3034,7 +3034,7 @@
         "name": "size",
         "type": "Integer",
         "default": "`20`",
-        "description": "One of `16`, `20`, `24`, `32`, `40`, `48`, or `80`."
+        "description": "One of `16`, `20`, `24`, `32`, `40`, `48`, `64`, or `80`."
       },
       {
         "name": "shape",
@@ -3631,12 +3631,6 @@
         "default": "N/A",
         "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
       },
-      {
-        "name": "wrapper_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "Optional keyword arguments to be passed to the wrapper `<div>` tag."
-      },
       {
         "name": "scheme",
         "type": "Symbol",

package/static/classes.json

@@ -218,9 +218,6 @@
   "Button-visual": [
     "Primer::Beta::Button"
   ],
-  "Button-withTooltip": [
-    "Primer::Beta::Button"
-  ],
   "ButtonGroup": [
     "Primer::Beta::ButtonGroup"
   ],
@@ -254,6 +251,9 @@
   "FormControl-inlineValidation": [
     "Primer::Alpha::TextField"
   ],
+  "FormControl-inlineValidation--success": [
+    "Primer::Alpha::TextField"
+  ],
   "FormControl-inlineValidation--visual": [
     "Primer::Alpha::TextField"
   ],

package/static/constants.json

@@ -709,6 +709,7 @@
       32,
       40,
       48,
+      64,
       80
     ],
     "SMALL_THRESHOLD": 24

package/static/info_arch.json

@@ -5438,7 +5438,32 @@
 
     ],
     "previews": [
-
+      {
+        "preview_path": "primer/alpha/octicon_symbols/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/octicon_symbols/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
     ],
     "subcomponents": [
 
@@ -7972,6 +7997,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/text_field/with_auto_check_accepted",
+        "name": "with_auto_check_accepted",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/text_field/with_auto_check_error",
         "name": "with_auto_check_error",
@@ -9233,7 +9271,7 @@
         "name": "size",
         "type": "Integer",
         "default": "`20`",
-        "description": "One of `16`, `20`, `24`, `32`, `40`, `48`, or `80`."
+        "description": "One of `16`, `20`, `24`, `32`, `40`, `48`, `64`, or `80`."
       },
       {
         "name": "shape",
@@ -9378,6 +9416,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/beta/avatar/size_64",
+        "name": "size_64",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/beta/avatar/size_80",
         "name": "size_80",
@@ -11909,12 +11960,6 @@
         "default": "N/A",
         "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
       },
-      {
-        "name": "wrapper_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "Optional keyword arguments to be passed to the wrapper `<div>` tag."
-      },
       {
         "name": "scheme",
         "type": "Symbol",

package/static/previews.json

@@ -1176,6 +1176,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/beta/avatar/size_64",
+        "name": "size_64",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/beta/avatar/size_80",
         "name": "size_80",
@@ -4471,6 +4484,40 @@
       }
     ]
   },
+  {
+    "name": "octicon_symbols",
+    "component": "OcticonSymbols",
+    "status": "alpha",
+    "lookup_path": "primer/alpha/octicon_symbols",
+    "examples": [
+      {
+        "preview_path": "primer/alpha/octicon_symbols/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/octicon_symbols/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ]
+  },
   {
     "name": "overlay",
     "component": "Overlay",
@@ -6131,6 +6178,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/text_field/with_auto_check_accepted",
+        "name": "with_auto_check_accepted",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/text_field/with_auto_check_error",
         "name": "with_auto_check_error",