@mixtint/primer-view-components 0.72.0

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

@@ -0,0 +1,27 @@
+import type { AnchorAlignment, AnchorSide, PositionSettings } from '@primer/behaviors';
+export default class AnchoredPositionElement extends HTMLElement implements PositionSettings {
+    #private;
+    get align(): AnchorAlignment;
+    set align(value: AnchorAlignment);
+    get side(): AnchorSide;
+    set side(value: AnchorSide);
+    get anchorOffset(): number;
+    set anchorOffset(value: number | 'normal' | 'spacious');
+    get anchor(): string;
+    set anchor(value: string);
+    get anchorElement(): HTMLElement | null;
+    set anchorElement(value: HTMLElement | null);
+    get alignmentOffset(): number;
+    set alignmentOffset(value: number);
+    get allowOutOfBounds(): boolean;
+    set allowOutOfBounds(value: boolean);
+    connectedCallback(): void;
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    update(): void;
+}
+declare global {
+    interface Window {
+        AnchoredPositionElement: typeof AnchoredPositionElement;
+    }
+}

package/app/components/primer/anchored_position.js

@@ -0,0 +1,159 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _AnchoredPositionElement_anchorElement, _AnchoredPositionElement_animationFrame;
+import { getAnchoredPosition } from '@primer/behaviors';
+const updateWhenVisible = (() => {
+    const anchors = new Set();
+    let intersectionObserver = null;
+    let resizeObserver = null;
+    function updateVisibleAnchors() {
+        for (const anchor of anchors) {
+            anchor.update();
+        }
+    }
+    return (el) => {
+        // eslint-disable-next-line github/prefer-observers
+        window.addEventListener('resize', updateVisibleAnchors);
+        // eslint-disable-next-line github/prefer-observers
+        window.addEventListener('scroll', updateVisibleAnchors);
+        intersectionObserver || (intersectionObserver = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                const target = entry.target;
+                if (entry.isIntersecting) {
+                    target.update();
+                    anchors.add(target);
+                }
+                else {
+                    anchors.delete(target);
+                }
+            }
+        }));
+        resizeObserver || (resizeObserver = new ResizeObserver(() => {
+            for (const anchor of anchors) {
+                anchor.update();
+            }
+        }));
+        resizeObserver.observe(el.ownerDocument.documentElement);
+        intersectionObserver.observe(el);
+    };
+})();
+class AnchoredPositionElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _AnchoredPositionElement_anchorElement.set(this, null);
+        _AnchoredPositionElement_animationFrame.set(this, void 0);
+    }
+    get align() {
+        const value = this.getAttribute('align');
+        if (value === 'center' || value === 'end')
+            return value;
+        return 'start';
+    }
+    set align(value) {
+        this.setAttribute('align', `${value}`);
+    }
+    get side() {
+        const value = this.getAttribute('side');
+        if (value === 'inside-top' ||
+            value === 'inside-bottom' ||
+            value === 'inside-left' ||
+            value === 'inside-right' ||
+            value === 'inside-center' ||
+            value === 'outside-top' ||
+            value === 'outside-left' ||
+            value === 'outside-right') {
+            return value;
+        }
+        return 'outside-bottom';
+    }
+    set side(value) {
+        this.setAttribute('side', `${value}`);
+    }
+    get anchorOffset() {
+        const alias = this.getAttribute('anchor-offset');
+        if (alias === 'spacious' || alias === '8')
+            return 8;
+        return 4;
+    }
+    set anchorOffset(value) {
+        this.setAttribute('anchor-offset', `${value}`);
+    }
+    get anchor() {
+        return this.getAttribute('anchor') || '';
+    }
+    set anchor(value) {
+        this.setAttribute('anchor', `${value}`);
+    }
+    get anchorElement() {
+        if (__classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f"))
+            return __classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f");
+        const idRef = this.anchor;
+        if (!idRef)
+            return null;
+        return this.ownerDocument.getElementById(idRef);
+    }
+    set anchorElement(value) {
+        __classPrivateFieldSet(this, _AnchoredPositionElement_anchorElement, value, "f");
+        if (!__classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f")) {
+            this.removeAttribute('anchor');
+        }
+    }
+    get alignmentOffset() {
+        return Number(this.getAttribute('alignment-offset'));
+    }
+    set alignmentOffset(value) {
+        this.setAttribute('alignment-offset', `${value}`);
+    }
+    get allowOutOfBounds() {
+        return this.hasAttribute('allow-out-of-bounds');
+    }
+    set allowOutOfBounds(value) {
+        this.toggleAttribute('allow-out-of-bounds', value);
+    }
+    connectedCallback() {
+        this.update();
+        this.addEventListener('beforetoggle', () => this.update());
+        updateWhenVisible(this);
+    }
+    attributeChangedCallback() {
+        this.update();
+    }
+    update() {
+        if (!this.isConnected)
+            return;
+        cancelAnimationFrame(__classPrivateFieldGet(this, _AnchoredPositionElement_animationFrame, "f"));
+        __classPrivateFieldSet(this, _AnchoredPositionElement_animationFrame, requestAnimationFrame(() => {
+            const anchor = this.anchorElement;
+            this.classList.toggle('not-anchored', !anchor);
+            if (anchor) {
+                const { left, top } = getAnchoredPosition(this, anchor, this);
+                this.style.top = `${top}px`;
+                this.style.left = `${left}px`;
+                this.style.bottom = 'auto';
+                this.style.right = 'auto';
+            }
+            else {
+                this.style.top = '0';
+                this.style.left = '0';
+                this.style.bottom = '0';
+                this.style.right = '0';
+            }
+        }), "f");
+    }
+}
+_AnchoredPositionElement_anchorElement = new WeakMap(), _AnchoredPositionElement_animationFrame = new WeakMap();
+AnchoredPositionElement.observedAttributes = ['align', 'side', 'anchor', 'alignment-offset', 'allow-out-of-bounds'];
+export default AnchoredPositionElement;
+if (!customElements.get('anchored-position')) {
+    window.AnchoredPositionElement = AnchoredPositionElement;
+    customElements.define('anchored-position', AnchoredPositionElement);
+}

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

