primer_view_components 0.0.92 → 0.0.93

data/lib/postcss_mixins/focusOutline.pcss

@@ -0,0 +1,5 @@
+@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {
+  outline: 2px solid $outlineColor;
+  outline-offset: $outlineOffset;
+  box-shadow: none;
+}

data/lib/postcss_mixins/focusOutlineOnEmphasis.pcss

@@ -0,0 +1,6 @@
+/* outline with fg box-shadow for buttons */
+@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {
+  outline: 2px solid $outlineColor;
+  outline-offset: $outlineOffset;
+  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+}

data/lib/postcss_mixins/minTouchTarget.js

@@ -0,0 +1,20 @@
+module.exports = function (mixin, minHeight = '32px', minWidth = null) {
+  let declarations = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    width: '100%',
+    height: '100%',
+    'min-height': minHeight,
+    content: '""',
+    transform: 'translateX(-50%) translateY(-50%)'
+  }
+
+  if (minWidth) {
+    declarations['min-width'] = minWidth
+  }
+
+  return {
+    '&': declarations
+  }
+}

data/lib/postcss_mixins/targetBoxShadow.pcss

@@ -0,0 +1,6 @@
+/* box-shadow for :target styles (no inset) */
+/* !important to override PCSS utilities */
+@define-mixin targetBoxShadow $outlineWidth: 2px, $outlineColor: var(--color-accent-fg) {
+  outline: none !important;
+  box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
+}

data/lib/primer/view_components/linters/argument_mappers/base.rb

@@ -75,7 +75,7 @@ module ERBLint
 
         # Override this with your component's mappings, it should return a hash with the component's arguments,
         # including a `classes` key that will contain all classes that the mapper couldn't handle.
-        # @returns { classes: Array, ... }
+        # @return { classes: Array, ... }
         def classes_to_args(classes)
           { classes: classes }
         end

data/lib/primer/view_components/version.rb

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

data/lib/tasks/docs.rake

