primer_view_components 0.0.91 → 0.0.92

data/app/components/primer/alpha/tool-tip-element.js

@@ -1,18 +1,19 @@
+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 __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 _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 = 6;
+const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
 const DIRECTION_CLASSES = [
     'tooltip-n',
     'tooltip-s',
@@ -176,6 +177,14 @@ class ToolTipElement extends HTMLElement {
     get control() {
         return this.ownerDocument.getElementById(this.htmlFor);
     }
+    set hiddenFromView(value) {
+        this.classList.toggle(TOOLTIP_SR_ONLY_CLASS, value);
+        if (this.isConnected)
+            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
+    }
+    get hiddenFromView() {
+        return this.classList.contains(TOOLTIP_SR_ONLY_CLASS);
+    }
     connectedCallback() {
         var _a;
         if (!this.shadowRoot) {
@@ -188,7 +197,7 @@ class ToolTipElement extends HTMLElement {
         <slot></slot>
       `;
         }
-        this.hidden = true;
+        this.hiddenFromView = true;
         __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
         if (!this.id) {
             this.id = `tooltip-${Date.now()}-${(Math.random() * 10000).toFixed(0)}`;
@@ -216,19 +225,19 @@ class ToolTipElement extends HTMLElement {
             return;
         // Ensures that tooltip stays open when hovering between tooltip and element
         // WCAG Success Criterion 1.4.13 Hoverable
-        if ((event.type === 'mouseenter' || event.type === 'focus') && this.hidden) {
-            this.hidden = false;
+        if ((event.type === 'mouseenter' || event.type === 'focus') && this.hiddenFromView) {
+            this.hiddenFromView = false;
         }
         else if (event.type === 'blur') {
-            this.hidden = true;
+            this.hiddenFromView = true;
         }
         else if (event.type === 'mouseleave' &&
             event.relatedTarget !== this.control &&
             event.relatedTarget !== this) {
-            this.hidden = true;
+            this.hiddenFromView = true;
         }
-        else if (event.type === 'keydown' && event.key === 'Escape' && !this.hidden) {
-            this.hidden = true;
+        else if (event.type === 'keydown' && event.key === 'Escape' && !this.hiddenFromView) {
+            this.hiddenFromView = true;
         }
     }
     attributeChangedCallback(name) {
@@ -236,7 +245,15 @@ class ToolTipElement extends HTMLElement {
             if (!this.id || !this.control)
                 return;
             if (this.type === 'label') {
-                this.control.setAttribute('aria-labelledby', this.id);
+                let labelledBy = this.control.getAttribute('aria-labelledby');
+                if (labelledBy) {
+                    labelledBy = `${labelledBy} ${this.id}`;
+                }
+                else {
+                    labelledBy = this.id;
+                }
+                this.control.setAttribute('aria-labelledby', labelledBy);
+                // Prevent duplicate accessible name announcements.
                 this.setAttribute('aria-hidden', 'true');
             }
             else {
@@ -245,9 +262,6 @@ class ToolTipElement extends HTMLElement {
                 this.control.setAttribute('aria-describedby', describedBy);
             }
         }
-        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;
@@ -287,21 +301,21 @@ class ToolTipElement extends HTMLElement {
     }
 }
 _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) {
+    if (this.hiddenFromView) {
         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;
+                tooltip.hiddenFromView = true;
         }
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
     }
 }, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
     if (!this.control)
         return;
-    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.hidden)
+    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.hiddenFromView)
         return;
     const TOOLTIP_OFFSET = 10;
     this.style.left = `0px`; // Ensures we have reliable tooltip width in `getAnchoredPosition`
@@ -345,7 +359,7 @@ _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'];
 if (!window.customElements.get('tool-tip')) {
     window.ToolTipElement = ToolTipElement;
     window.customElements.define('tool-tip', ToolTipElement);

data/app/components/primer/alpha/tool-tip-element.ts

@@ -4,6 +4,7 @@ import {getAnchoredPosition} from '@primer/behaviors'
 
 const TOOLTIP_OPEN_CLASS = 'tooltip-open'
 const TOOLTIP_ARROW_EDGE_OFFSET = 6
+const TOOLTIP_SR_ONLY_CLASS = 'sr-only'
 
 type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw'
 
@@ -176,6 +177,15 @@ class ToolTipElement extends HTMLElement {
     return this.ownerDocument.getElementById(this.htmlFor)
   }
 
+  set hiddenFromView(value: true | false) {
+    this.classList.toggle(TOOLTIP_SR_ONLY_CLASS, value)
+    if (this.isConnected) this.#update()
+  }
+
+  get hiddenFromView() {
+    return this.classList.contains(TOOLTIP_SR_ONLY_CLASS)
+  }
+
   connectedCallback() {
     if (!this.shadowRoot) {
       const shadow = this.attachShadow({mode: 'open'})
@@ -187,7 +197,7 @@ class ToolTipElement extends HTMLElement {
         <slot></slot>
       `
     }
-    this.hidden = true
+    this.hiddenFromView = true
     this.#allowUpdatePosition = true
 
     if (!this.id) {
@@ -220,30 +230,30 @@ class ToolTipElement extends HTMLElement {
 
     // Ensures that tooltip stays open when hovering between tooltip and element
     // WCAG Success Criterion 1.4.13 Hoverable
-    if ((event.type === 'mouseenter' || event.type === 'focus') && this.hidden) {
-      this.hidden = false
+    if ((event.type === 'mouseenter' || event.type === 'focus') && this.hiddenFromView) {
+      this.hiddenFromView = false
     } else if (event.type === 'blur') {
-      this.hidden = true
+      this.hiddenFromView = true
     } else if (
       event.type === 'mouseleave' &&
       (event as MouseEvent).relatedTarget !== this.control &&
       (event as MouseEvent).relatedTarget !== this
     ) {
-      this.hidden = true
-    } else if (event.type === 'keydown' && (event as KeyboardEvent).key === 'Escape' && !this.hidden) {
-      this.hidden = true
+      this.hiddenFromView = true
+    } else if (event.type === 'keydown' && (event as KeyboardEvent).key === 'Escape' && !this.hiddenFromView) {
+      this.hiddenFromView = true
     }
   }
 
-  static observedAttributes = ['data-type', 'data-direction', 'id', 'hidden']
+  static observedAttributes = ['data-type', 'data-direction', 'id']
 
   #update() {
-    if (this.hidden) {
+    if (this.hiddenFromView) {
       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
+      for (const tooltip of this.ownerDocument.querySelectorAll<ToolTipElement>(this.tagName)) {
+        if (tooltip !== this) tooltip.hiddenFromView = true
       }
       this.#updatePosition()
     }
@@ -253,15 +263,21 @@ class ToolTipElement extends HTMLElement {
     if (name === 'id' || name === 'data-type') {
       if (!this.id || !this.control) return
       if (this.type === 'label') {
-        this.control.setAttribute('aria-labelledby', this.id)
+        let labelledBy = this.control.getAttribute('aria-labelledby')
+        if (labelledBy) {
+          labelledBy = `${labelledBy} ${this.id}`
+        } else {
+          labelledBy = this.id
+        }
+        this.control.setAttribute('aria-labelledby', labelledBy)
+
+        // Prevent duplicate accessible name announcements.
         this.setAttribute('aria-hidden', 'true')
       } else {
         let describedBy = this.control.getAttribute('aria-describedby')
         describedBy ? (describedBy = `${describedBy} ${this.id}`) : (describedBy = this.id)
         this.control.setAttribute('aria-describedby', describedBy)
       }
-    } else if (this.isConnected && name === 'hidden') {
-      this.#update()
     } else if (name === 'data-direction') {
       this.classList.remove(...DIRECTION_CLASSES)
       const direction = this.direction
@@ -295,7 +311,7 @@ class ToolTipElement extends HTMLElement {
 
   #updatePosition() {
     if (!this.control) return
-    if (!this.#allowUpdatePosition || this.hidden) return
+    if (!this.#allowUpdatePosition || this.hiddenFromView) return
 
     const TOOLTIP_OFFSET = 10
 

data/app/components/primer/alpha/tooltip.rb

@@ -107,9 +107,12 @@ module Primer
 
         @text = text
         @system_arguments = system_arguments
-        @system_arguments[:hidden] = true
         @system_arguments[:tag] = :"tool-tip"
         @system_arguments[:for] = for_id
+        system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "sr-only"
+        )
         @system_arguments[:position] = :absolute
         @system_arguments[:"data-direction"] = fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT).to_s
         @system_arguments[:"data-type"] = fetch_or_fallback(TYPE_OPTIONS, type, TYPE_FALLBACK).to_s

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

@@ -5,5 +5,5 @@ import './time_ago_component';
 import './local_time';
 import './image_crop';
 import './dropdown';
+import './alpha/toggle-switch-element';
 import './alpha/tool-tip-element';
-import './alpha/segmented-control-element';

data/app/components/primer/primer.js

@@ -5,5 +5,5 @@ import './time_ago_component';
 import './local_time';
 import './image_crop';
 import './dropdown';
+import './alpha/toggle-switch-element';
 import './alpha/tool-tip-element';
-import './alpha/segmented-control-element';

data/app/components/primer/primer.ts

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

data/lib/primer/forms/acts_as_component.rb

@@ -38,7 +38,7 @@ module Primer
       end
 
       TemplateGlob = Struct.new(:glob_pattern, :method_name, :on_compile_callback)
-      TemplateParams = Struct.new(:source, :identifier, :type, :format)
+      TemplateParams = Struct.new(:source, :identifier, :type, :format, keyword_init: true)
 
       attr_accessor :template_root_path
 

data/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb

@@ -9,14 +9,12 @@ module ERBLint
         COMPONENT_TO_USE_INSTEAD = {
           "Primer::HiddenTextExpander" => "Primer::Alpha::HiddenTextExpander",
           "Primer::HeadingComponent" => "Primer::Beta::Heading",
-          "Primer::ButtonGroup" => "Primer::Beta::ButtonGroup",
           "Primer::CloseButton" => "Primer::Beta::CloseButton",
           "Primer::CounterComponent" => "Primer::Beta::Counter",
           "Primer::DetailsComponent" => "Primer::Beta::Details",
           "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",
           "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",
           "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
-          "Primer::BorderBoxComponent" => "Primer::Beta::BorderBox",
           "Primer::BoxComponent" => "Primer::Box",
           "Primer::DropdownMenuComponent" => nil,
           "Primer::Tooltip" => "Primer::Alpha::Tooltip",

data/lib/primer/view_components/version.rb

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

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

@@ -23,7 +23,6 @@ module RuboCop
           "Primer::CloseButton" => "Primer::Beta::CloseButton",
           "Primer::CounterComponent" => "Primer::Beta::Counter",
           "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
-          "Primer::BorderBoxComponent" => "Primer::Beta::BorderBox",
           "Primer::BaseButton" => "Primer::Beta::BaseButton",
           "Primer::TestComponent" => "Primer::Beta::Test"
         }.freeze

data/static/audited_at.json

@@ -9,6 +9,7 @@
   "Primer::Alpha::TabNav": "",
   "Primer::Alpha::TabPanels": "",
   "Primer::Alpha::TextField": "",
+  "Primer::Alpha::ToggleSwitch": "",
   "Primer::Alpha::Tooltip": "",
   "Primer::Alpha::UnderlineNav": "",
   "Primer::Alpha::UnderlinePanels": "",
@@ -33,11 +34,9 @@
   "Primer::Beta::Truncate": "",
   "Primer::Beta::Truncate::TruncateText": "",
   "Primer::BlankslateComponent": "",
-  "Primer::BorderBoxComponent": "",
   "Primer::Box": "",
   "Primer::BoxComponent": "",
   "Primer::ButtonComponent": "",
-  "Primer::ButtonGroup": "",
   "Primer::ClipboardCopy": "",
   "Primer::CloseButton": "",
   "Primer::ConditionalWrapper": "",

data/static/constants.json

@@ -136,6 +136,26 @@
   },
   "Primer::Alpha::TextField": {
   },
+  "Primer::Alpha::ToggleSwitch": {
+    "SIZE_DEFAULT": "medium",
+    "SIZE_MAPPINGS": {
+      "medium": null,
+      "small": "ToggleSwitch--small"
+    },
+    "SIZE_OPTIONS": [
+      "medium",
+      "small"
+    ],
+    "STATUS_LABEL_POSITION_DEFAULT": "start",
+    "STATUS_LABEL_POSITION_MAPPINGS": {
+      "start": null,
+      "end": "ToggleSwitch--statusAtEnd"
+    },
+    "STATUS_LABEL_POSITION_OPTIONS": [
+      "start",
+      "end"
+    ]
+  },
   "Primer::Alpha::Tooltip": {
     "DIRECTION_DEFAULT": "s",
     "DIRECTION_OPTIONS": [
@@ -373,8 +393,6 @@
   },
   "Primer::BlankslateComponent": {
   },
-  "Primer::BorderBoxComponent": {
-  },
   "Primer::Box": {
   },
   "Primer::BoxComponent": {
@@ -408,8 +426,6 @@
       "medium"
     ]
   },
-  "Primer::ButtonGroup": {
-  },
   "Primer::ClipboardCopy": {
   },
   "Primer::CloseButton": {

data/static/statuses.json

@@ -9,6 +9,7 @@
   "Primer::Alpha::TabNav": "alpha",
   "Primer::Alpha::TabPanels": "alpha",
   "Primer::Alpha::TextField": "alpha",
+  "Primer::Alpha::ToggleSwitch": "alpha",
   "Primer::Alpha::Tooltip": "alpha",
   "Primer::Alpha::UnderlineNav": "alpha",
   "Primer::Alpha::UnderlinePanels": "alpha",
@@ -33,11 +34,9 @@
   "Primer::Beta::Truncate": "beta",
   "Primer::Beta::Truncate::TruncateText": "alpha",
   "Primer::BlankslateComponent": "deprecated",
-  "Primer::BorderBoxComponent": "deprecated",
   "Primer::Box": "stable",
   "Primer::BoxComponent": "deprecated",
   "Primer::ButtonComponent": "beta",
-  "Primer::ButtonGroup": "deprecated",
   "Primer::ClipboardCopy": "beta",
   "Primer::CloseButton": "deprecated",
   "Primer::ConditionalWrapper": "alpha",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.91
+  version: 0.0.92
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-08-17 00:00:00.000000000 Z
+date: 2022-08-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -415,6 +415,8 @@ files:
 - app/components/primer/alpha/hidden_text_expander.rb
 - app/components/primer/alpha/layout.html.erb
 - app/components/primer/alpha/layout.rb
+- app/components/primer/alpha/modal-dialog-element.d.ts
+- app/components/primer/alpha/modal-dialog-element.js
 - app/components/primer/alpha/segmented-control-element.d.ts
 - app/components/primer/alpha/segmented-control-element.js
 - app/components/primer/alpha/tab_nav.html.erb
@@ -422,6 +424,11 @@ files:
 - app/components/primer/alpha/tab_panels.html.erb
 - app/components/primer/alpha/tab_panels.rb
 - app/components/primer/alpha/text_field.rb
+- app/components/primer/alpha/toggle-switch-element.d.ts
+- app/components/primer/alpha/toggle-switch-element.js
+- app/components/primer/alpha/toggle-switch-element.ts
+- app/components/primer/alpha/toggle_switch.html.erb
+- app/components/primer/alpha/toggle_switch.rb
 - app/components/primer/alpha/tool-tip-element.d.ts
 - app/components/primer/alpha/tool-tip-element.js
 - app/components/primer/alpha/tool-tip-element.ts
@@ -464,12 +471,10 @@ files:
 - app/components/primer/beta/truncate.rb
 - app/components/primer/blankslate_component.html.erb
 - app/components/primer/blankslate_component.rb
-- app/components/primer/border_box_component.rb
 - app/components/primer/box.rb
 - app/components/primer/box_component.rb
 - app/components/primer/button_component.html.erb
 - app/components/primer/button_component.rb
-- app/components/primer/button_group.rb
 - app/components/primer/clipboard_copy.html.erb
 - app/components/primer/clipboard_copy.rb
 - app/components/primer/clipboard_copy_component.d.ts

data/app/components/primer/border_box_component.rb

@@ -1,7 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  class BorderBoxComponent < Primer::Beta::BorderBox
-    status :deprecated
-  end
-end

data/app/components/primer/button_group.rb

@@ -1,7 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  class ButtonGroup < Primer::Beta::ButtonGroup
-    status :deprecated
-  end
-end