@@ -0,0 +1 @@
+import '@github/auto-complete-element';

package/app/components/primer/beta/auto_complete/auto_complete.js

@@ -0,0 +1 @@
+import '@github/auto-complete-element';

package/app/components/primer/beta/avatar.css

@@ -0,0 +1,77 @@
+/* avatar */
+
+.avatar {
+  display: inline-block;
+  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 1;
+  vertical-align: middle;
+  background-color: var(--avatar-bgColor); /* adds opaque bg to transparent avatars */
+  border-radius: var(--borderRadius-medium);
+  flex-shrink: 0;
+  /* stylelint-disable-next-line primer/box-shadow */
+  box-shadow: 0 0 0 1px var(--avatar-borderColor);
+}
+
+.avatar-link {
+  float: left;
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 1;
+}
+
+/* User for example on /stars and /user for grids of avatars */
+
+.avatar-group-item {
+  display: inline-block;
+  margin-bottom: var(--base-size-4);
+}
+
+/* Border radius */
+
+.avatar-1,
+.avatar-2,
+.avatar-small {
+  border-radius: var(--borderRadius-small);
+}
+
+/* Sizes */
+
+.avatar-1 {
+  width: var(--base-size-16);
+  height: var(--base-size-16);
+}
+
+.avatar-2 {
+  width: var(--base-size-20);
+  height: var(--base-size-20);
+}
+
+.avatar-3 {
+  width: var(--base-size-24);
+  height: var(--base-size-24);
+}
+
+.avatar-4 {
+  width: var(--base-size-28);
+  height: var(--base-size-28);
+}
+
+.avatar-5 {
+  width: var(--base-size-32);
+  height: var(--base-size-32);
+}
+
+.avatar-6 {
+  width: var(--base-size-40);
+  height: var(--base-size-40);
+}
+
+.avatar-7 {
+  width: var(--base-size-48);
+  height: var(--base-size-48);
+}
+
+.avatar-8 {
+  width: var(--base-size-64);
+  height: var(--base-size-64);
+}

