@primer/components 32.1.1-rc.92743105 → 33.0.0-rc.9cc2a259
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.devcontainer/devcontainer.json +1 -1
- package/.github/workflows/ci.yml +1 -1
- package/.github/workflows/release.yml +1 -1
- package/.github/workflows/release_canary.yml +1 -1
- package/.github/workflows/release_candidate.yml +1 -1
- package/.github/workflows/statuses.yml +32 -0
- package/.gitignore +1 -0
- package/.nvmrc +1 -1
- package/CHANGELOG.md +20 -2
- package/contributor-docs/CONTRIBUTING.md +14 -58
- package/dist/browser.esm.js +105 -108
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +105 -108
- package/dist/browser.umd.js.map +1 -1
- package/docs/content/BranchName.md +6 -5
- package/docs/content/Details.md +4 -8
- package/docs/content/Heading.md +5 -10
- package/docs/content/Label.md +6 -7
- package/docs/content/ProgressBar.mdx +7 -6
- package/docs/content/Text.md +0 -6
- package/docs/content/{ActionList2.mdx → drafts/ActionList2.mdx} +5 -9
- package/docs/content/drafts/ActionMenu2.mdx +251 -0
- package/docs/content/status.mdx +1 -1
- package/docs/content/system-props.mdx +1 -1
- package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +9 -1
- package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +1 -1
- package/docs/src/component-checklist.js +10 -2
- package/lib/ActionList/Item.js +1 -1
- package/lib/ActionList2/Divider.d.ts +3 -2
- package/lib/ActionList2/Divider.js +10 -5
- package/lib/ActionList2/Item.js +21 -5
- package/lib/ActionList2/List.js +11 -1
- package/lib/ActionList2/MenuContext.d.ts +10 -0
- package/lib/ActionList2/MenuContext.js +15 -0
- package/lib/ActionList2/Selection.js +14 -1
- package/lib/ActionList2/index.d.ts +1 -2
- package/lib/ActionMenu2.d.ts +313 -0
- package/lib/ActionMenu2.js +91 -0
- package/lib/Autocomplete/Autocomplete.d.ts +2 -1
- package/lib/Autocomplete/AutocompleteInput.d.ts +2 -1
- package/lib/Avatar.d.ts +1 -2
- package/lib/Avatar.js +1 -1
- package/lib/BranchName.d.ts +1 -2
- package/lib/BranchName.js +1 -1
- package/lib/Button/Button.d.ts +2 -2
- package/lib/Button/ButtonClose.d.ts +2 -2
- package/lib/Button/ButtonDanger.d.ts +2 -2
- package/lib/Button/ButtonInvisible.d.ts +2 -2
- package/lib/Button/ButtonOutline.d.ts +2 -2
- package/lib/Button/ButtonPrimary.d.ts +2 -2
- package/lib/CircleOcticon.d.ts +35 -35
- package/lib/Details.d.ts +1 -2
- package/lib/Details.js +1 -3
- package/lib/Dialog.d.ts +37 -37
- package/lib/Dropdown.d.ts +8 -72
- package/lib/DropdownMenu/DropdownButton.d.ts +6 -3
- package/lib/FilterList.d.ts +1 -1
- package/lib/Heading.d.ts +1 -2
- package/lib/Heading.js +1 -6
- package/lib/Position.d.ts +4 -4
- package/lib/ProgressBar.d.ts +16 -11
- package/lib/ProgressBar.js +6 -10
- package/lib/SelectMenu/SelectMenu.d.ts +11 -10
- package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib/Spinner.d.ts +1 -2
- package/lib/Spinner.js +1 -3
- package/lib/TextInputWithTokens.d.ts +2 -1
- package/lib/Token/AvatarToken.d.ts +1 -1
- package/lib/Token/IssueLabelToken.d.ts +1 -1
- package/lib/Token/Token.d.ts +1 -1
- package/lib/__tests__/Avatar.test.js +4 -2
- package/lib/__tests__/Avatar.types.test.d.ts +3 -0
- package/lib/__tests__/Avatar.types.test.js +31 -0
- package/lib/__tests__/BranchName.types.test.d.ts +3 -0
- package/lib/__tests__/BranchName.types.test.js +28 -0
- package/lib/__tests__/Details.types.test.d.ts +3 -0
- package/lib/__tests__/Details.types.test.js +28 -0
- package/lib/__tests__/Heading.test.js +63 -30
- package/lib/__tests__/Heading.types.test.d.ts +3 -0
- package/lib/__tests__/Heading.types.test.js +28 -0
- package/lib/drafts.d.ts +1 -0
- package/lib/drafts.js +13 -0
- package/lib/stories/ActionMenu2.stories.js +433 -0
- package/lib-esm/ActionList/Item.js +1 -1
- package/lib-esm/ActionList2/Divider.d.ts +3 -2
- package/lib-esm/ActionList2/Divider.js +8 -5
- package/lib-esm/ActionList2/Item.js +19 -5
- package/lib-esm/ActionList2/List.js +9 -1
- package/lib-esm/ActionList2/MenuContext.d.ts +10 -0
- package/lib-esm/ActionList2/MenuContext.js +3 -0
- package/lib-esm/ActionList2/Selection.js +12 -1
- package/lib-esm/ActionList2/index.d.ts +1 -2
- package/lib-esm/ActionMenu2.d.ts +313 -0
- package/lib-esm/ActionMenu2.js +67 -0
- package/lib-esm/Autocomplete/Autocomplete.d.ts +2 -1
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +2 -1
- package/lib-esm/Avatar.d.ts +1 -2
- package/lib-esm/Avatar.js +2 -2
- package/lib-esm/BranchName.d.ts +1 -2
- package/lib-esm/BranchName.js +2 -2
- package/lib-esm/Button/Button.d.ts +2 -2
- package/lib-esm/Button/ButtonClose.d.ts +2 -2
- package/lib-esm/Button/ButtonDanger.d.ts +2 -2
- package/lib-esm/Button/ButtonInvisible.d.ts +2 -2
- package/lib-esm/Button/ButtonOutline.d.ts +2 -2
- package/lib-esm/Button/ButtonPrimary.d.ts +2 -2
- package/lib-esm/CircleOcticon.d.ts +35 -35
- package/lib-esm/Details.d.ts +1 -2
- package/lib-esm/Details.js +1 -2
- package/lib-esm/Dialog.d.ts +37 -37
- package/lib-esm/Dropdown.d.ts +8 -72
- package/lib-esm/DropdownMenu/DropdownButton.d.ts +6 -3
- package/lib-esm/FilterList.d.ts +1 -1
- package/lib-esm/Heading.d.ts +1 -2
- package/lib-esm/Heading.js +2 -6
- package/lib-esm/Position.d.ts +4 -4
- package/lib-esm/ProgressBar.d.ts +16 -11
- package/lib-esm/ProgressBar.js +7 -11
- package/lib-esm/SelectMenu/SelectMenu.d.ts +11 -10
- package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib-esm/Spinner.d.ts +1 -2
- package/lib-esm/Spinner.js +1 -2
- package/lib-esm/TextInputWithTokens.d.ts +2 -1
- package/lib-esm/Token/AvatarToken.d.ts +1 -1
- package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
- package/lib-esm/Token/Token.d.ts +1 -1
- package/lib-esm/__tests__/Avatar.test.js +4 -2
- package/lib-esm/__tests__/Avatar.types.test.d.ts +3 -0
- package/lib-esm/__tests__/Avatar.types.test.js +16 -0
- package/lib-esm/__tests__/BranchName.types.test.d.ts +3 -0
- package/lib-esm/__tests__/BranchName.types.test.js +13 -0
- package/lib-esm/__tests__/Details.types.test.d.ts +3 -0
- package/lib-esm/__tests__/Details.types.test.js +13 -0
- package/lib-esm/__tests__/Heading.test.js +62 -30
- package/lib-esm/__tests__/Heading.types.test.d.ts +3 -0
- package/lib-esm/__tests__/Heading.types.test.js +13 -0
- package/lib-esm/drafts.d.ts +1 -0
- package/lib-esm/drafts.js +2 -1
- package/lib-esm/stories/ActionMenu2.stories.js +376 -0
- package/package-lock.json +321 -269
- package/package.json +11 -5
- package/script/component-status-project/build.ts +100 -0
- package/script/component-status-project/deploy.rb +142 -0
- package/src/ActionList/Item.tsx +1 -0
- package/src/ActionList2/Divider.tsx +13 -8
- package/src/ActionList2/Item.tsx +13 -3
- package/src/ActionList2/List.tsx +6 -2
- package/src/ActionList2/MenuContext.tsx +6 -0
- package/src/ActionList2/Selection.tsx +11 -1
- package/src/ActionMenu2.tsx +94 -0
- package/src/Avatar.tsx +2 -4
- package/src/BranchName.tsx +3 -3
- package/src/Details.tsx +1 -5
- package/src/Heading.tsx +2 -9
- package/src/ProgressBar.tsx +11 -10
- package/src/Spinner.tsx +1 -3
- package/src/__tests__/Avatar.test.tsx +1 -1
- package/src/__tests__/Avatar.types.test.tsx +11 -0
- package/src/__tests__/BranchName.types.test.tsx +11 -0
- package/src/__tests__/Details.types.test.tsx +11 -0
- package/src/__tests__/Heading.test.tsx +71 -25
- package/src/__tests__/Heading.types.test.tsx +11 -0
- package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +4 -0
- package/src/drafts.ts +1 -0
- package/src/stories/ActionMenu2.stories.tsx +551 -0
- package/stats.html +1 -1
- package/tsconfig.build.json +1 -1
- package/tsconfig.json +1 -1
package/lib-esm/Spinner.js
CHANGED
@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
2
2
|
|
3
3
|
import React from 'react';
|
4
4
|
import styled from 'styled-components';
|
5
|
-
import { COMMON } from './constants';
|
6
5
|
import sx from './sx';
|
7
6
|
const sizeMap = {
|
8
7
|
small: '16px',
|
@@ -41,6 +40,6 @@ Spinner.displayName = "Spinner";
|
|
41
40
|
const StyledSpinner = styled(Spinner).withConfig({
|
42
41
|
displayName: "Spinner__StyledSpinner",
|
43
42
|
componentId: "sc-14tspit-0"
|
44
|
-
})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", "
|
43
|
+
})(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", ""], sx);
|
45
44
|
StyledSpinner.displayName = 'Spinner';
|
46
45
|
export default StyledSpinner;
|
@@ -39,6 +39,7 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
|
|
39
39
|
} & Pick<Omit<Pick<{
|
40
40
|
[x: string]: any;
|
41
41
|
[x: number]: any;
|
42
|
+
[x: symbol]: any;
|
42
43
|
} & {
|
43
44
|
theme?: any;
|
44
45
|
} & {
|
@@ -51,6 +52,7 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
|
|
51
52
|
}> | undefined;
|
52
53
|
} & Pick<{
|
53
54
|
color?: string | undefined;
|
55
|
+
property?: string | undefined;
|
54
56
|
maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
55
57
|
minWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
56
58
|
translate?: "yes" | "no" | undefined;
|
@@ -86,7 +88,6 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
|
|
86
88
|
datatype?: string | undefined;
|
87
89
|
inlist?: any;
|
88
90
|
prefix?: string | undefined;
|
89
|
-
property?: string | undefined;
|
90
91
|
resource?: string | undefined;
|
91
92
|
typeof?: string | undefined;
|
92
93
|
vocab?: string | undefined;
|
@@ -3,5 +3,5 @@ import { TokenBaseProps } from './TokenBase';
|
|
3
3
|
export interface AvatarTokenProps extends TokenBaseProps {
|
4
4
|
avatarSrc: string;
|
5
5
|
}
|
6
|
-
declare const AvatarToken: React.ForwardRefExoticComponent<Pick<AvatarTokenProps, "default" | "muted" | "sizes" | "color" | "content" | "height" | "translate" | "width" | "hidden" | "children" | "value" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "text" | "start" | "size" | "wrap" | "open" | "list" | "multiple" | "role" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "
|
6
|
+
declare const AvatarToken: React.ForwardRefExoticComponent<Pick<AvatarTokenProps, "default" | "muted" | "sizes" | "color" | "property" | "content" | "height" | "translate" | "width" | "hidden" | "children" | "value" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "text" | "start" | "size" | "wrap" | "open" | "list" | "multiple" | "role" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "disabled" | "as" | "step" | "selected" | "download" | "href" | "hrefLang" | "media" | "rel" | "target" | "max" | "method" | "min" | "crossOrigin" | "classID" | "useMap" | "wmode" | "integrity" | "charSet" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "playsInline" | "preload" | "src" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "required" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "async" | "defer" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "kind" | "srcLang" | "poster" | "onRemove" | "isSelected" | "avatarSrc"> & React.RefAttributes<HTMLElement>>;
|
7
7
|
export default AvatarToken;
|
@@ -10,5 +10,5 @@ export interface IssueLabelTokenProps extends TokenBaseProps {
|
|
10
10
|
*/
|
11
11
|
hideRemoveButton?: boolean;
|
12
12
|
}
|
13
|
-
declare const IssueLabelToken: React.ForwardRefExoticComponent<Pick<IssueLabelTokenProps, "default" | "muted" | "sizes" | "color" | "content" | "height" | "translate" | "width" | "hidden" | "children" | "value" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "text" | "start" | "size" | "wrap" | "open" | "list" | "multiple" | "role" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "
|
13
|
+
declare const IssueLabelToken: React.ForwardRefExoticComponent<Pick<IssueLabelTokenProps, "default" | "muted" | "sizes" | "color" | "property" | "content" | "height" | "translate" | "width" | "hidden" | "children" | "value" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "text" | "start" | "size" | "wrap" | "open" | "list" | "multiple" | "role" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "disabled" | "as" | "step" | "selected" | "download" | "href" | "hrefLang" | "media" | "rel" | "target" | "max" | "method" | "min" | "crossOrigin" | "classID" | "useMap" | "wmode" | "integrity" | "charSet" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "playsInline" | "preload" | "src" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "required" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "async" | "defer" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "kind" | "srcLang" | "poster" | "onRemove" | "isSelected" | "hideRemoveButton" | "fillColor"> & React.RefAttributes<HTMLElement>>;
|
14
14
|
export default IssueLabelToken;
|
package/lib-esm/Token/Token.d.ts
CHANGED
@@ -11,5 +11,5 @@ export interface TokenProps extends TokenBaseProps {
|
|
11
11
|
*/
|
12
12
|
hideRemoveButton?: boolean;
|
13
13
|
}
|
14
|
-
declare const Token: React.ForwardRefExoticComponent<Pick<TokenProps & SxProp, "default" | "muted" | "sizes" | "color" | "content" | "height" | "translate" | "width" | "hidden" | "children" | "value" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "text" | "start" | "size" | "wrap" | "open" | "list" | "multiple" | "role" | "sx" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "
|
14
|
+
declare const Token: React.ForwardRefExoticComponent<Pick<TokenProps & SxProp, "default" | "muted" | "sizes" | "color" | "property" | "content" | "height" | "translate" | "width" | "hidden" | "children" | "value" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "text" | "start" | "size" | "wrap" | "open" | "list" | "multiple" | "role" | "sx" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "disabled" | "as" | "step" | "selected" | "download" | "href" | "hrefLang" | "media" | "rel" | "target" | "max" | "method" | "min" | "crossOrigin" | "classID" | "useMap" | "wmode" | "integrity" | "charSet" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "playsInline" | "preload" | "src" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "required" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "async" | "defer" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "kind" | "srcLang" | "poster" | "leadingVisual" | "onRemove" | "isSelected" | "hideRemoveButton"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
|
15
15
|
export default Token;
|
@@ -48,9 +48,11 @@ describe('Avatar', () => {
|
|
48
48
|
});
|
49
49
|
it('respects margin props', () => {
|
50
50
|
expect(render( /*#__PURE__*/React.createElement(Avatar, {
|
51
|
-
m: 2,
|
52
51
|
src: "primer.png",
|
53
|
-
alt: ""
|
52
|
+
alt: "",
|
53
|
+
sx: {
|
54
|
+
m: 2
|
55
|
+
}
|
54
56
|
}))).toHaveStyleRule('margin', px(theme.space[2]));
|
55
57
|
});
|
56
58
|
});
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import Avatar from '../Avatar';
|
3
|
+
export function shouldAcceptCallWithNoProps() {
|
4
|
+
return /*#__PURE__*/React.createElement(Avatar, {
|
5
|
+
src: "https://avatars.githubusercontent.com/primer"
|
6
|
+
});
|
7
|
+
}
|
8
|
+
shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
|
9
|
+
export function shouldNotAcceptSystemProps() {
|
10
|
+
// @ts-expect-error system props should not be accepted
|
11
|
+
return /*#__PURE__*/React.createElement(Avatar, {
|
12
|
+
src: "https://avatars.githubusercontent.com/primer",
|
13
|
+
backgroundColor: "thistle"
|
14
|
+
});
|
15
|
+
}
|
16
|
+
shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import BranchName from '../BranchName';
|
3
|
+
export function shouldAcceptCallWithNoProps() {
|
4
|
+
return /*#__PURE__*/React.createElement(BranchName, null);
|
5
|
+
}
|
6
|
+
shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
|
7
|
+
export function shouldNotAcceptSystemProps() {
|
8
|
+
// @ts-expect-error system props should not be accepted
|
9
|
+
return /*#__PURE__*/React.createElement(BranchName, {
|
10
|
+
backgroundColor: "thistle"
|
11
|
+
});
|
12
|
+
}
|
13
|
+
shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import Details from '../Details';
|
3
|
+
export function shouldAcceptCallWithNoProps() {
|
4
|
+
return /*#__PURE__*/React.createElement(Details, null);
|
5
|
+
}
|
6
|
+
shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
|
7
|
+
export function shouldNotAcceptSystemProps() {
|
8
|
+
// @ts-expect-error system props should not be accepted
|
9
|
+
return /*#__PURE__*/React.createElement(Details, {
|
10
|
+
backgroundColor: "thistle"
|
11
|
+
});
|
12
|
+
}
|
13
|
+
shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";
|
@@ -4,6 +4,7 @@ import { render, behavesAsComponent, checkExports } from '../utils/testing';
|
|
4
4
|
import { render as HTMLRender, cleanup } from '@testing-library/react';
|
5
5
|
import { axe, toHaveNoViolations } from 'jest-axe';
|
6
6
|
import 'babel-polyfill';
|
7
|
+
import ThemeProvider from '../ThemeProvider';
|
7
8
|
expect.extend(toHaveNoViolations);
|
8
9
|
const theme = {
|
9
10
|
breakpoints: ['400px', '640px', '960px', '1280px'],
|
@@ -46,54 +47,85 @@ describe('Heading', () => {
|
|
46
47
|
cleanup();
|
47
48
|
});
|
48
49
|
it('respects fontWeight', () => {
|
49
|
-
expect(render( /*#__PURE__*/React.createElement(
|
50
|
-
fontWeight: "bold",
|
50
|
+
expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
|
51
51
|
theme: theme
|
52
|
-
}
|
53
|
-
|
54
|
-
|
52
|
+
}, /*#__PURE__*/React.createElement(Heading, {
|
53
|
+
sx: {
|
54
|
+
fontWeight: 'bold'
|
55
|
+
}
|
56
|
+
})))).toHaveStyleRule('font-weight', theme.fontWeights.bold);
|
57
|
+
expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
|
55
58
|
theme: theme
|
56
|
-
}
|
57
|
-
|
58
|
-
|
59
|
+
}, /*#__PURE__*/React.createElement(Heading, {
|
60
|
+
sx: {
|
61
|
+
fontWeight: 'normal'
|
62
|
+
}
|
63
|
+
})))).toHaveStyleRule('font-weight', theme.fontWeights.normal);
|
64
|
+
expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
|
59
65
|
theme: theme
|
60
|
-
}
|
61
|
-
|
62
|
-
|
66
|
+
}, /*#__PURE__*/React.createElement(Heading, {
|
67
|
+
sx: {
|
68
|
+
fontWeight: 'semibold'
|
69
|
+
}
|
70
|
+
})))).toHaveStyleRule('font-weight', theme.fontWeights.semibold);
|
71
|
+
expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
|
63
72
|
theme: theme
|
64
|
-
}
|
73
|
+
}, /*#__PURE__*/React.createElement(Heading, {
|
74
|
+
sx: {
|
75
|
+
fontWeight: 'light'
|
76
|
+
}
|
77
|
+
})))).toHaveStyleRule('font-weight', theme.fontWeights.light);
|
65
78
|
});
|
66
79
|
it('respects lineHeight', () => {
|
67
|
-
expect(render( /*#__PURE__*/React.createElement(
|
68
|
-
lineHeight: "normal",
|
80
|
+
expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
|
69
81
|
theme: theme
|
70
|
-
}
|
71
|
-
|
72
|
-
|
82
|
+
}, /*#__PURE__*/React.createElement(Heading, {
|
83
|
+
sx: {
|
84
|
+
lineHeight: 'normal'
|
85
|
+
}
|
86
|
+
})))).toHaveStyleRule('line-height', String(theme.lineHeights.normal));
|
87
|
+
expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
|
73
88
|
theme: theme
|
74
|
-
}
|
75
|
-
|
76
|
-
|
89
|
+
}, /*#__PURE__*/React.createElement(Heading, {
|
90
|
+
sx: {
|
91
|
+
lineHeight: 'condensed'
|
92
|
+
}
|
93
|
+
})))).toHaveStyleRule('line-height', String(theme.lineHeights.condensed));
|
94
|
+
expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
|
77
95
|
theme: theme
|
78
|
-
}
|
96
|
+
}, /*#__PURE__*/React.createElement(Heading, {
|
97
|
+
sx: {
|
98
|
+
lineHeight: 'condensedUltra'
|
99
|
+
}
|
100
|
+
})))).toHaveStyleRule('line-height', String(theme.lineHeights.condensedUltra));
|
79
101
|
});
|
80
102
|
it('respects fontFamily="mono"', () => {
|
81
|
-
expect(render( /*#__PURE__*/React.createElement(
|
82
|
-
fontFamily: "mono",
|
103
|
+
expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
|
83
104
|
theme: theme
|
84
|
-
}
|
105
|
+
}, /*#__PURE__*/React.createElement(Heading, {
|
106
|
+
sx: {
|
107
|
+
fontFamily: 'mono'
|
108
|
+
}
|
109
|
+
})))).toHaveStyleRule('font-family', theme.fonts.mono);
|
85
110
|
});
|
86
111
|
it('renders fontSize', () => {
|
87
112
|
for (const fontSize of theme.fontSizes) {
|
88
|
-
expect(render( /*#__PURE__*/React.createElement(
|
89
|
-
fontSize: fontSize,
|
113
|
+
expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
|
90
114
|
theme: theme
|
91
|
-
}
|
115
|
+
}, /*#__PURE__*/React.createElement(Heading, {
|
116
|
+
sx: {
|
117
|
+
fontSize
|
118
|
+
}
|
119
|
+
})))).toHaveStyleRule('font-size', `${fontSize}`);
|
92
120
|
}
|
93
121
|
});
|
94
122
|
it('respects the "fontStyle" prop', () => {
|
95
|
-
expect(render( /*#__PURE__*/React.createElement(
|
96
|
-
|
97
|
-
}
|
123
|
+
expect(render( /*#__PURE__*/React.createElement(ThemeProvider, {
|
124
|
+
theme: theme
|
125
|
+
}, /*#__PURE__*/React.createElement(Heading, {
|
126
|
+
sx: {
|
127
|
+
fontStyle: 'italic'
|
128
|
+
}
|
129
|
+
})))).toHaveStyleRule('font-style', 'italic');
|
98
130
|
});
|
99
131
|
});
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import Heading from '../Heading';
|
3
|
+
export function shouldAcceptCallWithNoProps() {
|
4
|
+
return /*#__PURE__*/React.createElement(Heading, null);
|
5
|
+
}
|
6
|
+
shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
|
7
|
+
export function shouldNotAcceptSystemProps() {
|
8
|
+
// @ts-expect-error system props should not be accepted
|
9
|
+
return /*#__PURE__*/React.createElement(Heading, {
|
10
|
+
backgroundColor: "thistle"
|
11
|
+
});
|
12
|
+
}
|
13
|
+
shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";
|
package/lib-esm/drafts.d.ts
CHANGED
package/lib-esm/drafts.js
CHANGED