primer_view_components 0.3.1 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 920b620267fc4a60da9ccb72d52b22b8dcc81710639caf050de3103922bd3bbe
-  data.tar.gz: 4c425b24ed7b1ee22514c085e5c541742e95c03f43385a34d26ac4abf839e72e
+  metadata.gz: 4761e0e70cdbd279de615f5042340c42339c625d0b85cf87a54824701ec4c8c2
+  data.tar.gz: f7078c747b8ceafd62b5296f9eb14740fe105ca822c6d158956aa7917541e3d3
 SHA512:
-  metadata.gz: 8f6707e8593d1df4403d7cb8ddc3dfb26e2243e85d0fdbe7aa16f5489eac6543b654a1a6975bf55ab1298908ff69d067f1da59cfea84b01736e11b81c172e31d
-  data.tar.gz: e2ab65ebe43f59e8f20e0e0ff9e9af6ef37a9010dd7bb05ba8da2dd4e0bee6a6f09e723f6f4635c7b8b325d08d42eaf2ceccb9f2a525e4882dd92a26b6a220c9
+  metadata.gz: e7cdaa73c356c6381a7bab523d1bf788ea3fe0974c770f827193a402e858481e84e3fbec80ee4b534c8abe3193e5abe30f4bd593cd02e057348e6c589ff19517
+  data.tar.gz: fbfd2a145ab1384b00453b6eef655d691bae3e5a2ae9e78898825fe650af2e5f78bca9d63e928f7b023482da75b13dc924360e88c3ed7bee4c4d376f065def1e

data/CHANGELOG.md

@@ -1,5 +1,36 @@
 # CHANGELOG
 