package/app/components/primer/beta/avatar.css.json

@@ -0,0 +1,17 @@
+{
+  "name": "beta/avatar",
+  "selectors": [
+    ".avatar",
+    ".avatar-link",
+    ".avatar-group-item",
+    ".avatar-1",
+    ".avatar-2",
+    ".avatar-small",
+    ".avatar-3",
+    ".avatar-4",
+    ".avatar-5",
+    ".avatar-6",
+    ".avatar-7",
+    ".avatar-8"
+  ]
+}

package/app/components/primer/beta/avatar_stack.css

@@ -0,0 +1,145 @@
+/* AvatarStack */
+
+/* Stacked avatars can be used to show who is participating in thread when
+** there is limited space available. */
+
+.AvatarStack {
+  position: relative;
+  min-width: 26px;
+  height: 20px;
+}
+
+.AvatarStack .AvatarStack-body {
+    position: absolute;
+  }
+
+.AvatarStack.AvatarStack--two {
+    min-width: 36px;
+  }
+
+.AvatarStack.AvatarStack--three-plus {
+    min-width: 46px;
+  }
+
+.AvatarStack-body {
+  display: flex;
+  background: var(--bgColor-default);
+  /* stylelint-disable-next-line primer/borders */
+  border-radius: 100px;
+}
+
+.AvatarStack-body .avatar {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    width: 20px;
+    height: 20px;
+    box-sizing: content-box;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-right: -11px;
+    background-color: var(--bgColor-default);
+    /* stylelint-disable-next-line primer/colors */
+    border-right: var(--borderWidth-thin) solid var(--bgColor-default);
+    border-radius: var(--borderRadius-small);
+    box-shadow: none;
+    transition: margin 0.1s ease-in-out;
+  }
+
+:is(.AvatarStack-body .avatar):first-child {
+      z-index: 3;
+    }
+
+:is(.AvatarStack-body .avatar):last-child {
+      z-index: 1;
+      border-right: 0;
+    }
+
+/* stylelint-disable-next-line selector-max-type */
+
+:is(.AvatarStack-body .avatar) img {
+      border-radius: var(--borderRadius-small);
+    }
+
+/* Account for 4+ avatars */
+
+:is(.AvatarStack-body .avatar):nth-child(n + 4) {
+      display: none;
+      opacity: 0;
+    }
+
+.AvatarStack-body:hover .avatar {
+      margin-right: var(--base-size-4);
+    }
+
+.AvatarStack-body:hover .avatar:nth-child(n + 4) {
+      display: flex;
+      opacity: 1;
+    }
+
+.AvatarStack-body:hover .avatar-more {
+      display: none !important;
+    }
+
+.avatar.avatar-more {
+  z-index: 1;
+  margin-right: 0;
+  background: var(--bgColor-muted);
+}
+
+.avatar.avatar-more::before,.avatar.avatar-more::after {
+    position: absolute;
+    display: block;
+    height: 20px;
+    content: '';
+    /* stylelint-disable-next-line primer/borders */
+    border-radius: 2px;
+    outline: var(--borderWidth-thin) solid var(--bgColor-default);
+  }
+
+.avatar.avatar-more::before {
+    width: 17px;
+    background: var(--avatarStack-fade-bgColor-muted);
+  }
+
+.avatar.avatar-more::after {
+    width: 14px;
+    background: var(--avatarStack-fade-bgColor-default);
+  }
+
+/* Right aligned variation */
+
+.AvatarStack--right .AvatarStack-body {
+    right: 0;
+    flex-direction: row-reverse;
+  }
+
+:is(.AvatarStack--right .AvatarStack-body):hover .avatar {
+      margin-right: 0;
+      margin-left: var(--base-size-4);
+    }
+
+:is(.AvatarStack--right .AvatarStack-body) .avatar:not(:last-child) {
+      border-left: 0;
+    }
+
+.AvatarStack--right .avatar.avatar-more {
+    background: var(--avatarStack-fade-bgColor-default);
+  }
+
+:is(.AvatarStack--right .avatar.avatar-more)::before {
+      width: 5px;
+    }
+
+:is(.AvatarStack--right .avatar.avatar-more)::after {
+      width: 2px;
+      background: var(--bgColor-muted);
+    }
+
+.AvatarStack--right .avatar {
+    margin-right: 0;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-left: -11px;
+    border-right: 0;
+    /* stylelint-disable-next-line primer/colors */
+    border-left: var(--borderWidth-thin) solid var(--bgColor-default);
+  }