@@ -29,6 +29,8 @@ namespace :docs do
     # Rails controller for rendering arbitrary ERB
     view_context = ApplicationController.new.tap { |c| c.request = ActionDispatch::TestRequest.create }.view_context
     components = [
+      Primer::Beta::IconButton,
+      Primer::Beta::Button,
       Primer::Alpha::Layout,
       Primer::HellipButton,
       Primer::Image,
@@ -53,6 +55,7 @@ namespace :docs do
       Primer::Beta::CloseButton,
       Primer::Beta::Counter,
       Primer::Beta::Details,
+      Primer::Alpha::Dialog,
       Primer::Dropdown,
       Primer::DropdownMenuComponent,
       Primer::Beta::Flash,
@@ -107,7 +110,6 @@ namespace :docs do
     components_needing_docs = all_components - components
 
     args_for_components = []
-    classes_found_in_examples = []
 
     errors = []
 
@@ -252,9 +254,6 @@ namespace :docs do
           end
           f.puts
           html = view_context.render(inline: code)
-          html.scan(/class="([^"]*)"/) do |classnames|
-            classes_found_in_examples.concat(classnames[0].split.reject { |c| c.starts_with?("octicon", "js", "my-") }.map { ".#{_1}" })
-          end
           f.puts("<Example src=\"#{html.tr('"', "\'").delete("\n")}\" />")
           f.puts
           f.puts("```erb")
@@ -276,10 +275,6 @@ namespace :docs do
       raise
     end
 
-    File.open("static/classes.yml", "w") do |f|
-      f.puts YAML.dump(classes_found_in_examples.sort.uniq)
-    end
-
     File.open("static/arguments.yml", "w") do |f|
       f.puts YAML.dump(args_for_components)
     end

data/static/arguments.yml

@@ -22,6 +22,45 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
+- component: Dialog
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog.rb
+  parameters:
+  - name: id
+    type: String
+    default: '`"dialog-#{(36**3 + rand(36**4)).to_s(36)}"`'
+    description: The id of the dialog.
+  - name: title
+    type: String
+    default: N/A
+    description: Describes the content of the dialog.
+  - name: subtitle
+    type: String
+    default: "`nil`"
+    description: Provides dditional context for the dialog, also setting the `aria-describedby`
+      attribute.
+  - name: size
+    type: Symbol
+    default: "`:medium`"
+    description: The size of the dialog. One of `:large`, `:medium`, `:medium_portrait`,
+      `:small`, or `:xlarge`.
+  - name: position
+    type: Symbol
+    default: "`:center`"
+    description: The size of the dialog. One of `:center`, `:left`, or `:right`.
+  - name: position_narrow
+    type: Symbol
+    default: "`:inherit`"
+    description: The size of the dialog. One of `:bottom`, `:fullscreen`, `:inherit`,
+      `:left`, or `:right`.
+  - name: visually_hide_title
+    type: Boolean
+    default: "`false`"
+    description: If true will hide the heading title, while still making it available
+      to Screen Readers.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
 - component: HiddenTextExpander
   source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/hidden_text_expander.rb
   parameters:
@@ -477,6 +516,38 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
+- component: Button
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/button.rb
+  parameters:
+  - name: scheme
+    type: Symbol
+    default: "`:default`"
+    description: One of `:danger`, `:default`, `:invisible`, `:link`, `:outline`,
+      `:primary`, or `:secondary`.
+  - name: size
+    type: Symbol
+    default: "`:medium`"
+    description: One of `:large`, `:medium`, or `:small`.
+  - name: full_width
+    type: Boolean
+    default: "`false`"
+    description: 'Whether button is full-width with `display: block`.'
+  - name: align_content
+    type: Symbol
+    default: "`:center`"
+    description: One of `:center` or `:start`.
+  - name: tag
+    type: Symbol
+    default: "`:button`"
+    description: One of `:a`, `:button`, or `:summary`.
+  - name: type
+    type: Symbol
+    default: "`:button`"
+    description: One of `:button`, `:reset`, or `:submit`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
 - component: ButtonGroup
   source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/button_group.rb
   parameters:
@@ -591,6 +662,48 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
+- component: IconButton
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/icon_button.rb
+  parameters:
+  - name: icon
+    type: String
+    default: N/A
+    description: Name of [Octicon](https://primer.style/octicons/) to use.
+  - name: scheme
+    type: Symbol
+    default: "`:default`"
+    description: One of `:danger`, `:default`, or `:invisible`.
+  - name: size
+    type: Symbol
+    default: "`:medium`"
+    description: One of `:large`, `:medium`, or `:small`.
+  - name: tag
+    type: Symbol
+    default: N/A
+    description: One of `:a`, `:button`, or `:summary`.
+  - name: type
+    type: Symbol
+    default: N/A
+    description: One of `:button`, `:reset`, or `:submit`.
+  - name: aria-label
+    type: String
+    default: N/A
+    description: String that can be read by assistive technology. A label should be
+      short and concise. See the accessibility section for more information.
+  - name: aria-description
+    type: String
+    default: N/A
+    description: String that can be read by assistive technology. A description can
+      be longer as it is intended to provide more context and information. See the
+      accessibility section for more information.
+  - name: tooltip_direction
+    type: Symbol
+    default: "`:s`"
+    description: One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
 - component: Text
   source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/text.rb
   parameters:

data/static/audited_at.json

@@ -2,6 +2,10 @@
   "Primer::Alpha::AutoComplete": "",
   "Primer::Alpha::AutoComplete::Item": "",
   "Primer::Alpha::ButtonMarketing": "",
+  "Primer::Alpha::Dialog": "",
+  "Primer::Alpha::Dialog::Body": "",
+  "Primer::Alpha::Dialog::Footer": "",
+  "Primer::Alpha::Dialog::Header": "",
   "Primer::Alpha::HiddenTextExpander": "",
   "Primer::Alpha::Layout": "",
   "Primer::Alpha::Layout::Main": "",
@@ -24,12 +28,14 @@
   "Primer::Beta::BorderBox::Header": "",
   "Primer::Beta::Breadcrumbs": "",
   "Primer::Beta::Breadcrumbs::Item": "",
+  "Primer::Beta::Button": "",
   "Primer::Beta::ButtonGroup": "",
   "Primer::Beta::CloseButton": "",
   "Primer::Beta::Counter": "",
   "Primer::Beta::Details": "",
   "Primer::Beta::Flash": "",
   "Primer::Beta::Heading": "",
+  "Primer::Beta::IconButton": "",
   "Primer::Beta::Text": "",
   "Primer::Beta::Truncate": "",
   "Primer::Beta::Truncate::TruncateText": "",

data/static/constants.json

@@ -38,6 +38,58 @@
       "large"
     ]
   },
