primer_view_components 0.1.1 → 0.1.3

data/app/components/primer/truncate.rb

@@ -3,7 +3,7 @@
 module Primer
   # Use `Truncate` to shorten overflowing text with an ellipsis.
   class Truncate < Primer::Component
-    status :beta
+    status :deprecated
 
     DEFAULT_TAG = :div
     TAG_OPTIONS = [DEFAULT_TAG, :span, :p, :strong].freeze

data/lib/primer/deprecations.yml

@@ -26,6 +26,11 @@ deprecations:
     autocorrect: true
     replacement: "Primer::Beta::IconButton"
 
+  - component: "Primer::LayoutComponent"
+    autocorrect: false
+    replacement: "Primer::Alpha::Layout"
+    guide: "https://primer.style/view-components/guides/primer_layout_component"
+
   - component: "Primer::Navigation::TabComponent"
     autocorrect: true
     replacement: "Primer::Alpha::Navigation::Tab"
@@ -33,3 +38,8 @@ deprecations:
   - component: "Primer::Tooltip"
     autocorrect: true
     replacement: "Primer::Alpha::Tooltip"
+
+  - component: "Primer::Truncate"
+    autocorrect: false
+    replacement: "Primer::Beta::Truncate"
+    guide: "https://primer.style/view-components/guides/primer_truncate"

data/lib/primer/forms/dsl/text_field_input.rb

@@ -32,7 +32,7 @@ module Primer
 
           super(**system_arguments)
 
-          add_input_data(:target, "primer-text-field.inputElement") if auto_check_src.present?
+          add_input_data(:target, "primer-text-field.inputElement #{system_arguments.dig(:data, :target) || ''}")
           add_input_classes("FormControl-inset") if inset?
           add_input_classes("FormControl-monospace") if monospace?
         end

data/lib/primer/forms/primer_text_field.js

@@ -18,7 +18,10 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 var _PrimerTextFieldElement_abortController;
 import '@github/auto-check-element';
 import { controller, target } from '@github/catalyst';
