@atlaskit/ads-mcp 0.7.0 → 0.7.2
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 +16 -0
- package/README.md +1 -1
- package/dist/cjs/tools/get-components/components.js +102 -70
- package/dist/es2019/tools/get-components/components.js +102 -70
- package/dist/esm/tools/get-components/components.js +102 -70
- package/dist/types/tools/get-components/components.d.ts +1 -1
- package/dist/types-ts4.5/tools/get-components/components.d.ts +1 -1
- package/index.js +12 -7
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/ads-mcp
|
|
2
2
|
|
|
3
|
+
## 0.7.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`113082182ce8f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/113082182ce8f) -
|
|
8
|
+
Use pre-built distribution files when source files are unavailable, preventing module resolution
|
|
9
|
+
failures.
|
|
10
|
+
|
|
11
|
+
## 0.7.1
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`75ba0401c1743`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/75ba0401c1743) -
|
|
16
|
+
Updated shape token reference.
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 0.7.0
|
|
4
20
|
|
|
5
21
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -44,7 +44,7 @@ const addIcons = await search_icons({
|
|
|
44
44
|
|
|
45
45
|
// Search for multiple resources at once (most efficient for complex UI patterns)
|
|
46
46
|
const designResources = await plan({
|
|
47
|
-
tokens_search: ['color.text', 'space.100', '
|
|
47
|
+
tokens_search: ['color.text', 'space.100', 'radius.small'],
|
|
48
48
|
icons_search: ['add', 'edit', 'delete'],
|
|
49
49
|
components_search: ['Button', 'TextField', 'Modal'],
|
|
50
50
|
limit: 2,
|
|
@@ -9,7 +9,7 @@ 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::d39d38cf9fe44e75308cd943349942d1>>
|
|
13
13
|
* @codegenCommand yarn workspace @af/ads-ai-tooling codegen:prototyping
|
|
14
14
|
*/
|
|
15
15
|
|
|
@@ -20,13 +20,13 @@ var components = exports.components = [{
|
|
|
20
20
|
category: 'images',
|
|
21
21
|
description: 'A component for displaying user avatars with support for images, initials, and status indicators. An avatar is a visual representation of a user or entity. It can display user images, initials, presence indicators, and status indicators. Avatars help users quickly identify people and entities in your application. They provide visual context and make interfaces more personal and engaging.',
|
|
22
22
|
status: 'general-availability',
|
|
23
|
-
examples: ['import Avatar from \'@atlaskit/avatar\';\nexport default [\n\t<Avatar src="https://example.com/avatar.jpg" name="John Doe" />,\n\t<Avatar name="Jane Smith" size="large" status="locked" />,\n\t<Avatar name="Bob Wilson" size="small" presence="online" status="approved" />,\n];'],
|
|
24
|
-
usageGuidelines: ['Use consistent sizing within the same context', 'Place avatars in logical groupings (e.g., team members)', 'Use presence indicators sparingly for real-time status only', 'Use status indicators for approval/permission states', 'Provide fallback initials when images fail to load', 'Use avatars to represent users, teams, projects, or any other entity that needs visual identification', 'Always provide meaningful names for accessibility'],
|
|
23
|
+
examples: ['import Avatar from \'@atlaskit/avatar\';\nexport default [\n\t<Avatar src="https://example.com/avatar.jpg" name="John Doe" />,\n\t<Avatar name="Jane Smith" appearance="hexagon" size="large" status="locked" />,\n\t<Avatar name="Bob Wilson" appearance="square" size="small" presence="online" status="approved" />,\n];'],
|
|
24
|
+
usageGuidelines: ['Use consistent sizing within the same context', 'Place avatars in logical groupings (e.g., team members)', 'Use presence indicators sparingly for real-time status only', 'Use status indicators for approval/permission states', 'Provide fallback initials when images fail to load', 'Use avatars to represent users, teams, projects, or any other entity that needs visual identification', 'Always provide meaningful names for accessibility', 'Use the `name` prop to include alternative text for screen readers', 'For decorative images, remove the `name` prop or leave it empty so it will be ignored by assistive technologies', "Don't use a tooltip with an avatar when it's non-interactive or disabled. The tooltip won't work for keyboard users and screen readers"],
|
|
25
25
|
contentGuidelines: ['Use full names when possible for better recognition', 'For companies/projects, use descriptive names', "Avoid generic terms like 'User' or 'Admin'", 'Use consistent naming conventions across your app', 'Keep names concise but meaningful'],
|
|
26
26
|
props: [{
|
|
27
27
|
name: 'appearance',
|
|
28
28
|
description: "Indicates the shape of the avatar. Most avatars are circular, but square avatars\ncan be used for 'container' objects.",
|
|
29
|
-
type: '"circle" | "square"'
|
|
29
|
+
type: '"circle" | "square" | "hexagon"'
|
|
30
30
|
}, {
|
|
31
31
|
name: 'as',
|
|
32
32
|
description: 'Replace the wrapping element. This accepts the name of a html tag which will\nbe used to wrap the element.',
|
|
@@ -103,7 +103,7 @@ var components = exports.components = [{
|
|
|
103
103
|
category: 'data-display',
|
|
104
104
|
description: 'A component for displaying multiple avatars in a group with overlap and overflow handling.',
|
|
105
105
|
status: 'general-availability',
|
|
106
|
-
examples: ["import AvatarGroup from '@atlaskit/avatar-group';\nexport default [\n\t<AvatarGroup\n\t\tappearance=\"stack\"\n\t\tsize=\"large\"\n\t\tonAvatarClick={console.log}\n\t\tdata={[\n\t\t\t{ key: 'uid1', name: 'Bob Smith' },\n\t\t\t{ key: 'uid2', name: '
|
|
106
|
+
examples: ["import AvatarGroup from '@atlaskit/avatar-group';\nexport default [\n\t<AvatarGroup\n\t\tappearance=\"stack\"\n\t\tsize=\"large\"\n\t\tonAvatarClick={console.log}\n\t\tdata={[\n\t\t\t{ key: 'uid1', name: 'Bob Smith' },\n\t\t\t{ key: 'uid2', name: 'Design System Team', appearance: 'square' },\n\t\t\t{ key: 'uid3', name: 'Review Agent', appearance: 'hexagon' },\n\t\t\t{ key: 'uid4', name: 'Carol Davis' },\n\t\t]}\n\t\tmaxCount={3}\n\t/>,\n];"],
|
|
107
107
|
accessibilityGuidelines: ['Provide clear labels for avatar groups', 'Use appropriate overflow handling', 'Ensure keyboard navigation support', 'Provide clear user identification'],
|
|
108
108
|
usageGuidelines: ['Use for displaying multiple users or team members', 'Consider overflow behavior for large groups', 'Use appropriate sizing for context', 'Provide clear user identification'],
|
|
109
109
|
contentGuidelines: ['Use meaningful names for users', 'Consider group context and purpose', 'Provide clear overflow indicators', 'Use consistent naming patterns'],
|
|
@@ -322,11 +322,11 @@ var components = exports.components = [{
|
|
|
322
322
|
}, {
|
|
323
323
|
name: 'iconAfter',
|
|
324
324
|
description: "Places an icon within the button, after the button's text.",
|
|
325
|
-
type: 'ComponentClass<Omit<IconProps, "size"> | Omit<NewIconProps, "
|
|
325
|
+
type: 'ComponentClass<Omit<IconProps, "size"> | Omit<NewIconProps, "spacing" | "size">, any> | FunctionComponent<Omit<IconProps, "size"> | Omit<...>>'
|
|
326
326
|
}, {
|
|
327
327
|
name: 'iconBefore',
|
|
328
328
|
description: "Places an icon within the button, before the button's text.",
|
|
329
|
-
type: 'ComponentClass<Omit<IconProps, "size"> | Omit<NewIconProps, "
|
|
329
|
+
type: 'ComponentClass<Omit<IconProps, "size"> | Omit<NewIconProps, "spacing" | "size">, any> | FunctionComponent<Omit<IconProps, "size"> | Omit<...>>'
|
|
330
330
|
}, {
|
|
331
331
|
name: 'isDisabled',
|
|
332
332
|
description: 'Disable the button to prevent user interaction.',
|
|
@@ -358,7 +358,7 @@ var components = exports.components = [{
|
|
|
358
358
|
}, {
|
|
359
359
|
name: 'spacing',
|
|
360
360
|
description: 'Controls the amount of padding in the button.',
|
|
361
|
-
type: '"
|
|
361
|
+
type: '"compact" | "default"'
|
|
362
362
|
}]
|
|
363
363
|
}, {
|
|
364
364
|
name: 'IconButton',
|
|
@@ -381,7 +381,7 @@ var components = exports.components = [{
|
|
|
381
381
|
}, {
|
|
382
382
|
name: 'icon',
|
|
383
383
|
description: 'Places an icon within the button.',
|
|
384
|
-
type: 'ComponentClass<Omit<IconProps, "size"> | Omit<NewIconProps, "
|
|
384
|
+
type: 'ComponentClass<Omit<IconProps, "size"> | Omit<NewIconProps, "spacing" | "size">, any> | FunctionComponent<Omit<IconProps, "size"> | Omit<...>>'
|
|
385
385
|
}, {
|
|
386
386
|
name: 'isDisabled',
|
|
387
387
|
description: 'Disable the button to prevent user interaction.',
|
|
@@ -425,7 +425,7 @@ var components = exports.components = [{
|
|
|
425
425
|
}, {
|
|
426
426
|
name: 'tooltip',
|
|
427
427
|
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<...>; ...
|
|
428
|
+
type: '{ testId?: string; analyticsContext?: Record<string, any>; content?: ReactNode | (({ update }: { update?: () => void; }) => ReactNode); component?: ComponentType<TooltipPrimitiveProps> | ForwardRefExoticComponent<...>; ... 13 more ...; shortcut?: string[]; }'
|
|
429
429
|
}]
|
|
430
430
|
}, {
|
|
431
431
|
name: 'SplitButton',
|
|
@@ -834,15 +834,15 @@ var components = exports.components = [{
|
|
|
834
834
|
contentGuidelines: ['Use clear, readable code examples', 'Consider code formatting and indentation', 'Use meaningful variable names in examples', 'Keep code blocks focused and relevant'],
|
|
835
835
|
props: [{
|
|
836
836
|
name: 'codeBidiWarningLabel',
|
|
837
|
-
description:
|
|
837
|
+
description: 'Label for the bidi warning tooltip.',
|
|
838
838
|
type: 'string'
|
|
839
839
|
}, {
|
|
840
840
|
name: 'firstLineNumber',
|
|
841
|
-
description: 'Sets the number of the first line, if showLineNumbers is set to true
|
|
841
|
+
description: 'Sets the number of the first line, if showLineNumbers is set to true.',
|
|
842
842
|
type: 'number'
|
|
843
843
|
}, {
|
|
844
844
|
name: 'hasBidiWarnings',
|
|
845
|
-
description: 'When set to `false`, disables code decorating with bidi warnings
|
|
845
|
+
description: 'When set to `false`, disables code decorating with bidi warnings.',
|
|
846
846
|
type: 'boolean'
|
|
847
847
|
}, {
|
|
848
848
|
name: 'highlight',
|
|
@@ -858,7 +858,7 @@ var components = exports.components = [{
|
|
|
858
858
|
type: 'string'
|
|
859
859
|
}, {
|
|
860
860
|
name: 'isBidiWarningTooltipEnabled',
|
|
861
|
-
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
|
|
861
|
+
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
862
|
type: 'boolean'
|
|
863
863
|
}, {
|
|
864
864
|
name: 'label',
|
|
@@ -866,15 +866,15 @@ var components = exports.components = [{
|
|
|
866
866
|
type: 'string'
|
|
867
867
|
}, {
|
|
868
868
|
name: 'language',
|
|
869
|
-
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: '"text" | "PHP" | "php" | "php3" | "php4" | "php5" | "Java" | "java" | "CSharp" | "csharp" | "c#" | "Python" | "python" | "py" | "JavaScript" | "javascript" | "js" | "Html" | "html" | ...
|
|
869
|
+
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: '"text" | "PHP" | "php" | "php3" | "php4" | "php5" | "Java" | "java" | "CSharp" | "csharp" | "c#" | "Python" | "python" | "py" | "JavaScript" | "javascript" | "js" | "Html" | "html" | ... 234 more ... | "markdown"'
|
|
871
871
|
}, {
|
|
872
872
|
name: 'shouldShowLineNumbers',
|
|
873
|
-
description: 'Sets whether to display code line numbers or not
|
|
873
|
+
description: 'Sets whether to display code line numbers or not.',
|
|
874
874
|
type: 'boolean'
|
|
875
875
|
}, {
|
|
876
876
|
name: 'shouldWrapLongLines',
|
|
877
|
-
description: 'Sets whether long lines will create a horizontally scrolling container.\nWhen set to `true`, these lines will visually wrap instead
|
|
877
|
+
description: 'Sets whether long lines will create a horizontally scrolling container.\nWhen set to `true`, these lines will visually wrap instead.',
|
|
878
878
|
type: 'boolean'
|
|
879
879
|
}, {
|
|
880
880
|
name: 'text',
|
|
@@ -986,140 +986,140 @@ var components = exports.components = [{
|
|
|
986
986
|
contentGuidelines: ['Use clear, descriptive labels', 'Provide helpful placeholder text', 'Use appropriate date formats', 'Keep labels concise but descriptive'],
|
|
987
987
|
props: [{
|
|
988
988
|
name: 'aria-describedby',
|
|
989
|
-
description: 'Used to associate accessible descriptions to the date picker
|
|
989
|
+
description: 'Used to associate accessible descriptions to the date picker.',
|
|
990
990
|
type: 'string'
|
|
991
991
|
}, {
|
|
992
992
|
name: 'autoFocus',
|
|
993
|
-
description: 'Set the picker to autofocus on mount
|
|
993
|
+
description: 'Set the picker to autofocus on mount.',
|
|
994
994
|
type: 'boolean'
|
|
995
995
|
}, {
|
|
996
996
|
name: 'clearControlLabel',
|
|
997
|
-
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"
|
|
997
|
+
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".',
|
|
998
998
|
type: 'string'
|
|
999
999
|
}, {
|
|
1000
1000
|
name: 'dateFormat',
|
|
1001
|
-
description: "Format the date with a string that is accepted by [date-fns's format\nfunction](https://date-fns.org/v1.29.0/docs/format). **This does not affect\nhow the input is parsed.** This must be done using the `parseInputValue`\nprop.\n\nNote that though we are using `date-fns` version 2, we use [the tokens from\n`date-fns` version 1](https://date-fns.org/v1.30.1/docs/format) under the\nhood
|
|
1001
|
+
description: "Format the date with a string that is accepted by [date-fns's format\nfunction](https://date-fns.org/v1.29.0/docs/format). **This does not affect\nhow the input is parsed.** This must be done using the `parseInputValue`\nprop.\n\nNote that though we are using `date-fns` version 2, we use [the tokens from\n`date-fns` version 1](https://date-fns.org/v1.30.1/docs/format) under the\nhood.",
|
|
1002
1002
|
type: 'string'
|
|
1003
1003
|
}, {
|
|
1004
1004
|
name: 'defaultValue',
|
|
1005
|
-
description: 'The default for `value
|
|
1005
|
+
description: 'The default for `value`.',
|
|
1006
1006
|
type: 'string'
|
|
1007
1007
|
}, {
|
|
1008
1008
|
name: 'disabled',
|
|
1009
|
-
description: 'An array of ISO dates that should be disabled on the calendar. This does not affect what users can type into the picker
|
|
1009
|
+
description: 'An array of ISO dates that should be disabled on the calendar. This does not affect what users can type into the picker.',
|
|
1010
1010
|
type: 'string[]'
|
|
1011
1011
|
}, {
|
|
1012
1012
|
name: 'disabledDateFilter',
|
|
1013
|
-
description: 'A filter function for disabling dates on the calendar. This does not affect what users can type into the picker.\n\nThe function is called with a date string in the format `YYYY-MM-DD` and should return `true` if the date should be disabled
|
|
1014
|
-
type: '(
|
|
1013
|
+
description: 'A filter function for disabling dates on the calendar. This does not affect what users can type into the picker.\n\nThe function is called with a date string in the format `YYYY-MM-DD` and should return `true` if the date should be disabled.',
|
|
1014
|
+
type: '(date: string) => boolean'
|
|
1015
1015
|
}, {
|
|
1016
1016
|
name: 'formatDisplayLabel',
|
|
1017
|
-
description: "A function for formatting the date displayed in the input. By default composes together [`date-fns`'s parse method](https://date-fns.org/v1.29.0/docs/parse) and [`date-fns`'s format method](https://date-fns.org/v1.29.0/docs/format) to return a correctly formatted date string.\n\nNote that this does not affect how the input is parsed. This must be done using the `parseInputValue` prop
|
|
1017
|
+
description: "A function for formatting the date displayed in the input. By default composes together [`date-fns`'s parse method](https://date-fns.org/v1.29.0/docs/parse) and [`date-fns`'s format method](https://date-fns.org/v1.29.0/docs/format) to return a correctly formatted date string.\n\nNote that this does not affect how the input is parsed. This must be done using the `parseInputValue` prop.",
|
|
1018
1018
|
type: '(value: string, dateFormat: string) => string'
|
|
1019
1019
|
}, {
|
|
1020
1020
|
name: 'id',
|
|
1021
|
-
description: 'Set the id of the field.\nAssociates a `<label></label>` with the field
|
|
1021
|
+
description: 'Set the id of the field.\nAssociates a `<label></label>` with the field.',
|
|
1022
1022
|
type: 'string'
|
|
1023
1023
|
}, {
|
|
1024
1024
|
name: 'inputLabel',
|
|
1025
|
-
description:
|
|
1025
|
+
description: 'The name of the input, used when `shouldShowCalendarButton` is true. See `shouldShowCalendarButton` description for more details.',
|
|
1026
1026
|
type: 'string'
|
|
1027
1027
|
}, {
|
|
1028
1028
|
name: 'inputLabelId',
|
|
1029
|
-
description: 'The ID of the label for the input, used when `shouldShowCalendarButton` is\ntrue. See `shouldShowCalendarButton` description for more details
|
|
1029
|
+
description: 'The ID of the label for the input, used when `shouldShowCalendarButton` is\ntrue. See `shouldShowCalendarButton` description for more details.',
|
|
1030
1030
|
type: 'string'
|
|
1031
1031
|
}, {
|
|
1032
1032
|
name: 'isDisabled',
|
|
1033
|
-
description: 'Set if the picker is disabled
|
|
1033
|
+
description: 'Set if the picker is disabled.',
|
|
1034
1034
|
type: 'boolean'
|
|
1035
1035
|
}, {
|
|
1036
1036
|
name: 'isInvalid',
|
|
1037
|
-
description: 'Set if the picker has an invalid value
|
|
1037
|
+
description: 'Set if the picker has an invalid value.',
|
|
1038
1038
|
type: 'boolean'
|
|
1039
1039
|
}, {
|
|
1040
1040
|
name: 'isOpen',
|
|
1041
|
-
description: 'Set if the picker is open
|
|
1041
|
+
description: 'Set if the picker is open.',
|
|
1042
1042
|
type: 'boolean'
|
|
1043
1043
|
}, {
|
|
1044
1044
|
name: 'isRequired',
|
|
1045
|
-
description: 'Set the field as required
|
|
1045
|
+
description: 'Set the field as required.',
|
|
1046
1046
|
type: 'boolean'
|
|
1047
1047
|
}, {
|
|
1048
1048
|
name: 'label',
|
|
1049
|
-
description: 'Accessible name for the Date Picker Select, rendered as `aria-label`. This will override any other method of providing a label
|
|
1049
|
+
description: 'Accessible name for the Date Picker Select, rendered as `aria-label`. This will override any other method of providing a label.',
|
|
1050
1050
|
type: 'string'
|
|
1051
1051
|
}, {
|
|
1052
1052
|
name: 'locale',
|
|
1053
|
-
description: 'Locale used to format the date and calendar. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)
|
|
1053
|
+
description: 'Locale used to format the date and calendar. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat).',
|
|
1054
1054
|
type: 'string'
|
|
1055
1055
|
}, {
|
|
1056
1056
|
name: 'maxDate',
|
|
1057
|
-
description: 'The latest enabled date. Dates after this are disabled on the calendar. This does not affect what users can type into the picker
|
|
1057
|
+
description: 'The latest enabled date. Dates after this are disabled on the calendar. This does not affect what users can type into the picker.',
|
|
1058
1058
|
type: 'string'
|
|
1059
1059
|
}, {
|
|
1060
1060
|
name: 'menuInnerWrapper',
|
|
1061
|
-
description: 'This overrides the inner wrapper the Calendar.\n@private Please use this with extreme caution, this API may be changed in the future
|
|
1061
|
+
description: 'This overrides the inner wrapper the Calendar.\n@private Please use this with extreme caution, this API may be changed in the future.',
|
|
1062
1062
|
type: 'ComponentClass<{ children: ReactNode; }, any> | FunctionComponent<{ children: ReactNode; }>'
|
|
1063
1063
|
}, {
|
|
1064
1064
|
name: 'minDate',
|
|
1065
|
-
description: 'The earliest enabled date. Dates before this are disabled on the calendar. This does not affect what users can type into the picker
|
|
1065
|
+
description: 'The earliest enabled date. Dates before this are disabled on the calendar. This does not affect what users can type into the picker.',
|
|
1066
1066
|
type: 'string'
|
|
1067
1067
|
}, {
|
|
1068
1068
|
name: 'name',
|
|
1069
|
-
description: 'The name of the field
|
|
1069
|
+
description: 'The name of the field.',
|
|
1070
1070
|
type: 'string'
|
|
1071
1071
|
}, {
|
|
1072
1072
|
name: 'nextMonthLabel',
|
|
1073
|
-
description: 'The aria-label attribute associated with the next-month arrow
|
|
1073
|
+
description: 'The aria-label attribute associated with the next-month arrow.',
|
|
1074
1074
|
type: 'string'
|
|
1075
1075
|
}, {
|
|
1076
1076
|
name: 'onBlur',
|
|
1077
|
-
description: 'Called when the field is blurred
|
|
1078
|
-
type: '
|
|
1077
|
+
description: 'Called when the field is blurred.',
|
|
1078
|
+
type: '(event: FocusEvent<HTMLInputElement, Element>) => void'
|
|
1079
1079
|
}, {
|
|
1080
1080
|
name: 'onChange',
|
|
1081
|
-
description: 'Called when the value changes. The only argument is an ISO time or empty string
|
|
1082
|
-
type: '(
|
|
1081
|
+
description: 'Called when the value changes. The only argument is an ISO time or empty string.',
|
|
1082
|
+
type: '(value: string) => void'
|
|
1083
1083
|
}, {
|
|
1084
1084
|
name: 'onFocus',
|
|
1085
|
-
description: 'Called when the field is focused
|
|
1086
|
-
type: '
|
|
1085
|
+
description: 'Called when the field is focused.',
|
|
1086
|
+
type: '(event: FocusEvent<HTMLInputElement, Element>) => void'
|
|
1087
1087
|
}, {
|
|
1088
1088
|
name: 'openCalendarLabel',
|
|
1089
|
-
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
|
|
1089
|
+
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
1090
|
type: 'string'
|
|
1091
1091
|
}, {
|
|
1092
1092
|
name: 'parseInputValue',
|
|
1093
|
-
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
|
|
1093
|
+
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.',
|
|
1094
1094
|
type: '(date: string, dateFormat: string) => Date'
|
|
1095
1095
|
}, {
|
|
1096
1096
|
name: 'placeholder',
|
|
1097
|
-
description: 'Placeholder text displayed in input
|
|
1097
|
+
description: 'Placeholder text displayed in input.',
|
|
1098
1098
|
type: 'string'
|
|
1099
1099
|
}, {
|
|
1100
1100
|
name: 'previousMonthLabel',
|
|
1101
|
-
description: 'The aria-label attribute associated with the previous-month arrow
|
|
1101
|
+
description: 'The aria-label attribute associated with the previous-month arrow.',
|
|
1102
1102
|
type: 'string'
|
|
1103
1103
|
}, {
|
|
1104
1104
|
name: 'selectProps',
|
|
1105
1105
|
description: '',
|
|
1106
|
-
type: 'Omit<SelectProps<OptionType, false>, "aria-
|
|
1106
|
+
type: 'Omit<SelectProps<OptionType, false>, "aria-describedby" | "placeholder" | "aria-label" | "inputId"> & { \'aria-describedby\'?: never; \'aria-label\'?: never; inputId?: never; placeholder?: never; }'
|
|
1107
1107
|
}, {
|
|
1108
1108
|
name: 'shouldShowCalendarButton',
|
|
1109
|
-
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
|
|
1109
|
+
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
1110
|
type: 'boolean'
|
|
1111
1111
|
}, {
|
|
1112
1112
|
name: 'spacing',
|
|
1113
|
-
description: 'The spacing for the select control.\n\nCompact is `gridSize() * 4`, default is `gridSize * 5
|
|
1114
|
-
type: '"
|
|
1113
|
+
description: 'The spacing for the select control.\n\nCompact is `gridSize() * 4`, default is `gridSize * 5`.',
|
|
1114
|
+
type: '"default" | "compact"'
|
|
1115
1115
|
}, {
|
|
1116
1116
|
name: 'value',
|
|
1117
|
-
description: 'The ISO time used as the input value
|
|
1117
|
+
description: 'The ISO time used as the input value.',
|
|
1118
1118
|
type: 'string'
|
|
1119
1119
|
}, {
|
|
1120
1120
|
name: 'weekStartDay',
|
|
1121
|
-
description: 'Start day of the week for the calendar.\n- `0` sunday (default value)\n- `1` monday\n- `2` tuesday\n- `3` wednesday\n- `4` thursday\n- `5` friday\n- `6` saturday
|
|
1122
|
-
type: '0 |
|
|
1121
|
+
description: 'Start day of the week for the calendar.\n- `0` sunday (default value)\n- `1` monday\n- `2` tuesday\n- `3` wednesday\n- `4` thursday\n- `5` friday\n- `6` saturday',
|
|
1122
|
+
type: '0 | 1 | 2 | 3 | 4 | 5 | 6'
|
|
1123
1123
|
}]
|
|
1124
1124
|
}, {
|
|
1125
1125
|
name: 'TimePicker',
|
|
@@ -1618,7 +1618,7 @@ var components = exports.components = [{
|
|
|
1618
1618
|
description: 'A component for displaying brief messages.',
|
|
1619
1619
|
status: 'general-availability',
|
|
1620
1620
|
examples: ['import Flag, { FlagGroup } from \'@atlaskit/flag\';\nimport InfoIcon from \'@atlaskit/icon/core/status-information\';\nexport default [\n\t<FlagGroup>\n\t\t<Flag\n\t\t\tid="flag-1"\n\t\t\ticon={<InfoIcon label="Info" />}\n\t\t\ttitle="Success"\n\t\t\tdescription="Your changes have been saved successfully."\n\t\t\tappearance="success"\n\t\t/>\n\t</FlagGroup>,\n\t<FlagGroup>\n\t\t<Flag\n\t\t\tid="flag-2"\n\t\t\ticon={<InfoIcon label="Warning" />}\n\t\t\ttitle="Warning"\n\t\t\tdescription="This action cannot be undone."\n\t\t\tappearance="warning"\n\t\t\tactions={[\n\t\t\t\t{\n\t\t\t\t\tcontent: \'Proceed\',\n\t\t\t\t\tonClick: () => console.log(\'Proceed clicked\'),\n\t\t\t\t},\n\t\t\t]}\n\t\t/>\n\t</FlagGroup>,\n\t<FlagGroup>\n\t\t<Flag\n\t\t\tid="flag-3"\n\t\t\ticon={<InfoIcon label="Error" />}\n\t\t\ttitle="Error"\n\t\t\tdescription="Something went wrong. Please try again."\n\t\t\tappearance="error"\n\t\t\tactions={[\n\t\t\t\t{\n\t\t\t\t\tcontent: \'Retry\',\n\t\t\t\t\tonClick: () => console.log(\'Retry clicked\'),\n\t\t\t\t},\n\t\t\t]}\n\t\t/>\n\t</FlagGroup>,\n];'],
|
|
1621
|
-
accessibilityGuidelines: ['Ensure flag content is announced by screen readers', 'Use appropriate timing for auto-dismiss', 'Provide clear action options', 'Consider screen reader announcement conflicts'],
|
|
1621
|
+
accessibilityGuidelines: ['Ensure flag content is announced by screen readers', 'Use appropriate timing for auto-dismiss', 'Provide clear action options', 'Consider screen reader announcement conflicts', 'Use an h2 heading level for the title', 'Use the `headingLevel` prop to maintain proper heading hierarchy'],
|
|
1622
1622
|
usageGuidelines: ['Use for confirmations and alerts needing minimal interaction', 'Display event-driven messages', 'Position at bottom left of screen', 'Consider auto-dismiss timing'],
|
|
1623
1623
|
contentGuidelines: ['Be clear about what went wrong for errors', 'Provide specific steps to resolve issues', 'Use a helpful, non-threatening tone', 'Clearly state potential consequences for warnings', 'Confirm outcome then get out of the way for success messages'],
|
|
1624
1624
|
props: [{
|
|
@@ -1685,11 +1685,15 @@ var components = exports.components = [{
|
|
|
1685
1685
|
category: 'form',
|
|
1686
1686
|
description: 'A component for building forms with validation and state management.',
|
|
1687
1687
|
status: 'general-availability',
|
|
1688
|
-
examples: ['import Button from \'@atlaskit/button/new\';\nimport { Checkbox } from \'@atlaskit/checkbox\';\nimport Form, { CheckboxField, ErrorMessage, Field, FormFooter, FormHeader } from \'@atlaskit/form\';\nimport TextField from \'@atlaskit/textfield\';\nexport default [\n\t<Form onSubmit={(data) => console.log(\'validated form\', data)}>\n\t\t
|
|
1688
|
+
examples: ['import Button from \'@atlaskit/button/new\';\nimport { Checkbox } from \'@atlaskit/checkbox\';\nimport Form, { CheckboxField, ErrorMessage, Field, FormFooter, FormHeader } from \'@atlaskit/form\';\nimport TextField from \'@atlaskit/textfield\';\nexport default [\n\t<Form onSubmit={(data) => console.log(\'validated form\', data)}>\n\t\t<FormHeader title="Basic Form">\n\t\t\t<p>Fill out the form below</p>\n\t\t</FormHeader>\n\t\t<Field\n\t\t\tname="username"\n\t\t\tlabel="Username"\n\t\t\tisRequired\n\t\t\tvalidate={(value) => (value && value.length < 3 ? \'Too short\' : undefined)}\n\t\t>\n\t\t\t{({ fieldProps, error }) => (\n\t\t\t\t<>\n\t\t\t\t\t<TextField {...fieldProps} />\n\t\t\t\t\t{error && <ErrorMessage>Username must be at least 3 characters</ErrorMessage>}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</Field>\n\t\t<CheckboxField name="terms" value="terms">\n\t\t\t{({ fieldProps }) => <Checkbox {...fieldProps} label="I accept the terms" />}\n\t\t</CheckboxField>\n\t\t<FormFooter>\n\t\t\t<Button type="submit" appearance="primary">\n\t\t\t\tCreate Account\n\t\t\t</Button>\n\t\t</FormFooter>\n\t</Form>,\n];'],
|
|
1689
1689
|
accessibilityGuidelines: ['Provide clear labels for all form fields', 'Use appropriate error messaging', 'Ensure keyboard navigation between fields', 'Mark required fields clearly', 'Provide helpful validation feedback'],
|
|
1690
1690
|
usageGuidelines: ['Use for complex forms with validation', 'Provide clear field labels and instructions', 'Use single column layout for better comprehension', 'Mark required fields with asterisk (*)', 'Provide specific error messages'],
|
|
1691
1691
|
contentGuidelines: ['Use clear, concise labels', 'Write helpful placeholder text', 'Provide specific error messages', 'Use consistent terminology', 'Always include a visible label (exception: search fields)', 'Match field length to intended content length'],
|
|
1692
1692
|
props: [{
|
|
1693
|
+
name: 'autocomplete',
|
|
1694
|
+
description: "Indicates whether the value of the form's controls can be automatically completed by the browser. It is `on` by default.",
|
|
1695
|
+
type: '"off" | "on"'
|
|
1696
|
+
}, {
|
|
1693
1697
|
name: 'children',
|
|
1694
1698
|
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`.\n You can read more about these props in [react-final form documentation](https://final-form.org/docs/final-form/types/FormState).',
|
|
1695
1699
|
type: '(() => void) | React.ReactNode | ((args: FormChildrenArgs<FormValues>) => React.ReactNode)'
|
|
@@ -1697,14 +1701,38 @@ var components = exports.components = [{
|
|
|
1697
1701
|
name: 'formProps',
|
|
1698
1702
|
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.',
|
|
1699
1703
|
type: '{ [x: string]: any; } & ExcludeReservedFormProps'
|
|
1704
|
+
}, {
|
|
1705
|
+
name: 'id',
|
|
1706
|
+
description: '`id` attribute applied to the `form` element.',
|
|
1707
|
+
type: 'string'
|
|
1700
1708
|
}, {
|
|
1701
1709
|
name: 'isDisabled',
|
|
1702
1710
|
description: 'Sets the form and its fields as disabled. Users cannot edit or focus on the fields.',
|
|
1703
1711
|
type: 'boolean'
|
|
1712
|
+
}, {
|
|
1713
|
+
name: 'label',
|
|
1714
|
+
description: 'Accessible name to be applied to the form element. Maps to the `aria-label` attribute.',
|
|
1715
|
+
type: 'string'
|
|
1716
|
+
}, {
|
|
1717
|
+
name: 'labelId',
|
|
1718
|
+
description: 'ID of the element that has the accessible name to be applied to the form element. Maps to the `aria-labelledby` attribute.',
|
|
1719
|
+
type: 'string'
|
|
1720
|
+
}, {
|
|
1721
|
+
name: 'name',
|
|
1722
|
+
description: '`name` attribute applied to the `form` element.',
|
|
1723
|
+
type: 'string'
|
|
1724
|
+
}, {
|
|
1725
|
+
name: 'noValidate',
|
|
1726
|
+
description: 'Indicates if the inputs within the form will bypass HTML5 constraint\nvalidation when submitted. This is not recommended to be used because it\ncan cause experiences to be inaccessible. It is `false` by default but will\nbe set to `true` in the future to increase accessibility, so it is **not recommended**.',
|
|
1727
|
+
type: 'boolean'
|
|
1704
1728
|
}, {
|
|
1705
1729
|
name: 'onSubmit',
|
|
1706
1730
|
description: 'Event handler called when the form is submitted. Fields must be free of validation errors.',
|
|
1707
1731
|
type: '(values: FormValues, form: FormApi<FormValues>, callback?: (errors?: Record<string, string>) => void) => void | Object | Promise<...>'
|
|
1732
|
+
}, {
|
|
1733
|
+
name: 'xcss',
|
|
1734
|
+
description: 'Apply a subset of permitted styles powered by Atlassian Design System design tokens.',
|
|
1735
|
+
type: 'false | (XCSSValue<"flex" | "grid" | "fill" | "stroke" | "all" | "bottom" | "left" | "right" | "top" | "clip" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | ... 458 more ... | "vectorEffect", DesignTokenStyles, ""> & ... 4 more ... & { ...; })'
|
|
1708
1736
|
}]
|
|
1709
1737
|
}, {
|
|
1710
1738
|
name: 'Heading',
|
|
@@ -1736,7 +1764,7 @@ var components = exports.components = [{
|
|
|
1736
1764
|
}, {
|
|
1737
1765
|
name: 'size',
|
|
1738
1766
|
description: 'Heading size. This value is detached from the specific heading level applied to allow for more flexibility.\nUse instead of the deprecated `level` prop.',
|
|
1739
|
-
type: '"
|
|
1767
|
+
type: '"xxlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall" | "xxsmall"'
|
|
1740
1768
|
}]
|
|
1741
1769
|
}, {
|
|
1742
1770
|
name: 'HeadingContextProvider',
|
|
@@ -2611,7 +2639,7 @@ var components = exports.components = [{
|
|
|
2611
2639
|
contentGuidelines: ['Use for appropriate layout purposes', 'Maintain consistent spacing and layout patterns', 'Consider accessibility and semantic structure'],
|
|
2612
2640
|
props: [{
|
|
2613
2641
|
name: 'as',
|
|
2614
|
-
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)
|
|
2642
|
+
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)",
|
|
2615
2643
|
type: '"object" | "style" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "caption" | "center" | ... 97 more ... | "webview"'
|
|
2616
2644
|
}, {
|
|
2617
2645
|
name: 'backgroundColor',
|
|
@@ -2690,7 +2718,7 @@ var components = exports.components = [{
|
|
|
2690
2718
|
contentGuidelines: ['Use for appropriate focusable content', 'Maintain consistent focus patterns', 'Consider keyboard navigation flow'],
|
|
2691
2719
|
props: [{
|
|
2692
2720
|
name: 'as',
|
|
2693
|
-
description:
|
|
2721
|
+
description: 'The DOM element to render as the Focusable element.',
|
|
2694
2722
|
type: '"symbol" | "object" | "style" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "caption" | ... 155 more ... | "view"'
|
|
2695
2723
|
}, {
|
|
2696
2724
|
name: 'children',
|
|
@@ -2954,7 +2982,7 @@ var components = exports.components = [{
|
|
|
2954
2982
|
}, {
|
|
2955
2983
|
name: 'color',
|
|
2956
2984
|
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.',
|
|
2957
|
-
type: '
|
|
2985
|
+
type: '"inherit" | TextColor'
|
|
2958
2986
|
}, {
|
|
2959
2987
|
name: 'id',
|
|
2960
2988
|
description: 'The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).',
|
|
@@ -2970,7 +2998,7 @@ var components = exports.components = [{
|
|
|
2970
2998
|
}, {
|
|
2971
2999
|
name: 'size',
|
|
2972
3000
|
description: 'Text size.',
|
|
2973
|
-
type: '"small" | "
|
|
3001
|
+
type: '"small" | "large" | "medium" | "UNSAFE_small"'
|
|
2974
3002
|
}, {
|
|
2975
3003
|
name: 'weight',
|
|
2976
3004
|
description: 'The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).',
|
|
@@ -3071,11 +3099,11 @@ var components = exports.components = [{
|
|
|
3071
3099
|
type: '"default" | "help" | "inverted" | "primary"'
|
|
3072
3100
|
}, {
|
|
3073
3101
|
name: 'ariaControls',
|
|
3074
|
-
description:
|
|
3102
|
+
description: 'If interaction is enabled, use `ariaControls` to tell assistive technology what elements are controlled by the progress indicator.',
|
|
3075
3103
|
type: 'string'
|
|
3076
3104
|
}, {
|
|
3077
3105
|
name: 'ariaLabel',
|
|
3078
|
-
description:
|
|
3106
|
+
description: 'Describes what the indicator represents to assistive technology. The selected index number will be appended to the label.',
|
|
3079
3107
|
type: 'string'
|
|
3080
3108
|
}, {
|
|
3081
3109
|
name: 'onSelect',
|
|
@@ -3328,7 +3356,7 @@ var components = exports.components = [{
|
|
|
3328
3356
|
}, {
|
|
3329
3357
|
name: 'appearance',
|
|
3330
3358
|
description: '',
|
|
3331
|
-
type: '"
|
|
3359
|
+
type: '"default" | "subtle" | "none"'
|
|
3332
3360
|
}, {
|
|
3333
3361
|
name: 'autoFocus',
|
|
3334
3362
|
description: 'Focus the control when it is mounted. There are very few cases that this should be used, and using incorrectly may violate accessibility guidelines.',
|
|
@@ -3504,7 +3532,7 @@ var components = exports.components = [{
|
|
|
3504
3532
|
}, {
|
|
3505
3533
|
name: 'menuPlacement',
|
|
3506
3534
|
description: "Default placement of the menu in relation to the control. 'auto' will flip\nwhen there isn't enough space below the control.",
|
|
3507
|
-
type: '"
|
|
3535
|
+
type: '"auto" | "bottom" | "top"'
|
|
3508
3536
|
}, {
|
|
3509
3537
|
name: 'menuPortalTarget',
|
|
3510
3538
|
description: 'Whether the menu should use a portal, and where it should attach\n\nAn example can be found in the [Portaling](https://react-select.com/advanced#portaling) documentation',
|
|
@@ -3596,7 +3624,7 @@ var components = exports.components = [{
|
|
|
3596
3624
|
}, {
|
|
3597
3625
|
name: 'spacing',
|
|
3598
3626
|
description: 'This prop affects the height of the select control. Compact is gridSize() * 4, default is gridSize * 5',
|
|
3599
|
-
type: '"
|
|
3627
|
+
type: '"compact" | "default"'
|
|
3600
3628
|
}, {
|
|
3601
3629
|
name: 'tabIndex',
|
|
3602
3630
|
description: "Sets the tabIndex attribute on the input for focus. Since focus is already managed, the only acceptable value to be used is '-1' in rare cases when removing this field from the document tab order is required.",
|
|
@@ -4077,6 +4105,10 @@ var components = exports.components = [{
|
|
|
4077
4105
|
name: 'position',
|
|
4078
4106
|
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.',
|
|
4079
4107
|
type: 'Placement | "mouse"'
|
|
4108
|
+
}, {
|
|
4109
|
+
name: 'shortcut',
|
|
4110
|
+
description: 'Display a keyboard shortcut in the tooltip.\n\nKeys will be displayed as individual keyboard key segments after the tooltip content.\n\nThis prop requires the `platform-dst-tooltip-shortcuts` feature flag to be enabled.',
|
|
4111
|
+
type: 'string[]'
|
|
4080
4112
|
}, {
|
|
4081
4113
|
name: 'strategy',
|
|
4082
4114
|
description: 'Use this to define the strategy of popper.',
|