+  "Primer::Alpha::Dialog": {
+    "Body": "Primer::Alpha::Dialog::Body",
+    "DEFAULT_POSITION": "center",
+    "DEFAULT_POSITION_NARROW": "inherit",
+    "DEFAULT_SIZE": "medium",
+    "Footer": "Primer::Alpha::Dialog::Footer",
+    "Header": "Primer::Alpha::Dialog::Header",
+    "POSITION_MAPPINGS": {
+      "center": "Overlay-backdrop--center",
+      "left": "Overlay-backdrop--side Overlay-backdrop--placement-left",
+      "right": "Overlay-backdrop--side Overlay-backdrop--placement-right"
+    },
+    "POSITION_NARROW_MAPPINGS": {
+      "inherit": "",
+      "bottom": "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-bottom-whenNarrow",
+      "fullscreen": "Overlay-backdrop--full-whenNarrow",
+      "left": "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-left-whenNarrow",
+      "right": "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-right-whenNarrow"
+    },
+    "POSITION_NARROW_OPTIONS": [
+      "inherit",
+      "bottom",
+      "fullscreen",
+      "left",
+      "right"
+    ],
+    "POSITION_OPTIONS": [
+      "center",
+      "left",
+      "right"
+    ],
+    "SIZE_MAPPINGS": {
+      "small": "Overlay--size-small-portrait",
+      "medium_portrait": "Overlay--size-medium-portrait",
+      "medium": "Overlay--size-medium",
+      "large": "Overlay--size-large",
+      "xlarge": "Overlay--size-xlarge"
+    },
+    "SIZE_OPTIONS": [
+      "small",
+      "medium_portrait",
+      "medium",
+      "large",
+      "xlarge"
+    ]
+  },
+  "Primer::Alpha::Dialog::Body": {
+  },
+  "Primer::Alpha::Dialog::Footer": {
+  },
+  "Primer::Alpha::Dialog::Header": {
+  },
   "Primer::Alpha::HiddenTextExpander": {
   },
   "Primer::Alpha::Layout": {
@@ -320,6 +372,48 @@
   },
   "Primer::Beta::Breadcrumbs::Item": {
   },
+  "Primer::Beta::Button": {
+    "ALIGN_CONTENT_MAPPINGS": {
+      "start": "Button-content--alignStart",
+      "center": ""
+    },
+    "ALIGN_CONTENT_OPTIONS": [
+      "start",
+      "center"
+    ],
+    "DEFAULT_ALIGN_CONTENT": "center",
+    "DEFAULT_SCHEME": "default",
+    "DEFAULT_SIZE": "medium",
+    "LINK_SCHEME": "link",
+    "SCHEME_MAPPINGS": {
+      "default": "Button--secondary",
+      "primary": "Button--primary",
+      "secondary": "Button--secondary",
+      "danger": "Button--danger",
+      "outline": "btn-outline",
+      "invisible": "Button--invisible",
+      "link": "btn-link"
+    },
+    "SCHEME_OPTIONS": [
+      "default",
+      "primary",
+      "secondary",
+      "danger",
+      "outline",
+      "invisible",
+      "link"
+    ],
+    "SIZE_MAPPINGS": {
+      "small": "Button--small",
+      "medium": "Button--medium",
+      "large": "Button--large"
+    },
+    "SIZE_OPTIONS": [
+      "small",
+      "medium",
+      "large"
+    ]
+  },
   "Primer::Beta::ButtonGroup": {
   },
   "Primer::Beta::CloseButton": {
@@ -383,6 +477,19 @@
       "h6"
     ]
   },