package/app/components/primer/beta/avatar_stack.css.json

@@ -0,0 +1,28 @@
+{
+  "name": "beta/avatar_stack",
+  "selectors": [
+    ".AvatarStack",
+    ".AvatarStack .AvatarStack-body",
+    ".AvatarStack.AvatarStack--two",
+    ".AvatarStack.AvatarStack--three-plus",
+    ".AvatarStack-body",
+    ".AvatarStack-body .avatar",
+    ":is(.AvatarStack-body .avatar):first-child",
+    ":is(.AvatarStack-body .avatar):last-child",
+    ":is(.AvatarStack-body .avatar) img",
+    ":is(.AvatarStack-body .avatar):nth-child(n + 4)",
+    ".AvatarStack-body:hover .avatar",
+    ".AvatarStack-body:hover .avatar:nth-child(n + 4)",
+    ".AvatarStack-body:hover .avatar-more",
+    ".avatar.avatar-more",
+    ".avatar.avatar-more::before",
+    ".avatar.avatar-more::after",
+    ".AvatarStack--right .AvatarStack-body",
+    ":is(.AvatarStack--right .AvatarStack-body):hover .avatar",
+    ":is(.AvatarStack--right .AvatarStack-body) .avatar:not(:last-child)",
+    ".AvatarStack--right .avatar.avatar-more",
+    ":is(.AvatarStack--right .avatar.avatar-more)::before",
+    ":is(.AvatarStack--right .avatar.avatar-more)::after",
+    ".AvatarStack--right .avatar"
+  ]
+}

package/app/components/primer/beta/blankslate.css

