@atlaskit/forge-react-types 0.48.0 → 0.49.1
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 +18 -0
- package/dist/cjs/components/__generated__/BoxProps.codegen.js +2 -2
- package/dist/es2019/components/__generated__/BoxProps.codegen.js +2 -2
- package/dist/esm/components/__generated__/BoxProps.codegen.js +2 -2
- package/dist/types/components/__generated__/BoxProps.codegen.d.ts +24 -22
- package/dist/types/components/__generated__/IconProps.codegen.d.ts +14 -14
- package/dist/types-ts4.5/components/__generated__/BoxProps.codegen.d.ts +24 -22
- package/dist/types-ts4.5/components/__generated__/IconProps.codegen.d.ts +14 -14
- package/package.json +7 -7
- package/scripts/codegen/codeGenerator.ts +3 -3
- package/scripts/codegen/componentPropTypes.ts +1 -1
- package/scripts/typechecker.ts +6 -1
- package/src/components/__generated__/BoxProps.codegen.tsx +26 -24
- package/src/components/__generated__/IconProps.codegen.tsx +670 -15
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/forge-react-types
|
|
2
2
|
|
|
3
|
+
## 0.49.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`088c1edf2e05e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/088c1edf2e05e) -
|
|
8
|
+
Fix icon type definition to re-sync exported icon types
|
|
9
|
+
|
|
10
|
+
## 0.49.0
|
|
11
|
+
|
|
12
|
+
### Minor Changes
|
|
13
|
+
|
|
14
|
+
- [`e45f66913297e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e45f66913297e) -
|
|
15
|
+
Import emotion box into Forge UI Kit library
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 0.48.0
|
|
4
22
|
|
|
5
23
|
### Minor Changes
|
|
@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
*
|
|
9
9
|
* Extract component prop types from UIKit 2 components - BoxProps
|
|
10
10
|
*
|
|
11
|
-
* @codegen <<SignedSource::
|
|
11
|
+
* @codegen <<SignedSource::2576658a875b738553fdb3ccfa41acd1>>
|
|
12
12
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
13
|
-
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/
|
|
13
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/index.tsx <<SignedSource::6b375bb57ecf19919f9e1b65e899fd96>>
|
|
14
14
|
*/
|
|
15
15
|
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
|
|
16
16
|
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Extract component prop types from UIKit 2 components - BoxProps
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::2576658a875b738553fdb3ccfa41acd1>>
|
|
7
7
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
-
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/index.tsx <<SignedSource::6b375bb57ecf19919f9e1b65e899fd96>>
|
|
9
9
|
*/
|
|
10
10
|
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
|
|
11
11
|
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Extract component prop types from UIKit 2 components - BoxProps
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::2576658a875b738553fdb3ccfa41acd1>>
|
|
7
7
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
-
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/index.tsx <<SignedSource::6b375bb57ecf19919f9e1b65e899fd96>>
|
|
9
9
|
*/
|
|
10
10
|
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
|
|
11
11
|
|
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Extract component prop types from UIKit 2 components - BoxProps
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::2576658a875b738553fdb3ccfa41acd1>>
|
|
7
7
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
-
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/index.tsx <<SignedSource::6b375bb57ecf19919f9e1b65e899fd96>>
|
|
9
9
|
*/
|
|
10
10
|
import React from 'react';
|
|
11
|
-
import { Box as PlatformBox } from '@atlaskit/primitives';
|
|
11
|
+
import type { Box as PlatformBox } from '@atlaskit/primitives';
|
|
12
12
|
import type * as CSS from 'csstype';
|
|
13
13
|
import type { MediaQuery } from '@atlaskit/primitives';
|
|
14
14
|
import { tokensMap } from '@atlaskit/primitives';
|
|
@@ -1525,6 +1525,20 @@ declare const xcssValidator: (styleObj: SafeCSSObject<keyof CSSProperties, keyof
|
|
|
1525
1525
|
type XCSSProp = ReturnType<typeof xcssValidator>;
|
|
1526
1526
|
type PlatformBoxProps = React.ComponentProps<typeof PlatformBox>;
|
|
1527
1527
|
export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
|
|
1528
|
+
/**
|
|
1529
|
+
* A token alias for background color. See: [Design tokens](https://atlassian.design/components/tokens/all-tokens)
|
|
1530
|
+
* for a list of available colors.
|
|
1531
|
+
*
|
|
1532
|
+
* When the background color is set to a surface token, the current surface CSS variable
|
|
1533
|
+
* will also be set to this value in the `Box` styles.
|
|
1534
|
+
*
|
|
1535
|
+
* @type [Background color tokens](https://atlassian.design/components/tokens/all-tokens#color-background)
|
|
1536
|
+
*/
|
|
1537
|
+
backgroundColor?: PlatformBoxProps['backgroundColor'];
|
|
1538
|
+
/**
|
|
1539
|
+
* @type ForgeComponent
|
|
1540
|
+
*/
|
|
1541
|
+
children?: PlatformBoxProps['children'];
|
|
1528
1542
|
/**
|
|
1529
1543
|
* A shorthand for `paddingBlock` and `paddingInline` together.
|
|
1530
1544
|
*
|
|
@@ -1538,17 +1552,17 @@ export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
|
|
|
1538
1552
|
*/
|
|
1539
1553
|
paddingBlock?: PlatformBoxProps['paddingBlock'];
|
|
1540
1554
|
/**
|
|
1541
|
-
* The logical block
|
|
1555
|
+
* The logical block end padding of an element.
|
|
1542
1556
|
*
|
|
1543
1557
|
* @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
|
|
1544
1558
|
*/
|
|
1545
|
-
|
|
1559
|
+
paddingBlockEnd?: PlatformBoxProps['paddingBlockEnd'];
|
|
1546
1560
|
/**
|
|
1547
|
-
* The logical block
|
|
1561
|
+
* The logical block start padding of an element.
|
|
1548
1562
|
*
|
|
1549
1563
|
* @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
|
|
1550
1564
|
*/
|
|
1551
|
-
|
|
1565
|
+
paddingBlockStart?: PlatformBoxProps['paddingBlockStart'];
|
|
1552
1566
|
/**
|
|
1553
1567
|
* The logical inline start and end padding of an element.
|
|
1554
1568
|
*
|
|
@@ -1568,15 +1582,11 @@ export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
|
|
|
1568
1582
|
*/
|
|
1569
1583
|
paddingInlineStart?: PlatformBoxProps['paddingInlineStart'];
|
|
1570
1584
|
/**
|
|
1571
|
-
*
|
|
1572
|
-
* for a list of available colors.
|
|
1573
|
-
*
|
|
1574
|
-
* When the background color is set to a surface token, the current surface CSS variable
|
|
1575
|
-
* will also be set to this value in the `Box` styles.
|
|
1585
|
+
* Accessible role.
|
|
1576
1586
|
*
|
|
1577
|
-
* @type
|
|
1587
|
+
* @type string
|
|
1578
1588
|
*/
|
|
1579
|
-
|
|
1589
|
+
role?: PlatformBoxProps['role'];
|
|
1580
1590
|
/**
|
|
1581
1591
|
* Apply a subset of permitted styles, powered by Atlassian Design System tokens.
|
|
1582
1592
|
* For a list of supported style properties on this component, see [here](https://developer.atlassian.com/platform/forge/ui-kit/components/xcss).
|
|
@@ -1584,14 +1594,6 @@ export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
|
|
|
1584
1594
|
* @type XCSSProp
|
|
1585
1595
|
*/
|
|
1586
1596
|
xcss?: XCSSProp;
|
|
1587
|
-
/**
|
|
1588
|
-
* @type string
|
|
1589
|
-
*/
|
|
1590
|
-
role?: PlatformBoxProps['role'];
|
|
1591
|
-
/**
|
|
1592
|
-
* @type ForgeComponent
|
|
1593
|
-
*/
|
|
1594
|
-
children?: PlatformBoxProps['children'];
|
|
1595
1597
|
};
|
|
1596
1598
|
/**
|
|
1597
1599
|
* A box is a generic container that provides managed access to design tokens.
|
|
@@ -3,32 +3,27 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Extract component prop types from UIKit 2 components - IconProps
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::42b00fe4bc342f0e5c0e6a6bf7b96357>>
|
|
7
7
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
-
* @codegenDependency ../../../../forge-ui/src/components/UIKit/icon/index.tsx <<SignedSource::
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/icon/index.tsx <<SignedSource::3be966703b2c67904c3555642b31a72d>>
|
|
9
9
|
*/
|
|
10
10
|
import type { ActiveTokens } from '@atlaskit/tokens';
|
|
11
|
-
export type IconNext = 'add' | 'app-switcher' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'attachment' | 'audio' | 'backlog' | 'board' | 'calendar' | 'camera' | 'checkbox-indeterminate' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | '
|
|
11
|
+
export type IconNext = 'add' | 'app-switcher' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'attachment' | 'audio' | 'backlog' | 'board' | 'calendar' | 'camera' | 'checkbox-indeterminate' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'comment' | 'component' | 'copy' | 'cross-circle' | 'cross' | 'dashboard' | 'decision' | 'department' | 'download' | 'edit' | 'email' | 'emoji-add' | 'emoji' | 'feedback' | 'file' | 'filter' | 'flag-filled' | 'home' | 'image' | 'lightbulb' | 'link' | 'location' | 'marketplace' | 'menu' | 'notification' | 'office-building' | 'page' | 'people-group' | 'person' | 'premium' | 'question-circle' | 'redo' | 'refresh' | 'retry' | 'roadmap' | 'screen' | 'search' | 'send' | 'settings' | 'share' | 'sprint' | 'stopwatch' | 'task' | 'teams' | 'undo' | 'accessibility' | 'ai-agent' | 'ai-chat' | 'ai-generative-text-summary' | 'alert' | 'align-image-center' | 'align-image-left' | 'align-image-right' | 'align-text-center' | 'align-text-left' | 'align-text-right' | 'angle-brackets' | 'api' | 'app' | 'app-switcher-legacy' | 'apps' | 'archive-box' | 'arrow-down-left' | 'arrow-down-right' | 'arrow-up-left' | 'arrow-up-right' | 'assets' | 'atlassian-intelligence' | 'automation' | 'basketball' | 'boards' | 'book-with-bookmark' | 'border' | 'branch' | 'briefcase' | 'bug' | 'calendar-plus' | 'capture' | 'card' | 'cash' | 'changes' | 'chart-bar' | 'chart-bubble' | 'chart-matrix' | 'chart-pie' | 'chart-trend' | 'chart-trend-down' | 'chart-trend-up' | 'chat-widget' | 'check-circle-unchecked' | 'check-mark' | 'checkbox-checked' | 'checkbox-unchecked' | 'chevron-double-left' | 'chevron-double-right' | 'child-work-items' | 'clipboard' | 'clock' | 'close' | 'cloud-arrow-up' | 'collapse-horizontal' | 'collapse-vertical' | 'comment-add' | 'commit' | 'compass' | 'content-width-narrow' | 'content-width-wide' | 'content-wrap-left' | 'content-wrap-right' | 'credit-card' | 'curly-brackets' | 'customize' | 'data-flow' | 'data-number' | 'data-string' | 'database' | 'defect' | 'delete' | 'device-mobile' | 'devices' | 'discovery' | 'drag-handle-horizontal' | 'drag-handle-vertical' | 'edit-bulk' | 'emoji-casual' | 'emoji-neutral' | 'emoji-remove' | 'epic' | 'exclamation-square' | 'expand-horizontal' | 'expand-vertical' | 'eye-open' | 'eye-open-filled' | 'eye-open-strikethrough' | 'feed' | 'field' | 'field-alert' | 'field-checkbox-group' | 'field-dropdown' | 'field-radio-group' | 'files' | 'flag' | 'flask' | 'focus-area' | 'folder-closed' | 'folder-open' | 'form' | 'fullscreen-enter' | 'fullscreen-exit' | 'glasses' | 'globe' | 'goal' | 'grid' | 'grow-diagonal' | 'grow-horizontal' | 'grow-vertical' | 'hashtag' | 'headphones' | 'heart' | 'highlight' | 'image-fullscreen' | 'image-inline' | 'image-scaled' | 'inbox' | 'incident' | 'information' | 'information-circle' | 'key-result' | 'layout-one-column' | 'layout-three-columns' | 'layout-three-columns-sidebars' | 'layout-two-columns' | 'layout-two-columns-sidebar-left' | 'layout-two-columns-sidebar-right' | 'library' | 'link-broken' | 'link-external' | 'list-bulleted' | 'list-checklist' | 'list-numbered' | 'lobby-bell' | 'lock-locked' | 'lock-unlocked' | 'log-in' | 'log-out' | 'magic-wand' | 'markdown' | 'maximize' | 'megaphone' | 'merge-failure' | 'merge-success' | 'microphone' | 'minimize' | 'minus' | 'minus-square' | 'node' | 'note' | 'notification-muted' | 'objective' | 'on-call' | 'operations' | 'pages' | 'paint-bucket' | 'paint-palette' | 'panel-left' | 'panel-right' | 'pen' | 'person-add' | 'person-added' | 'person-avatar' | 'person-offboard' | 'person-remove' | 'person-warning' | 'phone' | 'pin' | 'pin-filled' | 'plus-square' | 'power-plug' | 'presenter-mode' | 'printer' | 'priority-blocker' | 'priority-critical' | 'priority-high' | 'priority-highest' | 'priority-low' | 'priority-lowest' | 'priority-major' | 'priority-medium' | 'priority-minor' | 'priority-trivial' | 'problem' | 'project' | 'project-status' | 'projection-screen' | 'pull-request' | 'pulse' | 'quotation-mark' | 'radio-checked' | 'radio-unchecked' | 'release' | 'rovo-chat' | 'scales' | 'scorecard' | 'screen-plus' | 'shapes' | 'shield' | 'shield-strikethrough' | 'show-more-horizontal' | 'show-more-vertical' | 'shrink-diagonal' | 'shrink-horizontal' | 'shrink-vertical' | 'sidebar-collapse' | 'sidebar-expand' | 'smart-link' | 'smart-link-card' | 'smart-link-embed' | 'smart-link-inline' | 'smart-link-list' | 'snippet' | 'sort-ascending' | 'sort-descending' | 'spreadsheet' | 'star-starred' | 'star-unstarred' | 'status-discovery' | 'status-error' | 'status-information' | 'status-success' | 'status-verified' | 'status-warning' | 'story' | 'stroke-weight-extra-large' | 'stroke-weight-large' | 'stroke-weight-medium' | 'stroke-weight-small' | 'subtasks' | 'success' | 'support' | 'table-cell-clear' | 'table-cell-merge' | 'table-cell-split' | 'table-column-add-left' | 'table-column-add-right' | 'table-column-delete' | 'table-column-move-left' | 'table-column-move-right' | 'table-columns-distribute' | 'table-row-add-above' | 'table-row-add-below' | 'table-row-delete' | 'table-row-move-down' | 'table-row-move-up' | 'tag' | 'takeout-food' | 'target' | 'task-in-progress' | 'task-to-do' | 'tasks' | 'text' | 'text-bold' | 'text-heading' | 'text-indent-left' | 'text-indent-right' | 'text-italic' | 'text-shorten' | 'text-spellcheck' | 'text-strikethrough' | 'text-style' | 'text-underline' | 'text-wrap' | 'theme' | 'thumbs-down' | 'thumbs-up' | 'timeline' | 'tools' | 'transition' | 'translate' | 'tree' | 'vehicle-car' | 'video' | 'video-next' | 'video-next-overlay' | 'video-pause' | 'video-pause-overlay' | 'video-play' | 'video-play-overlay' | 'video-previous' | 'video-previous-overlay' | 'video-skip-backward-fifteen' | 'video-skip-backward-ten' | 'video-skip-forward-fifteen' | 'video-skip-forward-ten' | 'video-stop' | 'video-stop-overlay' | 'volume-high' | 'volume-low' | 'volume-muted' | 'whiteboard' | 'work-item' | 'work-items' | 'zoom-in' | 'zoom-out';
|
|
12
12
|
export type IconRemoved = 'billing-filled' | 'billing' | 'bitbucket-builds' | 'bitbucket-clone' | 'bitbucket-compare' | 'bitbucket-forks' | 'bitbucket-output' | 'bitbucket-pipelines' | 'camera-rotate' | 'camera-take-picture' | 'canvas' | 'hipchat-chevron-double-down' | 'hipchat-chevron-double-up' | 'dropbox' | 'editor-addon' | 'editor-advanced' | 'editor-file-preview' | 'editor-image-border' | 'editor-remove-emoji' | 'editor-strikethrough' | 'editor-table-display-options' | 'editor-text-color' | 'editor-underline' | 'emoji-atlassian' | 'folder-filled' | 'following' | 'googledrive' | 'gsuite' | 'highlights' | 'image-border' | 'jira-failed-build-status' | 'list' | 'hipchat-media-attachment-count' | 'media-services-annotate' | 'media-services-arrow' | 'media-services-blur' | 'media-services-brush' | 'media-services-button-option' | 'media-services-line-thickness' | 'media-services-no-image' | 'media-services-open-mediaviewer' | 'media-services-oval' | 'media-services-pdf' | 'media-services-rectangle' | 'media-services-text' | 'media-services-unknown' | 'media-services-zip' | 'mention' | 'notification-all' | 'pdf' | 'person-with-circle' | 'person-with-cross' | 'portfolio' | 'presence-active' | 'presence-busy' | 'presence-unavailable' | 'status' | 'vid-audio-muted' | 'vid-backward' | 'vid-camera-off' | 'vid-connection-circle' | 'vid-forward' | 'vid-hang-up' | 'vid-hd-circle' | 'vid-raised-hand' | 'vid-share-screen' | 'vid-speaking-circle';
|
|
13
|
-
export type IconReplaced = 'activity' | 'add-circle' | 'add-item' | 'addon' | 'editor-align-center' | 'editor-align-left' | 'editor-align-right' | 'app-access' | 'archive' | 'arrow-down-circle' | 'arrow-left-circle' | 'arrow-right-circle' | 'arrow-up-circle' | 'audio-circle' | 'hipchat-audio-only' | 'bitbucket-branches' | 'bitbucket-commits' | 'bitbucket-pullrequests' | 'bitbucket-repos' | 'bitbucket-snippets' | 'bitbucket-source' | 'book' | 'bullet-list' | 'calendar-filled' | 'camera-filled' | 'checkbox' | 'check-circle' | 'check-circle-outline' | 'check' | 'chevron-down-circle' | 'hipchat-chevron-down' | 'chevron-left-circle' | 'chevron-left-large' | 'chevron-right-circle' | 'chevron-right-large' | 'chevron-up-circle' | 'hipchat-chevron-up' | '
|
|
13
|
+
export type IconReplaced = 'activity' | 'add-circle' | 'add-item' | 'addon' | 'editor-align-center' | 'editor-align-left' | 'editor-align-right' | 'app-access' | 'archive' | 'arrow-down-circle' | 'arrow-left-circle' | 'arrow-right-circle' | 'arrow-up-circle' | 'audio-circle' | 'hipchat-audio-only' | 'bitbucket-branches' | 'bitbucket-commits' | 'bitbucket-pullrequests' | 'bitbucket-repos' | 'bitbucket-snippets' | 'bitbucket-source' | 'book' | 'bullet-list' | 'calendar-filled' | 'camera-filled' | 'checkbox' | 'check-circle' | 'check-circle-outline' | 'check' | 'chevron-down-circle' | 'hipchat-chevron-down' | 'chevron-left-circle' | 'chevron-left-large' | 'chevron-right-circle' | 'chevron-right-large' | 'chevron-up-circle' | 'hipchat-chevron-up' | 'child-issues' | 'code' | 'creditcard-filled' | 'creditcard' | 'detail-view' | 'hipchat-dial-out' | 'discover-filled' | 'discover' | 'document-filled' | 'document' | 'documents' | 'drag-handler' | 'edit-filled' | 'editor-add' | 'editor-align-image-center' | 'editor-align-image-left' | 'editor-align-image-right' | 'editor-attachment' | 'editor-background-color' | 'editor-bold' | 'editor-bullet-list' | 'editor-close' | 'editor-code' | 'editor-collapse' | 'editor-date' | 'editor-decision' | 'editor-divider' | 'editor-done' | 'editor-edit' | 'editor-emoji' | 'editor-error' | 'editor-expand' | 'editor-feedback' | 'editor-file' | 'editor-help' | 'editor-hint' | 'editor-horizontal-rule' | 'editor-image' | 'editor-image-resize' | 'editor-indent' | 'editor-info' | 'editor-italic' | 'editor-layout-single' | 'editor-layout-three-equal' | 'editor-layout-three-with-sidebars' | 'editor-layout-two-equal' | 'editor-layout-two-left-sidebar' | 'editor-layout-two-right-sidebar' | 'editor-link' | 'editor-media-center' | 'editor-media-full-width' | 'editor-media-wide' | 'editor-media-wrap-left' | 'editor-media-wrap-right' | 'editor-mention' | 'editor-more' | 'editor-note' | 'editor-number-list' | 'editor-open' | 'editor-outdent' | 'editor-panel' | 'editor-photo' | 'editor-quote' | 'editor-recent' | 'editor-redo' | 'editor-remove' | 'editor-search' | 'editor-settings' | 'editor-success' | 'editor-table' | 'editor-task' | 'editor-text-style' | 'editor-undo' | 'editor-unlink' | 'editor-warning' | 'emoji-activity' | 'emoji-custom' | 'emoji-emoji' | 'emoji-flags' | 'emoji-food' | 'emoji-frequent' | 'emoji-keyboard' | 'emoji-nature' | 'emoji-objects' | 'emoji-people' | 'emoji-productivity' | 'emoji-symbols' | 'emoji-travel' | 'error' | 'export' | 'folder' | 'followers' | 'graph-bar' | 'graph-line' | 'home-circle' | 'image-resize' | 'info' | 'invite-team' | 'issue' | 'issue-raise' | 'issues' | 'jira-capture' | 'jira-labs' | 'jira-test-session' | 'label' | 'lightbulb-filled' | 'like' | 'link-filled' | 'hipchat-lobby' | 'lock-circle' | 'lock-filled' | 'lock' | 'media-services-actual-size' | 'media-services-add-comment' | 'media-services-audio' | 'media-services-code' | 'media-services-document' | 'media-services-filter' | 'media-services-fit-to-page' | 'media-services-full-screen' | 'media-services-grid' | 'media-services-image' | 'media-services-line' | 'media-services-preselected' | 'media-services-presentation' | 'media-services-scale-large' | 'media-services-scale-small' | 'media-services-spreadsheet' | 'media-services-video' | 'media-services-zoom-in' | 'media-services-zoom-out' | 'menu-expand' | 'mobile' | 'more' | 'more-vertical' | 'notification-direct' | 'office-building-filled' | 'open' | 'hipchat-outgoing-sound' | 'overview' | 'page-filled' | 'people' | 'person-circle' | 'person-with-tick' | 'preferences' | 'question' | 'questions' | 'queues' | 'quote' | 'radio' | 'recent' | 'room-menu' | 'schedule-filled' | 'schedule' | 'hipchat-sd-video' | 'select-clear' | 'ship' | 'shortcut' | 'sign-in' | 'sign-out' | 'star-filled' | 'star' | 'star-large' | 'subtask' | 'suitcase' | 'switcher' | 'table' | 'trash' | 'tray' | 'unlink' | 'unlock-circle' | 'unlock-filled' | 'unlock' | 'upload' | 'user-avatar-circle' | 'vid-audio-on' | 'vid-camera-on' | 'video-circle' | 'video-filled' | 'vid-full-screen-off' | 'vid-full-screen-on' | 'vid-pause' | 'vid-play' | 'vid-volume-full' | 'vid-volume-half' | 'vid-volume-muted' | 'warning' | 'watch-filled' | 'watch' | 'world' | 'world-small';
|
|
14
14
|
type Glyph = IconNext | IconRemoved | IconReplaced;
|
|
15
15
|
export type IconColor = Extract<ActiveTokens, `color.${string}`>;
|
|
16
|
-
export
|
|
16
|
+
export type IconProps = {
|
|
17
|
+
color?: IconColor;
|
|
17
18
|
/**
|
|
18
|
-
*
|
|
19
|
-
* This pixel size refers to the canvas the icon sits on, not the size of the icon shape itself.
|
|
19
|
+
* Name of the icon to be rendered.
|
|
20
20
|
*/
|
|
21
|
-
|
|
21
|
+
glyph: Glyph;
|
|
22
22
|
/**
|
|
23
23
|
* Text used to describe what the icon is in context. A label is needed when there is no pairing visible text next to the icon.
|
|
24
24
|
* An empty string marks the icon as presentation only.
|
|
25
25
|
*/
|
|
26
26
|
label: string;
|
|
27
|
-
/**
|
|
28
|
-
* Name of the icon to be rendered.
|
|
29
|
-
*/
|
|
30
|
-
glyph: Glyph;
|
|
31
|
-
color?: IconColor;
|
|
32
27
|
/**
|
|
33
28
|
* @deprecated the "primaryColor" prop is deprecated and will be removed on the 22nd of December 2025. Please use the "color" prop instead. For more information, visit: https://developer.atlassian.com/platform/forge/ui-kit/components/icon/.
|
|
34
29
|
*/
|
|
@@ -38,7 +33,12 @@ export interface IconProps {
|
|
|
38
33
|
* @deprecated the "secondaryColor" prop is deprecated and will be removed on the 22nd of December 2025. Please refactor your code to avoid using this prop.
|
|
39
34
|
*/
|
|
40
35
|
secondaryColor?: IconColor;
|
|
41
|
-
|
|
36
|
+
/**
|
|
37
|
+
* There are three icon sizes: `small` (16px), `medium` (24px), and `large` (32px). However "large" is now deprecated and will be removed on the 22nd of December 2025.
|
|
38
|
+
* This pixel size refers to the canvas the icon sits on, not the size of the icon shape itself.
|
|
39
|
+
*/
|
|
40
|
+
size?: 'small' | 'medium' | 'large';
|
|
41
|
+
};
|
|
42
42
|
/**
|
|
43
43
|
* An icon is a visual representation of a command, device, directory, or common action.
|
|
44
44
|
*
|
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Extract component prop types from UIKit 2 components - BoxProps
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::2576658a875b738553fdb3ccfa41acd1>>
|
|
7
7
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
-
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/index.tsx <<SignedSource::6b375bb57ecf19919f9e1b65e899fd96>>
|
|
9
9
|
*/
|
|
10
10
|
import React from 'react';
|
|
11
|
-
import { Box as PlatformBox } from '@atlaskit/primitives';
|
|
11
|
+
import type { Box as PlatformBox } from '@atlaskit/primitives';
|
|
12
12
|
import type * as CSS from 'csstype';
|
|
13
13
|
import type { MediaQuery } from '@atlaskit/primitives';
|
|
14
14
|
import { tokensMap } from '@atlaskit/primitives';
|
|
@@ -1525,6 +1525,20 @@ declare const xcssValidator: (styleObj: SafeCSSObject<keyof CSSProperties, keyof
|
|
|
1525
1525
|
type XCSSProp = ReturnType<typeof xcssValidator>;
|
|
1526
1526
|
type PlatformBoxProps = React.ComponentProps<typeof PlatformBox>;
|
|
1527
1527
|
export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
|
|
1528
|
+
/**
|
|
1529
|
+
* A token alias for background color. See: [Design tokens](https://atlassian.design/components/tokens/all-tokens)
|
|
1530
|
+
* for a list of available colors.
|
|
1531
|
+
*
|
|
1532
|
+
* When the background color is set to a surface token, the current surface CSS variable
|
|
1533
|
+
* will also be set to this value in the `Box` styles.
|
|
1534
|
+
*
|
|
1535
|
+
* @type [Background color tokens](https://atlassian.design/components/tokens/all-tokens#color-background)
|
|
1536
|
+
*/
|
|
1537
|
+
backgroundColor?: PlatformBoxProps['backgroundColor'];
|
|
1538
|
+
/**
|
|
1539
|
+
* @type ForgeComponent
|
|
1540
|
+
*/
|
|
1541
|
+
children?: PlatformBoxProps['children'];
|
|
1528
1542
|
/**
|
|
1529
1543
|
* A shorthand for `paddingBlock` and `paddingInline` together.
|
|
1530
1544
|
*
|
|
@@ -1538,17 +1552,17 @@ export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
|
|
|
1538
1552
|
*/
|
|
1539
1553
|
paddingBlock?: PlatformBoxProps['paddingBlock'];
|
|
1540
1554
|
/**
|
|
1541
|
-
* The logical block
|
|
1555
|
+
* The logical block end padding of an element.
|
|
1542
1556
|
*
|
|
1543
1557
|
* @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
|
|
1544
1558
|
*/
|
|
1545
|
-
|
|
1559
|
+
paddingBlockEnd?: PlatformBoxProps['paddingBlockEnd'];
|
|
1546
1560
|
/**
|
|
1547
|
-
* The logical block
|
|
1561
|
+
* The logical block start padding of an element.
|
|
1548
1562
|
*
|
|
1549
1563
|
* @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
|
|
1550
1564
|
*/
|
|
1551
|
-
|
|
1565
|
+
paddingBlockStart?: PlatformBoxProps['paddingBlockStart'];
|
|
1552
1566
|
/**
|
|
1553
1567
|
* The logical inline start and end padding of an element.
|
|
1554
1568
|
*
|
|
@@ -1568,15 +1582,11 @@ export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
|
|
|
1568
1582
|
*/
|
|
1569
1583
|
paddingInlineStart?: PlatformBoxProps['paddingInlineStart'];
|
|
1570
1584
|
/**
|
|
1571
|
-
*
|
|
1572
|
-
* for a list of available colors.
|
|
1573
|
-
*
|
|
1574
|
-
* When the background color is set to a surface token, the current surface CSS variable
|
|
1575
|
-
* will also be set to this value in the `Box` styles.
|
|
1585
|
+
* Accessible role.
|
|
1576
1586
|
*
|
|
1577
|
-
* @type
|
|
1587
|
+
* @type string
|
|
1578
1588
|
*/
|
|
1579
|
-
|
|
1589
|
+
role?: PlatformBoxProps['role'];
|
|
1580
1590
|
/**
|
|
1581
1591
|
* Apply a subset of permitted styles, powered by Atlassian Design System tokens.
|
|
1582
1592
|
* For a list of supported style properties on this component, see [here](https://developer.atlassian.com/platform/forge/ui-kit/components/xcss).
|
|
@@ -1584,14 +1594,6 @@ export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
|
|
|
1584
1594
|
* @type XCSSProp
|
|
1585
1595
|
*/
|
|
1586
1596
|
xcss?: XCSSProp;
|
|
1587
|
-
/**
|
|
1588
|
-
* @type string
|
|
1589
|
-
*/
|
|
1590
|
-
role?: PlatformBoxProps['role'];
|
|
1591
|
-
/**
|
|
1592
|
-
* @type ForgeComponent
|
|
1593
|
-
*/
|
|
1594
|
-
children?: PlatformBoxProps['children'];
|
|
1595
1597
|
};
|
|
1596
1598
|
/**
|
|
1597
1599
|
* A box is a generic container that provides managed access to design tokens.
|
|
@@ -3,32 +3,27 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Extract component prop types from UIKit 2 components - IconProps
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::42b00fe4bc342f0e5c0e6a6bf7b96357>>
|
|
7
7
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
-
* @codegenDependency ../../../../forge-ui/src/components/UIKit/icon/index.tsx <<SignedSource::
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/icon/index.tsx <<SignedSource::3be966703b2c67904c3555642b31a72d>>
|
|
9
9
|
*/
|
|
10
10
|
import type { ActiveTokens } from '@atlaskit/tokens';
|
|
11
|
-
export type IconNext = 'add' | 'app-switcher' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'attachment' | 'audio' | 'backlog' | 'board' | 'calendar' | 'camera' | 'checkbox-indeterminate' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | '
|
|
11
|
+
export type IconNext = 'add' | 'app-switcher' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'attachment' | 'audio' | 'backlog' | 'board' | 'calendar' | 'camera' | 'checkbox-indeterminate' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'comment' | 'component' | 'copy' | 'cross-circle' | 'cross' | 'dashboard' | 'decision' | 'department' | 'download' | 'edit' | 'email' | 'emoji-add' | 'emoji' | 'feedback' | 'file' | 'filter' | 'flag-filled' | 'home' | 'image' | 'lightbulb' | 'link' | 'location' | 'marketplace' | 'menu' | 'notification' | 'office-building' | 'page' | 'people-group' | 'person' | 'premium' | 'question-circle' | 'redo' | 'refresh' | 'retry' | 'roadmap' | 'screen' | 'search' | 'send' | 'settings' | 'share' | 'sprint' | 'stopwatch' | 'task' | 'teams' | 'undo' | 'accessibility' | 'ai-agent' | 'ai-chat' | 'ai-generative-text-summary' | 'alert' | 'align-image-center' | 'align-image-left' | 'align-image-right' | 'align-text-center' | 'align-text-left' | 'align-text-right' | 'angle-brackets' | 'api' | 'app' | 'app-switcher-legacy' | 'apps' | 'archive-box' | 'arrow-down-left' | 'arrow-down-right' | 'arrow-up-left' | 'arrow-up-right' | 'assets' | 'atlassian-intelligence' | 'automation' | 'basketball' | 'boards' | 'book-with-bookmark' | 'border' | 'branch' | 'briefcase' | 'bug' | 'calendar-plus' | 'capture' | 'card' | 'cash' | 'changes' | 'chart-bar' | 'chart-bubble' | 'chart-matrix' | 'chart-pie' | 'chart-trend' | 'chart-trend-down' | 'chart-trend-up' | 'chat-widget' | 'check-circle-unchecked' | 'check-mark' | 'checkbox-checked' | 'checkbox-unchecked' | 'chevron-double-left' | 'chevron-double-right' | 'child-work-items' | 'clipboard' | 'clock' | 'close' | 'cloud-arrow-up' | 'collapse-horizontal' | 'collapse-vertical' | 'comment-add' | 'commit' | 'compass' | 'content-width-narrow' | 'content-width-wide' | 'content-wrap-left' | 'content-wrap-right' | 'credit-card' | 'curly-brackets' | 'customize' | 'data-flow' | 'data-number' | 'data-string' | 'database' | 'defect' | 'delete' | 'device-mobile' | 'devices' | 'discovery' | 'drag-handle-horizontal' | 'drag-handle-vertical' | 'edit-bulk' | 'emoji-casual' | 'emoji-neutral' | 'emoji-remove' | 'epic' | 'exclamation-square' | 'expand-horizontal' | 'expand-vertical' | 'eye-open' | 'eye-open-filled' | 'eye-open-strikethrough' | 'feed' | 'field' | 'field-alert' | 'field-checkbox-group' | 'field-dropdown' | 'field-radio-group' | 'files' | 'flag' | 'flask' | 'focus-area' | 'folder-closed' | 'folder-open' | 'form' | 'fullscreen-enter' | 'fullscreen-exit' | 'glasses' | 'globe' | 'goal' | 'grid' | 'grow-diagonal' | 'grow-horizontal' | 'grow-vertical' | 'hashtag' | 'headphones' | 'heart' | 'highlight' | 'image-fullscreen' | 'image-inline' | 'image-scaled' | 'inbox' | 'incident' | 'information' | 'information-circle' | 'key-result' | 'layout-one-column' | 'layout-three-columns' | 'layout-three-columns-sidebars' | 'layout-two-columns' | 'layout-two-columns-sidebar-left' | 'layout-two-columns-sidebar-right' | 'library' | 'link-broken' | 'link-external' | 'list-bulleted' | 'list-checklist' | 'list-numbered' | 'lobby-bell' | 'lock-locked' | 'lock-unlocked' | 'log-in' | 'log-out' | 'magic-wand' | 'markdown' | 'maximize' | 'megaphone' | 'merge-failure' | 'merge-success' | 'microphone' | 'minimize' | 'minus' | 'minus-square' | 'node' | 'note' | 'notification-muted' | 'objective' | 'on-call' | 'operations' | 'pages' | 'paint-bucket' | 'paint-palette' | 'panel-left' | 'panel-right' | 'pen' | 'person-add' | 'person-added' | 'person-avatar' | 'person-offboard' | 'person-remove' | 'person-warning' | 'phone' | 'pin' | 'pin-filled' | 'plus-square' | 'power-plug' | 'presenter-mode' | 'printer' | 'priority-blocker' | 'priority-critical' | 'priority-high' | 'priority-highest' | 'priority-low' | 'priority-lowest' | 'priority-major' | 'priority-medium' | 'priority-minor' | 'priority-trivial' | 'problem' | 'project' | 'project-status' | 'projection-screen' | 'pull-request' | 'pulse' | 'quotation-mark' | 'radio-checked' | 'radio-unchecked' | 'release' | 'rovo-chat' | 'scales' | 'scorecard' | 'screen-plus' | 'shapes' | 'shield' | 'shield-strikethrough' | 'show-more-horizontal' | 'show-more-vertical' | 'shrink-diagonal' | 'shrink-horizontal' | 'shrink-vertical' | 'sidebar-collapse' | 'sidebar-expand' | 'smart-link' | 'smart-link-card' | 'smart-link-embed' | 'smart-link-inline' | 'smart-link-list' | 'snippet' | 'sort-ascending' | 'sort-descending' | 'spreadsheet' | 'star-starred' | 'star-unstarred' | 'status-discovery' | 'status-error' | 'status-information' | 'status-success' | 'status-verified' | 'status-warning' | 'story' | 'stroke-weight-extra-large' | 'stroke-weight-large' | 'stroke-weight-medium' | 'stroke-weight-small' | 'subtasks' | 'success' | 'support' | 'table-cell-clear' | 'table-cell-merge' | 'table-cell-split' | 'table-column-add-left' | 'table-column-add-right' | 'table-column-delete' | 'table-column-move-left' | 'table-column-move-right' | 'table-columns-distribute' | 'table-row-add-above' | 'table-row-add-below' | 'table-row-delete' | 'table-row-move-down' | 'table-row-move-up' | 'tag' | 'takeout-food' | 'target' | 'task-in-progress' | 'task-to-do' | 'tasks' | 'text' | 'text-bold' | 'text-heading' | 'text-indent-left' | 'text-indent-right' | 'text-italic' | 'text-shorten' | 'text-spellcheck' | 'text-strikethrough' | 'text-style' | 'text-underline' | 'text-wrap' | 'theme' | 'thumbs-down' | 'thumbs-up' | 'timeline' | 'tools' | 'transition' | 'translate' | 'tree' | 'vehicle-car' | 'video' | 'video-next' | 'video-next-overlay' | 'video-pause' | 'video-pause-overlay' | 'video-play' | 'video-play-overlay' | 'video-previous' | 'video-previous-overlay' | 'video-skip-backward-fifteen' | 'video-skip-backward-ten' | 'video-skip-forward-fifteen' | 'video-skip-forward-ten' | 'video-stop' | 'video-stop-overlay' | 'volume-high' | 'volume-low' | 'volume-muted' | 'whiteboard' | 'work-item' | 'work-items' | 'zoom-in' | 'zoom-out';
|
|
12
12
|
export type IconRemoved = 'billing-filled' | 'billing' | 'bitbucket-builds' | 'bitbucket-clone' | 'bitbucket-compare' | 'bitbucket-forks' | 'bitbucket-output' | 'bitbucket-pipelines' | 'camera-rotate' | 'camera-take-picture' | 'canvas' | 'hipchat-chevron-double-down' | 'hipchat-chevron-double-up' | 'dropbox' | 'editor-addon' | 'editor-advanced' | 'editor-file-preview' | 'editor-image-border' | 'editor-remove-emoji' | 'editor-strikethrough' | 'editor-table-display-options' | 'editor-text-color' | 'editor-underline' | 'emoji-atlassian' | 'folder-filled' | 'following' | 'googledrive' | 'gsuite' | 'highlights' | 'image-border' | 'jira-failed-build-status' | 'list' | 'hipchat-media-attachment-count' | 'media-services-annotate' | 'media-services-arrow' | 'media-services-blur' | 'media-services-brush' | 'media-services-button-option' | 'media-services-line-thickness' | 'media-services-no-image' | 'media-services-open-mediaviewer' | 'media-services-oval' | 'media-services-pdf' | 'media-services-rectangle' | 'media-services-text' | 'media-services-unknown' | 'media-services-zip' | 'mention' | 'notification-all' | 'pdf' | 'person-with-circle' | 'person-with-cross' | 'portfolio' | 'presence-active' | 'presence-busy' | 'presence-unavailable' | 'status' | 'vid-audio-muted' | 'vid-backward' | 'vid-camera-off' | 'vid-connection-circle' | 'vid-forward' | 'vid-hang-up' | 'vid-hd-circle' | 'vid-raised-hand' | 'vid-share-screen' | 'vid-speaking-circle';
|
|
13
|
-
export type IconReplaced = 'activity' | 'add-circle' | 'add-item' | 'addon' | 'editor-align-center' | 'editor-align-left' | 'editor-align-right' | 'app-access' | 'archive' | 'arrow-down-circle' | 'arrow-left-circle' | 'arrow-right-circle' | 'arrow-up-circle' | 'audio-circle' | 'hipchat-audio-only' | 'bitbucket-branches' | 'bitbucket-commits' | 'bitbucket-pullrequests' | 'bitbucket-repos' | 'bitbucket-snippets' | 'bitbucket-source' | 'book' | 'bullet-list' | 'calendar-filled' | 'camera-filled' | 'checkbox' | 'check-circle' | 'check-circle-outline' | 'check' | 'chevron-down-circle' | 'hipchat-chevron-down' | 'chevron-left-circle' | 'chevron-left-large' | 'chevron-right-circle' | 'chevron-right-large' | 'chevron-up-circle' | 'hipchat-chevron-up' | '
|
|
13
|
+
export type IconReplaced = 'activity' | 'add-circle' | 'add-item' | 'addon' | 'editor-align-center' | 'editor-align-left' | 'editor-align-right' | 'app-access' | 'archive' | 'arrow-down-circle' | 'arrow-left-circle' | 'arrow-right-circle' | 'arrow-up-circle' | 'audio-circle' | 'hipchat-audio-only' | 'bitbucket-branches' | 'bitbucket-commits' | 'bitbucket-pullrequests' | 'bitbucket-repos' | 'bitbucket-snippets' | 'bitbucket-source' | 'book' | 'bullet-list' | 'calendar-filled' | 'camera-filled' | 'checkbox' | 'check-circle' | 'check-circle-outline' | 'check' | 'chevron-down-circle' | 'hipchat-chevron-down' | 'chevron-left-circle' | 'chevron-left-large' | 'chevron-right-circle' | 'chevron-right-large' | 'chevron-up-circle' | 'hipchat-chevron-up' | 'child-issues' | 'code' | 'creditcard-filled' | 'creditcard' | 'detail-view' | 'hipchat-dial-out' | 'discover-filled' | 'discover' | 'document-filled' | 'document' | 'documents' | 'drag-handler' | 'edit-filled' | 'editor-add' | 'editor-align-image-center' | 'editor-align-image-left' | 'editor-align-image-right' | 'editor-attachment' | 'editor-background-color' | 'editor-bold' | 'editor-bullet-list' | 'editor-close' | 'editor-code' | 'editor-collapse' | 'editor-date' | 'editor-decision' | 'editor-divider' | 'editor-done' | 'editor-edit' | 'editor-emoji' | 'editor-error' | 'editor-expand' | 'editor-feedback' | 'editor-file' | 'editor-help' | 'editor-hint' | 'editor-horizontal-rule' | 'editor-image' | 'editor-image-resize' | 'editor-indent' | 'editor-info' | 'editor-italic' | 'editor-layout-single' | 'editor-layout-three-equal' | 'editor-layout-three-with-sidebars' | 'editor-layout-two-equal' | 'editor-layout-two-left-sidebar' | 'editor-layout-two-right-sidebar' | 'editor-link' | 'editor-media-center' | 'editor-media-full-width' | 'editor-media-wide' | 'editor-media-wrap-left' | 'editor-media-wrap-right' | 'editor-mention' | 'editor-more' | 'editor-note' | 'editor-number-list' | 'editor-open' | 'editor-outdent' | 'editor-panel' | 'editor-photo' | 'editor-quote' | 'editor-recent' | 'editor-redo' | 'editor-remove' | 'editor-search' | 'editor-settings' | 'editor-success' | 'editor-table' | 'editor-task' | 'editor-text-style' | 'editor-undo' | 'editor-unlink' | 'editor-warning' | 'emoji-activity' | 'emoji-custom' | 'emoji-emoji' | 'emoji-flags' | 'emoji-food' | 'emoji-frequent' | 'emoji-keyboard' | 'emoji-nature' | 'emoji-objects' | 'emoji-people' | 'emoji-productivity' | 'emoji-symbols' | 'emoji-travel' | 'error' | 'export' | 'folder' | 'followers' | 'graph-bar' | 'graph-line' | 'home-circle' | 'image-resize' | 'info' | 'invite-team' | 'issue' | 'issue-raise' | 'issues' | 'jira-capture' | 'jira-labs' | 'jira-test-session' | 'label' | 'lightbulb-filled' | 'like' | 'link-filled' | 'hipchat-lobby' | 'lock-circle' | 'lock-filled' | 'lock' | 'media-services-actual-size' | 'media-services-add-comment' | 'media-services-audio' | 'media-services-code' | 'media-services-document' | 'media-services-filter' | 'media-services-fit-to-page' | 'media-services-full-screen' | 'media-services-grid' | 'media-services-image' | 'media-services-line' | 'media-services-preselected' | 'media-services-presentation' | 'media-services-scale-large' | 'media-services-scale-small' | 'media-services-spreadsheet' | 'media-services-video' | 'media-services-zoom-in' | 'media-services-zoom-out' | 'menu-expand' | 'mobile' | 'more' | 'more-vertical' | 'notification-direct' | 'office-building-filled' | 'open' | 'hipchat-outgoing-sound' | 'overview' | 'page-filled' | 'people' | 'person-circle' | 'person-with-tick' | 'preferences' | 'question' | 'questions' | 'queues' | 'quote' | 'radio' | 'recent' | 'room-menu' | 'schedule-filled' | 'schedule' | 'hipchat-sd-video' | 'select-clear' | 'ship' | 'shortcut' | 'sign-in' | 'sign-out' | 'star-filled' | 'star' | 'star-large' | 'subtask' | 'suitcase' | 'switcher' | 'table' | 'trash' | 'tray' | 'unlink' | 'unlock-circle' | 'unlock-filled' | 'unlock' | 'upload' | 'user-avatar-circle' | 'vid-audio-on' | 'vid-camera-on' | 'video-circle' | 'video-filled' | 'vid-full-screen-off' | 'vid-full-screen-on' | 'vid-pause' | 'vid-play' | 'vid-volume-full' | 'vid-volume-half' | 'vid-volume-muted' | 'warning' | 'watch-filled' | 'watch' | 'world' | 'world-small';
|
|
14
14
|
type Glyph = IconNext | IconRemoved | IconReplaced;
|
|
15
15
|
export type IconColor = Extract<ActiveTokens, `color.${string}`>;
|
|
16
|
-
export
|
|
16
|
+
export type IconProps = {
|
|
17
|
+
color?: IconColor;
|
|
17
18
|
/**
|
|
18
|
-
*
|
|
19
|
-
* This pixel size refers to the canvas the icon sits on, not the size of the icon shape itself.
|
|
19
|
+
* Name of the icon to be rendered.
|
|
20
20
|
*/
|
|
21
|
-
|
|
21
|
+
glyph: Glyph;
|
|
22
22
|
/**
|
|
23
23
|
* Text used to describe what the icon is in context. A label is needed when there is no pairing visible text next to the icon.
|
|
24
24
|
* An empty string marks the icon as presentation only.
|
|
25
25
|
*/
|
|
26
26
|
label: string;
|
|
27
|
-
/**
|
|
28
|
-
* Name of the icon to be rendered.
|
|
29
|
-
*/
|
|
30
|
-
glyph: Glyph;
|
|
31
|
-
color?: IconColor;
|
|
32
27
|
/**
|
|
33
28
|
* @deprecated the "primaryColor" prop is deprecated and will be removed on the 22nd of December 2025. Please use the "color" prop instead. For more information, visit: https://developer.atlassian.com/platform/forge/ui-kit/components/icon/.
|
|
34
29
|
*/
|
|
@@ -38,7 +33,12 @@ export interface IconProps {
|
|
|
38
33
|
* @deprecated the "secondaryColor" prop is deprecated and will be removed on the 22nd of December 2025. Please refactor your code to avoid using this prop.
|
|
39
34
|
*/
|
|
40
35
|
secondaryColor?: IconColor;
|
|
41
|
-
|
|
36
|
+
/**
|
|
37
|
+
* There are three icon sizes: `small` (16px), `medium` (24px), and `large` (32px). However "large" is now deprecated and will be removed on the 22nd of December 2025.
|
|
38
|
+
* This pixel size refers to the canvas the icon sits on, not the size of the icon shape itself.
|
|
39
|
+
*/
|
|
40
|
+
size?: 'small' | 'medium' | 'large';
|
|
41
|
+
};
|
|
42
42
|
/**
|
|
43
43
|
* An icon is a visual representation of a command, device, directory, or common action.
|
|
44
44
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/forge-react-types",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.49.1",
|
|
4
4
|
"description": "Component types for Forge UI Kit React components",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
"@atlaskit/comment": "^13.1.0",
|
|
26
26
|
"@atlaskit/datetime-picker": "^17.1.0",
|
|
27
27
|
"@atlaskit/dynamic-table": "^18.3.0",
|
|
28
|
-
"@atlaskit/form": "^14.
|
|
28
|
+
"@atlaskit/form": "^14.3.0",
|
|
29
29
|
"@atlaskit/inline-edit": "^15.3.0",
|
|
30
30
|
"@atlaskit/modal-dialog": "^14.7.0",
|
|
31
|
-
"@atlaskit/navigation-system": "^5.
|
|
31
|
+
"@atlaskit/navigation-system": "^5.10.0",
|
|
32
32
|
"@atlaskit/popup": "^4.6.0",
|
|
33
|
-
"@atlaskit/primitives": "^16.
|
|
33
|
+
"@atlaskit/primitives": "^16.4.0",
|
|
34
34
|
"@atlaskit/progress-bar": "^4.0.0",
|
|
35
35
|
"@atlaskit/progress-tracker": "^10.3.0",
|
|
36
36
|
"@atlaskit/radio": "^8.3.0",
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
"@atlaskit/textarea": "^8.1.0",
|
|
44
44
|
"@atlaskit/textfield": "^8.1.0",
|
|
45
45
|
"@atlaskit/toggle": "^15.1.0",
|
|
46
|
-
"@atlaskit/tokens": "^8.
|
|
47
|
-
"@atlaskit/tooltip": "^20.
|
|
46
|
+
"@atlaskit/tokens": "^8.4.0",
|
|
47
|
+
"@atlaskit/tooltip": "^20.10.0",
|
|
48
48
|
"@babel/runtime": "^7.0.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@atlassian/codegen": "^0.1.0",
|
|
55
|
-
"@atlassian/forge-ui": "^32.
|
|
55
|
+
"@atlassian/forge-ui": "^32.52.0",
|
|
56
56
|
"@types/node": "~22.17.1",
|
|
57
57
|
"lodash": "^4.17.21",
|
|
58
58
|
"react": "^18.2.0",
|
|
@@ -195,6 +195,7 @@ class ImportDeclarationProxy implements IImportDeclaration {
|
|
|
195
195
|
.map((text) => text.trim());
|
|
196
196
|
|
|
197
197
|
if (isSharedUIKit2TypesImport(this.base)) {
|
|
198
|
+
// Map shared UIKit type imports to types.codegen
|
|
198
199
|
packageName = './types.codegen';
|
|
199
200
|
}
|
|
200
201
|
|
|
@@ -245,12 +246,11 @@ class SimpleImportDeclaration implements IImportDeclaration {
|
|
|
245
246
|
|
|
246
247
|
// handles type imports from platform/packages/forge/forge-ui/src/components/UIKit/types.ts
|
|
247
248
|
const isSharedUIKit2TypesImport = (importDeclaration: ImportDeclaration) => {
|
|
249
|
+
const fileName = importDeclaration.getModuleSpecifierValue().split('/').pop();
|
|
248
250
|
return (
|
|
249
251
|
importDeclaration.isTypeOnly() &&
|
|
250
|
-
// file is a relative import
|
|
251
252
|
importDeclaration.getModuleSpecifierValue().charAt(0) === '.' &&
|
|
252
|
-
|
|
253
|
-
importDeclaration.getModuleSpecifierValue().split('/').pop() === 'types'
|
|
253
|
+
fileName === 'types'
|
|
254
254
|
);
|
|
255
255
|
};
|
|
256
256
|
|
|
@@ -221,7 +221,7 @@ const generateComponentPropTypes = (componentNames?: string) => {
|
|
|
221
221
|
})
|
|
222
222
|
.sort((a, b) => a.getName().localeCompare(b.getName()));
|
|
223
223
|
|
|
224
|
-
// generate
|
|
224
|
+
// generate shared files first
|
|
225
225
|
generateSharedTypesFile(componentOutputDir);
|
|
226
226
|
|
|
227
227
|
generateComponentPropTypeSourceFiles(componentOutputDir, componentPropTypeSymbols);
|
package/scripts/typechecker.ts
CHANGED
|
@@ -10,6 +10,7 @@ import {
|
|
|
10
10
|
type HeadingProps,
|
|
11
11
|
type LozengeProps,
|
|
12
12
|
type RangeProps,
|
|
13
|
+
type IconProps,
|
|
13
14
|
} from '@atlassian/forge-ui/src/components/UIKit';
|
|
14
15
|
import { type BadgeProps as GeneratedBadgeProps } from '../src/components/__generated__/BadgeProps.codegen';
|
|
15
16
|
import { type CalendarProps as GeneratedCalendarProps } from '../src/components/__generated__/CalendarProps.codegen';
|
|
@@ -21,8 +22,9 @@ import { type ErrorMessageProps as GeneratedErrorMessageProps } from '../src/com
|
|
|
21
22
|
import { type HeadingProps as GeneratedHeadingProps } from '../src/components/__generated__/HeadingProps.codegen';
|
|
22
23
|
import { type LozengeProps as GeneratedLozengeProps } from '../src/components/__generated__/LozengeProps.codegen';
|
|
23
24
|
import { type RangeProps as GeneratedRangeProps } from '../src/components/__generated__/RangeProps.codegen';
|
|
25
|
+
import { type IconProps as GeneratedIconProps } from '../src/components/__generated__/IconProps.codegen';
|
|
24
26
|
|
|
25
|
-
const assertAssignable = <A, B extends A>() => {};
|
|
27
|
+
const assertAssignable = <A, B extends A>() => { };
|
|
26
28
|
|
|
27
29
|
assertAssignable<GeneratedBadgeProps, BadgeProps>();
|
|
28
30
|
assertAssignable<BadgeProps, GeneratedBadgeProps>();
|
|
@@ -53,3 +55,6 @@ assertAssignable<ErrorMessageProps, GeneratedErrorMessageProps>();
|
|
|
53
55
|
|
|
54
56
|
assertAssignable<GeneratedLozengeProps, LozengeProps>();
|
|
55
57
|
assertAssignable<LozengeProps, GeneratedLozengeProps>();
|
|
58
|
+
|
|
59
|
+
assertAssignable<GeneratedIconProps, IconProps>();
|
|
60
|
+
assertAssignable<IconProps, GeneratedIconProps>();
|