+  "Primer::Beta::IconButton": {
+    "DEFAULT_SCHEME": "default",
+    "SCHEME_MAPPINGS": {
+      "default": "Button--secondary",
+      "danger": "Button--danger",
+      "invisible": "Button--invisible"
+    },
+    "SCHEME_OPTIONS": [
+      "default",
+      "danger",
+      "invisible"
+    ]
+  },
   "Primer::Beta::Text": {
     "DEFAULT_TAG": "span"
   },

data/static/statuses.json

@@ -2,6 +2,10 @@
   "Primer::Alpha::AutoComplete": "deprecated",
   "Primer::Alpha::AutoComplete::Item": "deprecated",
   "Primer::Alpha::ButtonMarketing": "alpha",
+  "Primer::Alpha::Dialog": "alpha",
+  "Primer::Alpha::Dialog::Body": "alpha",
+  "Primer::Alpha::Dialog::Footer": "alpha",
+  "Primer::Alpha::Dialog::Header": "alpha",
   "Primer::Alpha::HiddenTextExpander": "alpha",
   "Primer::Alpha::Layout": "alpha",
   "Primer::Alpha::Layout::Main": "alpha",
@@ -24,12 +28,14 @@
   "Primer::Beta::BorderBox::Header": "beta",
   "Primer::Beta::Breadcrumbs": "beta",
   "Primer::Beta::Breadcrumbs::Item": "alpha",
+  "Primer::Beta::Button": "beta",
   "Primer::Beta::ButtonGroup": "beta",
   "Primer::Beta::CloseButton": "beta",
   "Primer::Beta::Counter": "beta",
   "Primer::Beta::Details": "beta",
   "Primer::Beta::Flash": "beta",
   "Primer::Beta::Heading": "beta",
+  "Primer::Beta::IconButton": "beta",
   "Primer::Beta::Text": "beta",
   "Primer::Beta::Truncate": "beta",
   "Primer::Beta::Truncate::TruncateText": "alpha",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.92
+  version: 0.0.93
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-08-24 00:00:00.000000000 Z
+date: 2022-09-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -412,13 +412,18 @@ files:
 - app/components/primer/alpha/auto_complete/auto_complete.html.erb
 - app/components/primer/alpha/auto_complete/item.rb
 - app/components/primer/alpha/button_marketing.rb
+- app/components/primer/alpha/dialog.html.erb
+- app/components/primer/alpha/dialog.rb
+- app/components/primer/alpha/dialog/body.rb
+- app/components/primer/alpha/dialog/footer.rb
+- app/components/primer/alpha/dialog/header.html.erb
+- app/components/primer/alpha/dialog/header.rb
 - 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/modal-dialog-element.ts
 - app/components/primer/alpha/tab_nav.html.erb
 - app/components/primer/alpha/tab_nav.rb
 - app/components/primer/alpha/tab_panels.html.erb
@@ -457,6 +462,9 @@ files:
 - app/components/primer/beta/border_box/header.rb
 - app/components/primer/beta/breadcrumbs.html.erb
 - app/components/primer/beta/breadcrumbs.rb
+- app/components/primer/beta/button.html.erb
+- app/components/primer/beta/button.pcss
+- app/components/primer/beta/button.rb
 - app/components/primer/beta/button_group.html.erb
 - app/components/primer/beta/button_group.rb
 - app/components/primer/beta/close_button.rb