@@ -0,0 +1,168 @@
+/* blankslate */
+
+.blankslate-container {
+  container-type: inline-size;
+  width: 100%;
+}
+
+.blankslate {
+  --blankslate-outer-padding-block: var(--base-size-32);
+  --blankslate-outer-padding-inline: var(--base-size-32);
+
+  position: relative;
+  /* stylelint-disable-next-line primer/spacing */
+  padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);
+  text-align: center;
+
+  /* stylelint-disable-next-line selector-max-type */
+}
+
+.blankslate p {
+    font-size: var(--text-body-size-large);
+    color: var(--fgColor-muted);
+  }
+
+/* stylelint-disable-next-line selector-max-type */
+
+.blankslate code {
+    padding: var(--base-size-2) var(--base-size-4) var(--base-size-4);
+    font-size: var(--text-body-size-medium);
+    background: var(--bgColor-default);
+    border: var(--borderWidth-thin) solid var(--borderColor-muted);
+    border-radius: var(--borderRadius-medium);
+  }
+
+/* stylelint-disable-next-line selector-max-type */
+
+.blankslate img {
+    width: 56px;
+    height: 56px;
+  }
+
+.blankslate-icon {
+  /* stylelint-disable-next-line primer/spacing */
+  margin-right: var(--control-small-gap);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-bottom: var(--stack-gap-condensed);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-left: var(--control-small-gap);
+  color: var(--fgColor-muted);
+}
+
+.blankslate-image {
+  /* stylelint-disable-next-line primer/spacing */
+  margin-bottom: var(--stack-gap-normal);
+}
+
+.blankslate-heading {
+  margin-bottom: var(--base-size-4);
+  font-size: var(--text-title-size-medium);
+  font-weight: var(--text-title-weight-medium);
+}
+
+.blankslate-action {
+  /* stylelint-disable-next-line primer/spacing */
+  margin-top: var(--stack-gap-normal);
+}
+
+.blankslate-action:first-of-type {
+    /* stylelint-disable-next-line primer/spacing */
+    margin-top: var(--stack-gap-spacious);
+  }
+
+.blankslate-action:last-of-type {
+    /* stylelint-disable-next-line primer/spacing */
+    margin-bottom: var(--stack-gap-condensed);
+  }
+
+.blankslate-capped {
+  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
+}
+
+.blankslate-spacious {
+  --blankslate-outer-padding-block: var(--base-size-80);
+  --blankslate-outer-padding-inline: var(--base-size-40);
+}
+
+.blankslate-narrow {
+  max-width: 485px;
+  margin: 0 auto;
+}
+
+/* was .large-format
+** QUESTION: should we deprecate this? */
+
+/* stylelint-disable-next-line selector-max-type */
+
+.blankslate-large img {
+    width: 80px;
+    height: 80px;
+  }
+
+/* stylelint-disable-next-line selector-max-type */
+
+.blankslate-large h3 {
+    /* stylelint-disable-next-line primer/spacing */
+    margin: var(--stack-gap-normal) 0;
+
+    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
+    /* stylelint-disable-next-line primer/typography */
+    font-size: 24px;
+  }
+
+/* stylelint-disable-next-line selector-max-type */
+
+.blankslate-large p {
+    font-size: var(--text-body-size-large);
+  }
+
+/* was .clean-background
+** TO DO: deprecate this and use utility instead */
+
+.blankslate-clean-background {
+  border: 0;
+}
+
+/* At the time these styles were written,
+   `34rem` was our "small" breakpoint width */
+
+@container (max-width: 34rem) {
+  .blankslate {
+    --blankslate-outer-padding-block: var(--base-size-20);
+    --blankslate-outer-padding-inline: var(--base-size-20);
+  }
+
+  .blankslate-spacious {
+    --blankslate-outer-padding-block: var(--base-size-44);
+    --blankslate-outer-padding-inline: var(--base-size-28);
+  }
+
+  .blankslate-icon {
+    /* stylelint-disable-next-line primer/spacing */
+    margin-bottom: var(--stack-gap-condensed);
+  }
+
+  .blankslate-heading {
+    font-size: var(--text-title-size-small);
+  }
+
+  /* stylelint-disable-next-line selector-max-type */
+  .blankslate p {
+    font-size: var(--text-body-size-medium);
+  }
+
+  .blankslate-action {
+    /* stylelint-disable-next-line primer/spacing */
+    margin-top: var(--stack-gap-condensed);
+  }
+
+    .blankslate-action:first-of-type {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-top: var(--stack-gap-normal);
+    }
+
+    .blankslate-action:last-of-type {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-bottom: calc(var(--stack-gap-condensed) / 2);
+    }
+}

package/app/components/primer/beta/blankslate.css.json

@@ -0,0 +1,23 @@
+{
+  "name": "beta/blankslate",
+  "selectors": [
+    ".blankslate-container",
+    ".blankslate",
+    ".blankslate p",
+    ".blankslate code",
+    ".blankslate img",
+    ".blankslate-icon",
+    ".blankslate-image",
+    ".blankslate-heading",
+    ".blankslate-action",
+    ".blankslate-action:first-of-type",
+    ".blankslate-action:last-of-type",
+    ".blankslate-capped",
+    ".blankslate-spacious",
+    ".blankslate-narrow",
+    ".blankslate-large img",
+    ".blankslate-large h3",
+    ".blankslate-large p",
+    ".blankslate-clean-background"
+  ]
+}