@stackoverflow/stacks 1.6.2 → 1.6.4

package/lib/css/components/inputs.less

@@ -609,34 +609,18 @@ fieldset {
     font-size: var(--fs-caption);
 }
 
-//  $$  SIZES
+//  $$  PADDING ADJUSTMENTS AND SIZES
 //  ----------------------------------------------------------------------------
 .s-input__sm,
 .s-textarea__sm,
 .s-select__sm > select {
     font-size: var(--fs-caption);
 }
-.s-input__md,
-.s-textarea__md,
-.s-select__md > select {
-    font-size: var(--fs-body3);
-}
-.s-input__lg,
-.s-textarea__lg,
-.s-select__lg > select {
-    font-size: var(--fs-title);
-}
-.s-input__xl,
-.s-textarea__xl,
-.s-select__xl > select {
-    font-size: var(--fs-headline1);
-}
 
-//  $$  PADDING ADJUSTMENTS WITHIN SIZES
-//  ----------------------------------------------------------------------------
 .s-input__md,
 .s-textarea__md,
 .s-select__md > select {
+    font-size: var(--fs-body3);
     padding-top: 0.5em;
     padding-bottom: 0.5em;
     border-radius: calc(var(--br-sm) + 1px);
@@ -650,6 +634,7 @@ fieldset {
 .s-input__lg,
 .s-textarea__lg,
 .s-select__lg > select {
+    font-size: var(--fs-title);
     padding: 0.45em 0.6em;
     border-radius: calc(var(--br-sm) + 1px);
 }
@@ -657,6 +642,7 @@ fieldset {
 .s-input__xl,
 .s-textarea__xl,
 .s-select__xl > select {
+    font-size: var(--fs-headline1);
     padding: 0.4em 0.5em;
     border-radius: var(--br-md);
 }

package/lib/css/components/labels.less

@@ -37,7 +37,7 @@
     // Label status flag
     // Is this form item required or optional? Flag the status for users.
     // Default styling is optional.
-    & &--status {
+    &--status { // TODO convert to require parent class for styling [1]
         --_la-status-b: none;
         --_la-status-bg: var(--black-050);
         --_la-status-fc: var(--fc-medium);
@@ -96,3 +96,8 @@
     font-weight: 600;
     padding: 0 var(--su2); // Helps the label visually line up with inputs
 }
+
+// [1] In Core, we have *many* instances of `.s-label--status` used without the `.s-label` parent.
+//     While I'd prefer to enforce the requirement of the parent class, it's too much of a lift at this moment.
+//     We'll come back to it, hopefully when we have a pill component to replace the current usage of `.s-label--status`
+//     without the base label class.

package/lib/css/components/pagination.less

@@ -1,5 +1,5 @@
 .s-pagination {
-   & &--item {
+    & &--item {
         --_pa-item-bg: transparent;
         --_pa-item-bc: var(--bc-medium);
         --_pa-item-fc: var(--fc-medium);

package/lib/css/components/popovers.less

@@ -17,7 +17,7 @@
     --_po-arrow-after-r: unset;
     --_po-arrow-after-t: unset;
     --_po-arrow-after-bs: unset;
-  
+
     // CONTEXTUAL STYLES
     .dark-mode({
         --_po-bg: var(--black-075);
@@ -25,7 +25,7 @@
         --_po-bs: var(--bs-lg);
         --_po-arrow-fc: var(--black-075);
     });
-  
+
     // MODIFIERS
     &.is-visible {
         --_po-d: block;
@@ -34,7 +34,7 @@
         --_po-wmn: unset;
         --_po-w: auto;
     }
-  
+
     // CHILD ELEMENTS
     // Arrow
     &[data-popper-placement^="top"] > &--arrow,
@@ -128,14 +128,14 @@
         right: calc(var(--su8) * -1); // Compensate for s-popover's padding
         padding: var(--su8) !important;
     }
-  
+
     background-color: var(--_po-bg);
     border: 1px solid var(--_po-bc);
     box-shadow: var(--_po-bs);
     display: var(--_po-d);
     min-width: var(--_po-wmn);
     width: var(--_po-w);
-  
+
     border-radius: var(--br-md);
     color: var(--fc-dark);
     font-size: var(--fs-body1);
@@ -144,5 +144,4 @@
     position: absolute;
     white-space: normal; // Guard against popovers being in a container with white-space: nowrap. Without this, the content pops *out* of the popover.
     z-index: var(--zi-popovers);
-  }
-  
+}

package/lib/ts/controllers/index.ts

@@ -1,8 +1,15 @@
 // export all controllers *with helpers* so they can be bulk re-exported by the package entry point
-export { ExpandableController } from './s-expandable-control';
-export { hideModal, ModalController, showModal } from './s-modal';
-export { TabListController } from './s-navigation-tablist';
-export { attachPopover, detachPopover, hidePopover, BasePopoverController, PopoverController, showPopover } from './s-popover';
-export { TableController } from './s-table';
-export { setTooltipHtml, setTooltipText, TooltipController } from './s-tooltip';
-export { UploaderController } from './s-uploader';
+export { ExpandableController } from "./s-expandable-control";
+export { hideModal, ModalController, showModal } from "./s-modal";
+export { TabListController } from "./s-navigation-tablist";
+export {
+    attachPopover,
+    detachPopover,
+    hidePopover,
+    BasePopoverController,
+    PopoverController,
+    showPopover,
+} from "./s-popover";
+export { TableController } from "./s-table";
+export { setTooltipHtml, setTooltipText, TooltipController } from "./s-tooltip";
+export { UploaderController } from "./s-uploader";

package/lib/ts/controllers/s-expandable-control.ts

@@ -1,4 +1,4 @@
-import * as Stacks from '../stacks';
+import * as Stacks from "../stacks";
 
 // Radio buttons only trigger a change event when they're *checked*, but not when
 // they're *unchecked*. Therefore, if we have an active `s-expandable-control` in
@@ -12,10 +12,15 @@ const RADIO_OFF_EVENT = "s-expandable-control:radio-off";
 
 function globalChangeListener(e: UIEvent) {
     const target = e.target;
-    if (!(target instanceof HTMLInputElement) || target.nodeName !== "INPUT" || target.type !== "radio") {
+    if (
+        !(target instanceof HTMLInputElement) ||
+        target.nodeName !== "INPUT" ||
+        target.type !== "radio"
+    ) {
         return;
     }
-    document.querySelectorAll('input[type="radio"][name="' + target.name + '"]')
+    document
+        .querySelectorAll('input[type="radio"][name="' + target.name + '"]')
         .forEach(function (other) {
             if (other === e.target) {
                 return;
@@ -37,12 +42,18 @@ function globalChangeListenerRequired(required: boolean) {
     if (required) {
         refCount++;
         if (refCount === 1) {
-            document.body.addEventListener("change", globalChangeListener as EventListener);
+            document.body.addEventListener(
+                "change",
+                globalChangeListener as EventListener
+            );
         }
     } else {
         refCount--;
         if (refCount === 0) {
-            document.body.removeEventListener("change", globalChangeListener as EventListener);
+            document.body.removeEventListener(
+                "change",
+                globalChangeListener as EventListener
+            );
         }
     }
 }
@@ -55,7 +66,12 @@ export class ExpandableController extends Stacks.StacksController {
     private lastKeydownClickTimestamp = 0;
 
     initialize() {
-        if (this.element.nodeName === "INPUT" && ["radio", "checkbox"].indexOf((<HTMLInputElement>this.element).type) >= 0) {
+        if (
+            this.element.nodeName === "INPUT" &&
+            ["radio", "checkbox"].indexOf(
+                (<HTMLInputElement>this.element).type
+            ) >= 0
+        ) {
             this.isCollapsed = this._isCollapsedForCheckable.bind(this);
             this.events = ["change", RADIO_OFF_EVENT];
             this.isCheckable = true;
@@ -65,40 +81,41 @@ export class ExpandableController extends Stacks.StacksController {
             this.events = ["click", "keydown"];
         }
         this.listener = this.listener.bind(this);
-    };
-
+    }
 
     // for non-checkable elements, the initial source of truth is the collapsed/expanded
     // state of the controlled element (unless the element doesn't exist)
     _isCollapsedForClickable() {
         const cc = this.controlledExpandables;
         // the element is considered collapsed if *any* target element is collapsed
-        return cc.length > 0 ? !cc.every(element => element.classList.contains("is-expanded")) : this.element.getAttribute("aria-expanded") === "false";
-    };
+        return cc.length > 0
+            ? !cc.every((element) => element.classList.contains("is-expanded"))
+            : this.element.getAttribute("aria-expanded") === "false";
+    }
 
     // for checkable elements, the initial source of truth is the checked state
     _isCollapsedForCheckable() {
         return !(<HTMLInputElement>this.element).checked;
-    };
-
+    }
 
     get controlledExpandables() {
         const attr = this.element.getAttribute("aria-controls");
         if (!attr) {
             throw `[aria-controls="targetId1 ... targetIdN"] attribute required`;
         }
-        const result = attr.split(/\s+/g)
-            .map(s => document.getElementById(s))
+        const result = attr
+            .split(/\s+/g)
+            .map((s) => document.getElementById(s))
             .filter((e): e is HTMLElement => !!e);
         if (!result.length) {
-            throw "couldn't find controls"
+            throw "couldn't find controls";
         }
         return result;
-    };
+    }
 
     _dispatchShowHideEvent(isShow: boolean) {
         this.triggerEvent(isShow ? "show" : "hide");
-    };
+    }
 
     _toggleClass(doAdd: boolean) {
         if (!this.data.has("toggle-class")) {
@@ -107,22 +124,30 @@ export class ExpandableController extends Stacks.StacksController {
         const cl = this.element.classList;
         const toggleClass = this.data.get("toggle-class");
         if (!toggleClass) {
-            throw "couldn't find toggle class"
+            throw "couldn't find toggle class";
         }
         toggleClass.split(/\s+/).forEach(function (cls) {
             cl.toggle(cls, !!doAdd);
         });
-    };
+    }
 
     listener(e: Event) {
         let newCollapsed;
         if (this.isCheckable) {
             newCollapsed = !(<HTMLInputElement>this.element).checked;
         } else {
-            if (e.type == "keydown" && (e instanceof KeyboardEvent && e.keyCode != 13 && e.keyCode != 32)) {
+            if (
+                e.type == "keydown" &&
+                e instanceof KeyboardEvent &&
+                e.keyCode != 13 &&
+                e.keyCode != 32
+            ) {
                 return;
             }
-            if (e.target !== e.currentTarget && ["A", "BUTTON"].indexOf((<HTMLElement>e.target).nodeName) >= 0) {
+            if (
+                e.target !== e.currentTarget &&
+                ["A", "BUTTON"].indexOf((<HTMLElement>e.target).nodeName) >= 0
+            ) {
                 return;
             }
 
@@ -133,24 +158,31 @@ export class ExpandableController extends Stacks.StacksController {
             // doesn't guarantee it.
             if (e.type == "keydown") {
                 this.lastKeydownClickTimestamp = Date.now();
-            } else if (e.type == "click" && Date.now() - this.lastKeydownClickTimestamp < 300) {
+            } else if (
+                e.type == "click" &&
+                Date.now() - this.lastKeydownClickTimestamp < 300
+            ) {
                 return;
             }
-            newCollapsed = this.element.getAttribute("aria-expanded") === "true";
+            newCollapsed =
+                this.element.getAttribute("aria-expanded") === "true";
             if (e.type === "click") {
                 (<HTMLInputElement>this.element).blur();
             }
         }
-        this.element.setAttribute("aria-expanded", newCollapsed ? "false" : "true");
+        this.element.setAttribute(
+            "aria-expanded",
+            newCollapsed ? "false" : "true"
+        );
         for (const controlledElement of this.controlledExpandables) {
             controlledElement.classList.toggle("is-expanded", !newCollapsed);
         }
         this._dispatchShowHideEvent(!newCollapsed);
         this._toggleClass(!newCollapsed);
-    };
+    }
 
     connect() {
-        this.events.forEach(e => {
+        this.events.forEach((e) => {
             this.element.addEventListener(e, this.listener.bind(this));
         }, this);
 
@@ -163,31 +195,44 @@ export class ExpandableController extends Stacks.StacksController {
         // Note: aria-expanded is currently an invalid attribute on radio elements
         // Support for aria-expanded is being debated by the W3C https://github.com/w3c/aria/issues/1404 as recently as June 2022
         if (!this.isRadio) {
-            this.element.setAttribute("aria-expanded", this.isCollapsed() ? "false" : "true");
+            this.element.setAttribute(
+                "aria-expanded",
+                this.isCollapsed() ? "false" : "true"
+            );
         }
         if (this.isCheckable) {
             const cc = this.controlledExpandables;
             if (cc.length) {
                 const expected = !this.isCollapsed();
                 // if any element does not match the expected state, set them all to the expected state
-                if (cc.some(element => element.classList.contains("is-expanded") !== expected)) {
-                    for (const controlledElement of this.controlledExpandables) {
-                        controlledElement.classList.toggle("is-expanded", expected);
+                if (
+                    cc.some(
+                        (element) =>
+                            element.classList.contains("is-expanded") !==
+                            expected
+                    )
+                ) {
+                    for (const controlledElement of this
+                        .controlledExpandables) {
+                        controlledElement.classList.toggle(
+                            "is-expanded",
+                            expected
+                        );
                     }
                     this._dispatchShowHideEvent(expected);
                     this._toggleClass(expected);
                 }
             }
         }
-    };
+    }
 
     disconnect() {
-        this.events.forEach(e => {
+        this.events.forEach((e) => {
             this.element.removeEventListener(e, this.listener.bind(this));
         }, this);
 
         if (this.isRadio) {
             globalChangeListenerRequired(false);
         }
-    };
-}
+    }
+}