@atlaskit/ads-mcp 0.17.1 → 0.17.3
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/CHANGELOG.md +13 -0
- package/README.md +88 -0
- package/dist/cjs/index.js +19 -40
- package/dist/cjs/tools/get-all-icons/icons.js +43 -0
- package/dist/cjs/tools/get-all-icons/index.js +4 -19
- package/dist/cjs/tools/get-all-tokens/index.js +3 -6
- package/dist/cjs/tools/get-all-tokens/tokens.js +18 -0
- package/dist/cjs/tools/get-components/components.codegen.js +8 -0
- package/dist/cjs/tools/get-components/components.js +423 -235
- package/dist/cjs/tools/get-components/index.js +2 -2
- package/dist/cjs/tools/get-components/load-all-components.js +16 -0
- package/dist/cjs/tools/get-guidelines/guidelines-structured-content.codegen.js +72 -6
- package/dist/cjs/tools/get-lint-rules/lint-rules-structured-content.codegen.js +111 -7
- package/dist/cjs/tools/search-components/index.js +13 -12
- package/dist/cjs/tools/search-icons/index.js +7 -24
- package/dist/es2019/index.js +13 -31
- package/dist/es2019/tools/get-all-icons/icons.js +25 -0
- package/dist/es2019/tools/get-all-icons/index.js +1 -10
- package/dist/es2019/tools/get-all-tokens/index.js +2 -5
- package/dist/es2019/tools/get-all-tokens/tokens.js +13 -0
- package/dist/es2019/tools/get-components/components.codegen.js +8 -0
- package/dist/es2019/tools/get-components/components.js +423 -235
- package/dist/es2019/tools/get-components/index.js +11 -9
- package/dist/es2019/tools/get-components/load-all-components.js +10 -0
- package/dist/es2019/tools/get-guidelines/guidelines-structured-content.codegen.js +72 -6
- package/dist/es2019/tools/get-lint-rules/lint-rules-structured-content.codegen.js +111 -7
- package/dist/es2019/tools/search-components/index.js +2 -1
- package/dist/es2019/tools/search-icons/index.js +1 -10
- package/dist/esm/index.js +19 -40
- package/dist/esm/tools/get-all-icons/icons.js +37 -0
- package/dist/esm/tools/get-all-icons/index.js +3 -18
- package/dist/esm/tools/get-all-tokens/index.js +2 -5
- package/dist/esm/tools/get-all-tokens/tokens.js +13 -0
- package/dist/esm/tools/get-components/components.codegen.js +8 -0
- package/dist/esm/tools/get-components/components.js +423 -235
- package/dist/esm/tools/get-components/index.js +2 -2
- package/dist/esm/tools/get-components/load-all-components.js +10 -0
- package/dist/esm/tools/get-guidelines/guidelines-structured-content.codegen.js +72 -6
- package/dist/esm/tools/get-lint-rules/lint-rules-structured-content.codegen.js +111 -7
- package/dist/esm/tools/search-components/index.js +9 -8
- package/dist/esm/tools/search-icons/index.js +3 -20
- package/dist/types/tools/get-all-icons/icons.d.ts +11 -0
- package/dist/types/tools/get-all-tokens/tokens.d.ts +7 -0
- package/dist/types/tools/get-components/components.codegen.d.ts +10 -0
- package/dist/types/tools/get-components/components.d.ts +1 -1
- package/dist/types/tools/get-components/load-all-components.d.ts +2 -0
- package/dist/types/tools/get-components/types.d.ts +20 -14
- package/dist/types/tools/get-guidelines/guidelines-structured-content.codegen.d.ts +1 -1
- package/dist/types/tools/get-lint-rules/lint-rules-structured-content.codegen.d.ts +1 -1
- package/dist/types-ts4.5/tools/get-all-icons/icons.d.ts +11 -0
- package/dist/types-ts4.5/tools/get-all-tokens/tokens.d.ts +7 -0
- package/dist/types-ts4.5/tools/get-components/components.codegen.d.ts +10 -0
- package/dist/types-ts4.5/tools/get-components/components.d.ts +1 -1
- package/dist/types-ts4.5/tools/get-components/load-all-components.d.ts +2 -0
- package/dist/types-ts4.5/tools/get-components/types.d.ts +20 -14
- package/dist/types-ts4.5/tools/get-guidelines/guidelines-structured-content.codegen.d.ts +1 -1
- package/dist/types-ts4.5/tools/get-lint-rules/lint-rules-structured-content.codegen.d.ts +1 -1
- package/package.json +5 -3
- package/dist/cjs/tools/get-icons/icon-mcp-structured-content.codegen.js +0 -8
- package/dist/cjs/tools/get-icons/icon-structured-content.codegen.js +0 -8
- package/dist/cjs/tools/get-icons/index.js +0 -135
- package/dist/cjs/tools/get-tokens/index.js +0 -125
- package/dist/cjs/tools/get-tokens/token-mcp-structured-content.codegen.js +0 -2356
- package/dist/cjs/tools/get-tokens/token-structured-content.codegen.js +0 -2356
- package/dist/es2019/tools/get-icons/icon-mcp-structured-content.codegen.js +0 -8
- package/dist/es2019/tools/get-icons/icon-structured-content.codegen.js +0 -8
- package/dist/es2019/tools/get-icons/index.js +0 -110
- package/dist/es2019/tools/get-tokens/index.js +0 -100
- package/dist/es2019/tools/get-tokens/token-mcp-structured-content.codegen.js +0 -2350
- package/dist/es2019/tools/get-tokens/token-structured-content.codegen.js +0 -2350
- package/dist/esm/tools/get-icons/icon-mcp-structured-content.codegen.js +0 -8
- package/dist/esm/tools/get-icons/icon-structured-content.codegen.js +0 -8
- package/dist/esm/tools/get-icons/index.js +0 -128
- package/dist/esm/tools/get-tokens/index.js +0 -118
- package/dist/esm/tools/get-tokens/token-mcp-structured-content.codegen.js +0 -2350
- package/dist/esm/tools/get-tokens/token-structured-content.codegen.js +0 -2350
- package/dist/types/tools/get-icons/icon-mcp-structured-content.codegen.d.ts +0 -13
- package/dist/types/tools/get-icons/icon-structured-content.codegen.d.ts +0 -13
- package/dist/types/tools/get-icons/index.d.ts +0 -35
- package/dist/types/tools/get-tokens/index.d.ts +0 -35
- package/dist/types/tools/get-tokens/token-mcp-structured-content.codegen.d.ts +0 -13
- package/dist/types/tools/get-tokens/token-structured-content.codegen.d.ts +0 -13
- package/dist/types-ts4.5/tools/get-icons/icon-mcp-structured-content.codegen.d.ts +0 -13
- package/dist/types-ts4.5/tools/get-icons/icon-structured-content.codegen.d.ts +0 -13
- package/dist/types-ts4.5/tools/get-icons/index.d.ts +0 -35
- package/dist/types-ts4.5/tools/get-tokens/index.d.ts +0 -35
- package/dist/types-ts4.5/tools/get-tokens/token-mcp-structured-content.codegen.d.ts +0 -13
- package/dist/types-ts4.5/tools/get-tokens/token-structured-content.codegen.d.ts +0 -13
|
@@ -9,9 +9,10 @@ exports.components = void 0;
|
|
|
9
9
|
*
|
|
10
10
|
* Generates TypeScript components data for AI tooling from offerings.json files
|
|
11
11
|
*
|
|
12
|
-
* @codegen <<SignedSource::
|
|
12
|
+
* @codegen <<SignedSource::8e120a2eb2205e4c89f4bdddbf4e436f>>
|
|
13
13
|
* @codegenCommand yarn workspace @af/ads-ai-tooling codegen:prototyping
|
|
14
14
|
*/
|
|
15
|
+
/* eslint-disable @repo/internal/react/boolean-prop-naming-convention -- not our types */
|
|
15
16
|
|
|
16
17
|
var components = exports.components = [{
|
|
17
18
|
name: 'Avatar',
|
|
@@ -27,6 +28,18 @@ var components = exports.components = [{
|
|
|
27
28
|
name: 'appearance',
|
|
28
29
|
description: "Indicates the shape of the avatar. Most avatars are circular, but square avatars\ncan be used for 'container' objects.",
|
|
29
30
|
type: '"circle" | "square" | "hexagon"'
|
|
31
|
+
}, {
|
|
32
|
+
name: 'aria-controls',
|
|
33
|
+
description: 'Identifies the popup element that the avatar controls.\nUsed when Avatar is a trigger for a popup.',
|
|
34
|
+
type: 'string'
|
|
35
|
+
}, {
|
|
36
|
+
name: 'aria-expanded',
|
|
37
|
+
description: 'Announces to assistive technology whether the controlled popup is currently open or closed.',
|
|
38
|
+
type: 'boolean'
|
|
39
|
+
}, {
|
|
40
|
+
name: 'aria-haspopup',
|
|
41
|
+
description: 'Informs assistive technology that this element triggers a popup.\nWhen set, Avatar will render as a `<button>` element even without `onClick`.',
|
|
42
|
+
type: 'boolean | "dialog"'
|
|
30
43
|
}, {
|
|
31
44
|
name: 'as',
|
|
32
45
|
description: 'Replace the wrapping element. This accepts the name of a html tag which will\nbe used to wrap the element.',
|
|
@@ -110,11 +123,13 @@ var components = exports.components = [{
|
|
|
110
123
|
props: [{
|
|
111
124
|
name: 'appearance',
|
|
112
125
|
description: 'Indicates the layout of the avatar group.\nAvatars will either be overlapped in a stack, or\nlaid out in an even grid formation.\nDefaults to "stack".',
|
|
113
|
-
type: '"grid" | "stack"'
|
|
126
|
+
type: '"grid" | "stack"',
|
|
127
|
+
defaultValue: '"stack"'
|
|
114
128
|
}, {
|
|
115
129
|
name: 'avatar',
|
|
116
130
|
description: 'Component used to render each avatar.',
|
|
117
|
-
type: 'React.ForwardRefExoticComponent<AvatarPropTypes & React.RefAttributes<HTMLElement>> | React.ElementType<AvatarProps>'
|
|
131
|
+
type: 'React.ForwardRefExoticComponent<AvatarPropTypes & React.RefAttributes<HTMLElement>> | React.ElementType<AvatarProps, keyof React.JSX.IntrinsicElements>',
|
|
132
|
+
defaultValue: 'Avatar'
|
|
118
133
|
}, {
|
|
119
134
|
name: 'borderColor',
|
|
120
135
|
description: 'Typically the background color that the avatar is presented on.\nAccepts any color argument that the CSS border-color property accepts.',
|
|
@@ -126,7 +141,8 @@ var components = exports.components = [{
|
|
|
126
141
|
}, {
|
|
127
142
|
name: 'data',
|
|
128
143
|
description: "An array of avatar prop data, that are spread onto each `avatar` component.\n\nFor further usage information on AvatarPropTypes, the supported props for `avatar`, refer to [Avatar's prop documentation](https://atlassian.design/components/avatar/code).",
|
|
129
|
-
type: '(AvatarPropTypes & { name: string; key?: string | number; })[]'
|
|
144
|
+
type: '(AvatarPropTypes & { name: string; key?: string | number; })[]',
|
|
145
|
+
isRequired: true
|
|
130
146
|
}, {
|
|
131
147
|
name: 'isTooltipDisabled',
|
|
132
148
|
description: 'Disables tooltips.',
|
|
@@ -134,7 +150,8 @@ var components = exports.components = [{
|
|
|
134
150
|
}, {
|
|
135
151
|
name: 'label',
|
|
136
152
|
description: 'Text to be used as aria-label for the list of avatars.\nScreen reader announcement with default label, which is `avatar group`, is `list, avatar group, X items`.\n\nThe label should describe the `AvatarGroup`\'s entities, for instance:\n- `label="team members"`, screen reader announcement would be `list team members, X items`\n- `label="reviewers"` screen reader announcement would be `list reviewers, X items`\n\nWhen there are several AvatarGroups on the page you should use a unique label to let users distinguish different lists.',
|
|
137
|
-
type: 'string'
|
|
153
|
+
type: 'string',
|
|
154
|
+
defaultValue: '"avatar group"'
|
|
138
155
|
}, {
|
|
139
156
|
name: 'maxCount',
|
|
140
157
|
description: 'The maximum number of avatars allowed in the list.\nDefaults to 5 when displayed as a stack,\nand 11 when displayed as a grid.',
|
|
@@ -158,19 +175,23 @@ var components = exports.components = [{
|
|
|
158
175
|
}, {
|
|
159
176
|
name: 'shouldPopupRenderToParent',
|
|
160
177
|
description: "Determines whether the 'show more' popup has `shouldRenderToParent` applied.",
|
|
161
|
-
type: 'boolean'
|
|
178
|
+
type: 'boolean',
|
|
179
|
+
defaultValue: 'false'
|
|
162
180
|
}, {
|
|
163
181
|
name: 'showMoreButtonProps',
|
|
164
182
|
description: 'Provide additional props to the MoreButton.\nExample use cases: altering tab order by providing tabIndex;\nadding onClick behaviour without losing the default dropdown',
|
|
165
|
-
type: '{ defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; accessKey?: string;
|
|
183
|
+
type: '{ defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; accessKey?: string; autoCapitalize?: (string & {}) | ... 5 more ... | "characters"; ... 257 more ...; onTransitionEndCapture?: React.TransitionEventHandler<......',
|
|
184
|
+
defaultValue: '{}'
|
|
166
185
|
}, {
|
|
167
186
|
name: 'size',
|
|
168
187
|
description: 'Defines the size of the avatar.\nDefaults to "medium".\n\nNote: The "xsmall" size that exists on Avatar is not supported here because elements such as the more indicator cannot be displayed in an accessible manner at that size.',
|
|
169
|
-
type: '"small" | "medium" | "large" | "xlarge" | "xxlarge"'
|
|
188
|
+
type: '"small" | "medium" | "large" | "xlarge" | "xxlarge"',
|
|
189
|
+
defaultValue: '"medium"'
|
|
170
190
|
}, {
|
|
171
191
|
name: 'tooltipPosition',
|
|
172
192
|
description: 'Where the tooltip should appear relative to its target.\nDefaults to tooltip position "bottom".',
|
|
173
|
-
type: '"top" | "bottom"'
|
|
193
|
+
type: '"top" | "bottom"',
|
|
194
|
+
defaultValue: '"bottom"'
|
|
174
195
|
}]
|
|
175
196
|
}, {
|
|
176
197
|
name: 'Badge',
|
|
@@ -203,7 +224,7 @@ var components = exports.components = [{
|
|
|
203
224
|
category: 'messaging',
|
|
204
225
|
description: 'A banner displays a prominent message at the top of the screen to communicate important information to users.',
|
|
205
226
|
status: 'general-availability',
|
|
206
|
-
examples: ['import Banner from \'@atlaskit/banner\';\nimport WarningIcon from \'@atlaskit/icon/core/status-warning\';\nimport Box from \'@atlaskit/primitives/box\';\nexport default (): React.JSX.Element => (\n\t<Box>\n\t\t<Banner
|
|
227
|
+
examples: ['import Banner from \'@atlaskit/banner\';\nimport WarningIcon from \'@atlaskit/icon/core/status-warning\';\nimport Box from \'@atlaskit/primitives/box\';\nexport default (): React.JSX.Element => (\n\t<Box>\n\t\t<Banner icon={<WarningIcon label="Warning" spacing="spacious" />} testId="basicTestId">\n\t\t\tYour license is about to expire. Please renew your license within the next week.\n\t\t</Banner>\n\t</Box>\n);'],
|
|
207
228
|
accessibilityGuidelines: ['Ensure banner content is announced by screen readers', 'Use appropriate color contrast for text readability', 'Provide clear, actionable messaging', 'Consider keyboard navigation for interactive banners'],
|
|
208
229
|
usageGuidelines: ['Use for important messages that need immediate attention', 'Place at the top of the screen for maximum visibility', 'Keep messaging concise and actionable', 'Use appropriate appearance variants for different message types', 'Consider dismissibility for non-critical messages'],
|
|
209
230
|
contentGuidelines: ['Write clear, concise messages', 'Use action-oriented language when appropriate', 'Ensure messages are relevant to the current context', 'Provide clear next steps when needed'],
|
|
@@ -318,7 +339,8 @@ var components = exports.components = [{
|
|
|
318
339
|
}, {
|
|
319
340
|
name: 'children',
|
|
320
341
|
description: 'Text content to be rendered in the button.',
|
|
321
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
342
|
+
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
|
|
343
|
+
isRequired: true
|
|
322
344
|
}, {
|
|
323
345
|
name: 'iconAfter',
|
|
324
346
|
description: "Places an icon within the button, after the button's text.",
|
|
@@ -367,7 +389,7 @@ var components = exports.components = [{
|
|
|
367
389
|
category: 'form',
|
|
368
390
|
description: 'A button that displays only an icon with an optional tooltip. Perfect for toolbar actions, compact interfaces, and when space is limited.',
|
|
369
391
|
status: 'general-availability',
|
|
370
|
-
examples: ['import { IconButton } from \'@atlaskit/button/new\';\nimport AddIcon from \'@atlaskit/icon/core/add\';\nimport DeleteIcon from \'@atlaskit/icon/core/delete\';\nimport InfoIcon from \'@atlaskit/icon/core/status-information\';\
|
|
392
|
+
examples: ['import { IconButton } from \'@atlaskit/button/new\';\nimport AddIcon from \'@atlaskit/icon/core/add\';\nimport DeleteIcon from \'@atlaskit/icon/core/delete\';\nimport InfoIcon from \'@atlaskit/icon/core/status-information\';\nconst _default_1: React.JSX.Element[] = [\n\t<IconButton icon={AddIcon} label="Add new item" appearance="primary" />,\n\t<IconButton icon={InfoIcon} label="Show information" appearance="subtle" spacing="compact" />,\n\t<IconButton icon={DeleteIcon} label="Delete permanently" appearance="discovery" shape="circle" />,\n];\nexport default _default_1;'],
|
|
371
393
|
usageGuidelines: ['Use for toolbar actions and compact interfaces', 'Choose icons that clearly represent their function', 'Group related icon buttons together', 'Use sparingly to avoid visual clutter', 'Consider using tooltips for additional context', 'Always provide a meaningful label for accessibility', 'The icon should clearly represent the action it performs'],
|
|
372
394
|
contentGuidelines: ['Use clear, concise, descriptive labels', 'Use action verbs (e.g., "Edit item", "Delete comment")', 'Choose icons that are universally understood', 'Avoid using icons without labels in critical actions'],
|
|
373
395
|
props: [{
|
|
@@ -381,7 +403,8 @@ var components = exports.components = [{
|
|
|
381
403
|
}, {
|
|
382
404
|
name: 'icon',
|
|
383
405
|
description: 'Places an icon within the button.',
|
|
384
|
-
type: 'ComponentClass<Omit<IconProps, "size"> | Omit<NewIconProps, "spacing" | "size">, any> | FunctionComponent<Omit<IconProps, "size"> | Omit<...>>'
|
|
406
|
+
type: 'ComponentClass<Omit<IconProps, "size"> | Omit<NewIconProps, "spacing" | "size">, any> | FunctionComponent<Omit<IconProps, "size"> | Omit<...>>',
|
|
407
|
+
isRequired: true
|
|
385
408
|
}, {
|
|
386
409
|
name: 'isDisabled',
|
|
387
410
|
description: 'Disable the button to prevent user interaction.',
|
|
@@ -401,7 +424,8 @@ var components = exports.components = [{
|
|
|
401
424
|
}, {
|
|
402
425
|
name: 'label',
|
|
403
426
|
description: 'Provide an accessible label, often used by screen readers.',
|
|
404
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
427
|
+
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
|
|
428
|
+
isRequired: true
|
|
405
429
|
}, {
|
|
406
430
|
name: 'onBlur',
|
|
407
431
|
description: 'Handler called on blur.',
|
|
@@ -425,7 +449,7 @@ var components = exports.components = [{
|
|
|
425
449
|
}, {
|
|
426
450
|
name: 'tooltip',
|
|
427
451
|
description: 'Props passed down to the Tooltip component.',
|
|
428
|
-
type: '{ testId?: string; analyticsContext?: Record<string, any>; content?: ReactNode | (({ update }: { update?: () => void; }) => ReactNode); component?: ComponentType<TooltipPrimitiveProps> | ForwardRefExoticComponent<...>; ...
|
|
452
|
+
type: '{ testId?: string; analyticsContext?: Record<string, any>; content?: ReactNode | (({ update }: { update?: () => void; }) => ReactNode); component?: ComponentType<TooltipPrimitiveProps> | ForwardRefExoticComponent<...>; ... 15 more ...; UNSAFE_shouldRenderToParent?: boolean; }'
|
|
429
453
|
}]
|
|
430
454
|
}, {
|
|
431
455
|
name: 'SplitButton',
|
|
@@ -434,26 +458,30 @@ var components = exports.components = [{
|
|
|
434
458
|
category: 'form',
|
|
435
459
|
description: 'A button that splits into a primary action and a dropdown menu. The main button performs the primary action, while the dropdown arrow reveals additional related actions.',
|
|
436
460
|
status: 'general-availability',
|
|
437
|
-
examples: ["import Button, { IconButton, SplitButton } from '@atlaskit/button/new';\nimport DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';\nimport ChevronDownIcon from '@atlaskit/icon/core/chevron-down';\
|
|
461
|
+
examples: ["import Button, { IconButton, SplitButton } from '@atlaskit/button/new';\nimport DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';\nimport ChevronDownIcon from '@atlaskit/icon/core/chevron-down';\nconst _default_1: React.JSX.Element = (\n\t<SplitButton spacing=\"compact\">\n\t\t<Button>Link work item</Button>\n\t\t<DropdownMenu\n\t\t\tshouldRenderToParent\n\t\t\ttrigger={({ triggerRef, ...triggerProps }) => (\n\t\t\t\t<IconButton\n\t\t\t\t\tref={triggerRef}\n\t\t\t\t\t{...triggerProps}\n\t\t\t\t\ticon={ChevronDownIcon}\n\t\t\t\t\tlabel=\"More link work item options\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t>\n\t\t\t<DropdownItemGroup>\n\t\t\t\t<DropdownItem>Create new link</DropdownItem>\n\t\t\t\t<DropdownItem>Link existing item</DropdownItem>\n\t\t\t</DropdownItemGroup>\n\t\t</DropdownMenu>\n\t</SplitButton>\n);\nexport default _default_1;"],
|
|
438
462
|
accessibilityGuidelines: ['Provide descriptive labels for the IconButton trigger'],
|
|
439
463
|
usageGuidelines: ['Always must have exactly two children: `Button` and `DropdownMenu` that are related to each other', 'Use `shouldRenderToParent` on `DropdownMenu` for proper positioning', 'Make the primary action the most common or important action', 'Limit dropdown items to avoid overwhelming users'],
|
|
440
464
|
contentGuidelines: ['Use clear, action-oriented text for the primary button', 'Keep dropdown item labels concise and descriptive', 'Use consistent terminology across related actions'],
|
|
441
465
|
props: [{
|
|
442
466
|
name: 'appearance',
|
|
443
467
|
description: 'The style variation for child buttons. Will override any appearance set on a child button.',
|
|
444
|
-
type: '"default" | "primary"'
|
|
468
|
+
type: '"default" | "primary"',
|
|
469
|
+
defaultValue: '"default"'
|
|
445
470
|
}, {
|
|
446
471
|
name: 'children',
|
|
447
472
|
description: 'Only two children are allowed.\nFirst child is the primary action, second child is the secondary action.\nThe assumption is that for both children trees there is a button reading the context.',
|
|
448
|
-
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal'
|
|
473
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal',
|
|
474
|
+
isRequired: true
|
|
449
475
|
}, {
|
|
450
476
|
name: 'isDisabled',
|
|
451
477
|
description: 'Whether all child buttons should be disabled.',
|
|
452
|
-
type: 'boolean'
|
|
478
|
+
type: 'boolean',
|
|
479
|
+
defaultValue: 'false'
|
|
453
480
|
}, {
|
|
454
481
|
name: 'spacing',
|
|
455
482
|
description: 'Controls the amount of padding in the child buttons.',
|
|
456
|
-
type: '"default" | "compact"'
|
|
483
|
+
type: '"default" | "compact"',
|
|
484
|
+
defaultValue: '"default"'
|
|
457
485
|
}]
|
|
458
486
|
}, {
|
|
459
487
|
name: 'LinkButton',
|
|
@@ -462,7 +490,7 @@ var components = exports.components = [{
|
|
|
462
490
|
category: 'form',
|
|
463
491
|
description: 'A button that renders as an anchor tag for navigation. Combines the visual appearance of a button with the semantic behavior of a link.',
|
|
464
492
|
status: 'general-availability',
|
|
465
|
-
examples: ['import { LinkButton } from \'@atlaskit/button/new\';\
|
|
493
|
+
examples: ['import { LinkButton } from \'@atlaskit/button/new\';\nconst _default_1: React.JSX.Element[] = [\n\t<LinkButton href="https://atlassian.com" target="_blank" appearance="subtle">\n\t\tExternal Link\n\t</LinkButton>,\n\t// With a Router (requires `<AppProvider routerLinkComponent={Link} />` setup at the root)\n\t<LinkButton href={{ to: \'/about\', replace: true }}>About Page</LinkButton>,\n];\nexport default _default_1;'],
|
|
466
494
|
usageGuidelines: ['Use for navigation actions that change the URL', 'Use for external links and internal navigation', "Consider using regular buttons for actions that don't navigate", 'Provide clear visual indication of link behavior', 'Use consistent styling with other buttons when appropriate', 'Use for navigation actions that should look like buttons but behave like links', 'Perfect for external links, internal navigation, or any action that changes the URL'],
|
|
467
495
|
contentGuidelines: ['Use clear, descriptive text that indicates the destination', 'Be specific about where the link will take the user', 'Use action-oriented language when appropriate', "Avoid generic terms like 'Click here' or 'Learn more'"],
|
|
468
496
|
props: [{
|
|
@@ -476,11 +504,13 @@ var components = exports.components = [{
|
|
|
476
504
|
}, {
|
|
477
505
|
name: 'children',
|
|
478
506
|
description: 'Text content to be rendered in the button.',
|
|
479
|
-
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
|
|
507
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
|
|
508
|
+
isRequired: true
|
|
480
509
|
}, {
|
|
481
510
|
name: 'href',
|
|
482
511
|
description: 'Provides a URL for link buttons. When using an AppProvider with a configured router link component, a `RouterLinkConfig` object type can be provided for advanced usage. See the [Link Button routing example](/components/button/examples#routing) for more details.',
|
|
483
|
-
type: 'string | RouterLinkConfig'
|
|
512
|
+
type: 'string | RouterLinkConfig',
|
|
513
|
+
isRequired: true
|
|
484
514
|
}, {
|
|
485
515
|
name: 'iconAfter',
|
|
486
516
|
description: "Places an icon within the button, after the button's text.",
|
|
@@ -525,7 +555,7 @@ var components = exports.components = [{
|
|
|
525
555
|
category: 'form',
|
|
526
556
|
description: 'A component for grouping related buttons together with consistent spacing and alignment.',
|
|
527
557
|
status: 'general-availability',
|
|
528
|
-
examples: ['import { ButtonGroup } from \'@atlaskit/button\';\nimport Button from \'@atlaskit/button/new\';\
|
|
558
|
+
examples: ['import { ButtonGroup } from \'@atlaskit/button\';\nimport Button from \'@atlaskit/button/new\';\nconst _default_1: React.JSX.Element[] = [\n\t<ButtonGroup titleId="heading-options">\n\t\t<Button appearance="primary">Save</Button>\n\t\t<Button appearance="danger">Delete</Button>\n\t\t<Button appearance="subtle">Cancel</Button>\n\t</ButtonGroup>,\n];\nexport default _default_1;'],
|
|
529
559
|
usageGuidelines: ['Use for related actions that belong together', 'Group buttons that perform similar or complementary actions', 'Maintain consistent spacing and alignment', 'Consider the visual hierarchy within the group', "Don't group unrelated actions together", 'Use when you have multiple related actions that should be visually grouped', 'Provides consistent spacing and alignment between buttons'],
|
|
530
560
|
contentGuidelines: ['Ensure button labels are consistent in tone and style', 'Use parallel structure for related actions', 'Keep labels concise but descriptive', 'Consider the order of actions within the group'],
|
|
531
561
|
props: [{
|
|
@@ -555,7 +585,7 @@ var components = exports.components = [{
|
|
|
555
585
|
props: [{
|
|
556
586
|
name: 'appearance',
|
|
557
587
|
description: 'The base styling to apply to the button.',
|
|
558
|
-
type: '"
|
|
588
|
+
type: '"default" | "danger" | "link" | "primary" | "subtle" | "subtle-link" | "warning"'
|
|
559
589
|
}, {
|
|
560
590
|
name: 'autoFocus',
|
|
561
591
|
description: 'Set the button to autofocus on mount.',
|
|
@@ -567,7 +597,7 @@ var components = exports.components = [{
|
|
|
567
597
|
}, {
|
|
568
598
|
name: 'component',
|
|
569
599
|
description: '',
|
|
570
|
-
type: 'ComponentType<AllHTMLAttributes<HTMLElement>> | ElementType<any>'
|
|
600
|
+
type: 'ComponentType<AllHTMLAttributes<HTMLElement>> | ElementType<any, keyof JSX.IntrinsicElements>'
|
|
571
601
|
}, {
|
|
572
602
|
name: 'href',
|
|
573
603
|
description: "Provides a URL that's used when the button is a link styled as a button.",
|
|
@@ -800,7 +830,7 @@ var components = exports.components = [{
|
|
|
800
830
|
category: 'data-display',
|
|
801
831
|
description: 'A component for displaying code snippets.',
|
|
802
832
|
status: 'general-availability',
|
|
803
|
-
examples: ["import { Code } from '@atlaskit/code';\
|
|
833
|
+
examples: ["import { Code } from '@atlaskit/code';\nconst _default_1: React.JSX.Element[] = [<Code>{`<Code />`}</Code>];\nexport default _default_1;"],
|
|
804
834
|
accessibilityGuidelines: ['Ensure code content is announced properly by screen readers', 'Use appropriate contrast for code readability', 'Consider code context and meaning'],
|
|
805
835
|
usageGuidelines: ['Use for inline code snippets', 'Consider syntax highlighting needs', 'Use appropriate font styling', 'Consider code block vs inline code'],
|
|
806
836
|
contentGuidelines: ['Use clear, readable code examples', 'Consider code formatting and indentation', 'Use meaningful variable names in examples', 'Keep code snippets concise'],
|
|
@@ -828,22 +858,25 @@ var components = exports.components = [{
|
|
|
828
858
|
category: 'data-display',
|
|
829
859
|
description: 'A component for displaying multi-line code blocks with syntax highlighting.',
|
|
830
860
|
status: 'general-availability',
|
|
831
|
-
examples: ['import { CodeBlock } from \'@atlaskit/code\';\nconst exampleCodeBlock = `export default ({ name }: { name: string }) => <div>Hello {name}</div>;`;\
|
|
861
|
+
examples: ['import { CodeBlock } from \'@atlaskit/code\';\nconst exampleCodeBlock = `export default ({ name }: { name: string }) => <div>Hello {name}</div>;`;\nconst _default_1: React.JSX.Element[] = [\n\t<CodeBlock highlight="15" language="tsx" text={exampleCodeBlock} />,\n];\nexport default _default_1;'],
|
|
832
862
|
accessibilityGuidelines: ['Ensure code blocks are announced properly by screen readers', 'Use appropriate contrast for code readability', 'Consider code context and meaning', 'Provide proper language identification'],
|
|
833
863
|
usageGuidelines: ['Use for multi-line code examples', 'Specify appropriate language for syntax highlighting', 'Consider code block sizing and scrolling', 'Use for code snippets that need formatting'],
|
|
834
864
|
contentGuidelines: ['Use clear, readable code examples', 'Consider code formatting and indentation', 'Use meaningful variable names in examples', 'Keep code blocks focused and relevant'],
|
|
835
865
|
props: [{
|
|
836
866
|
name: 'codeBidiWarningLabel',
|
|
837
867
|
description: 'Label for the bidi warning tooltip.',
|
|
838
|
-
type: 'string'
|
|
868
|
+
type: 'string',
|
|
869
|
+
defaultValue: "'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.'"
|
|
839
870
|
}, {
|
|
840
871
|
name: 'firstLineNumber',
|
|
841
872
|
description: 'Sets the number of the first line, if showLineNumbers is set to true.',
|
|
842
|
-
type: 'number'
|
|
873
|
+
type: 'number',
|
|
874
|
+
defaultValue: '1'
|
|
843
875
|
}, {
|
|
844
876
|
name: 'hasBidiWarnings',
|
|
845
877
|
description: 'When set to `false`, disables code decorating with bidi warnings.',
|
|
846
|
-
type: 'boolean'
|
|
878
|
+
type: 'boolean',
|
|
879
|
+
defaultValue: 'true'
|
|
847
880
|
}, {
|
|
848
881
|
name: 'highlight',
|
|
849
882
|
description: 'Comma delimited lines to highlight.\n\nExample uses:\n- To highlight one line `highlight="3"`\n- To highlight a group of lines `highlight="1-5"`\n- To highlight multiple groups `highlight="1-5,7,10,15-20"`',
|
|
@@ -859,7 +892,8 @@ var components = exports.components = [{
|
|
|
859
892
|
}, {
|
|
860
893
|
name: 'isBidiWarningTooltipEnabled',
|
|
861
894
|
description: 'Sets whether to render tooltip with the warning or not.\nIntended to be disabled when used in a mobile view, such as in the editor via mobile bridge,\nwhere the tooltip could end up being cut off or otherwise not work as expected.',
|
|
862
|
-
type: 'boolean'
|
|
895
|
+
type: 'boolean',
|
|
896
|
+
defaultValue: 'true'
|
|
863
897
|
}, {
|
|
864
898
|
name: 'label',
|
|
865
899
|
description: "Text used to describe that the content of the code block is scrollable.\nSet only if the code block is scrollable. Defaults to 'Scrollable content'.",
|
|
@@ -867,19 +901,23 @@ var components = exports.components = [{
|
|
|
867
901
|
}, {
|
|
868
902
|
name: 'language',
|
|
869
903
|
description: 'Language reference designed to be populated from `SUPPORTED_LANGUAGES` in\n`design-system/code`. Run against language grammars from PrismJS (full list\navailable at [PrismJS documentation](https://prismjs.com/#supported-languages)).\n\nWhen set to "text" will not perform highlighting. If unsupported language\nprovided - code will be treated as "text" with no highlighting.',
|
|
870
|
-
type: '"
|
|
904
|
+
type: '"PHP" | "php" | "php3" | "php4" | "php5" | "Java" | "java" | "CSharp" | "csharp" | "c#" | "Python" | "python" | "py" | "JavaScript" | "javascript" | "js" | "Html" | "html" | "xml" | ... 234 more ... | "markdown"',
|
|
905
|
+
defaultValue: "'text'"
|
|
871
906
|
}, {
|
|
872
907
|
name: 'shouldShowLineNumbers',
|
|
873
908
|
description: 'Sets whether to display code line numbers or not.',
|
|
874
|
-
type: 'boolean'
|
|
909
|
+
type: 'boolean',
|
|
910
|
+
defaultValue: 'true'
|
|
875
911
|
}, {
|
|
876
912
|
name: 'shouldWrapLongLines',
|
|
877
913
|
description: 'Sets whether long lines will create a horizontally scrolling container.\nWhen set to `true`, these lines will visually wrap instead.',
|
|
878
|
-
type: 'boolean'
|
|
914
|
+
type: 'boolean',
|
|
915
|
+
defaultValue: 'false'
|
|
879
916
|
}, {
|
|
880
917
|
name: 'text',
|
|
881
918
|
description: 'The code to be formatted.',
|
|
882
|
-
type: 'string'
|
|
919
|
+
type: 'string',
|
|
920
|
+
isRequired: true
|
|
883
921
|
}]
|
|
884
922
|
}, {
|
|
885
923
|
name: 'Comment',
|
|
@@ -895,47 +933,53 @@ var components = exports.components = [{
|
|
|
895
933
|
props: [{
|
|
896
934
|
name: 'actions',
|
|
897
935
|
description: 'A list of `CommentAction` items rendered as a row of buttons below the content.',
|
|
898
|
-
type: 'ReactNode[]'
|
|
936
|
+
type: 'React.ReactNode[]',
|
|
937
|
+
defaultValue: '[]'
|
|
899
938
|
}, {
|
|
900
939
|
name: 'afterContent',
|
|
901
940
|
description: "Content that is rendered after the comment's content.",
|
|
902
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
941
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
|
|
903
942
|
}, {
|
|
904
943
|
name: 'author',
|
|
905
944
|
description: 'A `CommentAuthor` element containing the name of the author.',
|
|
906
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
945
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
|
|
907
946
|
}, {
|
|
908
947
|
name: 'avatar',
|
|
909
948
|
description: "The element to display as the avatar. It's best to use `@atlaskit/avatar`.",
|
|
910
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
949
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
|
|
950
|
+
isRequired: true
|
|
911
951
|
}, {
|
|
912
952
|
name: 'children',
|
|
913
953
|
description: 'Provide nested comments as children.',
|
|
914
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
954
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
|
|
915
955
|
}, {
|
|
916
956
|
name: 'content',
|
|
917
957
|
description: 'The main content for the comment.',
|
|
918
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
958
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
|
|
919
959
|
}, {
|
|
920
960
|
name: 'edited',
|
|
921
961
|
description: 'A `CommentEdited` element which displays next to the time. Indicates whether the comment has been edited.',
|
|
922
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
962
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
|
|
923
963
|
}, {
|
|
924
964
|
name: 'errorActions',
|
|
925
965
|
description: 'A list of `CommentAction` items rendered with a warning icon instead of the actions.',
|
|
926
|
-
type: 'ReactNode[]'
|
|
966
|
+
type: 'React.ReactNode[]',
|
|
967
|
+
defaultValue: '[]'
|
|
927
968
|
}, {
|
|
928
969
|
name: 'errorIconLabel',
|
|
929
970
|
description: 'Text to show in the error icon label.',
|
|
930
|
-
type: 'string'
|
|
971
|
+
type: 'string',
|
|
972
|
+
defaultValue: '""'
|
|
931
973
|
}, {
|
|
932
974
|
name: 'headingLevel',
|
|
933
975
|
description: 'Use this to set the semantic heading level of the comment. The default comment heading has an `h3` tag. Make sure that headings are in the correct order and don’t skip levels.',
|
|
934
|
-
type: '"
|
|
976
|
+
type: '"3" | "1" | "2" | "4" | "5" | "6"',
|
|
977
|
+
defaultValue: '"3"'
|
|
935
978
|
}, {
|
|
936
979
|
name: 'highlighted',
|
|
937
980
|
description: 'Sets whether this comment should be highlighted.',
|
|
938
|
-
type: 'boolean'
|
|
981
|
+
type: 'boolean',
|
|
982
|
+
defaultValue: 'false'
|
|
939
983
|
}, {
|
|
940
984
|
name: 'id',
|
|
941
985
|
description: 'An ID to be applied to the comment.',
|
|
@@ -943,19 +987,23 @@ var components = exports.components = [{
|
|
|
943
987
|
}, {
|
|
944
988
|
name: 'isError',
|
|
945
989
|
description: 'Indicates whether the component is in an error state. Hides actions and time.',
|
|
946
|
-
type: 'boolean'
|
|
990
|
+
type: 'boolean',
|
|
991
|
+
defaultValue: 'false'
|
|
947
992
|
}, {
|
|
948
993
|
name: 'isSaving',
|
|
949
994
|
description: 'Enables "optimistic saving" mode which removes actions and displays text from the `savingText` prop.',
|
|
950
|
-
type: 'boolean'
|
|
995
|
+
type: 'boolean',
|
|
996
|
+
defaultValue: 'false'
|
|
951
997
|
}, {
|
|
952
998
|
name: 'restrictedTo',
|
|
953
999
|
description: 'Text for the "restricted to" label. This will display in the top items, before the main content.',
|
|
954
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
1000
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
|
|
1001
|
+
defaultValue: '""'
|
|
955
1002
|
}, {
|
|
956
1003
|
name: 'savingText',
|
|
957
1004
|
description: 'Text to show when in "optimistic saving" mode.',
|
|
958
|
-
type: 'string'
|
|
1005
|
+
type: 'string',
|
|
1006
|
+
defaultValue: '"Sending..."'
|
|
959
1007
|
}, {
|
|
960
1008
|
name: 'shouldHeaderWrap',
|
|
961
1009
|
description: 'Controls if the comment header should wrap.',
|
|
@@ -967,7 +1015,7 @@ var components = exports.components = [{
|
|
|
967
1015
|
}, {
|
|
968
1016
|
name: 'time',
|
|
969
1017
|
description: 'A `CommentTime` element containing the time to display.',
|
|
970
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
1018
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
|
|
971
1019
|
}, {
|
|
972
1020
|
name: 'type',
|
|
973
1021
|
description: 'The type of comment. This will be rendered in a lozenge at the top of the comment, before the main content.',
|
|
@@ -980,7 +1028,7 @@ var components = exports.components = [{
|
|
|
980
1028
|
category: 'form',
|
|
981
1029
|
description: 'A component for selecting date values with calendar support.',
|
|
982
1030
|
status: 'general-availability',
|
|
983
|
-
examples: ['import { DatePicker } from \'@atlaskit/datetime-picker\';\nconst Example = (): React.JSX.Element => (\n\t<DatePicker\n\t\tclearControlLabel="Clear select date"\n\t\tonChange={
|
|
1031
|
+
examples: ['import { DatePicker } from \'@atlaskit/datetime-picker\';\nimport __noop from \'@atlaskit/ds-lib/noop\';\nconst Example = (): React.JSX.Element => (\n\t<DatePicker\n\t\tclearControlLabel="Clear select date"\n\t\tonChange={__noop}\n\t\tshouldShowCalendarButton\n\t\topenCalendarLabel="open calendar"\n\t/>\n);\nexport default Example;'],
|
|
984
1032
|
accessibilityGuidelines: ['Ensure proper keyboard navigation', 'Use appropriate date formats', 'Provide clear date labels', 'Consider screen reader announcements'],
|
|
985
1033
|
usageGuidelines: ['Use for date selection only', 'Provide clear date formats', 'Handle date validation appropriately', 'Consider calendar button visibility'],
|
|
986
1034
|
contentGuidelines: ['Use clear, descriptive labels', 'Provide helpful placeholder text', 'Use appropriate date formats', 'Keep labels concise but descriptive'],
|
|
@@ -1023,7 +1071,8 @@ var components = exports.components = [{
|
|
|
1023
1071
|
}, {
|
|
1024
1072
|
name: 'inputLabel',
|
|
1025
1073
|
description: 'The name of the input, used when `shouldShowCalendarButton` is true. See `shouldShowCalendarButton` description for more details.',
|
|
1026
|
-
type: 'string'
|
|
1074
|
+
type: 'string',
|
|
1075
|
+
defaultValue: "'Date picker'"
|
|
1027
1076
|
}, {
|
|
1028
1077
|
name: 'inputLabelId',
|
|
1029
1078
|
description: 'The ID of the label for the input, used when `shouldShowCalendarButton` is\ntrue. See `shouldShowCalendarButton` description for more details.',
|
|
@@ -1087,7 +1136,8 @@ var components = exports.components = [{
|
|
|
1087
1136
|
}, {
|
|
1088
1137
|
name: 'openCalendarLabel',
|
|
1089
1138
|
description: 'The label associated with the button to open the calendar, rendered via the\n`shouldShowCalendarButton` prop. If a `label` prop is provided, this\ncalendar button label will be prefixed by the value of `label`. If no\n`label` prop is provided, this prefix should be manually added. For\nexample,\n\n```tsx\n<label id="label" htmlFor="datepicker">Desired Appointment Date</label>\n<DatePicker\n\tid="datepicker"\n\tshouldShowCalendarButton\n\tinputLabel="Desired Appointment Date"\n\topenCalendarLabel="open calendar"\n/>\n```',
|
|
1090
|
-
type: 'string'
|
|
1139
|
+
type: 'string',
|
|
1140
|
+
defaultValue: "'open calendar'"
|
|
1091
1141
|
}, {
|
|
1092
1142
|
name: 'parseInputValue',
|
|
1093
1143
|
description: 'A function for parsing input characters and transforming them into a Date object.\nBy default parses the date string based off the locale. Note that this does\nnot affect how the resulting value is displayed in the input. Use the\n`dateFormat` or `formatDisplayLabel` prop to handle how the value is\ndisplayed.',
|
|
@@ -1103,11 +1153,12 @@ var components = exports.components = [{
|
|
|
1103
1153
|
}, {
|
|
1104
1154
|
name: 'selectProps',
|
|
1105
1155
|
description: '',
|
|
1106
|
-
type: 'Omit<SelectProps<OptionType, false>, "aria-
|
|
1156
|
+
type: 'Omit<SelectProps<OptionType, false>, "aria-label" | "aria-describedby" | "inputId" | "placeholder"> & { \'aria-describedby\'?: never; \'aria-label\'?: never; inputId?: never; placeholder?: never; } & { ...; }'
|
|
1107
1157
|
}, {
|
|
1108
1158
|
name: 'shouldShowCalendarButton',
|
|
1109
1159
|
description: 'Provides a functional calendar button that opens the calendar picker that\nlives on the right side of the date picker.\n\nThe accessible name for this button is caculated using either the `label`,\n`inputLabel`, or `inputLabelId` props, along with the `openCalendarLabel`\nprop.',
|
|
1110
|
-
type: 'boolean'
|
|
1160
|
+
type: 'boolean',
|
|
1161
|
+
defaultValue: 'false'
|
|
1111
1162
|
}, {
|
|
1112
1163
|
name: 'spacing',
|
|
1113
1164
|
description: 'The spacing for the select control.\n\nCompact is `gridSize() * 4`, default is `gridSize * 5`.',
|
|
@@ -1128,7 +1179,7 @@ var components = exports.components = [{
|
|
|
1128
1179
|
category: 'form',
|
|
1129
1180
|
description: 'A component for selecting time values with clock interface.',
|
|
1130
1181
|
status: 'general-availability',
|
|
1131
|
-
examples: ['import { TimePicker } from \'@atlaskit/datetime-picker\';\nconst Example = (): React.JSX.Element => (\n\t<TimePicker\n\t\tclearControlLabel="Clear select time (editable)"\n\t\tdefaultValue="14:30"\n\t\tonChange={
|
|
1182
|
+
examples: ['import { TimePicker } from \'@atlaskit/datetime-picker\';\nimport __noop from \'@atlaskit/ds-lib/noop\';\nconst Example = (): React.JSX.Element => (\n\t<TimePicker\n\t\tclearControlLabel="Clear select time (editable)"\n\t\tdefaultValue="14:30"\n\t\tonChange={__noop}\n\t\ttimeFormat="HH:mm:ss A"\n\t\ttimeIsEditable\n\t\tselectProps={{\n\t\t\tclassNamePrefix: \'timepicker-select\',\n\t\t}}\n\t/>\n);\nexport default Example;'],
|
|
1132
1183
|
accessibilityGuidelines: ['Ensure proper keyboard navigation', 'Use appropriate time formats', 'Provide clear time labels', 'Consider screen reader announcements'],
|
|
1133
1184
|
usageGuidelines: ['Use for time selection only', 'Provide clear time formats', 'Handle time validation appropriately', 'Consider editable time input'],
|
|
1134
1185
|
contentGuidelines: ['Use clear, descriptive labels', 'Provide helpful placeholder text', 'Use appropriate time formats', 'Keep labels concise but descriptive'],
|
|
@@ -1240,81 +1291,81 @@ var components = exports.components = [{
|
|
|
1240
1291
|
category: 'form',
|
|
1241
1292
|
description: 'A component for selecting both date and time values.',
|
|
1242
1293
|
status: 'general-availability',
|
|
1243
|
-
examples: ["import { DateTimePicker } from '@atlaskit/datetime-picker';\nconst Example = (): React.JSX.Element => (\n\t<DateTimePicker\n\t\tclearControlLabel=\"Clear date / time picker (editable times)\"\n\t\tdefaultValue=\"2018-01-02T14:30+10:00\"\n\t\tonChange={
|
|
1294
|
+
examples: ["import { DateTimePicker } from '@atlaskit/datetime-picker';\nimport __noop from '@atlaskit/ds-lib/noop';\nconst Example = (): React.JSX.Element => (\n\t<DateTimePicker\n\t\tclearControlLabel=\"Clear date / time picker (editable times)\"\n\t\tdefaultValue=\"2018-01-02T14:30+10:00\"\n\t\tonChange={__noop}\n\t\ttimePickerProps={{\n\t\t\ttimeIsEditable: true,\n\t\t\tlabel: 'Time picker (editable)',\n\t\t}}\n\t\tdatePickerProps={{\n\t\t\tlabel: 'Date picker (editable times)',\n\t\t\tshouldShowCalendarButton: true,\n\t\t\topenCalendarLabel: 'open calendar',\n\t\t}}\n\t/>\n);\nexport default Example;"],
|
|
1244
1295
|
accessibilityGuidelines: ['Ensure proper keyboard navigation', 'Use appropriate date/time formats', 'Provide clear date/time labels', 'Consider screen reader announcements'],
|
|
1245
1296
|
usageGuidelines: ['Use for combined date and time selection', 'Provide clear date/time formats', 'Handle timezone considerations', 'Consider validation requirements'],
|
|
1246
1297
|
contentGuidelines: ['Use clear, descriptive labels', 'Provide helpful placeholder text', 'Use appropriate date/time formats', 'Keep labels concise but descriptive'],
|
|
1247
1298
|
props: [{
|
|
1248
1299
|
name: 'aria-describedby',
|
|
1249
|
-
description: 'Used to associate accessible descriptions to both the date and time\npicker. If you want to associate individual accessible descriptions, this\nshould be done through the `aria-describedby` props on the\n`datePickerProps` and `timePickerProps
|
|
1300
|
+
description: 'Used to associate accessible descriptions to both the date and time\npicker. If you want to associate individual accessible descriptions, this\nshould be done through the `aria-describedby` props on the\n`datePickerProps` and `timePickerProps`.',
|
|
1250
1301
|
type: 'string'
|
|
1251
1302
|
}, {
|
|
1252
1303
|
name: 'autoFocus',
|
|
1253
|
-
description: 'Set the picker to autofocus on mount
|
|
1304
|
+
description: 'Set the picker to autofocus on mount.',
|
|
1254
1305
|
type: 'boolean'
|
|
1255
1306
|
}, {
|
|
1256
1307
|
name: 'clearControlLabel',
|
|
1257
|
-
description: 'Set the `aria-label` for the clear button.\nAdd the word "Clear" at the beginning of the clearControlLabel.\nFor instance, for a field to set an appointment, use "Clear appointment date and time"
|
|
1308
|
+
description: 'Set the `aria-label` for the clear button.\nAdd the word "Clear" at the beginning of the clearControlLabel.\nFor instance, for a field to set an appointment, use "Clear appointment date and time".',
|
|
1258
1309
|
type: 'string'
|
|
1259
1310
|
}, {
|
|
1260
1311
|
name: 'datePickerProps',
|
|
1261
|
-
description: 'Props applied to the `DatePicker
|
|
1312
|
+
description: 'Props applied to the `DatePicker`.',
|
|
1262
1313
|
type: 'DatePickerBaseProps'
|
|
1263
1314
|
}, {
|
|
1264
1315
|
name: 'defaultValue',
|
|
1265
|
-
description: 'The default for `value
|
|
1316
|
+
description: 'The default for `value`.',
|
|
1266
1317
|
type: 'string'
|
|
1267
1318
|
}, {
|
|
1268
1319
|
name: 'id',
|
|
1269
|
-
description: 'Set the id of the field
|
|
1320
|
+
description: 'Set the id of the field.',
|
|
1270
1321
|
type: 'string'
|
|
1271
1322
|
}, {
|
|
1272
1323
|
name: 'isDisabled',
|
|
1273
|
-
description: 'Set if the field is disabled
|
|
1324
|
+
description: 'Set if the field is disabled.',
|
|
1274
1325
|
type: 'boolean'
|
|
1275
1326
|
}, {
|
|
1276
1327
|
name: 'isInvalid',
|
|
1277
|
-
description: 'Set if the picker has an invalid value
|
|
1328
|
+
description: 'Set if the picker has an invalid value.',
|
|
1278
1329
|
type: 'boolean'
|
|
1279
1330
|
}, {
|
|
1280
1331
|
name: 'isRequired',
|
|
1281
|
-
description: 'Set the field as required
|
|
1332
|
+
description: 'Set the field as required.',
|
|
1282
1333
|
type: 'boolean'
|
|
1283
1334
|
}, {
|
|
1284
1335
|
name: 'locale',
|
|
1285
|
-
description: 'Locale used for formatting dates and times. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)
|
|
1336
|
+
description: 'Locale used for formatting dates and times. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat).',
|
|
1286
1337
|
type: 'string'
|
|
1287
1338
|
}, {
|
|
1288
1339
|
name: 'name',
|
|
1289
|
-
description: 'The name of the field
|
|
1340
|
+
description: 'The name of the field.',
|
|
1290
1341
|
type: 'string'
|
|
1291
1342
|
}, {
|
|
1292
1343
|
name: 'onBlur',
|
|
1293
|
-
description: 'Called when the field is blurred
|
|
1344
|
+
description: 'Called when the field is blurred.',
|
|
1294
1345
|
type: '(event: FocusEvent<HTMLInputElement, Element>) => void'
|
|
1295
1346
|
}, {
|
|
1296
1347
|
name: 'onChange',
|
|
1297
|
-
description: 'Called when the value changes and the date / time is a complete value, or empty. The only value is an ISO string or empty string
|
|
1298
|
-
type: '(value: string) => void'
|
|
1348
|
+
description: 'Called when the value changes and the date / time is a complete value, or empty. The only value is an ISO string or empty string.',
|
|
1349
|
+
type: '((value: string) => void) & ((value: string) => void)'
|
|
1299
1350
|
}, {
|
|
1300
1351
|
name: 'onFocus',
|
|
1301
|
-
description: 'Called when the field is focused
|
|
1352
|
+
description: 'Called when the field is focused.',
|
|
1302
1353
|
type: '(event: FocusEvent<HTMLInputElement, Element>) => void'
|
|
1303
1354
|
}, {
|
|
1304
1355
|
name: 'parseValue',
|
|
1305
|
-
description: 'Function used to parse datetime values into their date, time and timezone sub-values.
|
|
1306
|
-
type: '(dateTimeValue: string, date: string, time: string, timezone: string) => { dateValue: string; timeValue: string; zoneValue: string; }'
|
|
1356
|
+
description: 'Function used to parse datetime values into their date, time and timezone sub-values. *',
|
|
1357
|
+
type: '((dateTimeValue: string, date: string, time: string, timezone: string) => { dateValue: string; timeValue: string; zoneValue: string; }) & ((dateTimeValue: string, date: string, time: string, timezone: string) => { ...; })'
|
|
1307
1358
|
}, {
|
|
1308
1359
|
name: 'spacing',
|
|
1309
|
-
description: 'The spacing for the select control.\n\nCompact is `gridSize() * 4`, default is `gridSize() * 5
|
|
1360
|
+
description: 'The spacing for the select control.\n\nCompact is `gridSize() * 4`, default is `gridSize() * 5`.',
|
|
1310
1361
|
type: '"default" | "compact"'
|
|
1311
1362
|
}, {
|
|
1312
1363
|
name: 'timePickerProps',
|
|
1313
|
-
description: 'Props applied to the `TimePicker
|
|
1364
|
+
description: 'Props applied to the `TimePicker`.',
|
|
1314
1365
|
type: 'TimePickerBaseProps'
|
|
1315
1366
|
}, {
|
|
1316
1367
|
name: 'value',
|
|
1317
|
-
description: 'The ISO time that should be used as the input value
|
|
1368
|
+
description: 'The ISO time that should be used as the input value.',
|
|
1318
1369
|
type: 'string'
|
|
1319
1370
|
}]
|
|
1320
1371
|
}, {
|
|
@@ -1331,7 +1382,8 @@ var components = exports.components = [{
|
|
|
1331
1382
|
props: [{
|
|
1332
1383
|
name: 'autoFocusFirstElem',
|
|
1333
1384
|
description: 'Controls whether to focus the first tabbable element inside the focus lock. Set to `true` by default.',
|
|
1334
|
-
type: 'boolean'
|
|
1385
|
+
type: 'boolean',
|
|
1386
|
+
defaultValue: 'true'
|
|
1335
1387
|
}, {
|
|
1336
1388
|
name: 'children',
|
|
1337
1389
|
description: 'The content of the drawer.',
|
|
@@ -1343,11 +1395,13 @@ var components = exports.components = [{
|
|
|
1343
1395
|
}, {
|
|
1344
1396
|
name: 'isFocusLockEnabled',
|
|
1345
1397
|
description: 'Enable this to keep focus inside the component until it’s closed. This is strongly recommended, as it prevents people who use assistive technology from accidentally navigating out of the drawer using the tab key.',
|
|
1346
|
-
type: 'boolean'
|
|
1398
|
+
type: 'boolean',
|
|
1399
|
+
defaultValue: 'true'
|
|
1347
1400
|
}, {
|
|
1348
1401
|
name: 'isOpen',
|
|
1349
1402
|
description: 'Controls if the drawer is open or closed.',
|
|
1350
|
-
type: 'boolean'
|
|
1403
|
+
type: 'boolean',
|
|
1404
|
+
isRequired: true
|
|
1351
1405
|
}, {
|
|
1352
1406
|
name: 'label',
|
|
1353
1407
|
description: 'This is an `aria-label` attribute. It sets an accessible name for the drawer wrapper, for people who use assistive technology.\nUsage of either this, or the `titleId` attribute is strongly recommended.',
|
|
@@ -1371,7 +1425,8 @@ var components = exports.components = [{
|
|
|
1371
1425
|
}, {
|
|
1372
1426
|
name: 'shouldReturnFocus',
|
|
1373
1427
|
description: 'ReturnFocus controls what happens when the user exits focus lock mode.\nIf true, focus returns to the trigger element . If false, focus remains where it was when the FocusLock was deactivated.\nIf ref is passed, focus returns to that specific ref element.',
|
|
1374
|
-
type: 'boolean | React.RefObject<HTMLElement>'
|
|
1428
|
+
type: 'boolean | React.RefObject<HTMLElement>',
|
|
1429
|
+
defaultValue: 'true'
|
|
1375
1430
|
}, {
|
|
1376
1431
|
name: 'titleId',
|
|
1377
1432
|
description: "This is an ID referenced by the drawer wrapper's `aria-labelledby` attribute. This ID should be assigned to the drawer `title` element.\nUsage of either this, or the `label` attribute is strongly recommended.",
|
|
@@ -1379,11 +1434,13 @@ var components = exports.components = [{
|
|
|
1379
1434
|
}, {
|
|
1380
1435
|
name: 'width',
|
|
1381
1436
|
description: 'Sets the width of the drawer.',
|
|
1382
|
-
type: '"extended" | "full" | "medium" | "narrow" | "wide"'
|
|
1437
|
+
type: '"extended" | "full" | "medium" | "narrow" | "wide"',
|
|
1438
|
+
defaultValue: '"narrow"'
|
|
1383
1439
|
}, {
|
|
1384
1440
|
name: 'zIndex',
|
|
1385
1441
|
description: 'Z-index that the popup should be displayed in.\nThis is passed to the portal component.\nDefaults to `unset`.',
|
|
1386
|
-
type: 'number | "unset"'
|
|
1442
|
+
type: 'number | "unset"',
|
|
1443
|
+
defaultValue: '"unset"'
|
|
1387
1444
|
}]
|
|
1388
1445
|
}, {
|
|
1389
1446
|
name: 'DrawerContent',
|
|
@@ -1406,7 +1463,7 @@ var components = exports.components = [{
|
|
|
1406
1463
|
}, {
|
|
1407
1464
|
name: 'xcss',
|
|
1408
1465
|
description: '',
|
|
1409
|
-
type: 'false | (XCSSValue<"backgroundColor" | "marginTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "padding", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
|
|
1466
|
+
type: 'false | (XCSSValue<"backgroundColor" | "marginBlockStart" | "marginTop" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "padding", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
|
|
1410
1467
|
}]
|
|
1411
1468
|
}, {
|
|
1412
1469
|
name: 'DrawerSidebar',
|
|
@@ -1444,7 +1501,8 @@ var components = exports.components = [{
|
|
|
1444
1501
|
}, {
|
|
1445
1502
|
name: 'label',
|
|
1446
1503
|
description: 'This is the accessible name for the close/back control of the drawer. The default is "Close drawer".',
|
|
1447
|
-
type: 'string'
|
|
1504
|
+
type: 'string',
|
|
1505
|
+
defaultValue: '"Close drawer"'
|
|
1448
1506
|
}]
|
|
1449
1507
|
}, {
|
|
1450
1508
|
name: 'DropdownMenu',
|
|
@@ -1464,7 +1522,8 @@ var components = exports.components = [{
|
|
|
1464
1522
|
}, {
|
|
1465
1523
|
name: 'autoFocus',
|
|
1466
1524
|
description: 'Controls if the first menu item receives focus when menu is opened. Note that the menu has a focus lock\nwhich traps the focus within the menu. The first item gets focus automatically\nif the menu is triggered using the keyboard.',
|
|
1467
|
-
type: 'boolean'
|
|
1525
|
+
type: 'boolean',
|
|
1526
|
+
defaultValue: 'false'
|
|
1468
1527
|
}, {
|
|
1469
1528
|
name: 'children',
|
|
1470
1529
|
description: 'Content that will be rendered inside the layer element. Should typically be\n`DropdownItemGroup` or `DropdownItem`, or the checkbox and radio variants of those.',
|
|
@@ -1472,11 +1531,13 @@ var components = exports.components = [{
|
|
|
1472
1531
|
}, {
|
|
1473
1532
|
name: 'defaultOpen',
|
|
1474
1533
|
description: 'Controls the initial open state of the dropdown. If provided, the component is considered to be controlled\nwhich means that the user is responsible for managing the open and close state of the menu.\nUsing `defaultOpen` may cause accessiblity issues because it will automatically shift focus to the first menu item; which can be disorienting.\nOnly use this if action on the menu is required to proceed.',
|
|
1475
|
-
type: 'boolean'
|
|
1534
|
+
type: 'boolean',
|
|
1535
|
+
defaultValue: 'false'
|
|
1476
1536
|
}, {
|
|
1477
1537
|
name: 'isLoading',
|
|
1478
1538
|
description: 'If true, a spinner is rendered instead of the items.',
|
|
1479
|
-
type: 'boolean'
|
|
1539
|
+
type: 'boolean',
|
|
1540
|
+
defaultValue: 'false'
|
|
1480
1541
|
}, {
|
|
1481
1542
|
name: 'isOpen',
|
|
1482
1543
|
description: 'Controls the open state of the dropdown.',
|
|
@@ -1492,11 +1553,13 @@ var components = exports.components = [{
|
|
|
1492
1553
|
}, {
|
|
1493
1554
|
name: 'onOpenChange',
|
|
1494
1555
|
description: 'Called when the menu should be open/closed. Receives an object with `isOpen` state.\n\nIf the dropdown was closed programatically, the `event` parameter will be `null`.',
|
|
1495
|
-
type: '(args: OnOpenChangeArgs) => void'
|
|
1556
|
+
type: '(args: OnOpenChangeArgs) => void',
|
|
1557
|
+
defaultValue: 'noop'
|
|
1496
1558
|
}, {
|
|
1497
1559
|
name: 'placement',
|
|
1498
1560
|
description: 'Position of the menu.',
|
|
1499
|
-
type: '"auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start"'
|
|
1561
|
+
type: '"auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start"',
|
|
1562
|
+
defaultValue: '"bottom-start"'
|
|
1500
1563
|
}, {
|
|
1501
1564
|
name: 'returnFocusRef',
|
|
1502
1565
|
description: 'If ref is passed, focus returns to that specific ref element after dropdown dismissed.',
|
|
@@ -1504,15 +1567,23 @@ var components = exports.components = [{
|
|
|
1504
1567
|
}, {
|
|
1505
1568
|
name: 'shouldFitContainer',
|
|
1506
1569
|
description: "This fits the dropdown menu width to its parent's width.\nWhen set to `true`, the trigger and dropdown menu elements will be wrapped in a `div` with `position: relative`.\nThe dropdown menu will be rendered as a sibling to the trigger element, and will be full width.\nThe default is `false`.\n\nThis fits the dropdown menu width to its parent's width.\nWhen set to `true`, the trigger and dropdown menu elements will be wrapped in a `div` with `position: relative`.\nThe dropdown menu will be rendered as a sibling to the trigger element, and will be full width.\nThe default is `false`.",
|
|
1507
|
-
type: 'boolean'
|
|
1570
|
+
type: 'boolean',
|
|
1571
|
+
defaultValue: 'false'
|
|
1508
1572
|
}, {
|
|
1509
1573
|
name: 'shouldFlip',
|
|
1510
1574
|
description: 'Allows the dropdown menu to be placed on the opposite side of its trigger if it does not\nfit in the viewport.',
|
|
1511
|
-
type: 'boolean'
|
|
1575
|
+
type: 'boolean',
|
|
1576
|
+
defaultValue: 'true'
|
|
1577
|
+
}, {
|
|
1578
|
+
name: 'shouldPreventEscapePropagation',
|
|
1579
|
+
description: 'When set to true, will call stopPropagation on the ESCAPE key event.\nThis prevents the ESCAPE event from bubbling up to parent elements.',
|
|
1580
|
+
type: 'boolean',
|
|
1581
|
+
defaultValue: 'false'
|
|
1512
1582
|
}, {
|
|
1513
1583
|
name: 'shouldRenderToParent',
|
|
1514
1584
|
description: 'Controls whether the popup is rendered inline within its parent component or in a portal at the document root.\n`true` renders the dropdown menu in the DOM node closest to the trigger; focus is not trapped inside the element.\n`false` renders the dropdown menu in React.Portal and focus is trapped inside the element.\nDefaults to `false`.\nControls whether the popup is rendered inline within its parent component or in a portal at the document root.\n`true` renders the dropdown menu in the DOM node closest to the trigger; focus is not trapped inside the element.\n`false` renders the dropdown menu in React.Portal and focus is trapped inside the element.\nDefaults to `false`.',
|
|
1515
|
-
type: 'boolean'
|
|
1585
|
+
type: 'boolean',
|
|
1586
|
+
defaultValue: 'false'
|
|
1516
1587
|
}, {
|
|
1517
1588
|
name: 'spacing',
|
|
1518
1589
|
description: 'Controls the spacing density of the menu.',
|
|
@@ -1532,7 +1603,8 @@ var components = exports.components = [{
|
|
|
1532
1603
|
}, {
|
|
1533
1604
|
name: 'zIndex',
|
|
1534
1605
|
description: 'Z-index that the popup should be displayed in.\nThis is passed to the portal component.\nDefaults to `layers.modal()` from `@atlaskit/theme` which is 510.',
|
|
1535
|
-
type: 'number'
|
|
1606
|
+
type: 'number',
|
|
1607
|
+
defaultValue: '510'
|
|
1536
1608
|
}]
|
|
1537
1609
|
}, {
|
|
1538
1610
|
name: 'EmptyState',
|
|
@@ -1556,15 +1628,18 @@ var components = exports.components = [{
|
|
|
1556
1628
|
}, {
|
|
1557
1629
|
name: 'header',
|
|
1558
1630
|
description: 'Title that briefly describes the page to the user.',
|
|
1559
|
-
type: 'string'
|
|
1631
|
+
type: 'string',
|
|
1632
|
+
isRequired: true
|
|
1560
1633
|
}, {
|
|
1561
1634
|
name: 'headingLevel',
|
|
1562
1635
|
description: 'The value used to set the heading level of the header element.\nMust be in the range of 1 to 6. Defaults to 4.',
|
|
1563
|
-
type: 'number'
|
|
1636
|
+
type: 'number',
|
|
1637
|
+
defaultValue: '4'
|
|
1564
1638
|
}, {
|
|
1565
1639
|
name: 'headingSize',
|
|
1566
1640
|
description: 'The keyword used to set the visual appearance of the header element.\nDefaults to "medium". "xsmall" can be used for empty states in smaller contexts such as popups.',
|
|
1567
|
-
type: '"xsmall" | "medium"'
|
|
1641
|
+
type: '"xsmall" | "medium"',
|
|
1642
|
+
defaultValue: '"medium"'
|
|
1568
1643
|
}, {
|
|
1569
1644
|
name: 'imageHeight',
|
|
1570
1645
|
description: 'Height of the image that is rendered in EmptyState component.\nUseful when you want image to be of exact height to stop it bouncing around when loading in.\nOnly set `height` if you want the image to resize down on smaller devices.',
|
|
@@ -1584,11 +1659,13 @@ var components = exports.components = [{
|
|
|
1584
1659
|
}, {
|
|
1585
1660
|
name: 'maxImageHeight',
|
|
1586
1661
|
description: 'Maximum height (in pixels) of the image, default value is 160.',
|
|
1587
|
-
type: 'number'
|
|
1662
|
+
type: 'number',
|
|
1663
|
+
defaultValue: '160'
|
|
1588
1664
|
}, {
|
|
1589
1665
|
name: 'maxImageWidth',
|
|
1590
1666
|
description: 'Maximum width (in pixels) of the image, default value is 160.',
|
|
1591
|
-
type: 'number'
|
|
1667
|
+
type: 'number',
|
|
1668
|
+
defaultValue: '160'
|
|
1592
1669
|
}, {
|
|
1593
1670
|
name: 'primaryAction',
|
|
1594
1671
|
description: 'Primary action button for the page, usually it will be something like "Create" (or "Retry" for error pages).',
|
|
@@ -1640,7 +1717,7 @@ var components = exports.components = [{
|
|
|
1640
1717
|
}, {
|
|
1641
1718
|
name: 'description',
|
|
1642
1719
|
description: 'The secondary content shown below the flag title.',
|
|
1643
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
1720
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
|
|
1644
1721
|
}, {
|
|
1645
1722
|
name: 'headingLevel',
|
|
1646
1723
|
description: 'Specifies the heading level in the document structure.\nIf not specified, the default is `2`.',
|
|
@@ -1648,19 +1725,20 @@ var components = exports.components = [{
|
|
|
1648
1725
|
}, {
|
|
1649
1726
|
name: 'icon',
|
|
1650
1727
|
description: 'The icon displayed in the top-left of the flag. Should be an instance of `@atlaskit/icon`.\nYour icon will receive the appropriate default color, which you can override by setting\nthe `color` prop on the icon to your preferred icon color.\nIf no icon is provided, a default icon will be used based on the appearance prop.',
|
|
1651
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
1728
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
|
|
1652
1729
|
}, {
|
|
1653
1730
|
name: 'id',
|
|
1654
1731
|
description: 'A unique identifier used for rendering and onDismissed callbacks.',
|
|
1655
|
-
type: 'string | number'
|
|
1732
|
+
type: 'string | number',
|
|
1733
|
+
isRequired: true
|
|
1656
1734
|
}, {
|
|
1657
1735
|
name: 'linkComponent',
|
|
1658
1736
|
description: 'A link component that is passed down to the `@atlaskit/button` used by actions,\nto allow custom routers to be used. See the\n[button with router](https://atlaskit.atlassian.com/packages/design-system/button/example/ButtonWithRouter)\nexample of what this component should look like.',
|
|
1659
|
-
type: 'ComponentClass<CustomThemeButtonProps, any> | FunctionComponent<CustomThemeButtonProps>'
|
|
1737
|
+
type: 'React.ComponentClass<CustomThemeButtonProps, any> | React.FunctionComponent<CustomThemeButtonProps>'
|
|
1660
1738
|
}, {
|
|
1661
1739
|
name: 'onBlur',
|
|
1662
1740
|
description: 'Standard onBlur event, applied to Flag by AutoDismissFlag.',
|
|
1663
|
-
type: '(e: FocusEvent<HTMLElement, Element>, analyticsEvent: UIAnalyticsEvent) => void'
|
|
1741
|
+
type: '(e: React.FocusEvent<HTMLElement, Element>, analyticsEvent: UIAnalyticsEvent) => void'
|
|
1664
1742
|
}, {
|
|
1665
1743
|
name: 'onDismissed',
|
|
1666
1744
|
description: "Handler which will be called when a Flag's dismiss button is clicked.\nReceives the id of the dismissed Flag as a parameter.",
|
|
@@ -1668,19 +1746,20 @@ var components = exports.components = [{
|
|
|
1668
1746
|
}, {
|
|
1669
1747
|
name: 'onFocus',
|
|
1670
1748
|
description: 'Standard onFocus event, applied to Flag by AutoDismissFlag.',
|
|
1671
|
-
type: '(e: FocusEvent<HTMLElement, Element>, analyticsEvent: UIAnalyticsEvent) => void'
|
|
1749
|
+
type: '(e: React.FocusEvent<HTMLElement, Element>, analyticsEvent: UIAnalyticsEvent) => void'
|
|
1672
1750
|
}, {
|
|
1673
1751
|
name: 'onMouseOut',
|
|
1674
1752
|
description: 'Standard onMouseOut event, applied to Flag by AutoDismissFlag.',
|
|
1675
|
-
type: '(event: MouseEvent<Element,
|
|
1753
|
+
type: '(event: React.MouseEvent<Element, MouseEvent>) => void'
|
|
1676
1754
|
}, {
|
|
1677
1755
|
name: 'onMouseOver',
|
|
1678
1756
|
description: 'Standard onMouseOver event, applied to Flag by AutoDismissFlag.',
|
|
1679
|
-
type: '(event: MouseEvent<Element,
|
|
1757
|
+
type: '(event: React.MouseEvent<Element, MouseEvent>) => void'
|
|
1680
1758
|
}, {
|
|
1681
1759
|
name: 'title',
|
|
1682
1760
|
description: 'The bold text shown at the top of the flag.',
|
|
1683
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
1761
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
|
|
1762
|
+
isRequired: true
|
|
1684
1763
|
}]
|
|
1685
1764
|
}, {
|
|
1686
1765
|
name: 'Form',
|
|
@@ -1700,7 +1779,8 @@ var components = exports.components = [{
|
|
|
1700
1779
|
}, {
|
|
1701
1780
|
name: 'children',
|
|
1702
1781
|
description: 'The contents rendered inside of the form. This is a function where the props will be passed from the form. The function props you can access are `dirty`, `submitting` and `disabled`.\nYou can read more about these props in [react-final form documentation](https://final-form.org/docs/final-form/types/FormState).\n\nIf you are only spreading `formProps` onto the HTML `<form>` element and not using any of the other props (like `submitting`, etc.), `children` can be plain JSX. All of the children will be wrapped within an HTML `<form>` element that includes all necessary props, including those provided on the form component.',
|
|
1703
|
-
type: '(() => void) | React.ReactNode | ((args: FormChildrenArgs<FormValues>) => React.ReactNode)'
|
|
1782
|
+
type: '(() => void) | React.ReactNode | ((args: FormChildrenArgs<FormValues>) => React.ReactNode)',
|
|
1783
|
+
isRequired: true
|
|
1704
1784
|
}, {
|
|
1705
1785
|
name: 'formProps',
|
|
1706
1786
|
description: 'When `Form` renders JSX children directly and not using a function to\nspread `formProps` manually, the properties in this `formProps` prop will\nbe spread on an internally rendered HTML `form` element.',
|
|
@@ -1732,7 +1812,8 @@ var components = exports.components = [{
|
|
|
1732
1812
|
}, {
|
|
1733
1813
|
name: 'onSubmit',
|
|
1734
1814
|
description: 'Event handler called when the form is submitted. Fields must be free of validation errors.',
|
|
1735
|
-
type: '(values: FormValues, form: FormApi<FormValues>, callback?: (errors?: Record<string, string>) => void) => void | Object | Promise<...>'
|
|
1815
|
+
type: '(values: FormValues, form: FormApi<FormValues>, callback?: (errors?: Record<string, string>) => void) => void | Object | Promise<...>',
|
|
1816
|
+
isRequired: true
|
|
1736
1817
|
}, {
|
|
1737
1818
|
name: 'xcss',
|
|
1738
1819
|
description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
|
|
@@ -1745,30 +1826,32 @@ var components = exports.components = [{
|
|
|
1745
1826
|
category: 'primitive',
|
|
1746
1827
|
description: 'A component for creating accessible, consistently styled headings with proper hierarchy. Headings are sized to contrast with content, increase visual hierarchy, and help readers easily understand the structure of content.',
|
|
1747
1828
|
status: 'general-availability',
|
|
1748
|
-
examples: ['import Heading from \'@atlaskit/heading\';\
|
|
1829
|
+
examples: ['import Heading from \'@atlaskit/heading\';\nconst _default_1: React.JSX.Element[] = [\n\t<Heading size="xxlarge">Page Title</Heading>,\n\t<Heading size="large" color="color.text.inverse">\n\t\tInverted section title\n\t</Heading>,\n];\nexport default _default_1;'],
|
|
1749
1830
|
accessibilityGuidelines: ['Maintain proper heading hierarchy (h1 to h6)', 'Use only one h1 per page for main page titles', 'Ensure minimum 4.5:1 color contrast for text readability', 'Use clear, descriptive heading text that describes the content below'],
|
|
1750
1831
|
usageGuidelines: ['Use the `HeadingContextProvider` offering to maintain heading levels in complex layouts', 'Maintain proper heading hierarchy', 'Keep headings concise and meaningful', 'Use sentence case for most headings', 'Use the `color` prop for inverse text on dark backgrounds', 'Do NOT use any inline styles, you must use the `size` (required) and `color` (optional) props available'],
|
|
1751
1832
|
contentGuidelines: ['Use clear, descriptive heading text', 'Maintain proper heading hierarchy', 'Keep headings concise and meaningful', 'Use sentence case for most headings', 'Make headings descriptive of the content that follows'],
|
|
1752
1833
|
props: [{
|
|
1753
1834
|
name: 'as',
|
|
1754
|
-
description: 'Allows the component to be rendered as the specified
|
|
1835
|
+
description: 'Allows the component to be rendered as the specified HTML element, overriding a default element set by the `size` prop.',
|
|
1755
1836
|
type: '"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span"'
|
|
1756
1837
|
}, {
|
|
1757
1838
|
name: 'children',
|
|
1758
1839
|
description: 'The text of the heading.',
|
|
1759
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
1840
|
+
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
|
|
1841
|
+
isRequired: true
|
|
1760
1842
|
}, {
|
|
1761
1843
|
name: 'color',
|
|
1762
1844
|
description: 'Token representing text color with a built-in fallback value.\nWill apply inverse text color automatically if placed within a Box with bold background color.\nDefaults to `color.text`.',
|
|
1763
1845
|
type: '"color.text" | "color.text.inverse" | "color.text.warning.inverse"'
|
|
1764
1846
|
}, {
|
|
1765
1847
|
name: 'id',
|
|
1766
|
-
description: 'Unique identifier for the heading
|
|
1848
|
+
description: 'Unique identifier for the heading HTML element.',
|
|
1767
1849
|
type: 'string'
|
|
1768
1850
|
}, {
|
|
1769
1851
|
name: 'size',
|
|
1770
|
-
description: '
|
|
1771
|
-
type: '"xxlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall" | "xxsmall"'
|
|
1852
|
+
description: 'Determines which text styles are applied. A corresponding HTML element is automatically applied from h1 to h6 based on the size.\nThis can be overriden using the `as` prop to allow for more flexibility.',
|
|
1853
|
+
type: '"xxlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall" | "xxsmall"',
|
|
1854
|
+
isRequired: true
|
|
1772
1855
|
}]
|
|
1773
1856
|
}, {
|
|
1774
1857
|
name: 'HeadingContextProvider',
|
|
@@ -1777,13 +1860,14 @@ var components = exports.components = [{
|
|
|
1777
1860
|
category: 'primitive',
|
|
1778
1861
|
description: 'A context provider that allows you to configure the default HTML heading level for all headings within its subtree. Useful for maintaining proper heading hierarchy in complex layouts.',
|
|
1779
1862
|
status: 'general-availability',
|
|
1780
|
-
examples: ['import Heading, { HeadingContextProvider } from \'@atlaskit/heading\';\
|
|
1863
|
+
examples: ['import Heading, { HeadingContextProvider } from \'@atlaskit/heading\';\nconst _default_1: React.JSX.Element[] = [\n\t<HeadingContextProvider>\n\t\t<Heading size="xxlarge">h1</Heading>\n\t\t<Heading size="medium">h2</Heading>\n\t\t<Heading size="large">h3</Heading>\n\t</HeadingContextProvider>,\n];\nexport default _default_1;'],
|
|
1781
1864
|
usageGuidelines: ['Wrap sections that need different heading hierarchy', 'Use for complex layouts where heading levels need adjustment'],
|
|
1782
1865
|
contentGuidelines: ['Ensure proper heading hierarchy is maintained', 'Use clear, descriptive heading text', 'Keep headings concise and meaningful'],
|
|
1783
1866
|
props: [{
|
|
1784
1867
|
name: 'children',
|
|
1785
1868
|
description: 'Semantic hierarchy of content below the heading context.',
|
|
1786
|
-
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
|
|
1869
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
|
|
1870
|
+
isRequired: true
|
|
1787
1871
|
}, {
|
|
1788
1872
|
name: 'value',
|
|
1789
1873
|
description: 'Optional - only apply this value if the intent is to reset the heading context outside the normal content flow, for example inside a `section`.',
|
|
@@ -1796,7 +1880,7 @@ var components = exports.components = [{
|
|
|
1796
1880
|
category: 'images-and-icons',
|
|
1797
1881
|
description: 'An icon is a symbol representing a command, device, directory, or common action.',
|
|
1798
1882
|
status: 'general-availability',
|
|
1799
|
-
examples: ["import AddIcon from '@atlaskit/icon/core/add';\nimport DeleteIcon from '@atlaskit/icon/core/delete';\nimport StarIcon from '@atlaskit/icon/core/star-starred';\nimport { token } from '@atlaskit/tokens';\
|
|
1883
|
+
examples: ["import AddIcon from '@atlaskit/icon/core/add';\nimport DeleteIcon from '@atlaskit/icon/core/delete';\nimport StarIcon from '@atlaskit/icon/core/star-starred';\nimport { token } from '@atlaskit/tokens';\nconst _default_1: React.JSX.Element[] = [\n\t<AddIcon label=\"Add\" />,\n\t<StarIcon label=\"Star\" color=\"currentColor\" />,\n\t<DeleteIcon label=\"Delete\" color={token('color.icon.danger')} />,\n];\nexport default _default_1;"],
|
|
1800
1884
|
accessibilityGuidelines: ['Provide appropriate alt text or labels for icons', 'Use meaningful icon choices that convey clear meaning', 'Ensure sufficient color contrast for icon visibility', 'Consider icon size for touch targets', 'Use consistent iconography across the interface'],
|
|
1801
1885
|
usageGuidelines: ['Use icons to enhance visual communication', 'Choose icons that clearly represent their function', 'Maintain consistent icon style and size', 'Use appropriate icon sizes for different contexts', 'Consider cultural and contextual icon meanings'],
|
|
1802
1886
|
contentGuidelines: ['Use clear, recognizable icon symbols', 'Ensure icons are culturally appropriate', 'Maintain visual consistency across icon sets', 'Use appropriate icon labels and descriptions'],
|
|
@@ -1815,7 +1899,8 @@ var components = exports.components = [{
|
|
|
1815
1899
|
}, {
|
|
1816
1900
|
name: 'label',
|
|
1817
1901
|
description: 'Text used to describe what the icon is in context.',
|
|
1818
|
-
type: 'string'
|
|
1902
|
+
type: 'string',
|
|
1903
|
+
isRequired: true
|
|
1819
1904
|
}, {
|
|
1820
1905
|
name: 'primaryColor',
|
|
1821
1906
|
description: 'Primary color for the icon.\nInherits the current font color by default.',
|
|
@@ -1836,22 +1921,25 @@ var components = exports.components = [{
|
|
|
1836
1921
|
category: 'images-and-icons',
|
|
1837
1922
|
description: 'A tile component that displays an icon with customizable background, shape, and appearance.',
|
|
1838
1923
|
status: 'release-candidate',
|
|
1839
|
-
examples: ['import { IconTile } from \'@atlaskit/icon\';\nimport AddIcon from \'@atlaskit/icon/core/add\';\
|
|
1924
|
+
examples: ['import { IconTile } from \'@atlaskit/icon\';\nimport AddIcon from \'@atlaskit/icon/core/add\';\nconst _default_1: React.JSX.Element[] = [\n\t<IconTile icon={AddIcon} label="Add" appearance="redBold" />,\n\t<IconTile icon={AddIcon} label="Add" shape="circle" appearance="blue" />,\n];\nexport default _default_1;'],
|
|
1840
1925
|
accessibilityGuidelines: ['Provide appropriate labels for icon tiles', 'Ensure sufficient color contrast', 'Use meaningful icon choices', 'Consider touch target sizes'],
|
|
1841
1926
|
usageGuidelines: ['Use for icon presentation with background styling', 'Choose appropriate shapes and appearances', 'Maintain consistent sizing across tiles', 'Use for visual emphasis or categorization'],
|
|
1842
1927
|
contentGuidelines: ['Use clear, recognizable icons', 'Choose appropriate colors and shapes', 'Ensure visual consistency across tiles'],
|
|
1843
1928
|
props: [{
|
|
1844
1929
|
name: 'appearance',
|
|
1845
1930
|
description: 'The appearance of the tile',
|
|
1846
|
-
type: '"gray" | "blue" | "teal" | "green" | "lime" | "yellow" | "orange" | "red" | "magenta" | "purple" | "grayBold" | "blueBold" | "tealBold" | "greenBold" | "limeBold" | "yellowBold" | "orangeBold" | "redBold" | "magentaBold" | "purpleBold"'
|
|
1931
|
+
type: '"gray" | "blue" | "teal" | "green" | "lime" | "yellow" | "orange" | "red" | "magenta" | "purple" | "grayBold" | "blueBold" | "tealBold" | "greenBold" | "limeBold" | "yellowBold" | "orangeBold" | "redBold" | "magentaBold" | "purpleBold"',
|
|
1932
|
+
isRequired: true
|
|
1847
1933
|
}, {
|
|
1848
1934
|
name: 'icon',
|
|
1849
1935
|
description: 'The icon to display',
|
|
1850
|
-
type: 'React.ComponentClass<NewCoreIconProps, any> | React.FunctionComponent<NewCoreIconProps>'
|
|
1936
|
+
type: 'React.ComponentClass<NewCoreIconProps, any> | React.FunctionComponent<NewCoreIconProps>',
|
|
1937
|
+
isRequired: true
|
|
1851
1938
|
}, {
|
|
1852
1939
|
name: 'label',
|
|
1853
1940
|
description: 'The label for the icon',
|
|
1854
|
-
type: 'string'
|
|
1941
|
+
type: 'string',
|
|
1942
|
+
isRequired: true
|
|
1855
1943
|
}, {
|
|
1856
1944
|
name: 'size',
|
|
1857
1945
|
description: 'Size of the tile, in pixels. Defaults to `24`.\n\nNow supports both semantic t-shirt size names and pixel number values. Pixel number values are deprecated and will be removed in a future release, however they will both be available and backwards-compatible during a transition period.\n\nSize `16` will not have a replacement after deprecation, and should be replaced with direct icons without a tile or enlarging to the next available size `xsmall`.\n\nAll available sizes:\n- `16` (deprecated)\n- `xsmall` (new)\n- `small` or `24`\n- `medium` or `32`\n- `large` or `40`\n- `xlarge` or `48`',
|
|
@@ -1891,11 +1979,13 @@ var components = exports.components = [{
|
|
|
1891
1979
|
props: [{
|
|
1892
1980
|
name: 'children',
|
|
1893
1981
|
description: 'The elements that the InlineDialog will be positioned relative to.',
|
|
1894
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
1982
|
+
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
|
|
1983
|
+
isRequired: true
|
|
1895
1984
|
}, {
|
|
1896
1985
|
name: 'content',
|
|
1897
1986
|
description: 'The elements to be displayed within the InlineDialog.',
|
|
1898
|
-
type: 'ReactNode | (() => ReactNode)'
|
|
1987
|
+
type: 'ReactNode | (() => ReactNode)',
|
|
1988
|
+
isRequired: true
|
|
1899
1989
|
}, {
|
|
1900
1990
|
name: 'fallbackPlacements',
|
|
1901
1991
|
description: "This is a list of backup placements to try.\nWhen the preferred placement doesn't have enough space,\nthe modifier will test the ones provided in the list, and use the first suitable one.\nIf no fallback placements are suitable, it reverts back to the original placement.",
|
|
@@ -1951,7 +2041,8 @@ var components = exports.components = [{
|
|
|
1951
2041
|
}, {
|
|
1952
2042
|
name: 'defaultValue',
|
|
1953
2043
|
description: 'The user input entered into the field during `editView`. This value is updated and saved by `onConfirm`.',
|
|
1954
|
-
type: 'any'
|
|
2044
|
+
type: 'any',
|
|
2045
|
+
isRequired: true
|
|
1955
2046
|
}, {
|
|
1956
2047
|
name: 'editButtonLabel',
|
|
1957
2048
|
description: 'Accessibility label for button, which is used to enter `editView` from keyboard.',
|
|
@@ -1963,7 +2054,8 @@ var components = exports.components = [{
|
|
|
1963
2054
|
}, {
|
|
1964
2055
|
name: 'editView',
|
|
1965
2056
|
description: 'The component shown when user is editing (when the inline edit is not in `readView`).',
|
|
1966
|
-
type: '(fieldProps: ExtendedFieldProps<FieldValue>, ref: React.RefObject<any>) => React.ReactNode'
|
|
2057
|
+
type: '(fieldProps: ExtendedFieldProps<FieldValue>, ref: React.RefObject<any>) => React.ReactNode',
|
|
2058
|
+
isRequired: true
|
|
1967
2059
|
}, {
|
|
1968
2060
|
name: 'hideActionButtons',
|
|
1969
2061
|
description: 'Sets whether the confirm and cancel action buttons are displayed in the bottom right of the field.',
|
|
@@ -1991,7 +2083,8 @@ var components = exports.components = [{
|
|
|
1991
2083
|
}, {
|
|
1992
2084
|
name: 'onConfirm',
|
|
1993
2085
|
description: 'Saves and confirms the value entered into the field. It exits `editView` and returns to `readView`.',
|
|
1994
|
-
type: '(value: any, analyticsEvent: UIAnalyticsEvent) => void'
|
|
2086
|
+
type: '(value: any, analyticsEvent: UIAnalyticsEvent) => void',
|
|
2087
|
+
isRequired: true
|
|
1995
2088
|
}, {
|
|
1996
2089
|
name: 'onEdit',
|
|
1997
2090
|
description: 'Handler called when readView is clicked.',
|
|
@@ -1999,7 +2092,8 @@ var components = exports.components = [{
|
|
|
1999
2092
|
}, {
|
|
2000
2093
|
name: 'readView',
|
|
2001
2094
|
description: 'The component shown when not in `editView`. This is when the inline edit is read-only and not being edited.',
|
|
2002
|
-
type: '() => React.ReactNode'
|
|
2095
|
+
type: '() => React.ReactNode',
|
|
2096
|
+
isRequired: true
|
|
2003
2097
|
}, {
|
|
2004
2098
|
name: 'readViewFitContainerWidth',
|
|
2005
2099
|
description: 'Determines whether the `readView` has 100% width within its container, or whether it fits the content.',
|
|
@@ -2027,15 +2121,16 @@ var components = exports.components = [{
|
|
|
2027
2121
|
props: [{
|
|
2028
2122
|
name: 'appearance',
|
|
2029
2123
|
description: 'Set the icon to be used before the title. Options are: connectivity,\nconfirmation, info, warning, and error.',
|
|
2030
|
-
type: '"connectivity" | "confirmation" | "info" | "warning" | "error"'
|
|
2124
|
+
type: '"connectivity" | "confirmation" | "info" | "warning" | "error"',
|
|
2125
|
+
defaultValue: '"connectivity"'
|
|
2031
2126
|
}, {
|
|
2032
2127
|
name: 'children',
|
|
2033
2128
|
description: 'The elements to be displayed by the popup.',
|
|
2034
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
2129
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal'
|
|
2035
2130
|
}, {
|
|
2036
2131
|
name: 'fallbackPlacements',
|
|
2037
2132
|
description: "This is a list of backup placements for the popup to try.\nWhen the preferred placement doesn't have enough space,\nthe modifier will test the ones provided in the list, and use the first suitable one.\nIf no fallback placements are suitable, it reverts back to the original placement.",
|
|
2038
|
-
type: '
|
|
2133
|
+
type: 'PopupPlacement[]'
|
|
2039
2134
|
}, {
|
|
2040
2135
|
name: 'iconLabel',
|
|
2041
2136
|
description: 'Text to be used as the label for the button icon. You must use this to provide information for people who use assistive technology when there is no title and/or secondaryText.',
|
|
@@ -2043,19 +2138,23 @@ var components = exports.components = [{
|
|
|
2043
2138
|
}, {
|
|
2044
2139
|
name: 'placement',
|
|
2045
2140
|
description: 'The placement to be passed to the popup. Determines where around\nthe text the dialog is displayed.',
|
|
2046
|
-
type: 'AutoPlacement | BasePlacement | VariationPlacement'
|
|
2141
|
+
type: 'AutoPlacement | BasePlacement | VariationPlacement',
|
|
2142
|
+
defaultValue: '"bottom-start"'
|
|
2047
2143
|
}, {
|
|
2048
2144
|
name: 'secondaryText',
|
|
2049
2145
|
description: 'Text to display second.',
|
|
2050
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
2146
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal',
|
|
2147
|
+
defaultValue: '""'
|
|
2051
2148
|
}, {
|
|
2052
2149
|
name: 'spacing',
|
|
2053
2150
|
description: 'The spacing of the underlying icon button. Options are: spacious and compact.',
|
|
2054
|
-
type: '"spacious" | "compact"'
|
|
2151
|
+
type: '"spacious" | "compact"',
|
|
2152
|
+
defaultValue: '"spacious"'
|
|
2055
2153
|
}, {
|
|
2056
2154
|
name: 'title',
|
|
2057
2155
|
description: 'Text to display first, bolded for emphasis.',
|
|
2058
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
2156
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal',
|
|
2157
|
+
defaultValue: '""'
|
|
2059
2158
|
}]
|
|
2060
2159
|
}, {
|
|
2061
2160
|
name: 'Link',
|
|
@@ -2064,7 +2163,7 @@ var components = exports.components = [{
|
|
|
2064
2163
|
category: 'navigation',
|
|
2065
2164
|
description: 'A component for navigation links.',
|
|
2066
2165
|
status: 'general-availability',
|
|
2067
|
-
examples: ['import Link from \'@atlaskit/link\';\
|
|
2166
|
+
examples: ['import Link from \'@atlaskit/link\';\nconst _default_1: React.JSX.Element[] = [\n\t<Link href="/dashboard">Go to Dashboard</Link>,\n\t<Link href="https://atlassian.design" target="_blank">\n\t\tAtlassian Design System\n\t</Link>,\n];\nexport default _default_1;'],
|
|
2068
2167
|
accessibilityGuidelines: ['Provide clear link text that describes the destination', 'Use appropriate ARIA attributes for links', 'Ensure keyboard navigation support', 'Provide clear visual indicators for link state'],
|
|
2069
2168
|
usageGuidelines: ['Use for navigation to other pages or sections', 'Provide clear link text', 'Consider link behavior and target attributes', 'Use appropriate link styling'],
|
|
2070
2169
|
contentGuidelines: ['Use clear, descriptive link text', 'Maintain consistent link styling', 'Consider link context and destination', "Avoid generic text like 'click here'"],
|
|
@@ -2079,7 +2178,8 @@ var components = exports.components = [{
|
|
|
2079
2178
|
}, {
|
|
2080
2179
|
name: 'href',
|
|
2081
2180
|
description: 'Standard links can be provided as a string, which should be mapped to the\nunderlying router link component.\n\nAlternatively, you can provide an object for advanced link configurations\nby supplying the expected object type to the generic.\n\n@example\n```\nconst MyRouterLink = forwardRef(\n(\n {\n href,\n children,\n ...rest\n }: RouterLinkComponentProps<{\n href: string;\n replace: boolean;\n }>,\n ref: Ref<HTMLAnchorElement>,\n) => { ...\n```',
|
|
2082
|
-
type: 'string | RouterLinkConfig'
|
|
2181
|
+
type: 'string | RouterLinkConfig',
|
|
2182
|
+
isRequired: true
|
|
2083
2183
|
}, {
|
|
2084
2184
|
name: 'newWindowLabel',
|
|
2085
2185
|
description: 'Override the default text to signify that a link opens in a new window.\nThis is appended to the `aria-label` attribute when the `target` prop is set to `_blank`.',
|
|
@@ -2096,7 +2196,7 @@ var components = exports.components = [{
|
|
|
2096
2196
|
category: 'brand',
|
|
2097
2197
|
description: 'A component for displaying the Atlassian icon.',
|
|
2098
2198
|
status: 'general-availability',
|
|
2099
|
-
examples: ['import { AtlassianIcon } from \'@atlaskit/logo\';\
|
|
2199
|
+
examples: ['import { AtlassianIcon } from \'@atlaskit/logo\';\nconst _default_1: React.JSX.Element[] = [\n\t<AtlassianIcon appearance="brand" shouldUseNewLogoDesign />,\n\t<AtlassianIcon appearance="neutral" shouldUseNewLogoDesign />,\n];\nexport default _default_1;'],
|
|
2100
2200
|
accessibilityGuidelines: ['Provide appropriate alt text for the icon', 'Ensure icon visibility and contrast', 'Consider icon sizing and placement', 'Use appropriate icon variants'],
|
|
2101
2201
|
usageGuidelines: ['Use for Atlassian brand representation', 'Choose appropriate icon variants', 'Consider icon sizing and placement', 'Maintain brand consistency'],
|
|
2102
2202
|
props: [{
|
|
@@ -2106,7 +2206,8 @@ var components = exports.components = [{
|
|
|
2106
2206
|
}, {
|
|
2107
2207
|
name: 'label',
|
|
2108
2208
|
description: "Accessible text to be used for screen readers (it's optional since the default props provide a label that matches the logo).",
|
|
2109
|
-
type: 'string'
|
|
2209
|
+
type: 'string',
|
|
2210
|
+
defaultValue: '"Atlassian"'
|
|
2110
2211
|
}, {
|
|
2111
2212
|
name: 'shouldUseNewLogoDesign',
|
|
2112
2213
|
description: 'For logos that support it, enables the new logo design ahead of an upcoming feature flag roll-out.',
|
|
@@ -2114,7 +2215,8 @@ var components = exports.components = [{
|
|
|
2114
2215
|
}, {
|
|
2115
2216
|
name: 'size',
|
|
2116
2217
|
description: 'The size of the icon.',
|
|
2117
|
-
type: '"xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge"'
|
|
2218
|
+
type: '"xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge"',
|
|
2219
|
+
defaultValue: 'defaultLogoParams.size'
|
|
2118
2220
|
}]
|
|
2119
2221
|
}, {
|
|
2120
2222
|
name: 'Lozenge',
|
|
@@ -2129,8 +2231,8 @@ var components = exports.components = [{
|
|
|
2129
2231
|
contentGuidelines: ['Use clear, concise text', 'Ensure text is meaningful and descriptive', 'Use consistent terminology across lozenges', 'Consider text length and readability'],
|
|
2130
2232
|
props: [{
|
|
2131
2233
|
name: 'appearance',
|
|
2132
|
-
description: 'The appearance type.\nThe appearance of the lozenge. Supports
|
|
2133
|
-
type: 'ThemeAppearance | "warning" | "danger" | "information" | "neutral" | "discovery" |
|
|
2234
|
+
description: 'The appearance type.\nThe appearance of the lozenge. Supports legacy semantic appearances and new semantic colors.\nAccent appearance values.',
|
|
2235
|
+
type: 'ThemeAppearance | "warning" | "danger" | "information" | "neutral" | "discovery" | AccentColor'
|
|
2134
2236
|
}, {
|
|
2135
2237
|
name: 'children',
|
|
2136
2238
|
description: 'Elements to be rendered inside the lozenge. This should ideally be just a word or two.\nElements to be rendered inside the lozenge. This should ideally be just a word or two.',
|
|
@@ -2154,7 +2256,8 @@ var components = exports.components = [{
|
|
|
2154
2256
|
props: [{
|
|
2155
2257
|
name: 'children',
|
|
2156
2258
|
description: 'Children of the menu group.\nThis should generally be `Section` components.',
|
|
2157
|
-
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
|
|
2259
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
|
|
2260
|
+
isRequired: true
|
|
2158
2261
|
}, {
|
|
2159
2262
|
name: 'isLoading',
|
|
2160
2263
|
description: 'Used this to tell assistive technologies that the menu group is loading.',
|
|
@@ -2190,7 +2293,8 @@ var components = exports.components = [{
|
|
|
2190
2293
|
}, {
|
|
2191
2294
|
name: 'spacing',
|
|
2192
2295
|
description: 'Configure the density of the menu group content.',
|
|
2193
|
-
type: '"
|
|
2296
|
+
type: '"cozy" | "compact"',
|
|
2297
|
+
defaultValue: '"cozy"'
|
|
2194
2298
|
}]
|
|
2195
2299
|
}, {
|
|
2196
2300
|
name: 'Modal',
|
|
@@ -2294,7 +2398,8 @@ var components = exports.components = [{
|
|
|
2294
2398
|
}, {
|
|
2295
2399
|
name: 'disableTitleStyles',
|
|
2296
2400
|
description: 'Content of the page title. The text wraps by default.',
|
|
2297
|
-
type: 'boolean'
|
|
2401
|
+
type: 'boolean',
|
|
2402
|
+
defaultValue: 'false'
|
|
2298
2403
|
}, {
|
|
2299
2404
|
name: 'id',
|
|
2300
2405
|
description: 'Used as the ID of the inner h1 tag. This is exposed so the header text can be used as label of other elements by aria-labelledby.',
|
|
@@ -2306,7 +2411,8 @@ var components = exports.components = [{
|
|
|
2306
2411
|
}, {
|
|
2307
2412
|
name: 'truncateTitle',
|
|
2308
2413
|
description: 'Prevent the title from wrapping across lines. Avoid using this wherever possible, as truncation can make page headings inaccessible.',
|
|
2309
|
-
type: 'boolean'
|
|
2414
|
+
type: 'boolean',
|
|
2415
|
+
defaultValue: 'false'
|
|
2310
2416
|
}]
|
|
2311
2417
|
}, {
|
|
2312
2418
|
name: 'Pagination',
|
|
@@ -2322,7 +2428,7 @@ var components = exports.components = [{
|
|
|
2322
2428
|
props: [{
|
|
2323
2429
|
name: 'components',
|
|
2324
2430
|
description: 'Replace the built-in page, previous, next and/ or ellipsis component',
|
|
2325
|
-
type: '{ Page?: React.ElementType<any>; Previous?: React.ElementType<any>; Next?: React.ElementType
|
|
2431
|
+
type: '{ Page?: React.ElementType<any, keyof React.JSX.IntrinsicElements>; Previous?: React.ElementType<any, keyof React.JSX.IntrinsicElements>; Next?: React.ElementType<...>; }'
|
|
2326
2432
|
}, {
|
|
2327
2433
|
name: 'defaultSelectedIndex',
|
|
2328
2434
|
description: 'Index of the page to be selected by default.',
|
|
@@ -2358,7 +2464,8 @@ var components = exports.components = [{
|
|
|
2358
2464
|
}, {
|
|
2359
2465
|
name: 'pages',
|
|
2360
2466
|
description: 'Array of the pages to display.',
|
|
2361
|
-
type: 'T[]'
|
|
2467
|
+
type: 'T[]',
|
|
2468
|
+
isRequired: true
|
|
2362
2469
|
}, {
|
|
2363
2470
|
name: 'previousLabel',
|
|
2364
2471
|
description: 'The aria-label for the previous button.\nThe default value is "previous".',
|
|
@@ -2386,7 +2493,8 @@ var components = exports.components = [{
|
|
|
2386
2493
|
props: [{
|
|
2387
2494
|
name: 'children',
|
|
2388
2495
|
description: 'Returns the element to be positioned.',
|
|
2389
|
-
type: '(childrenProps: PopperChildrenProps) => React.ReactNode'
|
|
2496
|
+
type: '(childrenProps: PopperChildrenProps) => React.ReactNode',
|
|
2497
|
+
defaultValue: 'defaultChildrenFn'
|
|
2390
2498
|
}, {
|
|
2391
2499
|
name: 'modifiers',
|
|
2392
2500
|
description: 'Additional modifiers and modifier overwrites.',
|
|
@@ -2394,23 +2502,28 @@ var components = exports.components = [{
|
|
|
2394
2502
|
}, {
|
|
2395
2503
|
name: 'offset',
|
|
2396
2504
|
description: 'Distance the popup should be offset from the reference in the format of [along, away] (units in px).\nDefaults to [0, 8] - which means the popup will be 8px away from the edge of the reference specified\nby the `placement` prop.',
|
|
2397
|
-
type: '[number, number]'
|
|
2505
|
+
type: '[number, number]',
|
|
2506
|
+
defaultValue: 'defaultOffset'
|
|
2398
2507
|
}, {
|
|
2399
2508
|
name: 'placement',
|
|
2400
2509
|
description: 'Which side of the Reference to show on.',
|
|
2401
|
-
type: 'AutoPlacement | BasePlacement | VariationPlacement'
|
|
2510
|
+
type: 'AutoPlacement | BasePlacement | VariationPlacement',
|
|
2511
|
+
defaultValue: '"bottom-start"'
|
|
2402
2512
|
}, {
|
|
2403
2513
|
name: 'referenceElement',
|
|
2404
2514
|
description: 'Replacement reference element to position popper relative to.',
|
|
2405
|
-
type: 'HTMLElement | VirtualElement'
|
|
2515
|
+
type: 'HTMLElement | VirtualElement',
|
|
2516
|
+
defaultValue: 'undefined'
|
|
2406
2517
|
}, {
|
|
2407
2518
|
name: 'shouldFitViewport',
|
|
2408
2519
|
description: 'Determines if the popper will have a `max-width` and `max-height` set to\nconstrain it to the viewport.',
|
|
2409
|
-
type: 'boolean'
|
|
2520
|
+
type: 'boolean',
|
|
2521
|
+
defaultValue: 'false'
|
|
2410
2522
|
}, {
|
|
2411
2523
|
name: 'strategy',
|
|
2412
2524
|
description: "Placement strategy used. Can be 'fixed' or 'absolute'",
|
|
2413
|
-
type: '"fixed" | "absolute"'
|
|
2525
|
+
type: '"fixed" | "absolute"',
|
|
2526
|
+
defaultValue: '"fixed"'
|
|
2414
2527
|
}]
|
|
2415
2528
|
}, {
|
|
2416
2529
|
name: 'Popup',
|
|
@@ -2438,7 +2551,8 @@ var components = exports.components = [{
|
|
|
2438
2551
|
}, {
|
|
2439
2552
|
name: 'content',
|
|
2440
2553
|
description: 'Render props for content that is displayed inside the popup.',
|
|
2441
|
-
type: '(props: ContentProps) => ReactNode'
|
|
2554
|
+
type: '(props: ContentProps) => ReactNode',
|
|
2555
|
+
isRequired: true
|
|
2442
2556
|
}, {
|
|
2443
2557
|
name: 'fallbackPlacements',
|
|
2444
2558
|
description: "This is a list of backup placements for the popup to try.\nWhen the preferred placement doesn't have enough space,\nthe modifier will test the ones provided in the list, and use the first suitable one.\nIf no fallback placements are suitable, it reverts back to the original placement.",
|
|
@@ -2450,7 +2564,8 @@ var components = exports.components = [{
|
|
|
2450
2564
|
}, {
|
|
2451
2565
|
name: 'isOpen',
|
|
2452
2566
|
description: 'Use this to either show or hide the popup.\nWhen set to `false` the popup will not render anything to the DOM.',
|
|
2453
|
-
type: 'boolean'
|
|
2567
|
+
type: 'boolean',
|
|
2568
|
+
isRequired: true
|
|
2454
2569
|
}, {
|
|
2455
2570
|
name: 'label',
|
|
2456
2571
|
description: 'Refers to an `aria-label` attribute. Sets an accessible name for the popup to announce it to users of assistive technology.\nUsage of either this, or the `titleId` attribute is strongly recommended.',
|
|
@@ -2522,7 +2637,8 @@ var components = exports.components = [{
|
|
|
2522
2637
|
}, {
|
|
2523
2638
|
name: 'trigger',
|
|
2524
2639
|
description: 'Render props used to anchor the popup to your content.\nMake this an interactive element,\nsuch as an `@atlaskit/button` component.',
|
|
2525
|
-
type: '(props: TriggerProps) => ReactNode'
|
|
2640
|
+
type: '(props: TriggerProps) => ReactNode',
|
|
2641
|
+
isRequired: true
|
|
2526
2642
|
}, {
|
|
2527
2643
|
name: 'xcss',
|
|
2528
2644
|
description: 'Bounded style overrides.',
|
|
@@ -2546,15 +2662,18 @@ var components = exports.components = [{
|
|
|
2546
2662
|
props: [{
|
|
2547
2663
|
name: 'children',
|
|
2548
2664
|
description: '',
|
|
2549
|
-
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal'
|
|
2665
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
|
|
2666
|
+
isRequired: true
|
|
2550
2667
|
}, {
|
|
2551
2668
|
name: 'mountStrategy',
|
|
2552
2669
|
description: 'Specify the mount strategy: useEffect or useLayoutEffect.\nNote: UseLayoutEffect can lead to performance issues and is discouraged.',
|
|
2553
|
-
type: '"effect" | "layoutEffect"'
|
|
2670
|
+
type: '"effect" | "layoutEffect"',
|
|
2671
|
+
defaultValue: '"effect"'
|
|
2554
2672
|
}, {
|
|
2555
2673
|
name: 'zIndex',
|
|
2556
2674
|
description: '',
|
|
2557
|
-
type: 'string | number'
|
|
2675
|
+
type: 'string | number',
|
|
2676
|
+
defaultValue: '0'
|
|
2558
2677
|
}]
|
|
2559
2678
|
}, {
|
|
2560
2679
|
name: 'Anchor',
|
|
@@ -2563,7 +2682,7 @@ var components = exports.components = [{
|
|
|
2563
2682
|
category: 'primitive',
|
|
2564
2683
|
description: 'A primitive Anchor component for navigation links with compiled styling support.',
|
|
2565
2684
|
status: 'general-availability',
|
|
2566
|
-
examples: ['import { Anchor } from \'@atlaskit/primitives/compiled\';\
|
|
2685
|
+
examples: ['import { Anchor } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Anchor href="https://atlassian.design">Atlassian Design System</Anchor>,\n\t<Anchor href="/docs" target="_blank">\n\t\tOpen docs\n\t</Anchor>,\n];\nexport default _default_1;'],
|
|
2567
2686
|
accessibilityGuidelines: ['Provide clear link text that describes the destination', 'Use appropriate ARIA attributes for links', 'Ensure keyboard navigation support', 'Provide clear visual indicators for link state', 'Use descriptive link text for screen readers'],
|
|
2568
2687
|
usageGuidelines: ['Use for navigation links to other pages or sections', 'Leverage compiled styling for performance', 'Use appropriate link styling and states', 'Consider link behavior and target attributes'],
|
|
2569
2688
|
contentGuidelines: ['Use clear, descriptive link text', 'Maintain consistent link styling', 'Consider link context and destination'],
|
|
@@ -2574,7 +2693,8 @@ var components = exports.components = [{
|
|
|
2574
2693
|
}, {
|
|
2575
2694
|
name: 'href',
|
|
2576
2695
|
description: 'Standard links can be provided as a string, which should be mapped to the\nunderlying router link component.\n\nAlternatively, you can provide an object for advanced link configurations\nby supplying the expected object type to the generic.\n\n@example\n```\nconst MyRouterLink = forwardRef(\n(\n {\n href,\n children,\n ...rest\n }: RouterLinkComponentProps<{\n href: string;\n replace: boolean;\n }>,\n ref: Ref<HTMLAnchorElement>,\n) => { ...\n```',
|
|
2577
|
-
type: 'string | RouterLinkConfig'
|
|
2696
|
+
type: 'string | RouterLinkConfig',
|
|
2697
|
+
isRequired: true
|
|
2578
2698
|
}, {
|
|
2579
2699
|
name: 'newWindowLabel',
|
|
2580
2700
|
description: 'Override the default text to signify that a link opens in a new window.\nThis is appended to the `aria-label` attribute when the `target` prop is set to `_blank`.',
|
|
@@ -2595,7 +2715,7 @@ var components = exports.components = [{
|
|
|
2595
2715
|
category: 'primitive',
|
|
2596
2716
|
description: 'A primitive Bleed component for extending content beyond container boundaries with compiled styling support.',
|
|
2597
2717
|
status: 'general-availability',
|
|
2598
|
-
examples: ['import { Bleed, Box } from \'@atlaskit/primitives/compiled\';\
|
|
2718
|
+
examples: ['import { Bleed, Box } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Box padding="space.200" backgroundColor="color.background.neutral.subtle">\n\t\t<Bleed inline="space.100">\n\t\t\t<Box backgroundColor="color.background.brand.bold" padding="space.100">\n\t\t\t\tBleed content\n\t\t\t</Box>\n\t\t</Bleed>\n\t</Box>,\n];\nexport default _default_1;'],
|
|
2599
2719
|
usageGuidelines: ['Use for extending content beyond container margins', 'Leverage compiled styling for performance', 'Use appropriate bleed directions and amounts', 'Consider responsive behavior and container constraints'],
|
|
2600
2720
|
contentGuidelines: ['Use for appropriate layout bleeding', 'Maintain consistent bleeding patterns', 'Consider content hierarchy and visual flow'],
|
|
2601
2721
|
props: [{
|
|
@@ -2609,7 +2729,8 @@ var components = exports.components = [{
|
|
|
2609
2729
|
}, {
|
|
2610
2730
|
name: 'children',
|
|
2611
2731
|
description: 'Elements to be rendered inside the Flex.',
|
|
2612
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
2732
|
+
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
|
|
2733
|
+
isRequired: true
|
|
2613
2734
|
}, {
|
|
2614
2735
|
name: 'inline',
|
|
2615
2736
|
description: 'Bleed along the inline axis.',
|
|
@@ -2630,13 +2751,14 @@ var components = exports.components = [{
|
|
|
2630
2751
|
category: 'primitive',
|
|
2631
2752
|
description: 'A primitive Box component for layout and container purposes with compiled styling support.',
|
|
2632
2753
|
status: 'general-availability',
|
|
2633
|
-
examples: ["/**\n * @jsxRuntime classic\n * @jsx jsx\n */\nimport { cssMap, jsx } from '@atlaskit/css';\nimport { Box } from '@atlaskit/primitives/compiled';\nimport { token } from '@atlaskit/tokens';\nconst styles = cssMap({\n\tbox: {\n\t\tpaddingTop: token('space.200'),\n\t\tpaddingRight: token('space.200'),\n\t\tpaddingBottom: token('space.200'),\n\t\tpaddingLeft: token('space.200'),\n\t\tbackgroundColor: token('color.background.neutral.subtle'),\n\t},\n});\
|
|
2754
|
+
examples: ["/**\n * @jsxRuntime classic\n * @jsx jsx\n */\nimport { cssMap, jsx } from '@atlaskit/css';\nimport { Box } from '@atlaskit/primitives/compiled';\nimport { token } from '@atlaskit/tokens';\nconst styles = cssMap({\n\tbox: {\n\t\tpaddingTop: token('space.200'),\n\t\tpaddingRight: token('space.200'),\n\t\tpaddingBottom: token('space.200'),\n\t\tpaddingLeft: token('space.200'),\n\t\tbackgroundColor: token('color.background.neutral.subtle'),\n\t},\n});\nconst _default_1: JSX.Element[] = [\n\t<Box padding=\"space.200\" backgroundColor=\"color.background.neutral.subtle\">\n\t\tBasic box\n\t</Box>,\n\t<Box xcss={styles.box}>Styled box</Box>,\n];\nexport default _default_1;"],
|
|
2634
2755
|
usageGuidelines: ['Use for basic layout and container needs', 'Leverage compiled styling for performance', 'Use appropriate spacing and layout props', 'Consider semantic HTML when possible'],
|
|
2635
2756
|
contentGuidelines: ['Use for appropriate layout purposes', 'Maintain consistent spacing and layout patterns', 'Consider accessibility and semantic structure'],
|
|
2636
2757
|
props: [{
|
|
2637
2758
|
name: 'as',
|
|
2638
2759
|
description: "The DOM element to render as the Box.\n- This cannot be any SVG-related element such as `'svg'`, `'animate', `'circle'`, and many more\n- This cannot be a `'a'` (use the `Anchor` primitive instead)\n- This cannot be a `'button'` (use the `Anchor` primitive instead)",
|
|
2639
|
-
type: '"object" | "style" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "caption" | "center" | ...
|
|
2760
|
+
type: '"object" | "style" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "caption" | "center" | ... 98 more ... | "set"',
|
|
2761
|
+
defaultValue: "'div'"
|
|
2640
2762
|
}, {
|
|
2641
2763
|
name: 'backgroundColor',
|
|
2642
2764
|
description: 'Token representing background color with a built-in fallback value.',
|
|
@@ -2644,7 +2766,7 @@ var components = exports.components = [{
|
|
|
2644
2766
|
}, {
|
|
2645
2767
|
name: 'xcss',
|
|
2646
2768
|
description: "Apply a subset of permitted styles powered by Atlassian Design System design tokens.\nIt's preferred you do not use `background` in `xcss` or `cssMap()` and instead use `props.backgroundColor` for surface awareness.",
|
|
2647
|
-
type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "height" | "width" | "translate" | "content" | "color" | "border" | "
|
|
2769
|
+
type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "height" | "width" | "translate" | "content" | "color" | "border" | "alignmentBaseline" | "baselineShift" | "clip" | ... 487 more ... | "viewTimeline", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
|
|
2648
2770
|
}]
|
|
2649
2771
|
}, {
|
|
2650
2772
|
name: 'Flex',
|
|
@@ -2653,7 +2775,7 @@ var components = exports.components = [{
|
|
|
2653
2775
|
category: 'primitive',
|
|
2654
2776
|
description: 'A primitive Flex component for flexbox layout with compiled styling support.',
|
|
2655
2777
|
status: 'general-availability',
|
|
2656
|
-
examples: ['import { Box, Flex } from \'@atlaskit/primitives/compiled\';\
|
|
2778
|
+
examples: ['import { Box, Flex } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Flex gap="space.100" alignItems="center">\n\t\t<Box backgroundColor="color.background.accent.blue.subtle" padding="space.100">\n\t\t\tItem 1\n\t\t</Box>\n\t\t<Box backgroundColor="color.background.accent.green.subtle" padding="space.100">\n\t\t\tItem 2\n\t\t</Box>\n\t</Flex>,\n];\nexport default _default_1;'],
|
|
2657
2779
|
usageGuidelines: ['Use for flexbox layout needs', 'Leverage compiled styling for performance', 'Use appropriate flex properties and alignment', 'Consider responsive behavior'],
|
|
2658
2780
|
contentGuidelines: ['Use for appropriate flex layout', 'Maintain consistent flex patterns', 'Consider content alignment and distribution'],
|
|
2659
2781
|
props: [{
|
|
@@ -2667,7 +2789,8 @@ var components = exports.components = [{
|
|
|
2667
2789
|
}, {
|
|
2668
2790
|
name: 'children',
|
|
2669
2791
|
description: 'Elements to be rendered inside the Flex.',
|
|
2670
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
2792
|
+
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
|
|
2793
|
+
isRequired: true
|
|
2671
2794
|
}, {
|
|
2672
2795
|
name: 'columnGap',
|
|
2673
2796
|
description: 'Represents the space between each child.',
|
|
@@ -2699,7 +2822,7 @@ var components = exports.components = [{
|
|
|
2699
2822
|
}, {
|
|
2700
2823
|
name: 'xcss',
|
|
2701
2824
|
description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
|
|
2702
|
-
type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "
|
|
2825
|
+
type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "justifyContent" | "alignItems" | "columnGap" | "gap" | "rowGap" | "direction" | "flex" | "grid" | "fill" | "stroke" | ... 487 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
|
|
2703
2826
|
}]
|
|
2704
2827
|
}, {
|
|
2705
2828
|
name: 'Focusable',
|
|
@@ -2708,14 +2831,15 @@ var components = exports.components = [{
|
|
|
2708
2831
|
category: 'primitive',
|
|
2709
2832
|
description: 'A primitive Focusable component for keyboard navigation and focus management with compiled styling support.',
|
|
2710
2833
|
status: 'general-availability',
|
|
2711
|
-
examples: ['import { Box, Focusable } from \'@atlaskit/primitives/compiled\';\
|
|
2834
|
+
examples: ['import { Box, Focusable } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Focusable>\n\t\t<Box padding="space.200" backgroundColor="color.background.neutral.subtle">\n\t\t\tFocusable content\n\t\t</Box>\n\t</Focusable>,\n];\nexport default _default_1;'],
|
|
2712
2835
|
accessibilityGuidelines: ['Provide clear focus indicators', 'Use appropriate tab order and navigation', 'Ensure keyboard accessibility', 'Provide clear visual feedback for focus state', 'Use appropriate ARIA attributes'],
|
|
2713
2836
|
usageGuidelines: ['Use for elements that need keyboard focus', 'Leverage compiled styling for performance', 'Use appropriate focus management', 'Consider keyboard navigation patterns'],
|
|
2714
2837
|
contentGuidelines: ['Use for appropriate focusable content', 'Maintain consistent focus patterns', 'Consider keyboard navigation flow'],
|
|
2715
2838
|
props: [{
|
|
2716
2839
|
name: 'as',
|
|
2717
2840
|
description: 'The DOM element to render as the Focusable element.',
|
|
2718
|
-
type: '"symbol" | "object" | "style" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "caption" | ...
|
|
2841
|
+
type: '"symbol" | "object" | "style" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "caption" | ... 156 more ... | "view"',
|
|
2842
|
+
defaultValue: "'button'"
|
|
2719
2843
|
}, {
|
|
2720
2844
|
name: 'children',
|
|
2721
2845
|
description: '',
|
|
@@ -2736,7 +2860,7 @@ var components = exports.components = [{
|
|
|
2736
2860
|
category: 'primitive',
|
|
2737
2861
|
description: 'A primitive Grid component for CSS Grid layout with compiled styling support.',
|
|
2738
2862
|
status: 'general-availability',
|
|
2739
|
-
examples: ['import { cssMap } from \'@atlaskit/css\';\nimport { Box, Grid } from \'@atlaskit/primitives/compiled\';\nconst styles = cssMap({\n\tgrid: {\n\t\tgridTemplateColumns: \'1fr 1fr\',\n\t},\n});\
|
|
2863
|
+
examples: ['import { cssMap } from \'@atlaskit/css\';\nimport { Box, Grid } from \'@atlaskit/primitives/compiled\';\nconst styles = cssMap({\n\tgrid: {\n\t\tgridTemplateColumns: \'1fr 1fr\',\n\t},\n});\nconst _default_1: React.JSX.Element[] = [\n\t<Grid gap="space.200" xcss={styles.grid}>\n\t\t<Box backgroundColor="color.background.accent.blue.subtle" padding="space.200">\n\t\t\tGrid item 1\n\t\t</Box>\n\t\t<Box backgroundColor="color.background.accent.green.subtle" padding="space.200">\n\t\t\tGrid item 2\n\t\t</Box>\n\t</Grid>,\n];\nexport default _default_1;'],
|
|
2740
2864
|
usageGuidelines: ['Use for CSS Grid layout needs', 'Leverage compiled styling for performance', 'Use appropriate grid properties and alignment', 'Consider responsive behavior'],
|
|
2741
2865
|
contentGuidelines: ['Use for appropriate grid layout', 'Maintain consistent grid patterns', 'Consider content alignment and distribution'],
|
|
2742
2866
|
props: [{
|
|
@@ -2758,7 +2882,8 @@ var components = exports.components = [{
|
|
|
2758
2882
|
}, {
|
|
2759
2883
|
name: 'children',
|
|
2760
2884
|
description: 'Elements to be rendered inside the grid. Required as a grid without children should not be a grid.',
|
|
2761
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
2885
|
+
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
|
|
2886
|
+
isRequired: true
|
|
2762
2887
|
}, {
|
|
2763
2888
|
name: 'columnGap',
|
|
2764
2889
|
description: 'Represents the space between each column.',
|
|
@@ -2786,7 +2911,7 @@ var components = exports.components = [{
|
|
|
2786
2911
|
}, {
|
|
2787
2912
|
name: 'xcss',
|
|
2788
2913
|
description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
|
|
2789
|
-
type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "
|
|
2914
|
+
type: 'false | (XCSSValue<"clipPath" | "filter" | "marker" | "mask" | "justifyContent" | "justifyItems" | "alignItems" | "alignContent" | "columnGap" | "gap" | "rowGap" | "flex" | "grid" | ... 488 more ... | "glyphOrientationVertical", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
|
|
2790
2915
|
}]
|
|
2791
2916
|
}, {
|
|
2792
2917
|
name: 'Inline',
|
|
@@ -2795,7 +2920,7 @@ var components = exports.components = [{
|
|
|
2795
2920
|
category: 'primitive',
|
|
2796
2921
|
description: 'A primitive Inline component for horizontal layout with consistent spacing.',
|
|
2797
2922
|
status: 'general-availability',
|
|
2798
|
-
examples: ['import AddIcon from \'@atlaskit/icon/core/add\';\nimport { Inline, Text } from \'@atlaskit/primitives/compiled\';\
|
|
2923
|
+
examples: ['import AddIcon from \'@atlaskit/icon/core/add\';\nimport { Inline, Text } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Inline space="space.100">\n\t\t<AddIcon label="Add item" />\n\t\t<Text>Add item</Text>\n\t</Inline>,\n];\nexport default _default_1;'],
|
|
2799
2924
|
usageGuidelines: ['Use for horizontal layout needs', 'Leverage compiled styling for performance', 'Use appropriate spacing and alignment props', 'Consider wrapping behavior'],
|
|
2800
2925
|
contentGuidelines: ['Use for appropriate horizontal grouping', 'Maintain consistent spacing patterns', 'Consider content flow and readability'],
|
|
2801
2926
|
props: [{
|
|
@@ -2813,7 +2938,8 @@ var components = exports.components = [{
|
|
|
2813
2938
|
}, {
|
|
2814
2939
|
name: 'children',
|
|
2815
2940
|
description: 'Elements to be rendered inside the Inline.',
|
|
2816
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
2941
|
+
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
|
|
2942
|
+
isRequired: true
|
|
2817
2943
|
}, {
|
|
2818
2944
|
name: 'grow',
|
|
2819
2945
|
description: 'Used to set whether the container should grow to fill the available space.',
|
|
@@ -2854,7 +2980,7 @@ var components = exports.components = [{
|
|
|
2854
2980
|
category: 'primitive',
|
|
2855
2981
|
description: 'A primitive Text component for typography with compiled styling support.',
|
|
2856
2982
|
status: 'general-availability',
|
|
2857
|
-
examples: ['import { MetricText } from \'@atlaskit/primitives/compiled\';\
|
|
2983
|
+
examples: ['import { MetricText } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<MetricText size="small">42</MetricText>,\n\t<MetricText size="large">1,234</MetricText>,\n];\nexport default _default_1;'],
|
|
2858
2984
|
usageGuidelines: ['Use for text content with consistent typography', 'Leverage compiled styling for performance', 'Use appropriate font size and weight props', 'Consider semantic HTML elements'],
|
|
2859
2985
|
contentGuidelines: ['Use for appropriate text content', 'Maintain consistent typography patterns', 'Consider readability and hierarchy'],
|
|
2860
2986
|
props: [{
|
|
@@ -2868,7 +2994,8 @@ var components = exports.components = [{
|
|
|
2868
2994
|
}, {
|
|
2869
2995
|
name: 'children',
|
|
2870
2996
|
description: 'Elements rendered within the Text element.',
|
|
2871
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
2997
|
+
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
|
|
2998
|
+
isRequired: true
|
|
2872
2999
|
}, {
|
|
2873
3000
|
name: 'id',
|
|
2874
3001
|
description: 'The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).',
|
|
@@ -2880,7 +3007,8 @@ var components = exports.components = [{
|
|
|
2880
3007
|
}, {
|
|
2881
3008
|
name: 'size',
|
|
2882
3009
|
description: 'Text size.',
|
|
2883
|
-
type: '"small" | "medium" | "large"'
|
|
3010
|
+
type: '"small" | "medium" | "large"',
|
|
3011
|
+
isRequired: true
|
|
2884
3012
|
}]
|
|
2885
3013
|
}, {
|
|
2886
3014
|
name: 'Pressable',
|
|
@@ -2889,7 +3017,7 @@ var components = exports.components = [{
|
|
|
2889
3017
|
category: 'primitive',
|
|
2890
3018
|
description: 'A primitive Pressable component for handling touch and click interactions with compiled styling support.',
|
|
2891
3019
|
status: 'general-availability',
|
|
2892
|
-
examples: ["import { Pressable } from '@atlaskit/primitives/compiled';\
|
|
3020
|
+
examples: ["import { Pressable } from '@atlaskit/primitives/compiled';\nconst _default_1: React.JSX.Element[] = [\n\t<Pressable onClick={() => alert('Pressed!')}>Custom button</Pressable>,\n];\nexport default _default_1;"],
|
|
2893
3021
|
accessibilityGuidelines: ['Provide clear visual feedback for press states', 'Ensure appropriate touch target sizes', 'Use appropriate ARIA attributes for interactive elements', 'Provide keyboard navigation support'],
|
|
2894
3022
|
usageGuidelines: ['Use for interactive elements that need press feedback', 'Leverage compiled styling for performance', 'Use appropriate press states and feedback', 'Consider touch target accessibility'],
|
|
2895
3023
|
contentGuidelines: ['Use for appropriate interactive content', 'Maintain consistent press patterns', 'Consider user interaction expectations'],
|
|
@@ -2913,7 +3041,7 @@ var components = exports.components = [{
|
|
|
2913
3041
|
category: 'primitive',
|
|
2914
3042
|
description: 'A primitive Stack component for vertical and horizontal layout with consistent spacing.',
|
|
2915
3043
|
status: 'general-availability',
|
|
2916
|
-
examples: ['import Heading from \'@atlaskit/heading\';\nimport { Stack, Text } from \'@atlaskit/primitives/compiled\';\
|
|
3044
|
+
examples: ['import Heading from \'@atlaskit/heading\';\nimport { Stack, Text } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Stack space="space.100">\n\t\t<Heading size="medium">User name</Heading>\n\t\t<Text>Description</Text>\n\t</Stack>,\n];\nexport default _default_1;'],
|
|
2917
3045
|
usageGuidelines: ['Use for consistent vertical or horizontal layouts', 'Leverage compiled styling for performance', 'Use appropriate spacing and alignment props', 'Consider responsive behavior'],
|
|
2918
3046
|
contentGuidelines: ['Use for appropriate layout grouping', 'Maintain consistent spacing patterns', 'Consider content hierarchy and flow'],
|
|
2919
3047
|
props: [{
|
|
@@ -2931,7 +3059,8 @@ var components = exports.components = [{
|
|
|
2931
3059
|
}, {
|
|
2932
3060
|
name: 'children',
|
|
2933
3061
|
description: 'Elements to be rendered inside the Stack.',
|
|
2934
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
3062
|
+
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
|
|
3063
|
+
isRequired: true
|
|
2935
3064
|
}, {
|
|
2936
3065
|
name: 'grow',
|
|
2937
3066
|
description: 'Used to set whether the container should grow to fill the available space.',
|
|
@@ -2960,7 +3089,7 @@ var components = exports.components = [{
|
|
|
2960
3089
|
category: 'primitive',
|
|
2961
3090
|
description: 'A primitive Text component for typography with compiled styling support.',
|
|
2962
3091
|
status: 'general-availability',
|
|
2963
|
-
examples: ['import { Text } from \'@atlaskit/primitives/compiled\';\
|
|
3092
|
+
examples: ['import { Text } from \'@atlaskit/primitives/compiled\';\nconst _default_1: React.JSX.Element[] = [\n\t<Text>Default text</Text>,\n\t<Text size="large" weight="bold">\n\t\tLarge bold text\n\t</Text>,\n];\nexport default _default_1;'],
|
|
2964
3093
|
usageGuidelines: ['Use for text content with consistent typography', 'Leverage compiled styling for performance', 'Use appropriate font size and weight props', 'Consider semantic HTML elements'],
|
|
2965
3094
|
contentGuidelines: ['Use for appropriate text content', 'Maintain consistent typography patterns', 'Consider readability and hierarchy'],
|
|
2966
3095
|
props: [{
|
|
@@ -2974,7 +3103,8 @@ var components = exports.components = [{
|
|
|
2974
3103
|
}, {
|
|
2975
3104
|
name: 'children',
|
|
2976
3105
|
description: 'Elements rendered within the Text element.',
|
|
2977
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
3106
|
+
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
|
|
3107
|
+
isRequired: true
|
|
2978
3108
|
}, {
|
|
2979
3109
|
name: 'color',
|
|
2980
3110
|
description: 'Token representing text color with a built-in fallback value.\nWill apply inverse text color automatically if placed within a Box with bold background color.\nDefaults to `color.text` if not nested in other Text components.',
|
|
@@ -3018,7 +3148,8 @@ var components = exports.components = [{
|
|
|
3018
3148
|
props: [{
|
|
3019
3149
|
name: 'appearance',
|
|
3020
3150
|
description: 'The visual style of the progress bar.',
|
|
3021
|
-
type: '"default" | "success" | "inverse"'
|
|
3151
|
+
type: '"default" | "success" | "inverse"',
|
|
3152
|
+
defaultValue: '"default"'
|
|
3022
3153
|
}, {
|
|
3023
3154
|
name: 'ariaLabel',
|
|
3024
3155
|
description: "This is the descriptive label that's associated with the progress bar.\nAlways include useful information on the current state of the progress bar so that people who use assistive technology can understand what the current state of the progress bar is.",
|
|
@@ -3026,11 +3157,13 @@ var components = exports.components = [{
|
|
|
3026
3157
|
}, {
|
|
3027
3158
|
name: 'isIndeterminate',
|
|
3028
3159
|
description: 'Shows the progress bar in an indeterminate state when `true`.',
|
|
3029
|
-
type: 'boolean'
|
|
3160
|
+
type: 'boolean',
|
|
3161
|
+
defaultValue: 'false'
|
|
3030
3162
|
}, {
|
|
3031
3163
|
name: 'value',
|
|
3032
3164
|
description: 'Sets the value of the progress bar, between `0` and `1` inclusive.',
|
|
3033
|
-
type: 'number'
|
|
3165
|
+
type: 'number',
|
|
3166
|
+
defaultValue: '0'
|
|
3034
3167
|
}]
|
|
3035
3168
|
}, {
|
|
3036
3169
|
name: 'SuccessProgressBar',
|
|
@@ -3049,11 +3182,13 @@ var components = exports.components = [{
|
|
|
3049
3182
|
}, {
|
|
3050
3183
|
name: 'isIndeterminate',
|
|
3051
3184
|
description: 'Shows the progress bar in an indeterminate state when `true`.',
|
|
3052
|
-
type: 'boolean'
|
|
3185
|
+
type: 'boolean',
|
|
3186
|
+
defaultValue: 'false'
|
|
3053
3187
|
}, {
|
|
3054
3188
|
name: 'value',
|
|
3055
3189
|
description: 'Sets the value of the progress bar, between `0` and `1` inclusive.',
|
|
3056
|
-
type: 'number'
|
|
3190
|
+
type: 'number',
|
|
3191
|
+
defaultValue: '0'
|
|
3057
3192
|
}]
|
|
3058
3193
|
}, {
|
|
3059
3194
|
name: 'TransparentProgressBar',
|
|
@@ -3072,11 +3207,13 @@ var components = exports.components = [{
|
|
|
3072
3207
|
}, {
|
|
3073
3208
|
name: 'isIndeterminate',
|
|
3074
3209
|
description: 'Shows the progress bar in an indeterminate state when `true`.',
|
|
3075
|
-
type: 'boolean'
|
|
3210
|
+
type: 'boolean',
|
|
3211
|
+
defaultValue: 'false'
|
|
3076
3212
|
}, {
|
|
3077
3213
|
name: 'value',
|
|
3078
3214
|
description: 'Sets the value of the progress bar, between `0` and `1` inclusive.',
|
|
3079
|
-
type: 'number'
|
|
3215
|
+
type: 'number',
|
|
3216
|
+
defaultValue: '0'
|
|
3080
3217
|
}]
|
|
3081
3218
|
}, {
|
|
3082
3219
|
name: 'ProgressIndicator',
|
|
@@ -3092,27 +3229,32 @@ var components = exports.components = [{
|
|
|
3092
3229
|
props: [{
|
|
3093
3230
|
name: 'appearance',
|
|
3094
3231
|
description: 'Sets the color of the indicators.',
|
|
3095
|
-
type: '"default" | "help" | "inverted" | "primary"'
|
|
3232
|
+
type: '"default" | "help" | "inverted" | "primary"',
|
|
3233
|
+
defaultValue: '"default"'
|
|
3096
3234
|
}, {
|
|
3097
3235
|
name: 'ariaControls',
|
|
3098
3236
|
description: 'If interaction is enabled, use `ariaControls` to tell assistive technology what elements are controlled by the progress indicator.',
|
|
3099
|
-
type: 'string'
|
|
3237
|
+
type: 'string',
|
|
3238
|
+
defaultValue: '"panel"'
|
|
3100
3239
|
}, {
|
|
3101
3240
|
name: 'ariaLabel',
|
|
3102
3241
|
description: 'Describes what the indicator represents to assistive technology. The selected index number will be appended to the label.',
|
|
3103
|
-
type: 'string'
|
|
3242
|
+
type: 'string',
|
|
3243
|
+
defaultValue: '"tab"'
|
|
3104
3244
|
}, {
|
|
3105
3245
|
name: 'onSelect',
|
|
3106
3246
|
description: 'Function called when an indicator is selected.',
|
|
3107
|
-
type: '(eventData: { event: MouseEvent<HTMLButtonElement,
|
|
3247
|
+
type: '(eventData: { event: React.MouseEvent<HTMLButtonElement, MouseEvent>; index: number; }, analyticsEvent: UIAnalyticsEvent) => void'
|
|
3108
3248
|
}, {
|
|
3109
3249
|
name: 'selectedIndex',
|
|
3110
3250
|
description: 'Which indicator is currently selected.',
|
|
3111
|
-
type: 'number'
|
|
3251
|
+
type: 'number',
|
|
3252
|
+
isRequired: true
|
|
3112
3253
|
}, {
|
|
3113
3254
|
name: 'size',
|
|
3114
3255
|
description: 'Sets the width and height of each indicator.',
|
|
3115
|
-
type: '"default" | "large"'
|
|
3256
|
+
type: '"default" | "large"',
|
|
3257
|
+
defaultValue: '"default"'
|
|
3116
3258
|
}, {
|
|
3117
3259
|
name: 'spacing',
|
|
3118
3260
|
description: 'Specifies how much of a gutter there is between indicators.',
|
|
@@ -3120,7 +3262,8 @@ var components = exports.components = [{
|
|
|
3120
3262
|
}, {
|
|
3121
3263
|
name: 'values',
|
|
3122
3264
|
description: 'An array of values mapped over to create the indicators.',
|
|
3123
|
-
type: 'any[]'
|
|
3265
|
+
type: 'any[]',
|
|
3266
|
+
isRequired: true
|
|
3124
3267
|
}]
|
|
3125
3268
|
}, {
|
|
3126
3269
|
name: 'ProgressTracker',
|
|
@@ -3136,19 +3279,24 @@ var components = exports.components = [{
|
|
|
3136
3279
|
props: [{
|
|
3137
3280
|
name: 'animated',
|
|
3138
3281
|
description: 'Turns off transition animations if set to false.',
|
|
3139
|
-
type: 'boolean'
|
|
3282
|
+
type: 'boolean',
|
|
3283
|
+
defaultValue: 'true'
|
|
3140
3284
|
}, {
|
|
3141
3285
|
name: 'items',
|
|
3142
3286
|
description: 'Ordered list of stage data.',
|
|
3143
|
-
type: 'Stage[]'
|
|
3287
|
+
type: 'Stage[]',
|
|
3288
|
+
isRequired: true,
|
|
3289
|
+
defaultValue: '[]'
|
|
3144
3290
|
}, {
|
|
3145
3291
|
name: 'label',
|
|
3146
3292
|
description: 'Use this to provide an aria-label for the overall progress tracker, so that people who use assistive technology get an overview of the tracker\'s purpose. For example, "Sign up progress".',
|
|
3147
|
-
type: 'string'
|
|
3293
|
+
type: 'string',
|
|
3294
|
+
defaultValue: '"Progress"'
|
|
3148
3295
|
}, {
|
|
3149
3296
|
name: 'spacing',
|
|
3150
3297
|
description: 'Sets the amount of spacing between the steps.',
|
|
3151
|
-
type: '"
|
|
3298
|
+
type: '"cozy" | "comfortable" | "compact"',
|
|
3299
|
+
defaultValue: '"cozy"'
|
|
3152
3300
|
}]
|
|
3153
3301
|
}, {
|
|
3154
3302
|
name: 'Radio',
|
|
@@ -3248,7 +3396,8 @@ var components = exports.components = [{
|
|
|
3248
3396
|
}, {
|
|
3249
3397
|
name: 'options',
|
|
3250
3398
|
description: 'An array of objects, each object is mapped onto a `Radio` element within the group. Name must be unique to the group.',
|
|
3251
|
-
type: 'OptionPropType[]'
|
|
3399
|
+
type: 'OptionPropType[]',
|
|
3400
|
+
isRequired: true
|
|
3252
3401
|
}, {
|
|
3253
3402
|
name: 'value',
|
|
3254
3403
|
description: 'Once set, controls the selected value on the `RadioGroup`.',
|
|
@@ -3316,11 +3465,12 @@ var components = exports.components = [{
|
|
|
3316
3465
|
}, {
|
|
3317
3466
|
name: 'children',
|
|
3318
3467
|
description: 'The main content of the section message. This accepts a react node, although\nwe recommend that this should be a paragraph.',
|
|
3319
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
3468
|
+
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
|
|
3469
|
+
isRequired: true
|
|
3320
3470
|
}, {
|
|
3321
3471
|
name: 'icon',
|
|
3322
3472
|
description: 'An Icon component to be rendered instead of the default icon for the component.\nThis should only be an `@atlaskit/icon` icon. You can check out [this example](/packages/design-system/section-message/example/custom-icon)\nto see how to provide this icon.',
|
|
3323
|
-
type: '"symbol" | "object" | "title" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ...
|
|
3473
|
+
type: '"symbol" | "object" | "title" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 159 more ... | ComponentType<...>'
|
|
3324
3474
|
}, {
|
|
3325
3475
|
name: 'isDismissible',
|
|
3326
3476
|
description: 'Displays a dismiss button, that allows the user to dismiss the message.\nIt will be removed from the DOM immediately and will not be re-rendered.\nIt does not handle persistence of the dismissed state across page reloads or remounts.',
|
|
@@ -3641,14 +3791,15 @@ var components = exports.components = [{
|
|
|
3641
3791
|
category: 'loading',
|
|
3642
3792
|
description: 'A skeleton acts as a placeholder for content, usually while the content loads.',
|
|
3643
3793
|
status: 'early-access',
|
|
3644
|
-
examples: ['import Skeleton from \'@atlaskit/skeleton\';\
|
|
3794
|
+
examples: ['import Skeleton from \'@atlaskit/skeleton\';\nconst _default_1: React.JSX.Element[] = [<Skeleton width="200px" height="100px" isShimmering />];\nexport default _default_1;'],
|
|
3645
3795
|
accessibilityGuidelines: ['Provide appropriate loading announcements', 'Use skeleton patterns that match actual content structure', 'Ensure skeleton content is not announced as actual content', 'Consider screen reader experience during loading states'],
|
|
3646
3796
|
usageGuidelines: ['Use to indicate content is loading', 'Match skeleton structure to actual content layout', 'Use appropriate animation and timing', 'Replace with actual content when ready', 'Consider different skeleton patterns for different content types'],
|
|
3647
3797
|
contentGuidelines: ['Use skeleton patterns that represent actual content structure', 'Maintain consistent skeleton styling', 'Consider content hierarchy in skeleton design', 'Use appropriate animation timing'],
|
|
3648
3798
|
props: [{
|
|
3649
3799
|
name: 'borderRadius',
|
|
3650
3800
|
description: "Controls the border radius, or rounding of the skeleton's corners.",
|
|
3651
|
-
type: 'string | number'
|
|
3801
|
+
type: 'string | number',
|
|
3802
|
+
defaultValue: '"var(--ds-radius-small)"'
|
|
3652
3803
|
}, {
|
|
3653
3804
|
name: 'color',
|
|
3654
3805
|
description: 'Overrides the default color of skeleton, and overrides the default shimmering start color if ShimmeringEndColor also provided.',
|
|
@@ -3660,11 +3811,13 @@ var components = exports.components = [{
|
|
|
3660
3811
|
}, {
|
|
3661
3812
|
name: 'height',
|
|
3662
3813
|
description: '',
|
|
3663
|
-
type: 'string | number'
|
|
3814
|
+
type: 'string | number',
|
|
3815
|
+
isRequired: true
|
|
3664
3816
|
}, {
|
|
3665
3817
|
name: 'isShimmering',
|
|
3666
3818
|
description: 'Enables the shimmering animation.',
|
|
3667
|
-
type: 'boolean'
|
|
3819
|
+
type: 'boolean',
|
|
3820
|
+
defaultValue: 'false'
|
|
3668
3821
|
}, {
|
|
3669
3822
|
name: 'ShimmeringEndColor',
|
|
3670
3823
|
description: 'Overrides the default shimmering ending color of skeleton.',
|
|
@@ -3672,7 +3825,8 @@ var components = exports.components = [{
|
|
|
3672
3825
|
}, {
|
|
3673
3826
|
name: 'width',
|
|
3674
3827
|
description: '',
|
|
3675
|
-
type: 'string | number'
|
|
3828
|
+
type: 'string | number',
|
|
3829
|
+
isRequired: true
|
|
3676
3830
|
}]
|
|
3677
3831
|
}, {
|
|
3678
3832
|
name: 'Spinner',
|
|
@@ -3681,7 +3835,7 @@ var components = exports.components = [{
|
|
|
3681
3835
|
category: 'feedback',
|
|
3682
3836
|
description: 'A loading spinner component.',
|
|
3683
3837
|
status: 'general-availability',
|
|
3684
|
-
examples: ['import Spinner from \'@atlaskit/spinner\';\
|
|
3838
|
+
examples: ['import Spinner from \'@atlaskit/spinner\';\nconst _default_1: React.JSX.Element[] = [\n\t<Spinner size="small" />,\n\t<Spinner size="medium" />,\n\t<Spinner size="large" />,\n];\nexport default _default_1;'],
|
|
3685
3839
|
accessibilityGuidelines: ['Provide appropriate loading announcements', 'Use appropriate timing for spinner display', 'Ensure spinner is announced to screen readers', 'Consider alternative loading indicators'],
|
|
3686
3840
|
usageGuidelines: ['Use for loading states of unknown duration', 'Consider delay before showing spinner', 'Use appropriate size for context', 'Provide loading context when possible'],
|
|
3687
3841
|
contentGuidelines: ['Use consistent spinner sizing', 'Consider spinner placement and context', 'Provide loading feedback when appropriate'],
|
|
@@ -3716,7 +3870,8 @@ var components = exports.components = [{
|
|
|
3716
3870
|
props: [{
|
|
3717
3871
|
name: 'children',
|
|
3718
3872
|
description: "The children of Tabs. The first child should be a `TabList` filled with `Tab`'s.\nSubsequent children should be `TabPanel`'s. There should be a `Tab` for each `TabPanel`.\nIf you want to customize `Tab` or `TabPanel`, refer to the examples in the documentation.",
|
|
3719
|
-
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal'
|
|
3873
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal',
|
|
3874
|
+
isRequired: true
|
|
3720
3875
|
}, {
|
|
3721
3876
|
name: 'defaultSelected',
|
|
3722
3877
|
description: 'The index of the tab that will be selected by default when the component mounts.\nIf not set the first tab will be displayed by default.',
|
|
@@ -3724,7 +3879,8 @@ var components = exports.components = [{
|
|
|
3724
3879
|
}, {
|
|
3725
3880
|
name: 'id',
|
|
3726
3881
|
description: 'A unique ID that will be used to generate IDs for tabs and tab panels.\nThis is required for accessibility purposes.',
|
|
3727
|
-
type: 'string'
|
|
3882
|
+
type: 'string',
|
|
3883
|
+
isRequired: true
|
|
3728
3884
|
}, {
|
|
3729
3885
|
name: 'onChange',
|
|
3730
3886
|
description: 'A callback function which will be fired when a changed. It will be passed\nthe index of the selected tab and a `UIAnalyticsEvent`.',
|
|
@@ -3773,6 +3929,14 @@ var components = exports.components = [{
|
|
|
3773
3929
|
name: 'linkComponent',
|
|
3774
3930
|
description: '',
|
|
3775
3931
|
type: 'ComponentClass<any, any> | FunctionComponent<any>'
|
|
3932
|
+
}, {
|
|
3933
|
+
name: 'maxWidth',
|
|
3934
|
+
description: "Maximum width of the tag text. When exceeded, text will be truncated with ellipsis.\nAccepts any valid CSS max-width value (e.g., '200px', '15rem', '100%').",
|
|
3935
|
+
type: 'string | number'
|
|
3936
|
+
}, {
|
|
3937
|
+
name: 'migration_fallback',
|
|
3938
|
+
description: "@internal\n**Temporary / Internal only for migration.**\n\nWhen set to `'lozenge'` and the feature flag `platform-dst-lozenge-tag-badge-visual-uplifts`\nis OFF, renders as a Lozenge component instead of Tag. This enables safe, staged migration\nfrom Lozenge to Tag for large consumers.\n\nThis prop will be removed via codemod after migration is complete.",
|
|
3939
|
+
type: 'string'
|
|
3776
3940
|
}, {
|
|
3777
3941
|
name: 'onAfterRemoveAction',
|
|
3778
3942
|
description: "Handler to be called after tag is removed. Called with the string 'Post\nRemoval Hook'.",
|
|
@@ -3788,7 +3952,8 @@ var components = exports.components = [{
|
|
|
3788
3952
|
}, {
|
|
3789
3953
|
name: 'text',
|
|
3790
3954
|
description: 'Text to be displayed in the tag.',
|
|
3791
|
-
type: 'string'
|
|
3955
|
+
type: 'string',
|
|
3956
|
+
isRequired: true
|
|
3792
3957
|
}]
|
|
3793
3958
|
}, {
|
|
3794
3959
|
name: 'TagGroup',
|
|
@@ -3808,7 +3973,8 @@ var components = exports.components = [{
|
|
|
3808
3973
|
}, {
|
|
3809
3974
|
name: 'children',
|
|
3810
3975
|
description: 'Tags to render within the tag group.',
|
|
3811
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
3976
|
+
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
|
|
3977
|
+
isRequired: true
|
|
3812
3978
|
}, {
|
|
3813
3979
|
name: 'label',
|
|
3814
3980
|
description: 'Refers to an `aria-label` attribute. Sets an accessible name for the tags group wrapper to announce it to users of assistive technology.\nUsage of either this, or the `titleId` attribute is strongly recommended.',
|
|
@@ -4056,7 +4222,8 @@ var components = exports.components = [{
|
|
|
4056
4222
|
}, {
|
|
4057
4223
|
name: 'children',
|
|
4058
4224
|
description: 'Elements to be wrapped by the tooltip.\nIt can be either a:\n1. `ReactNode`\n2. Function which returns a `ReactNode`',
|
|
4059
|
-
type: 'React.ReactNode | ((props: TriggerProps) => React.ReactNode)'
|
|
4225
|
+
type: 'React.ReactNode | ((props: TriggerProps) => React.ReactNode)',
|
|
4226
|
+
isRequired: true
|
|
4060
4227
|
}, {
|
|
4061
4228
|
name: 'component',
|
|
4062
4229
|
description: 'Extend `TooltipPrimitive` to create your own tooltip and pass it as component.',
|
|
@@ -4064,43 +4231,53 @@ var components = exports.components = [{
|
|
|
4064
4231
|
}, {
|
|
4065
4232
|
name: 'content',
|
|
4066
4233
|
description: 'The content of the tooltip. It can be either a:\n1. `ReactNode`\n2. Function which returns a `ReactNode`\nThe benefit of the second approach is that it allows you to consume the `update` render prop.\nThis `update` function can be called to manually recalculate the position of the tooltip.\n\nThis content will be rendered into two places:\n1. Into the tooltip\n2. Into a hidden element for screen readers (unless `isScreenReaderAnnouncementDisabled` is set to `true`)',
|
|
4067
|
-
type: 'React.ReactNode | (({ update }: { update?: () => void; }) => React.ReactNode)'
|
|
4234
|
+
type: 'React.ReactNode | (({ update }: { update?: () => void; }) => React.ReactNode)',
|
|
4235
|
+
isRequired: true
|
|
4068
4236
|
}, {
|
|
4069
4237
|
name: 'delay',
|
|
4070
4238
|
description: 'Time in milliseconds to wait before showing and hiding the tooltip. Defaults to 300.',
|
|
4071
|
-
type: 'number'
|
|
4239
|
+
type: 'number',
|
|
4240
|
+
defaultValue: '300'
|
|
4072
4241
|
}, {
|
|
4073
4242
|
name: 'hideTooltipOnClick',
|
|
4074
4243
|
description: 'Hide the tooltip when the click event is triggered. Use this when the tooltip should be hidden if `onClick` react synthetic event\nis triggered, which happens after `onMouseDown` event.',
|
|
4075
|
-
type: 'boolean'
|
|
4244
|
+
type: 'boolean',
|
|
4245
|
+
defaultValue: 'false'
|
|
4076
4246
|
}, {
|
|
4077
4247
|
name: 'hideTooltipOnMouseDown',
|
|
4078
4248
|
description: 'Hide the tooltip when the mousedown event is triggered. This should be\nused when tooltip should be hidden if `onMouseDown` react synthetic event\nis triggered, which happens before `onClick` event.',
|
|
4079
|
-
type: 'boolean'
|
|
4249
|
+
type: 'boolean',
|
|
4250
|
+
defaultValue: 'false'
|
|
4080
4251
|
}, {
|
|
4081
4252
|
name: 'ignoreTooltipPointerEvents',
|
|
4082
4253
|
description: 'Adds `pointer-events: none` to the tooltip itself. Setting this to true will also prevent the tooltip from persisting when hovered.',
|
|
4083
|
-
type: 'boolean'
|
|
4254
|
+
type: 'boolean',
|
|
4255
|
+
defaultValue: 'false'
|
|
4084
4256
|
}, {
|
|
4085
4257
|
name: 'isScreenReaderAnnouncementDisabled',
|
|
4086
4258
|
description: 'By default tooltip content will be duplicated into a hidden element so\nit can be read out by a screen reader. Sometimes this is not ideal as\nit can result in the same content be announced twice. For those situations,\nyou can leverage this prop to disable the duplicate hidden text.',
|
|
4087
|
-
type: 'boolean'
|
|
4259
|
+
type: 'boolean',
|
|
4260
|
+
defaultValue: 'false'
|
|
4088
4261
|
}, {
|
|
4089
4262
|
name: 'mousePosition',
|
|
4090
|
-
description: 'Where the tooltip should appear relative to the mouse pointer.\nOnly use this when the `position` prop is set to `"mouse"`.\nWhen interacting with the target element using a keyboard, it will use this position against the target element instead.',
|
|
4091
|
-
type: 'AutoPlacement | BasePlacement | VariationPlacement'
|
|
4263
|
+
description: 'Where the tooltip should appear relative to the mouse pointer.\nOnly use this when the `position` prop is set to `"mouse"`, `"mouse-y"`, or `"mouse-x"`.\nWhen interacting with the target element using a keyboard, it will use this position against the target element instead.',
|
|
4264
|
+
type: 'AutoPlacement | BasePlacement | VariationPlacement',
|
|
4265
|
+
defaultValue: '"bottom"'
|
|
4092
4266
|
}, {
|
|
4093
4267
|
name: 'onHide',
|
|
4094
4268
|
description: "Function to be called when the tooltip will be hidden. It's called after the\ndelay, when the tooltip begins to animate out.",
|
|
4095
|
-
type: '(analyticsEvent: UIAnalyticsEvent) => void'
|
|
4269
|
+
type: '(analyticsEvent: UIAnalyticsEvent) => void',
|
|
4270
|
+
defaultValue: 'noop'
|
|
4096
4271
|
}, {
|
|
4097
4272
|
name: 'onShow',
|
|
4098
4273
|
description: "Function to be called when the tooltip will be shown. It's called when the\ntooltip begins to animate in.",
|
|
4099
|
-
type: '(analyticsEvent: UIAnalyticsEvent) => void'
|
|
4274
|
+
type: '(analyticsEvent: UIAnalyticsEvent) => void',
|
|
4275
|
+
defaultValue: 'noop'
|
|
4100
4276
|
}, {
|
|
4101
4277
|
name: 'position',
|
|
4102
|
-
description: 'Where the tooltip should appear relative to its target.\nIf set to `"mouse"`, the tooltip will display next to the mouse pointer instead.\nMake sure to utilize the `mousePosition` if you want to customize where the tooltip will show in relation to the mouse.',
|
|
4103
|
-
type: 'Placement | "mouse"'
|
|
4278
|
+
description: 'Where the tooltip should appear relative to its target.\nIf set to `"mouse"`, the tooltip will display next to the mouse pointer instead.\nIf set to `"mouse-y"`, the tooltip will use the mouse Y coordinate but the target X coordinate.\nIf set to `"mouse-x"`, the tooltip will use the mouse X coordinate but the target Y coordinate.\nMake sure to utilize the `mousePosition` if you want to customize where the tooltip will show in relation to the mouse.',
|
|
4279
|
+
type: 'Placement | "mouse" | "mouse-y" | "mouse-x"',
|
|
4280
|
+
defaultValue: '"bottom"'
|
|
4104
4281
|
}, {
|
|
4105
4282
|
name: 'shortcut',
|
|
4106
4283
|
description: 'Display a keyboard shortcut in the tooltip.\n\nKeys will be displayed as individual keyboard key segments after the tooltip content.',
|
|
@@ -4108,11 +4285,21 @@ var components = exports.components = [{
|
|
|
4108
4285
|
}, {
|
|
4109
4286
|
name: 'strategy',
|
|
4110
4287
|
description: 'Use this to define the strategy of popper.',
|
|
4111
|
-
type: '"fixed" | "absolute"'
|
|
4288
|
+
type: '"fixed" | "absolute"',
|
|
4289
|
+
defaultValue: '"fixed"'
|
|
4112
4290
|
}, {
|
|
4113
4291
|
name: 'tag',
|
|
4114
4292
|
description: 'Replace the wrapping element. This accepts the name of a html tag which will\nbe used to wrap the element.\nIf you provide a component, it needs to support a ref prop which is used by popper for positioning.',
|
|
4115
4293
|
type: 'keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement> & { ref: React.Ref<HTMLElement>; }> | React.ForwardRefExoticComponent<...>'
|
|
4294
|
+
}, {
|
|
4295
|
+
name: 'UNSAFE_shouldAlwaysFadeIn',
|
|
4296
|
+
description: 'When set to true, the tooltip will always use the fade-in animation\nand never use the show-immediate behavior, even when another tooltip\nis already visible.',
|
|
4297
|
+
type: 'boolean'
|
|
4298
|
+
}, {
|
|
4299
|
+
name: 'UNSAFE_shouldRenderToParent',
|
|
4300
|
+
description: 'When enabled, the tooltip will be rendered as a sibling to the trigger element instead of being portaled to the document body.\n\nThis is an experimental prop and may be removed at any time. It is not yet intended for public use.',
|
|
4301
|
+
type: 'boolean',
|
|
4302
|
+
defaultValue: 'false'
|
|
4116
4303
|
}]
|
|
4117
4304
|
}, {
|
|
4118
4305
|
name: 'VisuallyHidden',
|
|
@@ -4128,7 +4315,8 @@ var components = exports.components = [{
|
|
|
4128
4315
|
props: [{
|
|
4129
4316
|
name: 'children',
|
|
4130
4317
|
description: 'The element or elements that should be hidden.',
|
|
4131
|
-
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
4318
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
|
|
4319
|
+
isRequired: true
|
|
4132
4320
|
}, {
|
|
4133
4321
|
name: 'id',
|
|
4134
4322
|
description: 'An id may be appropriate for this component if used in conjunction with `aria-describedby`\non a paired element.',
|