primer_view_components 0.0.70 → 0.0.73

data/app/components/primer/alpha/{tooltip.d.ts → tool-tip-element.d.ts}

@@ -1,5 +1,5 @@
 declare type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw';
-declare class TooltipElement extends HTMLElement {
+declare class ToolTipElement extends HTMLElement {
     #private;
     styles(): string;
     get htmlFor(): string;
@@ -9,7 +9,6 @@ declare class TooltipElement extends HTMLElement {
     get direction(): Direction;
     set direction(value: Direction);
     get control(): HTMLElement | null;
-    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleEvent(event: Event): void;
@@ -18,7 +17,7 @@ declare class TooltipElement extends HTMLElement {
 }
 declare global {
     interface Window {
-        TooltipElement: typeof TooltipElement;
+        ToolTipElement: typeof ToolTipElement;
     }
 }
 export {};

data/app/components/primer/alpha/{tooltip.js → tool-tip-element.js}

@@ -9,10 +9,10 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _TooltipElement_instances, _TooltipElement_abortController, _TooltipElement_align, _TooltipElement_side, _TooltipElement_allowUpdatePosition, _TooltipElement_adjustedAnchorAlignment, _TooltipElement_updatePosition;
+var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updatePosition;
 import { getAnchoredPosition } from '@primer/behaviors';
 const TOOLTIP_OPEN_CLASS = 'tooltip-open';
-const TOOLTIP_ARROW_EDGE_OFFSET = 10;
+const TOOLTIP_ARROW_EDGE_OFFSET = 6;
 const DIRECTION_CLASSES = [
     'tooltip-n',
     'tooltip-s',
@@ -23,21 +23,14 @@ const DIRECTION_CLASSES = [
     'tooltip-nw',
     'tooltip-sw'
 ];
-class TooltipElement extends HTMLElement {
+class ToolTipElement extends HTMLElement {
     constructor() {
-        super();
-        _TooltipElement_instances.add(this);
-        _TooltipElement_abortController.set(this, void 0);
-        _TooltipElement_align.set(this, 'center');
-        _TooltipElement_side.set(this, 'outside-bottom');
-        _TooltipElement_allowUpdatePosition.set(this, false);
-        const shadow = this.attachShadow({ mode: 'open' });
-        shadow.innerHTML = `
-      <style>
-        ${this.styles()}
-      </style>
-      <slot></slot>
-    `;
+        super(...arguments);
+        _ToolTipElement_instances.add(this);
+        _ToolTipElement_abortController.set(this, void 0);
+        _ToolTipElement_align.set(this, 'center');
+        _ToolTipElement_side.set(this, 'outside-bottom');
+        _ToolTipElement_allowUpdatePosition.set(this, false);
     }
     styles() {
         return `
@@ -103,13 +96,13 @@ class TooltipElement extends HTMLElement {
       :host(.tooltip-s):before,
       :host(.tooltip-n):before {
         right: 50%;
+        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
       }
 
       :host(.tooltip-s):before,
       :host(.tooltip-se):before,
       :host(.tooltip-sw):before {
         bottom: 100%;
-        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
         border-bottom-color: var(--color-neutral-emphasis-plus)
       }
       
@@ -123,7 +116,6 @@ class TooltipElement extends HTMLElement {
       :host(.tooltip-ne):before,
       :host(.tooltip-nw):before {
         top: 100%;
-        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
         border-top-color: var(--color-neutral-emphasis-plus)
       }
       
@@ -186,27 +178,37 @@ class TooltipElement extends HTMLElement {
     }
     connectedCallback() {
         var _a;
+        if (!this.shadowRoot) {
+            const shadow = this.attachShadow({ mode: 'open' });
+            shadow.innerHTML = `
+        <style>
+          ${this.styles()}
+        </style>
+        <slot></slot>
+      `;
+        }
         this.hidden = true;
-        __classPrivateFieldSet(this, _TooltipElement_allowUpdatePosition, true, "f");
+        __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
         if (!this.id) {
             this.id = `tooltip-${Date.now()}-${(Math.random() * 10000).toFixed(0)}`;
         }
         if (!this.control)
             return;
         this.setAttribute('role', 'tooltip');
-        (_a = __classPrivateFieldGet(this, _TooltipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
-        __classPrivateFieldSet(this, _TooltipElement_abortController, new AbortController(), "f");
-        const { signal } = __classPrivateFieldGet(this, _TooltipElement_abortController, "f");
+        (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldSet(this, _ToolTipElement_abortController, new AbortController(), "f");
+        const { signal } = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f");
         this.addEventListener('mouseleave', this, { signal });
         this.control.addEventListener('mouseenter', this, { signal });
         this.control.addEventListener('mouseleave', this, { signal });
         this.control.addEventListener('focus', this, { signal });
         this.control.addEventListener('blur', this, { signal });
         this.ownerDocument.addEventListener('keydown', this, { signal });
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
     }
     disconnectedCallback() {
         var _a;
-        (_a = __classPrivateFieldGet(this, _TooltipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
     }
     handleEvent(event) {
         if (!this.control)
@@ -241,109 +243,76 @@ class TooltipElement extends HTMLElement {
                 this.control.setAttribute('aria-describedby', describedBy);
             }
         }
-        else if (name === 'hidden') {
-            if (this.hidden) {
-                this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES);
-            }
-            else {
-                this.classList.add(TOOLTIP_OPEN_CLASS);
-                for (const tooltip of this.ownerDocument.querySelectorAll(this.tagName)) {
-                    if (tooltip !== this)
-                        tooltip.hidden = true;
-                }
-                __classPrivateFieldGet(this, _TooltipElement_instances, "m", _TooltipElement_updatePosition).call(this);
-            }
+        else if (this.isConnected && name === 'hidden') {
+            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
         }
         else if (name === 'data-direction') {
             this.classList.remove(...DIRECTION_CLASSES);
             const direction = this.direction;
             if (direction === 'n') {
-                __classPrivateFieldSet(this, _TooltipElement_align, 'center', "f");
-                __classPrivateFieldSet(this, _TooltipElement_side, 'outside-top', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
             }
             else if (direction === 'ne') {
-                __classPrivateFieldSet(this, _TooltipElement_align, 'start', "f");
-                __classPrivateFieldSet(this, _TooltipElement_side, 'outside-top', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
             }
             else if (direction === 'e') {
-                __classPrivateFieldSet(this, _TooltipElement_align, 'center', "f");
-                __classPrivateFieldSet(this, _TooltipElement_side, 'outside-right', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-right', "f");
             }
             else if (direction === 'se') {
-                __classPrivateFieldSet(this, _TooltipElement_align, 'start', "f");
-                __classPrivateFieldSet(this, _TooltipElement_side, 'outside-bottom', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
             }
             else if (direction === 's') {
-                __classPrivateFieldSet(this, _TooltipElement_align, 'center', "f");
-                __classPrivateFieldSet(this, _TooltipElement_side, 'outside-bottom', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
             }
             else if (direction === 'sw') {
-                __classPrivateFieldSet(this, _TooltipElement_align, 'end', "f");
-                __classPrivateFieldSet(this, _TooltipElement_side, 'outside-bottom', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
             }
             else if (direction === 'w') {
-                __classPrivateFieldSet(this, _TooltipElement_align, 'center', "f");
-                __classPrivateFieldSet(this, _TooltipElement_side, 'outside-left', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-left', "f");
             }
             else if (direction === 'nw') {
-                __classPrivateFieldSet(this, _TooltipElement_align, 'end', "f");
-                __classPrivateFieldSet(this, _TooltipElement_side, 'outside-top', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
             }
         }
     }
 }
-_TooltipElement_abortController = new WeakMap(), _TooltipElement_align = new WeakMap(), _TooltipElement_side = new WeakMap(), _TooltipElement_allowUpdatePosition = new WeakMap(), _TooltipElement_instances = new WeakSet(), _TooltipElement_adjustedAnchorAlignment = function _TooltipElement_adjustedAnchorAlignment(anchorSide) {
-    if (!this.control)
-        return;
-    const tooltipPosition = this.getBoundingClientRect();
-    const targetPosition = this.control.getBoundingClientRect();
-    const tooltipWidth = tooltipPosition.width;
-    const tooltipCenter = tooltipPosition.left + tooltipWidth / 2;
-    const targetCenter = targetPosition.x + targetPosition.width / 2;
-    if (Math.abs(tooltipCenter - targetCenter) < 2 || anchorSide === 'outside-left' || anchorSide === 'outside-right') {
-        return 'center';
-    }
-    else if (tooltipPosition.left === targetPosition.left) {
-        return 'start';
-    }
-    else if (tooltipPosition.right === targetPosition.right) {
-        return 'end';
-    }
-    else if (tooltipCenter < targetCenter) {
-        if (tooltipPosition.left === 0)
-            return 'start';
-        return 'end';
+_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update() {
+    if (this.hidden) {
+        this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES);
     }
     else {
-        if (tooltipPosition.right === 0)
-            return 'end';
-        return 'start';
+        this.classList.add(TOOLTIP_OPEN_CLASS);
+        for (const tooltip of this.ownerDocument.querySelectorAll(this.tagName)) {
+            if (tooltip !== this)
+                tooltip.hidden = true;
+        }
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
     }
-}, _TooltipElement_updatePosition = function _TooltipElement_updatePosition() {
+}, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
     if (!this.control)
         return;
-    if (!__classPrivateFieldGet(this, _TooltipElement_allowUpdatePosition, "f") || this.hidden)
+    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.hidden)
         return;
     const TOOLTIP_OFFSET = 10;
     this.style.left = `0px`; // Ensures we have reliable tooltip width in `getAnchoredPosition`
-    let position = getAnchoredPosition(this, this.control, {
-        side: __classPrivateFieldGet(this, _TooltipElement_side, "f"),
-        align: __classPrivateFieldGet(this, _TooltipElement_align, "f"),
+    const position = getAnchoredPosition(this, this.control, {
+        side: __classPrivateFieldGet(this, _ToolTipElement_side, "f"),
+        align: __classPrivateFieldGet(this, _ToolTipElement_align, "f"),
         anchorOffset: TOOLTIP_OFFSET
     });
-    let anchorSide = position.anchorSide;
-    // We need to set tooltip position in order to determine ideal align.
+    const anchorSide = position.anchorSide;
+    const align = position.anchorAlign;
     this.style.top = `${position.top}px`;
     this.style.left = `${position.left}px`;
     let direction = 's';
-    const align = __classPrivateFieldGet(this, _TooltipElement_instances, "m", _TooltipElement_adjustedAnchorAlignment).call(this, anchorSide);
-    if (!align)
-        return;
-    this.style.left = `0px`; // Reset tooltip position again to ensure accurate width in `getAnchoredPosition`
-    position = getAnchoredPosition(this, this.control, { side: anchorSide, align, anchorOffset: TOOLTIP_OFFSET });
-    anchorSide = position.anchorSide;
-    this.style.top = `${position.top}px`;
-    this.style.left = `${position.left}px`;
     if (anchorSide === 'outside-left') {
         direction = 'w';
     }
@@ -374,8 +343,8 @@ _TooltipElement_abortController = new WeakMap(), _TooltipElement_align = new Wea
     }
     this.classList.add(`tooltip-${direction}`);
 };
-TooltipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'hidden'];
+ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'hidden'];
 if (!window.customElements.get('tool-tip')) {
-    window.TooltipElement = TooltipElement;
-    window.customElements.define('tool-tip', TooltipElement);
+    window.ToolTipElement = ToolTipElement;
+    window.customElements.define('tool-tip', ToolTipElement);
 }

data/app/components/primer/alpha/{tooltip.ts → tool-tip-element.ts}

@@ -2,7 +2,7 @@ import type {AnchorAlignment, AnchorSide} from '@primer/behaviors'
 import {getAnchoredPosition} from '@primer/behaviors'
 
 const TOOLTIP_OPEN_CLASS = 'tooltip-open'
-const TOOLTIP_ARROW_EDGE_OFFSET = 10
+const TOOLTIP_ARROW_EDGE_OFFSET = 6
 
 type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw'
 
@@ -17,7 +17,7 @@ const DIRECTION_CLASSES = [
   'tooltip-sw'
 ]
 
-class TooltipElement extends HTMLElement {
+class ToolTipElement extends HTMLElement {
   styles() {
     return `
       :host {
@@ -82,13 +82,13 @@ class TooltipElement extends HTMLElement {
       :host(.tooltip-s):before,
       :host(.tooltip-n):before {
         right: 50%;
+        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
       }
 
       :host(.tooltip-s):before,
       :host(.tooltip-se):before,
       :host(.tooltip-sw):before {
         bottom: 100%;
-        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
         border-bottom-color: var(--color-neutral-emphasis-plus)
       }
       
@@ -102,7 +102,6 @@ class TooltipElement extends HTMLElement {
       :host(.tooltip-ne):before,
       :host(.tooltip-nw):before {
         top: 100%;
-        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
         border-top-color: var(--color-neutral-emphasis-plus)
       }
       
@@ -176,18 +175,16 @@ class TooltipElement extends HTMLElement {
     return this.ownerDocument.getElementById(this.htmlFor)
   }
 
-  constructor() {
-    super()
-    const shadow = this.attachShadow({mode: 'open'})
-    shadow.innerHTML = `
-      <style>
-        ${this.styles()}
-      </style>
-      <slot></slot>
-    `
-  }
-
   connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({mode: 'open'})
+      shadow.innerHTML = `
+        <style>
+          ${this.styles()}
+        </style>
+        <slot></slot>
+      `
+    }
     this.hidden = true
     this.#allowUpdatePosition = true
 
@@ -209,6 +206,7 @@ class TooltipElement extends HTMLElement {
     this.control.addEventListener('focus', this, {signal})
     this.control.addEventListener('blur', this, {signal})
     this.ownerDocument.addEventListener('keydown', this, {signal})
+    this.#update()
   }
 
   disconnectedCallback() {
@@ -237,6 +235,18 @@ class TooltipElement extends HTMLElement {
 
   static observedAttributes = ['data-type', 'data-direction', 'id', 'hidden']
 
+  #update() {
+    if (this.hidden) {
+      this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES)
+    } else {
+      this.classList.add(TOOLTIP_OPEN_CLASS)
+      for (const tooltip of this.ownerDocument.querySelectorAll<HTMLElement>(this.tagName)) {
+        if (tooltip !== this) tooltip.hidden = true
+      }
+      this.#updatePosition()
+    }
+  }
+
   attributeChangedCallback(name: string) {
     if (name === 'id' || name === 'data-type') {
       if (!this.id || !this.control) return
@@ -247,16 +257,8 @@ class TooltipElement extends HTMLElement {
         describedBy ? (describedBy = `${describedBy} ${this.id}`) : (describedBy = this.id)
         this.control.setAttribute('aria-describedby', describedBy)
       }
-    } else if (name === 'hidden') {
-      if (this.hidden) {
-        this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES)
-      } else {
-        this.classList.add(TOOLTIP_OPEN_CLASS)
-        for (const tooltip of this.ownerDocument.querySelectorAll<HTMLElement>(this.tagName)) {
-          if (tooltip !== this) tooltip.hidden = true
-        }
-        this.#updatePosition()
-      }
+    } else if (this.isConnected && name === 'hidden') {
+      this.#update()
     } else if (name === 'data-direction') {
       this.classList.remove(...DIRECTION_CLASSES)
       const direction = this.direction
@@ -288,34 +290,6 @@ class TooltipElement extends HTMLElement {
     }
   }
 
-  // `getAnchoredPosition` may calibrate `anchoredSide` but does not recalibrate `align`.
-  //  Therefore, we need to determine which `align` is best based on the initial `getAnchoredPosition` calcluation.
-  //  Related: https://github.com/primer/behaviors/issues/63
-  #adjustedAnchorAlignment(anchorSide: AnchorSide): AnchorAlignment | undefined {
-    if (!this.control) return
-
-    const tooltipPosition = this.getBoundingClientRect()
-    const targetPosition = this.control.getBoundingClientRect()
-    const tooltipWidth = tooltipPosition.width
-
-    const tooltipCenter = tooltipPosition.left + tooltipWidth / 2
-    const targetCenter = targetPosition.x + targetPosition.width / 2
-
-    if (Math.abs(tooltipCenter - targetCenter) < 2 || anchorSide === 'outside-left' || anchorSide === 'outside-right') {
-      return 'center'
-    } else if (tooltipPosition.left === targetPosition.left) {
-      return 'start'
-    } else if (tooltipPosition.right === targetPosition.right) {
-      return 'end'
-    } else if (tooltipCenter < targetCenter) {
-      if (tooltipPosition.left === 0) return 'start'
-      return 'end'
-    } else {
-      if (tooltipPosition.right === 0) return 'end'
-      return 'start'
-    }
-  }
-
   #updatePosition() {
     if (!this.control) return
     if (!this.#allowUpdatePosition || this.hidden) return
@@ -323,27 +297,19 @@ class TooltipElement extends HTMLElement {
     const TOOLTIP_OFFSET = 10
 
     this.style.left = `0px` // Ensures we have reliable tooltip width in `getAnchoredPosition`
-    let position = getAnchoredPosition(this, this.control, {
+
+    const position = getAnchoredPosition(this, this.control, {
       side: this.#side,
       align: this.#align,
       anchorOffset: TOOLTIP_OFFSET
     })
-    let anchorSide = position.anchorSide
+    const anchorSide = position.anchorSide
+    const align = position.anchorAlign
 
-    // We need to set tooltip position in order to determine ideal align.
     this.style.top = `${position.top}px`
     this.style.left = `${position.left}px`
-    let direction: Direction = 's'
-
-    const align = this.#adjustedAnchorAlignment(anchorSide)
-    if (!align) return
-
-    this.style.left = `0px` // Reset tooltip position again to ensure accurate width in `getAnchoredPosition`
-    position = getAnchoredPosition(this, this.control, {side: anchorSide, align, anchorOffset: TOOLTIP_OFFSET})
-    anchorSide = position.anchorSide
 
-    this.style.top = `${position.top}px`
-    this.style.left = `${position.left}px`
+    let direction: Direction = 's'
 
     if (anchorSide === 'outside-left') {
       direction = 'w'
@@ -372,12 +338,12 @@ class TooltipElement extends HTMLElement {
 }
 
 if (!window.customElements.get('tool-tip')) {
-  window.TooltipElement = TooltipElement
-  window.customElements.define('tool-tip', TooltipElement)
+  window.ToolTipElement = ToolTipElement
+  window.customElements.define('tool-tip', ToolTipElement)
 }
 
 declare global {
   interface Window {
-    TooltipElement: typeof TooltipElement
+    ToolTipElement: typeof ToolTipElement
   }
 }

data/app/components/primer/link_component.erb

@@ -1,4 +1 @@
-<%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= content %>
-  <%= tooltip %>
-<% end %>
+<%= render Primer::BaseComponent.new(**@system_arguments) do -%><%= content -%><%= tooltip -%><% end %>

data/app/components/primer/primer.d.ts

@@ -5,4 +5,4 @@ import './time_ago_component';
 import './local_time';
 import './image_crop';
 import './dropdown';
-import './alpha/tooltip';
+import './alpha/tool-tip-element';

data/app/components/primer/primer.js

@@ -5,4 +5,4 @@ import './time_ago_component';
 import './local_time';
 import './image_crop';
 import './dropdown';
-import './alpha/tooltip';
+import './alpha/tool-tip-element';

data/app/components/primer/primer.ts

@@ -5,4 +5,4 @@ import './time_ago_component'
 import './local_time'
 import './image_crop'
 import './dropdown'
-import './alpha/tooltip'
+import './alpha/tool-tip-element'

data/lib/primer/classify/utilities.yml

@@ -1561,10 +1561,22 @@
 :text_align:
   :right:
   - text-right
+  - text-sm-right
+  - text-md-right
+  - text-lg-right
+  - text-xl-right
   :left:
   - text-left
+  - text-sm-left
+  - text-md-left
+  - text-lg-left
+  - text-xl-left
   :center:
   - text-center
+  - text-sm-center
+  - text-md-center
+  - text-lg-center
+  - text-xl-center
 :font_weight:
   :light:
   - text-light

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 70
+      PATCH = 73
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/rubocop/config/default.yml

@@ -15,3 +15,6 @@ Primer/PrimerOcticon:
 
 Primer/DeprecatedArguments:
   Enabled: true
+
+Primer/DeprecatedComponents:
+  Enabled: true

data/lib/rubocop/cop/primer/deprecated_components.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+require "rubocop"
+require "json"
+require "parser/current"
+
+module RuboCop
+  module Cop
+    module Primer
+      # This cop ensures that components marked as "deprecated" in `static/statuses.json` are discouraged from use.
+      #
+      # bad
+      # Primer::BlankslateComponent.new(:foo)
+      #
+      # good
+      # Primer::Beta::Blankslate.new(:foo)
+      #
+      # bad
+      # Primer::Tooltip.new(:foo)
+      #
+      # good
+      # Primer::Alpha::Tooltip.new(:foo)
+      class DeprecatedComponents < BaseCop
+        # If there is no alternative to suggest, set the value to nil.
+        COMPONENT_TO_USE_INSTEAD = {
+          "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
+          "Primer::DropdownMenuComponent" => nil,
+          "Primer::Tooltip" => "Primer::Alpha::Tooltip",
+          "Primer::FlexComponent" => nil,
+          "Primer::FlexItemComponent" => nil
+        }.freeze
+
+        def on_send(node)
+          return unless node.source.include?("Primer::")
+
+          deprecated_components.each do |component|
+            pattern = NodePattern.new("(send #{pattern(component)} :new ...)")
+            add_offense(node, message: message(component)) if pattern.match(node)
+          end
+        end
+
+        private
+
+        # Converts a string to acceptable rubocop-ast pattern syntax
+        def pattern(component)
+          Parser::CurrentRuby.parse(component)
+                             .to_s
+                             .gsub("nil", "nil?")
+                             .delete("\n")
+                             .gsub("  ", " ")
+        end
+
+        def message(component)
+          message = "#{component} has been deprecated and should not be used."
+          message += " Try #{COMPONENT_TO_USE_INSTEAD[component]} instead." if COMPONENT_TO_USE_INSTEAD.fetch(component).present?
+          message
+        end
+
+        def statuses_json
+          JSON.parse(
+            File.read(
+              File.join(File.dirname(__FILE__), "../../../../static/statuses.json")
+            )
+          ).freeze
+        end
+
+        def deprecated_components
+          @deprecated_components ||= statuses_json.select { |_, value| value == "deprecated" }.keys.tap do |deprecated_components|
+            deprecated_components.each do |deprecated|
+              unless COMPONENT_TO_USE_INSTEAD.key?(deprecated)
+                raise "Please provide a component that should be used in place of #{deprecated} in COMPONENT_TO_USE_INSTEAD. "\
+                      "If there is no alternative, set the value to nil."
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/tasks/custom_utilities.yml

@@ -54,10 +54,22 @@
 :text_align:
   :right:
   - text-right
+  - text-sm-right
+  - text-md-right
+  - text-lg-right
+  - text-xl-right
   :left:
   - text-left
+  - text-sm-left
+  - text-md-left
+  - text-lg-left
+  - text-xl-left
   :center:
   - text-center
+  - text-sm-center
+  - text-md-center
+  - text-lg-center
+  - text-xl-center
 :font_weight:
   :light:
   - text-light