-let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
+// eslint-disable-next-line custom-elements/expose-class-on-global
+let PrimerTextFieldElement = 
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+class PrimerTextFieldElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _PrimerTextFieldElement_abortController.set(this, void 0);
@@ -27,22 +30,29 @@ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
         var _a;
         (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
         const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
-        this.inputElement.addEventListener('auto-check-success', () => { this.clearError(); }, { signal });
-        this.inputElement.addEventListener('auto-check-error', (event) => {
-            event.detail.response.text().then((error_message) => { this.setError(error_message); });
+        this.inputElement.addEventListener('auto-check-success', () => {
+            this.clearError();
+        }, { signal });
+        this.inputElement.addEventListener('auto-check-error', async (event) => {
+            const errorMessage = await event.detail.response.text();
+            this.setError(errorMessage);
         }, { signal });
     }
     disconnectedCallback() {
         var _a;
         (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
     }
+    clearContents() {
+        this.inputElement.value = '';
+        this.inputElement.focus();
+    }
     clearError() {
         this.inputElement.removeAttribute('invalid');
         this.validationElement.hidden = true;
-        this.validationMessageElement.innerText = '';
+        this.validationMessageElement.textContent = '';
     }
     setError(message) {
-        this.validationMessageElement.innerText = message;
+        this.validationMessageElement.textContent = message;
         this.validationElement.hidden = false;
         this.inputElement.setAttribute('invalid', 'true');
     }
@@ -59,4 +69,5 @@ __decorate([
 ], PrimerTextFieldElement.prototype, "validationMessageElement", void 0);
 PrimerTextFieldElement = __decorate([
     controller
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
 ], PrimerTextFieldElement);

data/lib/primer/forms/primer_text_field.ts

@@ -1,7 +1,9 @@
 import '@github/auto-check-element'
 import {controller, target} from '@github/catalyst'
 
+// eslint-disable-next-line custom-elements/expose-class-on-global
 @controller
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
 class PrimerTextFieldElement extends HTMLElement {
   @target inputElement: HTMLInputElement
   @target validationElement: HTMLElement
@@ -15,16 +17,17 @@ class PrimerTextFieldElement extends HTMLElement {
 
     this.inputElement.addEventListener(
       'auto-check-success',
-      () => { this.clearError() },
+      () => {
+        this.clearError()
+      },
       {signal}
     )
 
     this.inputElement.addEventListener(
       'auto-check-error',
-      (event: any) => {
-        event.detail.response.text().then(
-          (error_message: string) => { this.setError(error_message) }
-        )
+      async (event: any) => {
+        const errorMessage = await event.detail.response.text()
+        this.setError(errorMessage)
       },
       {signal}
     )
@@ -34,14 +37,19 @@ class PrimerTextFieldElement extends HTMLElement {
     this.#abortController?.abort()
   }
 
+  clearContents() {
+    this.inputElement.value = ''
+    this.inputElement.focus()
+  }
+
   clearError(): void {
     this.inputElement.removeAttribute('invalid')
     this.validationElement.hidden = true
-    this.validationMessageElement.innerText = ''
+    this.validationMessageElement.textContent = ''
   }
 
   setError(message: string): void {
-    this.validationMessageElement.innerText = message
+    this.validationMessageElement.textContent = message
     this.validationElement.hidden = false
     this.inputElement.setAttribute('invalid', 'true')
   }

data/lib/primer/forms/text_field.html.erb

@@ -1,4 +1,4 @@
-<%= render Primer::ConditionalWrapper.new(condition: @input.auto_check_src, tag: "primer-text-field") do %>
+<primer-text-field>
   <%= render(FormControl.new(input: @input)) do %>
     <%= content_tag(:div, **@field_wrap_arguments) do %>
       <% if @input.leading_visual %>
@@ -10,10 +10,10 @@
         <%= builder.text_field(@input.name, **@input.input_arguments) %>
       <% end %>
       <% if @input.show_clear_button? %>
-        <button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="Clear">
+        <button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="Clear" data-action="click:primer-text-field#clearContents">
           <%= render(Primer::Beta::Octicon.new(icon: :"x-circle-fill")) %>
         </button>
       <% end %>
     <% end %>
   <% end %>
-<% end %>
+</primer-text-field>

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 1
-      PATCH = 1
+      PATCH = 3
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/action_list_preview.rb

@@ -89,6 +89,39 @@ module Primer
         end
       end
 
+      # @label With manual dividers
+      #
+      # @param role text
+      # @param scheme [Symbol] select [full, inset]
+      # @param show_dividers toggle
+      def with_manual_dividers(
+        role: Primer::Alpha::ActionList::DEFAULT_ROLE,
+        scheme: Primer::Alpha::ActionList::DEFAULT_SCHEME,
+        show_dividers: false
+      )
+        render(Primer::Alpha::ActionList.new(
+          role: role,
+          scheme: scheme,
+          show_dividers: show_dividers
+        )) do |component|
+          component.with_heading(title: "Action List")
+          component.with_item(label: "Item one", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :gear)
+          end
+          component.with_divider
+          component.with_item(label: "Item two", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :star)
+          end
+          component.with_item(label: "Item three", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :heart)
+          end
+          component.with_divider
+          component.with_item(label: "Item four", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :bug)
+          end
+        end
+      end
+
       # @label Divider
       #
       # @param scheme [Symbol] select [subtle, filled]
@@ -135,7 +168,6 @@ module Primer
       # @param private_leading_action_icon [Symbol] octicon
       # @param private_trailing_action_icon [Symbol] octicon
       # @param trailing_action toggle
-      # @param trailing_action_on_hover toggle
       # @param tooltip toggle
       def item(
         label: "Label",
@@ -156,7 +188,6 @@ module Primer
         trailing_visual_text: nil,
         private_leading_action_icon: nil,
         private_trailing_action_icon: nil,
-        trailing_action_on_hover: false,
         trailing_action: false,
         tooltip: false
       )
@@ -195,7 +226,7 @@ module Primer
             item.with_private_trailing_action_icon(icon: private_trailing_action_icon)
           end
 
-          item.with_trailing_action(show_on_hover: trailing_action_on_hover, icon: "plus", "aria-label": "Button tooltip", size: :medium) if trailing_action && trailing_action != :none
+          item.with_trailing_action(icon: "plus", "aria-label": "Button tooltip", size: :medium) if trailing_action && trailing_action != :none
 
           item.description { description } if description
 
@@ -294,18 +325,7 @@ module Primer
                  aria: { label: "List heading" }
                )) do |component|
           component.with_item(label: "Default item", href: "/") do |item|
-            item.with_trailing_action(show_on_hover: false, icon: "plus", "aria-label": "Button tooltip", size: :medium)
-          end
-        end
-      end
-
-      # @label Item [trailing action on hover]
-      def item_trailing_action_hover
-        render(Primer::Alpha::ActionList.new(
-                 aria: { label: "List heading" }
-               )) do |component|
-          component.with_item(label: "Default item", href: "/") do |item|
-            item.with_trailing_action(show_on_hover: true, icon: "plus", "aria-label": "Button tooltip", size: :medium)
+            item.with_trailing_action(icon: "plus", "aria-label": "Button tooltip", size: :medium)
           end
         end
       end

data/previews/primer/alpha/nav_list_preview/trailing_action.html.erb

@@ -2,7 +2,7 @@
   <% list.with_group do |group| %>
     <%= group.with_heading(title: "Shopping list") %>
     <% group.with_item(label: "Bread", href: "/list/1") do |item| %>
-      <%= item.with_trailing_action(show_on_hover: true, icon: :plus, aria: { label: "Activate alert" }, name: "bread_button") %>
+      <%= item.with_trailing_action(icon: :plus, aria: { label: "Activate alert" }, name: "bread_button") %>
     <% end %>
     <% group.with_item(label: "Cheese", href: "/list/2") do |item| %>
       <%= item.with_trailing_action(icon: :plus, aria: { label: "Activate alert" }, name: "cheese_button") %>

data/previews/primer/alpha/overlay_preview.rb

@@ -32,10 +32,10 @@ module Primer
                  anchor_offset: anchor_offset,
                  anchor_side: anchor_side,
                  allow_out_of_bounds: allow_out_of_bounds,
-                 visually_hide_title: visually_hide_title,
+                 visually_hide_title: visually_hide_title
                )) do |d|
           d.with_header(title: title, size: header_size)
-          if icon.present? and icon != :none
+          if icon.present? && (icon != :none)
             d.with_show_button(icon: icon, "aria-label": icon.to_s)
           else
             d.with_show_button { button_text }
@@ -69,7 +69,7 @@ module Primer
                  anchor_align: anchor_align,
                  anchor_side: anchor_side,
                  allow_out_of_bounds: allow_out_of_bounds,
-                 visually_hide_title: visually_hide_title,
+                 visually_hide_title: visually_hide_title
                )) do |d|
           d.with_header(title: title, size: header_size)
           d.with_show_button { button_text }