+## 0.5.0
+
+### Minor Changes
+
+- [#2148](https://github.com/primer/view_components/pull/2148) [`cbd5c84d`](https://github.com/primer/view_components/commit/cbd5c84d8d290b0d018f15c5ee84cd94afcd4b0b) Thanks [@keithamus](https://github.com/keithamus)! - Add a linter discouraging use of <details-menu> in favor of Primer::Alpha::ActionMenu
+
+  <!-- Changed components: _none_ -->
+
+- [#2123](https://github.com/primer/view_components/pull/2123) [`f9119d95`](https://github.com/primer/view_components/commit/f9119d95f281d528f3c0086ebc521afd33bd4295) Thanks [@langermank](https://github.com/langermank)! - - Use Primitive v8 color tokens
+  - Add tests for compiled CSS to ensure CSS color variables have a fallback
+
+### Patch Changes
+
+- [#2153](https://github.com/primer/view_components/pull/2153) [`b9871598`](https://github.com/primer/view_components/commit/b98715986852c5f0f51aaf9f9af0463d2eda727c) Thanks [@langermank](https://github.com/langermank)! - Update color fallback for `UnderlineNav` counter
+
+## 0.4.0
+
+### Minor Changes
+
+- [#2111](https://github.com/primer/view_components/pull/2111) [`6ee6d774`](https://github.com/primer/view_components/commit/6ee6d774b463753c7b2b944dcf57dd4ff40c9589) Thanks [@keithamus](https://github.com/keithamus)! - refactor Primer::Alpha::Tooltip to use popover
+
+  Changed components: Primer::Alpha::Tooltip
+
+- [#2034](https://github.com/primer/view_components/pull/2034) [`707a1fa3`](https://github.com/primer/view_components/commit/707a1fa31dd23cae8316fa9d8a6c122bc4edc354) Thanks [@radglob](https://github.com/radglob)! - Partially address a11y issues in Link component.
+
+  Links can no longer be rendered as `<span>`s.
+
+- [#1941](https://github.com/primer/view_components/pull/1941) [`a8cc5ba2`](https://github.com/primer/view_components/commit/a8cc5ba2061207d9ca65c42f3d355eb8b7f03bb8) Thanks [@jonrohan](https://github.com/jonrohan)! - 🆕 New component!
+
+  The `Primer::Alpha::ActionBar` component is used to create a toolbar of buttons that will fold into an ActionMenu when the space is smaller. [Design details](https://primer.style/design/components/action-bar/)
+
 ## 0.3.1
 
 ### Patch Changes

data/app/assets/javascripts/app/components/primer/alpha/action_bar_element.d.ts

@@ -0,0 +1,16 @@
+declare class ActionBarElement extends HTMLElement {
+    #private;
+    items: HTMLElement[];
+    itemContainer: HTMLElement;
+    moreMenu: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    menuItemClick(event: Event): void;
+    update(rect?: DOMRect): void;
+}
+declare global {
+    interface Window {
+        ActionBarElement: typeof ActionBarElement;
+    }
+}
+export {};

data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts

@@ -0,0 +1,30 @@
+import IncludeFragmentElement from '@github/include-fragment-element';
+type SelectVariant = 'none' | 'single' | 'multiple' | null;
+type SelectedItem = {
+    label: string | null | undefined;
+    value: string | null | undefined;
+    element: Element;
+};
+export declare class ActionMenuElement extends HTMLElement {
+    #private;
+    includeFragment: IncludeFragmentElement;
+    get selectVariant(): SelectVariant;
+    set selectVariant(variant: SelectVariant);
+    get dynamicLabelPrefix(): string;
+    set dynamicLabelPrefix(value: string);
+    get dynamicLabel(): boolean;
+    set dynamicLabel(value: boolean);
+    get popoverElement(): HTMLElement | null;
+    get invokerElement(): HTMLElement | null;
+    get invokerLabel(): HTMLElement | null;
+    get selectedItems(): SelectedItem[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+}
+declare global {
+    interface Window {
+        ActionMenuElement: typeof ActionMenuElement;
+    }
+}
+export {};

data/app/assets/javascripts/app/components/primer/alpha/dropdown/menu.d.ts

@@ -0,0 +1 @@
+import '@github/details-menu-element';

data/app/assets/javascripts/app/components/primer/alpha/dropdown.d.ts

@@ -0,0 +1 @@
+import './dropdown/menu';

data/app/assets/javascripts/app/components/primer/alpha/image_crop.d.ts

@@ -0,0 +1 @@
+import '@github/image-crop-element';

data/app/assets/javascripts/app/components/primer/alpha/modal_dialog.d.ts

@@ -0,0 +1,18 @@
+export declare class ModalDialogElement extends HTMLElement {
+    #private;
+    openButton: HTMLButtonElement | null;
+    get open(): boolean;
+    set open(value: boolean);
+    get showButtons(): NodeList;
+    connectedCallback(): void;
+    show(): void;
+    close(closedNotCancelled?: boolean): void;
+}
+declare global {
+    interface Window {
+        ModalDialogElement: typeof ModalDialogElement;
+    }
+    interface HTMLElementTagNameMap {
+        'modal-dialog': ModalDialogElement;
+    }
+}

data/app/assets/javascripts/app/components/primer/alpha/nav_list.d.ts

@@ -0,0 +1,28 @@
+export declare class NavListElement extends HTMLElement {
+    #private;
+    items: HTMLElement[];
+    showMoreItem: HTMLElement;
+    focusMarkers: HTMLElement[];
+    connectedCallback(): void;
+    get showMoreDisabled(): boolean;
+    set showMoreDisabled(value: boolean);
+    set currentPage(value: number);
+    get currentPage(): number;
+    get totalPages(): number;
+    get paginationSrc(): string;
+    selectItemById(itemId: string | null): boolean;
+    selectItemByHref(href: string | null): boolean;
+    selectItemByCurrentLocation(): boolean;
+    expandItem(item: HTMLElement): void;
+    collapseItem(item: HTMLElement): void;
+    itemIsExpanded(item: HTMLElement | null): boolean;
+    handleItemWithSubItemClick(e: Event): void;
+    handleItemWithSubItemKeydown(e: KeyboardEvent): void;
+    private showMore;
+    private setShowMoreItemState;
+}
+declare global {
+    interface Window {
+        NavListElement: typeof NavListElement;
+    }
+}

data/app/assets/javascripts/app/components/primer/alpha/segmented_control.d.ts

@@ -0,0 +1,12 @@
+declare class SegmentedControlElement extends HTMLElement {
+    #private;
+    items: HTMLElement[];
+    connectedCallback(): void;
+    select(event: Event): void;
+}
+declare global {
+    interface Window {
+        SegmentedControlElement: typeof SegmentedControlElement;
+    }
+}
+export {};

data/app/assets/javascripts/app/components/primer/alpha/tab_container.d.ts

@@ -0,0 +1 @@
+import '@github/tab-container-element';

data/app/assets/javascripts/app/components/primer/alpha/toggle_switch.d.ts

@@ -0,0 +1,30 @@
+declare class ToggleSwitchElement extends HTMLElement {
+    switch: HTMLElement;
+    loadingSpinner: HTMLElement;
+    errorIcon: HTMLElement;
+    private toggling;
+    get src(): string | null;
+    get csrf(): string | null;
+    get csrfField(): string;
+    isRemote(): boolean;
+    toggle(): Promise<void>;
+    turnOn(): void;
+    turnOff(): void;
+    isOn(): boolean;
+    isOff(): boolean;
+    isDisabled(): boolean;
+    disable(): void;
+    enable(): void;
+    private performToggle;
+    private setLoadingState;
+    private setSuccessState;
+    private setErrorState;
+    private setFinishedState;
+    private submitForm;
+}
+declare global {
+    interface Window {
+        ToggleSwitchElement: typeof ToggleSwitchElement;
+    }
+}
+export {};

data/app/assets/javascripts/app/components/primer/alpha/tool_tip.d.ts

@@ -0,0 +1,26 @@
+import '@oddbird/popover-polyfill';
+type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw';
+declare class ToolTipElement extends HTMLElement {
+    #private;
+    styles(): string;
+    get htmlFor(): string;
+    set htmlFor(value: string);
+    get type(): 'description' | 'label';
+    set type(value: 'description' | 'label');
+    get direction(): Direction;
+    set direction(value: Direction);
+    get control(): HTMLElement | null;
+    set hiddenFromView(value: true | false);
+    get hiddenFromView(): true | false;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): Promise<void>;
+    static observedAttributes: string[];
+    attributeChangedCallback(name: string): void;
+}
+declare global {
+    interface Window {
+        ToolTipElement: typeof ToolTipElement;
+    }
+}
+export {};

data/app/assets/javascripts/app/components/primer/alpha/x_banner.d.ts

@@ -0,0 +1,11 @@
+declare class XBannerElement extends HTMLElement {
+    titleText: HTMLElement;
+    dismiss(): void;
+    private shouldReappear;
+}
+declare global {
+    interface Window {
+        XBannerElement: typeof XBannerElement;
+    }
+}
+export {};

data/app/assets/javascripts/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;
+    }
+}

data/app/assets/javascripts/app/components/primer/beta/auto_complete/auto_complete.d.ts

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

data/app/assets/javascripts/app/components/primer/beta/clipboard_copy.d.ts

@@ -0,0 +1 @@
+import '@github/clipboard-copy-element';

data/app/assets/javascripts/app/components/primer/beta/relative_time.d.ts

@@ -0,0 +1 @@
+import '@github/relative-time-element';

data/app/assets/javascripts/app/components/primer/focus_group.d.ts

@@ -0,0 +1,19 @@
+import '@oddbird/popover-polyfill';
+export default class FocusGroupElement extends HTMLElement {
+    #private;
+    get nowrap(): boolean;
+    set nowrap(value: boolean);
+    get direction(): 'horizontal' | 'vertical' | 'both';
+    set direction(value: 'horizontal' | 'vertical' | 'both');
+    get retain(): boolean;
+    set retain(value: boolean);
+    get mnemonics(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+}
+declare global {
+    interface Window {
+        FocusGroupElement: typeof FocusGroupElement;
+    }
+}

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

@@ -0,0 +1,21 @@
+import '@github/include-fragment-element';
+import '@oddbird/popover-polyfill';
+import './alpha/action_bar_element';
+import './alpha/dropdown';
+import './anchored_position';
+import './focus_group';
+import './alpha/image_crop';
+import './alpha/modal_dialog';
+import './alpha/nav_list';
+import './alpha/segmented_control';
+import './alpha/toggle_switch';
+import './alpha/tool_tip';
+import './alpha/x_banner';
+import './beta/auto_complete/auto_complete';
+import './beta/clipboard_copy';
+import './beta/relative_time';
+import './alpha/tab_container';
+import '../../../lib/primer/forms/primer_multi_input';
+import '../../../lib/primer/forms/primer_text_field';
+import '../../../lib/primer/forms/toggle_switch_input';
+import './alpha/action_menu/action_menu_element';

data/app/assets/javascripts/lib/primer/forms/primer_multi_input.d.ts

@@ -0,0 +1,10 @@
+export declare class PrimerMultiInputElement extends HTMLElement {
+    fields: HTMLInputElement[];
+    activateField(name: string): void;
+    private findField;
+}
+declare global {
+    interface Window {
+        PrimerMultiInputElement: typeof PrimerMultiInputElement;
+    }
+}

data/app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts

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

data/app/assets/javascripts/lib/primer/forms/toggle_switch_input.d.ts

@@ -0,0 +1,5 @@
+export declare class ToggleSwitchInputElement extends HTMLElement {
+    validationElement: HTMLElement;
+    validationMessageElement: HTMLElement;
+    connectedCallback(): void;
+}