@@ -466,6 +474,8 @@ files:
 - app/components/primer/beta/flash.html.erb
 - app/components/primer/beta/flash.rb
 - app/components/primer/beta/heading.rb
+- app/components/primer/beta/icon_button.html.erb
+- app/components/primer/beta/icon_button.rb
 - app/components/primer/beta/text.rb
 - app/components/primer/beta/truncate.html.erb
 - app/components/primer/beta/truncate.rb
@@ -498,6 +508,12 @@ files:
 - app/components/primer/dropdown/menu.ts
 - app/components/primer/dropdown_menu_component.html.erb
 - app/components/primer/dropdown_menu_component.rb
+- app/components/primer/experimental/action-bar-element.d.ts
+- app/components/primer/experimental/action-bar-element.js
+- app/components/primer/experimental/action-menu-element.d.ts
+- app/components/primer/experimental/action-menu-element.js
+- app/components/primer/experimental/overflow-menu-element.d.ts
+- app/components/primer/experimental/overflow-menu-element.js
 - app/components/primer/flex_component.rb
 - app/components/primer/flex_item_component.rb
 - app/components/primer/heading_component.rb
@@ -565,6 +581,11 @@ files:
 - app/lib/primer/test_selector_helper.rb
 - app/lib/primer/underline_nav_helper.rb
 - app/lib/primer/view_helper.rb
+- lib/postcss_mixins/focusBoxShadowInset.pcss
+- lib/postcss_mixins/focusOutline.pcss
+- lib/postcss_mixins/focusOutlineOnEmphasis.pcss
+- lib/postcss_mixins/minTouchTarget.js
+- lib/postcss_mixins/targetBoxShadow.pcss
 - lib/primer/classify.rb
 - lib/primer/classify/utilities.rb
 - lib/primer/classify/utilities.yml
@@ -686,7 +707,6 @@ files:
 - static/arguments.yml
 - static/assets/view-components.svg
 - static/audited_at.json
-- static/classes.yml
 - static/constants.json
 - static/statuses.json
 homepage: https://github.com/primer/view_components

data/app/components/primer/alpha/segmented-control-element.d.ts

@@ -1,8 +0,0 @@
-export default class SegmentedControlElement extends HTMLElement {
-    constructor();
-}
-declare global {
-    interface Window {
-        SegmentedControlElement: typeof SegmentedControlElement;
-    }
-}

data/app/components/primer/alpha/segmented-control-element.js

@@ -1,28 +0,0 @@
-/* eslint-disable custom-elements/no-constructor */
-export default class SegmentedControlElement extends HTMLElement {
-    constructor() {
-        super();
-        this.addEventListener('click', (event) => {
-            var _a, _b;
-            const controls = Array.from(this.querySelectorAll('ul button')).filter(tab => tab instanceof HTMLElement && tab.closest(this.tagName) === this);
-            if (!(event.target instanceof Element))
-                return;
-            if (event.target.closest(this.tagName) !== this)
-                return;
-            const selectedControl = event.target.closest('button');
-            if (!(selectedControl instanceof HTMLElement) || !selectedControl.closest('ul'))
-                return;
-            for (const control of controls) {
-                (_a = control.closest('li')) === null || _a === void 0 ? void 0 : _a.classList.remove('SegmentedControl-item--selected');
-                control.setAttribute('aria-current', 'false');
-            }
-            (_b = selectedControl.closest('li')) === null || _b === void 0 ? void 0 : _b.classList.add('SegmentedControl-item--selected');
-            selectedControl.setAttribute('aria-current', 'true');
-            selectedControl.focus();
-        });
-    }
-}
-if (!window.customElements.get('segmented-control')) {
-    window.SegmentedControlElement = SegmentedControlElement;
-    window.customElements.define('segmented-control', SegmentedControlElement);
-}