@@ -77,6 +77,31 @@ module Primer
         end
       end
 
+      # @label Menu No Header
+      #
+      # @param size [Symbol] select [auto, small, medium, medium_portrait, large, xlarge]
+      # @param padding [Symbol] select [normal, condensed, none]
+      # @param anchor_align [Symbol] select [start, center, end]
+      # @param anchor_side [Symbol] select [inside_top, inside_bottom, inside_left, inside_right, inside_center, outside_top, outside_bottom, outside_left, outside_right]
+      # @param allow_out_of_bounds [Boolean] toggle
+      #
+      # @param button_text [String] text
+      # @param body_text [String] text
+      def menu_no_header(size: :auto, padding: :normal, anchor_align: :center, anchor_side: :outside_bottom, allow_out_of_bounds: false, button_text: "Show Overlay Menu", body_text: "This is a menu")
+        render(Primer::Alpha::Overlay.new(
+                 title: "Menu",
+                 role: :menu,
+                 size: size,
+                 padding: padding,
+                 anchor_align: anchor_align,
+                 anchor_side: anchor_side,
+                 allow_out_of_bounds: allow_out_of_bounds
+               )) do |d|
+          d.with_show_button { button_text }
+          d.with_body { body_text }
+        end
+      end
+
       # @label Middle Of Page
       #
       # @param title [String] text

data/previews/primer/alpha/text_field_preview.rb

@@ -167,6 +167,13 @@ module Primer
       end
       #
       # @!endgroup
+
+      # @label With data target attribute
+      def with_data_target
+        render(Primer::Alpha::TextField.new(name: "my-text-field", label: "My text field", data: { target: "custom-component.inputElement" }))
+      end
+      #
+      # @!endgroup
     end
   end
 end

data/static/arguments.json

