studiokit-scaffolding-js 4.5.8 → 4.5.9-alpha.1

package/lib/components/Groups/CreateEditCopySaveButtons.js

@@ -11,8 +11,8 @@ var GroupCreateEditCopySaveButtons = function (_a) {
     var disabled = _a.disabled, cannotSave = _a.cannotSave, cannotSaveAndAddOwners = _a.cannotSaveAndAddOwners, canAddInstructors = _a.canAddInstructors, save = _a.save, cancel = _a.cancel;
     return (react_1.default.createElement("div", null,
         !!disabled && react_1.default.createElement(CircularProgress_1.default, { size: 30, className: "fr" }),
-        react_1.default.createElement(Button_1.default, { onClick: function () { return save(); }, color: "primary", className: "fr btn btn-primary" + (disabled ? ' visually-hidden' : ''), disabled: cannotSave() }, "Save"),
-        canAddInstructors && (react_1.default.createElement(Button_1.default, { onClick: function () { return save(true); }, color: "primary", className: "fr btn btn-primary mr1" + (disabled ? ' visually-hidden' : ''), disabled: cannotSaveAndAddOwners() }, "Save and Add Instructors")),
-        react_1.default.createElement(Button_1.default, { onClick: cancel, color: "primary", className: "fr btn mr1" + (disabled ? ' visually-hidden' : '') }, "Cancel")));
+        react_1.default.createElement(Button_1.default, { onClick: function () { return save(); }, className: "fr btn-primary" + (disabled ? ' visually-hidden' : ''), disabled: cannotSave() }, "Save"),
+        canAddInstructors && (react_1.default.createElement(Button_1.default, { onClick: function () { return save(true); }, className: "fr btn-primary mr1" + (disabled ? ' visually-hidden' : ''), disabled: cannotSaveAndAddOwners() }, "Save and Add Instructors")),
+        react_1.default.createElement(Button_1.default, { onClick: cancel, className: "fr btn-text mr1" + (disabled ? ' visually-hidden' : '') }, "Cancel")));
 };
 exports.GroupCreateEditCopySaveButtons = GroupCreateEditCopySaveButtons;

package/lib/components/SearchControls.js

@@ -24,10 +24,10 @@ var SearchControls = function (_a) {
             react_1.default.createElement(DateField_1.default, { id: "date", onChange: handleDateChange, label: "Date", "aria-label": "Active date", className: "fl-ns mw5-ns mr3-ns mb3 mb0-ns w-100-lt-xs date-align", value: dateString }))),
         react_1.default.createElement("div", { className: "fl-ns mt3-ns pt3-ns w-100-lt-xs" },
             canReadAnyGlobally && !!handleQueryAllChange && (react_1.default.createElement(react_bootstrap_1.FormCheck, { name: "queryAll", id: "queryAll", checked: queryAll, disabled: canReadAnyGlobally && !canReadSome, onChange: handleQueryAllChange, className: "fl-ns f6 mr2-ns mb3 mt2 w-100-lt-xs", label: react_1.default.createElement("span", { className: "b black" }, queryAllText || 'Search All') })),
-            react_1.default.createElement(Button_1.default, { color: "primary", className: "btn btn-primary fr-ns ml2-ns mb3 w-100-lt-xs", onClick: handleSearchClick },
+            react_1.default.createElement(Button_1.default, { className: "btn-primary fr-ns ml2-ns mb3 w-100-lt-xs", onClick: handleSearchClick },
                 react_1.default.createElement(Search_1.default, { className: "fill-white v-mid" }),
                 "Search"),
-            react_1.default.createElement(Button_1.default, { className: "btn btn-text color-pink fr-ns mb3 w-100-lt-xs", onClick: resetSearch },
+            react_1.default.createElement(Button_1.default, { className: "btn-text color-pink fr-ns mb3 w-100-lt-xs", onClick: resetSearch },
                 react_1.default.createElement(Autorenew_1.default, { className: "fill-pink v-mid" }),
                 "Reset"))));
 };

package/lib/components/UserRoles/Add.js

@@ -143,7 +143,7 @@ var UserRolesAdd = /** @class */ (function (_super) {
                 react_1.default.createElement(Select_1.RoleSelect, { options: roles, value: role, onChange: this.updateRole, labelVisible: true, popoverContentComponent: rolePopover, textForRole: textForRole })),
             react_1.default.createElement(react_bootstrap_1.Col, { xs: 12, sm: 2, className: "mt3-ns pt2-ns" },
                 isAddingUsersToRole && react_1.default.createElement(Inline_1.default, { className: "mr3" }),
-                !isAddingUsersToRole && (react_1.default.createElement(Button_1.default, { id: "userRolesAddButton", className: "btn btn-primary w-100-lt-xs", disabled: !identifiers || disabled, color: "primary", onClick: this.handleSubmit },
+                !isAddingUsersToRole && (react_1.default.createElement(Button_1.default, { id: "userRolesAddButton", className: "btn-primary w-100-lt-xs", disabled: !identifiers || disabled, onClick: this.handleSubmit },
                     react_1.default.createElement(AddCircle_1.default, { className: "v-mid" }),
                     "Add")),
                 react_1.default.createElement(AlertDialog_1.default, { isOpen: showErrorAlert, title: "Error Adding People to the " + entityName, description: react_1.default.createElement("div", { className: "pre-wrap" }, errorMessage), proceedText: "Got it. Thanks!", onProceed: this.closeErrorAlert, onCancel: this.closeErrorAlert })),

package/lib/css/components/_buttons.css

@@ -27,14 +27,30 @@ button,
 	}
 }
 
+button:focus,
+.btn:focus {
+	outline: none;
+}
+
 .stepper button,
-.btn {
+.stepper .btn {
 	&:focus {
 		outline: 5px auto -webkit-focus-ring-color !important;
 		outline-offset: -2px;
 	}
 }
 
+*[class*="btn-"]:not(.btn-link) {
+	padding: 0.5rem 0.75rem;
+	text-transform: capitalize;
+}
+
+a[class*="btn-"]:active,
+a[class*="btn-"]:focus,
+a[class*="btn-"]:active:focus {
+	text-decoration: none;
+}
+
 .btn span {
 	display: inline-block;
 	vertical-align: middle;
@@ -95,6 +111,31 @@ button,
 	}
 }
 
+/* Disabled */
+.btn-primary[disabled],
+.btn-disabled,
+.btn-disabled:hover {
+	background-color: var(--color-light-grey);
+	color: var(--color-dark-grey);
+}
+
+/* making disabled button color darker to meet accessibility standards */
+.MuiButton-root.Mui-disabled {
+	color: rgba(0, 0, 0, 0.6);
+}
+
+/* allow disabled buttons to have popovers */
+.MuiButtonBase-root.Mui-disabled.enable-popovers {
+	cursor: auto;
+	pointer-events: all;
+
+	&.MuiButton-outlinedPrimary {
+		&:hover {
+			border: 1px solid rgba(0, 0, 0, 0.12);
+		}
+	}
+}
+
 /* Bad */
 .btn-bad {
 	background-color: var(--color-pink);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "4.5.8",
+	"version": "4.5.9-alpha.1",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",