@@ -1335,7 +1335,7 @@
   },
   {
     "component": "Layout",
-    "status": "alpha",
+    "status": "deprecated",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/layout_component.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/layout/default/",
     "parameters": [
@@ -1805,7 +1805,7 @@
   },
   {
     "component": "Truncate",
-    "status": "beta",
+    "status": "deprecated",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/truncate.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/truncate/default/",
     "parameters": [
@@ -2394,8 +2394,8 @@
       {
         "name": "label",
         "type": "String",
-        "default": "N/A",
-        "description": "Item label."
+        "default": "`nil`",
+        "description": "Item label. If no label is provided, content is used."
       },
       {
         "name": "label_classes",

data/static/previews.json

@@ -18,6 +18,11 @@
         "preview_path": "/lookbook/preview/primer/alpha/action_list/leading_visuals",
         "name": "leading_visuals"
       },
+      {
+        "inspect_path": "/lookbook/inspect/primer/alpha/action_list/with_manual_dividers",
+        "preview_path": "/lookbook/preview/primer/alpha/action_list/with_manual_dividers",
+        "name": "with_manual_dividers"
+      },
       {
         "inspect_path": "/lookbook/inspect/primer/alpha/action_list/divider",
         "preview_path": "/lookbook/preview/primer/alpha/action_list/divider",
@@ -78,11 +83,6 @@
         "preview_path": "/lookbook/preview/primer/alpha/action_list/item_trailing_action",
         "name": "item_trailing_action"
       },
-      {
-        "inspect_path": "/lookbook/inspect/primer/alpha/action_list/item_trailing_action_hover",
-        "preview_path": "/lookbook/preview/primer/alpha/action_list/item_trailing_action_hover",
-        "name": "item_trailing_action_hover"
-      },
       {
         "inspect_path": "/lookbook/inspect/primer/alpha/action_list/item_danger",
         "preview_path": "/lookbook/preview/primer/alpha/action_list/item_danger",
@@ -1116,22 +1116,6 @@
       }
     ]
   },
-  {
-    "name": "layout",
-    "lookup_path": "primer/layout",
-    "examples": [
-      {
-        "inspect_path": "/lookbook/inspect/primer/layout/playground",
-        "preview_path": "/lookbook/preview/primer/layout/playground",
-        "name": "playground"
-      },
-      {
-        "inspect_path": "/lookbook/inspect/primer/layout/default",
-        "preview_path": "/lookbook/preview/primer/layout/default",
-        "name": "default"
-      }
-    ]
-  },
   {
     "name": "link",
     "lookup_path": "primer/beta/link",
@@ -1277,6 +1261,11 @@
         "preview_path": "/lookbook/preview/primer/alpha/overlay/default",
         "name": "default"
       },
+      {
+        "inspect_path": "/lookbook/inspect/primer/alpha/overlay/menu_no_header",
+        "preview_path": "/lookbook/preview/primer/alpha/overlay/menu_no_header",
+        "name": "menu_no_header"
+      },
       {
         "inspect_path": "/lookbook/inspect/primer/alpha/overlay/middle_of_page",
         "preview_path": "/lookbook/preview/primer/alpha/overlay/middle_of_page",
@@ -1637,6 +1626,11 @@
         "preview_path": "/lookbook/preview/primer/alpha/text_field/default",
         "name": "default"
       },
+      {
+        "inspect_path": "/lookbook/inspect/primer/alpha/text_field/with_data_target",
+        "preview_path": "/lookbook/preview/primer/alpha/text_field/with_data_target",
+        "name": "with_data_target"
+      },
       {
         "inspect_path": "/lookbook/inspect/primer/alpha/text_field/auto_check",
         "preview_path": "/lookbook/preview/primer/alpha/text_field/auto_check",

data/static/statuses.json

@@ -92,8 +92,8 @@
   "Primer::ConditionalWrapper": "alpha",
   "Primer::Content": "stable",
   "Primer::IconButton": "deprecated",
-  "Primer::LayoutComponent": "alpha",
+  "Primer::LayoutComponent": "deprecated",
   "Primer::Navigation::TabComponent": "deprecated",
   "Primer::Tooltip": "deprecated",
-  "Primer::Truncate": "beta"
+  "Primer::Truncate": "deprecated"
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.3
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-03-07 00:00:00.000000000 Z
+date: 2023-03-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 17.0.0
+        version: 18.0.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 17.0.0
+        version: 18.0.0
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -1034,7 +1034,6 @@ files:
 - previews/primer/forms/forms_preview/single_text_field_form.html.erb
 - previews/primer/forms/forms_preview/submit_button_form.html.erb
 - previews/primer/forms/forms_preview/text_field_and_checkbox_form.html.erb
-- previews/primer/layout_component_preview.rb
 - previews/primer/url_helpers.rb
 - static/arguments.json
 - static/assets/view-components.svg

data/previews/primer/layout_component_preview.rb

@@ -1,30 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  # @label LayoutComponent
-  class LayoutComponentPreview < ViewComponent::Preview
-    # @label Playground
-    #
-    # @param responsive [Boolean]
-    # @param side [Symbol] select [left, right]
-    # @param sidebar_col [Integer] select [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
-    def playground(responsive: false, side: :right, sidebar_col: 3)
-      render(Primer::LayoutComponent.new(responsive: responsive, side: side, sidebar_col: sidebar_col)) do |component|
-        component.with_main { "Main" }
-        component.with_sidebar { "Sidebar" }
-      end
-    end
-
-    # @label Default
-    #
-    # @param responsive [Boolean]
-    # @param side [Symbol] select [left, right]
-    # @param sidebar_col [Integer] select [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
-    def default(responsive: false, side: :right, sidebar_col: 3)
-      render(Primer::LayoutComponent.new(responsive: responsive, side: side, sidebar_col: sidebar_col)) do |component|
-        component.with_main { "Main" }
-        component.with_sidebar { "Sidebar" }
-      end
-    end
-  end
-end