@atlaskit/ds-explorations 0.1.2 → 0.1.4
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 +12 -0
- package/dist/cjs/components/text.partial.js +1 -3
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/text.partial.js +1 -3
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/text.partial.js +1 -3
- package/dist/esm/version.json +1 -1
- package/dist/types-ts4.0/components/box.partial.d.ts +213 -0
- package/dist/types-ts4.0/components/inline.partial.d.ts +52 -0
- package/dist/types-ts4.0/components/interaction-surface.partial.d.ts +45 -0
- package/dist/types-ts4.0/components/stack.partial.d.ts +47 -0
- package/dist/types-ts4.0/components/surface-provider.d.ts +15 -0
- package/dist/types-ts4.0/components/text.partial.d.ts +132 -0
- package/dist/types-ts4.0/components/types.d.ts +13 -0
- package/dist/types-ts4.0/constants.d.ts +15 -0
- package/dist/types-ts4.0/index.d.ts +8 -0
- package/dist/types-ts4.0/internal/color-map.d.ts +34 -0
- package/dist/types-ts4.0/internal/role-to-element.d.ts +32 -0
- package/package.json +12 -5
- package/report.api.md +232 -269
- package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +18 -0
- package/src/components/interaction-surface.partial.tsx +19 -1
- package/src/components/text.partial.tsx +1 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/ds-explorations
|
|
2
2
|
|
|
3
|
+
## 0.1.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
|
|
8
|
+
|
|
9
|
+
## 0.1.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`d6328e5e1ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6328e5e1ec) - Removes the default values for `<Text />`.
|
|
14
|
+
|
|
3
15
|
## 0.1.2
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -124,8 +124,6 @@ var truncateStyles = (0, _react.css)({
|
|
|
124
124
|
*/
|
|
125
125
|
|
|
126
126
|
var Text = function Text(_ref) {
|
|
127
|
-
var _colorMap$surface;
|
|
128
|
-
|
|
129
127
|
var _ref$as = _ref.as,
|
|
130
128
|
Component = _ref$as === void 0 ? 'span' : _ref$as,
|
|
131
129
|
children = _ref.children,
|
|
@@ -145,7 +143,7 @@ var Text = function Text(_ref) {
|
|
|
145
143
|
var _ref2 = colorTuple || [],
|
|
146
144
|
_ref3 = (0, _slicedToArray2.default)(_ref2, 2),
|
|
147
145
|
_ref3$ = _ref3[0],
|
|
148
|
-
color = _ref3$ === void 0 ?
|
|
146
|
+
color = _ref3$ === void 0 ? _colorMap.colorMap[surface] : _ref3$,
|
|
149
147
|
fallback = _ref3[1];
|
|
150
148
|
|
|
151
149
|
(0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
|
package/dist/cjs/version.json
CHANGED
|
@@ -117,11 +117,9 @@ const Text = ({
|
|
|
117
117
|
testId,
|
|
118
118
|
UNSAFE_style
|
|
119
119
|
}) => {
|
|
120
|
-
var _colorMap$surface;
|
|
121
|
-
|
|
122
120
|
const surface = useSurface(); // @ts-ignore
|
|
123
121
|
|
|
124
|
-
const [color =
|
|
122
|
+
const [color = colorMap[surface], fallback] = colorTuple || [];
|
|
125
123
|
invariant(asAllowlist.includes(Component), `@atlaskit/ds-explorations: Text received an invalid "as" value of "${Component}"`);
|
|
126
124
|
return jsx(Component, {
|
|
127
125
|
style: { ...UNSAFE_style,
|
package/dist/es2019/version.json
CHANGED
|
@@ -111,8 +111,6 @@ var truncateStyles = css({
|
|
|
111
111
|
*/
|
|
112
112
|
|
|
113
113
|
var Text = function Text(_ref) {
|
|
114
|
-
var _colorMap$surface;
|
|
115
|
-
|
|
116
114
|
var _ref$as = _ref.as,
|
|
117
115
|
Component = _ref$as === void 0 ? 'span' : _ref$as,
|
|
118
116
|
children = _ref.children,
|
|
@@ -132,7 +130,7 @@ var Text = function Text(_ref) {
|
|
|
132
130
|
var _ref2 = colorTuple || [],
|
|
133
131
|
_ref3 = _slicedToArray(_ref2, 2),
|
|
134
132
|
_ref3$ = _ref3[0],
|
|
135
|
-
color = _ref3$ === void 0 ?
|
|
133
|
+
color = _ref3$ === void 0 ? colorMap[surface] : _ref3$,
|
|
136
134
|
fallback = _ref3[1];
|
|
137
135
|
|
|
138
136
|
invariant(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
|
package/dist/esm/version.json
CHANGED
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { ElementType, HTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
import { GlobalSpacingToken } from '../constants';
|
|
4
|
+
import { BasePrimitiveProps } from './types';
|
|
5
|
+
export interface BoxProps<T extends HTMLElement = HTMLElement> extends Omit<HTMLAttributes<T>, 'style' | 'as' | 'className'>, BasePrimitiveProps {
|
|
6
|
+
/**
|
|
7
|
+
* The DOM element to render as the Box. Defaults to `div`.
|
|
8
|
+
*/
|
|
9
|
+
as?: ElementType;
|
|
10
|
+
/**
|
|
11
|
+
* Elements to be rendered inside the Box.
|
|
12
|
+
*/
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* The html className attribute.
|
|
16
|
+
*
|
|
17
|
+
* Before using this prop please ensure:
|
|
18
|
+
* - The styles cannot otherwise be achieved through `Box` directly.
|
|
19
|
+
* - The use case needs custom styles that cannot be designed or implemented differently
|
|
20
|
+
*
|
|
21
|
+
* Ensure you're using the `@atlaskit/eslint-plugin-design-system` with this prop to prevent unbounded usage.
|
|
22
|
+
*
|
|
23
|
+
* @see `@atlaskit/eslint-plugin-design-system`
|
|
24
|
+
*/
|
|
25
|
+
className?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Token representing background color with a fallback.
|
|
28
|
+
*/
|
|
29
|
+
backgroundColor?: [
|
|
30
|
+
BackgroundColor,
|
|
31
|
+
string
|
|
32
|
+
];
|
|
33
|
+
/**
|
|
34
|
+
* Defines border style.
|
|
35
|
+
*/
|
|
36
|
+
borderStyle?: BorderStyle;
|
|
37
|
+
/**
|
|
38
|
+
* Defines border width.
|
|
39
|
+
*/
|
|
40
|
+
borderWidth?: BorderWidth;
|
|
41
|
+
/**
|
|
42
|
+
* Token representing border color with a fallback.
|
|
43
|
+
*/
|
|
44
|
+
borderColor?: [
|
|
45
|
+
BorderColor,
|
|
46
|
+
string
|
|
47
|
+
];
|
|
48
|
+
/**
|
|
49
|
+
* Defines border radius.
|
|
50
|
+
*/
|
|
51
|
+
borderRadius?: BorderRadius;
|
|
52
|
+
/**
|
|
53
|
+
* Defines the main axis direction.
|
|
54
|
+
*/
|
|
55
|
+
flexDirection?: FlexDirection;
|
|
56
|
+
/**
|
|
57
|
+
* Used to align children along the cross axis.
|
|
58
|
+
*/
|
|
59
|
+
alignItems?: FlexAlignItems;
|
|
60
|
+
/**
|
|
61
|
+
* Used to align children along the main axis.
|
|
62
|
+
*/
|
|
63
|
+
justifyContent?: FlexJustifyContent;
|
|
64
|
+
/**
|
|
65
|
+
* Shorthand for `paddingBlock` and `paddingInline` together.
|
|
66
|
+
*
|
|
67
|
+
* @see paddingBlock
|
|
68
|
+
* @see paddingInline
|
|
69
|
+
*/
|
|
70
|
+
padding?: GlobalSpacingToken;
|
|
71
|
+
/**
|
|
72
|
+
* Token representing CSS `padding-block`.
|
|
73
|
+
*/
|
|
74
|
+
paddingBlock?: GlobalSpacingToken;
|
|
75
|
+
/**
|
|
76
|
+
* Token representing CSS `padding-inline`.
|
|
77
|
+
*/
|
|
78
|
+
paddingInline?: GlobalSpacingToken;
|
|
79
|
+
/**
|
|
80
|
+
* Token representing width.
|
|
81
|
+
*/
|
|
82
|
+
width?: GlobalSpacingToken;
|
|
83
|
+
/**
|
|
84
|
+
* Token representing height.
|
|
85
|
+
*/
|
|
86
|
+
height?: GlobalSpacingToken;
|
|
87
|
+
/**
|
|
88
|
+
* Defines display type and layout. Defaults to `flex`.
|
|
89
|
+
*/
|
|
90
|
+
display?: Display;
|
|
91
|
+
/**
|
|
92
|
+
* CSS position property.
|
|
93
|
+
*/
|
|
94
|
+
position?: keyof typeof positionMap;
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* __Box__
|
|
98
|
+
*
|
|
99
|
+
* Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
|
|
100
|
+
* Renders a `div` by default.
|
|
101
|
+
*
|
|
102
|
+
* @internal
|
|
103
|
+
*/
|
|
104
|
+
declare const Box: import("react").ForwardRefExoticComponent<BoxProps<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
|
|
105
|
+
export default Box;
|
|
106
|
+
declare type BorderStyle = keyof typeof borderStyleMap;
|
|
107
|
+
declare const borderStyleMap: {
|
|
108
|
+
none: import("@emotion/react").SerializedStyles;
|
|
109
|
+
solid: import("@emotion/react").SerializedStyles;
|
|
110
|
+
dashed: import("@emotion/react").SerializedStyles;
|
|
111
|
+
dotted: import("@emotion/react").SerializedStyles;
|
|
112
|
+
};
|
|
113
|
+
declare type BorderWidth = keyof typeof borderWidthMap;
|
|
114
|
+
declare const borderWidthMap: {
|
|
115
|
+
'0px': import("@emotion/react").SerializedStyles;
|
|
116
|
+
'1px': import("@emotion/react").SerializedStyles;
|
|
117
|
+
'2px': import("@emotion/react").SerializedStyles;
|
|
118
|
+
'3px': import("@emotion/react").SerializedStyles;
|
|
119
|
+
};
|
|
120
|
+
declare type BorderRadius = keyof typeof borderRadiusMap;
|
|
121
|
+
declare const borderRadiusMap: {
|
|
122
|
+
normal: import("@emotion/react").SerializedStyles;
|
|
123
|
+
rounded: import("@emotion/react").SerializedStyles;
|
|
124
|
+
badge: import("@emotion/react").SerializedStyles;
|
|
125
|
+
};
|
|
126
|
+
declare type FlexDirection = keyof typeof flexDirectionMap;
|
|
127
|
+
declare const flexDirectionMap: {
|
|
128
|
+
column: import("@emotion/react").SerializedStyles;
|
|
129
|
+
row: import("@emotion/react").SerializedStyles;
|
|
130
|
+
};
|
|
131
|
+
declare type FlexAlignItems = keyof typeof flexAlignItemsMap;
|
|
132
|
+
declare const flexAlignItemsMap: {
|
|
133
|
+
center: import("@emotion/react").SerializedStyles;
|
|
134
|
+
baseline: import("@emotion/react").SerializedStyles;
|
|
135
|
+
flexStart: import("@emotion/react").SerializedStyles;
|
|
136
|
+
flexEnd: import("@emotion/react").SerializedStyles;
|
|
137
|
+
};
|
|
138
|
+
declare type FlexJustifyContent = keyof typeof flexJustifyContentMap;
|
|
139
|
+
declare const flexJustifyContentMap: {
|
|
140
|
+
center: import("@emotion/react").SerializedStyles;
|
|
141
|
+
flexStart: import("@emotion/react").SerializedStyles;
|
|
142
|
+
flexEnd: import("@emotion/react").SerializedStyles;
|
|
143
|
+
};
|
|
144
|
+
declare type Display = keyof typeof displayMap;
|
|
145
|
+
declare const displayMap: {
|
|
146
|
+
block: import("@emotion/react").SerializedStyles;
|
|
147
|
+
inline: import("@emotion/react").SerializedStyles;
|
|
148
|
+
flex: import("@emotion/react").SerializedStyles;
|
|
149
|
+
inlineFlex: import("@emotion/react").SerializedStyles;
|
|
150
|
+
};
|
|
151
|
+
declare const positionMap: {
|
|
152
|
+
absolute: import("@emotion/react").SerializedStyles;
|
|
153
|
+
relative: import("@emotion/react").SerializedStyles;
|
|
154
|
+
static: import("@emotion/react").SerializedStyles;
|
|
155
|
+
};
|
|
156
|
+
/**
|
|
157
|
+
* @codegenEnd
|
|
158
|
+
*/
|
|
159
|
+
/**
|
|
160
|
+
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
161
|
+
* @codegen <<SignedSource::ebb55786a54803214357d0eef0cac448>>
|
|
162
|
+
* @codegenId colors
|
|
163
|
+
* @codegenCommand yarn codegen-styles
|
|
164
|
+
* @codegenParams ["border", "background"]
|
|
165
|
+
*/
|
|
166
|
+
declare const borderColorMap: {
|
|
167
|
+
'color.border': import("@emotion/react").SerializedStyles;
|
|
168
|
+
bold: import("@emotion/react").SerializedStyles;
|
|
169
|
+
inverse: import("@emotion/react").SerializedStyles;
|
|
170
|
+
focused: import("@emotion/react").SerializedStyles;
|
|
171
|
+
input: import("@emotion/react").SerializedStyles;
|
|
172
|
+
disabled: import("@emotion/react").SerializedStyles;
|
|
173
|
+
brand: import("@emotion/react").SerializedStyles;
|
|
174
|
+
selected: import("@emotion/react").SerializedStyles;
|
|
175
|
+
danger: import("@emotion/react").SerializedStyles;
|
|
176
|
+
warning: import("@emotion/react").SerializedStyles;
|
|
177
|
+
success: import("@emotion/react").SerializedStyles;
|
|
178
|
+
discovery: import("@emotion/react").SerializedStyles;
|
|
179
|
+
information: import("@emotion/react").SerializedStyles;
|
|
180
|
+
};
|
|
181
|
+
export declare type BorderColor = keyof typeof borderColorMap;
|
|
182
|
+
declare const backgroundColorMap: {
|
|
183
|
+
disabled: import("@emotion/react").SerializedStyles;
|
|
184
|
+
'inverse.subtle': import("@emotion/react").SerializedStyles;
|
|
185
|
+
input: import("@emotion/react").SerializedStyles;
|
|
186
|
+
neutral: import("@emotion/react").SerializedStyles;
|
|
187
|
+
'neutral.subtle': import("@emotion/react").SerializedStyles;
|
|
188
|
+
'neutral.bold': import("@emotion/react").SerializedStyles;
|
|
189
|
+
'brand.bold': import("@emotion/react").SerializedStyles;
|
|
190
|
+
selected: import("@emotion/react").SerializedStyles;
|
|
191
|
+
'selected.bold': import("@emotion/react").SerializedStyles;
|
|
192
|
+
danger: import("@emotion/react").SerializedStyles;
|
|
193
|
+
'danger.bold': import("@emotion/react").SerializedStyles;
|
|
194
|
+
warning: import("@emotion/react").SerializedStyles;
|
|
195
|
+
'warning.bold': import("@emotion/react").SerializedStyles;
|
|
196
|
+
success: import("@emotion/react").SerializedStyles;
|
|
197
|
+
'success.bold': import("@emotion/react").SerializedStyles;
|
|
198
|
+
discovery: import("@emotion/react").SerializedStyles;
|
|
199
|
+
'discovery.bold': import("@emotion/react").SerializedStyles;
|
|
200
|
+
information: import("@emotion/react").SerializedStyles;
|
|
201
|
+
'information.bold': import("@emotion/react").SerializedStyles;
|
|
202
|
+
'color.blanket': import("@emotion/react").SerializedStyles;
|
|
203
|
+
'color.blanket.selected': import("@emotion/react").SerializedStyles;
|
|
204
|
+
'color.blanket.danger': import("@emotion/react").SerializedStyles;
|
|
205
|
+
'elevation.surface': import("@emotion/react").SerializedStyles;
|
|
206
|
+
'elevation.surface.sunken': import("@emotion/react").SerializedStyles;
|
|
207
|
+
'elevation.surface.raised': import("@emotion/react").SerializedStyles;
|
|
208
|
+
'elevation.surface.overlay': import("@emotion/react").SerializedStyles;
|
|
209
|
+
};
|
|
210
|
+
export declare type BackgroundColor = keyof typeof backgroundColorMap;
|
|
211
|
+
/**
|
|
212
|
+
* @codegenEnd
|
|
213
|
+
*/
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { GlobalSpacingToken } from '../constants';
|
|
4
|
+
import { BasePrimitiveProps } from './types';
|
|
5
|
+
interface InlineProps extends BasePrimitiveProps {
|
|
6
|
+
/**
|
|
7
|
+
* Used to align children along the cross axis.
|
|
8
|
+
*/
|
|
9
|
+
alignItems?: FlexAlignItems;
|
|
10
|
+
/**
|
|
11
|
+
* Used to align children along the main axis.
|
|
12
|
+
*/
|
|
13
|
+
justifyContent?: FlexJustifyContent;
|
|
14
|
+
/**
|
|
15
|
+
* Token representing gap between children.
|
|
16
|
+
*/
|
|
17
|
+
gap: GlobalSpacingToken;
|
|
18
|
+
/**
|
|
19
|
+
* Renders a divider between children.
|
|
20
|
+
* If a string is provided it will automatically be wrapped in a `<Text>` component.
|
|
21
|
+
*/
|
|
22
|
+
divider?: ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* Elements to be rendered inside the Inline.
|
|
25
|
+
*/
|
|
26
|
+
children: ReactNode;
|
|
27
|
+
}
|
|
28
|
+
declare type FlexAlignItems = keyof typeof flexAlignItemsMap;
|
|
29
|
+
declare const flexAlignItemsMap: {
|
|
30
|
+
center: import("@emotion/react").SerializedStyles;
|
|
31
|
+
baseline: import("@emotion/react").SerializedStyles;
|
|
32
|
+
flexStart: import("@emotion/react").SerializedStyles;
|
|
33
|
+
flexEnd: import("@emotion/react").SerializedStyles;
|
|
34
|
+
};
|
|
35
|
+
declare type FlexJustifyContent = keyof typeof flexJustifyContentMap;
|
|
36
|
+
declare const flexJustifyContentMap: {
|
|
37
|
+
center: import("@emotion/react").SerializedStyles;
|
|
38
|
+
flexStart: import("@emotion/react").SerializedStyles;
|
|
39
|
+
flexEnd: import("@emotion/react").SerializedStyles;
|
|
40
|
+
};
|
|
41
|
+
/**
|
|
42
|
+
* __Inline__
|
|
43
|
+
*
|
|
44
|
+
* Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
|
|
45
|
+
* Renders a `div` by default.
|
|
46
|
+
*
|
|
47
|
+
*/
|
|
48
|
+
declare const Inline: import("react").ForwardRefExoticComponent<InlineProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
49
|
+
export default Inline;
|
|
50
|
+
/**
|
|
51
|
+
* @codegenEnd
|
|
52
|
+
*/
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { jsx } from '@emotion/react';
|
|
4
|
+
import { BasePrimitiveProps } from './types';
|
|
5
|
+
interface InteractionSurfaceProps extends BasePrimitiveProps {
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
appearance?: InteractionBackgroundColor;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```js
|
|
13
|
+
* // a minimal icon button
|
|
14
|
+
* <Box as="button">
|
|
15
|
+
* <InteractionSurface />
|
|
16
|
+
* <WarningIcon label="icon button" />
|
|
17
|
+
* </Box>
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
declare const InteractionSurface: ({ appearance, children, testId, }: InteractionSurfaceProps) => jsx.JSX.Element;
|
|
21
|
+
export default InteractionSurface;
|
|
22
|
+
declare const backgroundHoverColorMap: {
|
|
23
|
+
'inverse.subtle': import("@emotion/react").SerializedStyles;
|
|
24
|
+
input: import("@emotion/react").SerializedStyles;
|
|
25
|
+
neutral: import("@emotion/react").SerializedStyles;
|
|
26
|
+
'neutral.subtle': import("@emotion/react").SerializedStyles;
|
|
27
|
+
'neutral.bold': import("@emotion/react").SerializedStyles;
|
|
28
|
+
'brand.bold': import("@emotion/react").SerializedStyles;
|
|
29
|
+
selected: import("@emotion/react").SerializedStyles;
|
|
30
|
+
'selected.bold': import("@emotion/react").SerializedStyles;
|
|
31
|
+
danger: import("@emotion/react").SerializedStyles;
|
|
32
|
+
'danger.bold': import("@emotion/react").SerializedStyles;
|
|
33
|
+
warning: import("@emotion/react").SerializedStyles;
|
|
34
|
+
'warning.bold': import("@emotion/react").SerializedStyles;
|
|
35
|
+
success: import("@emotion/react").SerializedStyles;
|
|
36
|
+
'success.bold': import("@emotion/react").SerializedStyles;
|
|
37
|
+
discovery: import("@emotion/react").SerializedStyles;
|
|
38
|
+
'discovery.bold': import("@emotion/react").SerializedStyles;
|
|
39
|
+
information: import("@emotion/react").SerializedStyles;
|
|
40
|
+
'information.bold': import("@emotion/react").SerializedStyles;
|
|
41
|
+
};
|
|
42
|
+
declare type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
|
|
43
|
+
/**
|
|
44
|
+
* @codegenEnd
|
|
45
|
+
*/
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { GlobalSpacingToken } from '../constants';
|
|
4
|
+
import { BasePrimitiveProps } from './types';
|
|
5
|
+
interface StackProps extends BasePrimitiveProps {
|
|
6
|
+
/**
|
|
7
|
+
* Used to align children along the cross axis.
|
|
8
|
+
*/
|
|
9
|
+
alignItems?: FlexAlignItems;
|
|
10
|
+
/**
|
|
11
|
+
* Used to align children along the main axis.
|
|
12
|
+
*/
|
|
13
|
+
justifyContent?: FlexJustifyContent;
|
|
14
|
+
/**
|
|
15
|
+
* Token representing gap between children.
|
|
16
|
+
*/
|
|
17
|
+
gap: GlobalSpacingToken;
|
|
18
|
+
/**
|
|
19
|
+
* Elements to be rendered inside the Stack.
|
|
20
|
+
*/
|
|
21
|
+
children: ReactNode;
|
|
22
|
+
}
|
|
23
|
+
declare type FlexAlignItems = keyof typeof flexAlignItemsMap;
|
|
24
|
+
declare const flexAlignItemsMap: {
|
|
25
|
+
center: import("@emotion/react").SerializedStyles;
|
|
26
|
+
baseline: import("@emotion/react").SerializedStyles;
|
|
27
|
+
flexStart: import("@emotion/react").SerializedStyles;
|
|
28
|
+
flexEnd: import("@emotion/react").SerializedStyles;
|
|
29
|
+
};
|
|
30
|
+
declare type FlexJustifyContent = keyof typeof flexJustifyContentMap;
|
|
31
|
+
declare const flexJustifyContentMap: {
|
|
32
|
+
center: import("@emotion/react").SerializedStyles;
|
|
33
|
+
flexStart: import("@emotion/react").SerializedStyles;
|
|
34
|
+
flexEnd: import("@emotion/react").SerializedStyles;
|
|
35
|
+
};
|
|
36
|
+
/**
|
|
37
|
+
* __Stack__
|
|
38
|
+
*
|
|
39
|
+
* Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
|
|
40
|
+
* Renders a `div` by default.
|
|
41
|
+
*
|
|
42
|
+
*/
|
|
43
|
+
declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
44
|
+
export default Stack;
|
|
45
|
+
/**
|
|
46
|
+
* @codegenEnd
|
|
47
|
+
*/
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/**
|
|
3
|
+
* __Surface context__
|
|
4
|
+
*
|
|
5
|
+
* A surface context provides context information on the current background (if set).
|
|
6
|
+
*/
|
|
7
|
+
export declare const SurfaceContext: import("react").Context<"color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.sunken" | "elevation.surface.raised" | "elevation.surface.overlay" | "disabled" | "inverse.subtle" | "input" | "neutral" | "neutral.subtle" | "neutral.bold" | "brand.bold" | "selected" | "selected.bold" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold">;
|
|
8
|
+
/**
|
|
9
|
+
* __useSurface__
|
|
10
|
+
*
|
|
11
|
+
* Return the current surface. If no parent sets a surface color it falls back to the default surface.
|
|
12
|
+
*
|
|
13
|
+
* @see SurfaceContext
|
|
14
|
+
*/
|
|
15
|
+
export declare const useSurface: () => "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.sunken" | "elevation.surface.raised" | "elevation.surface.overlay" | "disabled" | "inverse.subtle" | "input" | "neutral" | "neutral.subtle" | "neutral.bold" | "brand.bold" | "selected" | "selected.bold" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold";
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { FC, ReactNode } from 'react';
|
|
3
|
+
import { BasePrimitiveProps } from './types';
|
|
4
|
+
declare const asAllowlist: readonly [
|
|
5
|
+
"span",
|
|
6
|
+
"div",
|
|
7
|
+
"p"
|
|
8
|
+
];
|
|
9
|
+
declare type AsElement = typeof asAllowlist[number];
|
|
10
|
+
export interface TextProps extends BasePrimitiveProps {
|
|
11
|
+
/**
|
|
12
|
+
* HTML tag to be rendered. Defaults to `span`.
|
|
13
|
+
*/
|
|
14
|
+
as?: AsElement;
|
|
15
|
+
/**
|
|
16
|
+
* Elements rendered within the Text element
|
|
17
|
+
*/
|
|
18
|
+
children: ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* Text color
|
|
21
|
+
*/
|
|
22
|
+
color?: [
|
|
23
|
+
TextColor,
|
|
24
|
+
string
|
|
25
|
+
];
|
|
26
|
+
/**
|
|
27
|
+
* Font size https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
|
|
28
|
+
*/
|
|
29
|
+
fontSize?: FontSize;
|
|
30
|
+
/**
|
|
31
|
+
* Font weight https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
|
|
32
|
+
*/
|
|
33
|
+
fontWeight?: FontWeight;
|
|
34
|
+
/**
|
|
35
|
+
* Line height https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
|
|
36
|
+
*/
|
|
37
|
+
lineHeight?: LineHeight;
|
|
38
|
+
/**
|
|
39
|
+
* Truncates text with an ellipsis when text overflows its parent container
|
|
40
|
+
* (i.e. `width` has been set on parent that is shorter than text length).
|
|
41
|
+
*/
|
|
42
|
+
shouldTruncate?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
|
|
45
|
+
*/
|
|
46
|
+
textAlign?: TextAlign;
|
|
47
|
+
/**
|
|
48
|
+
* Text transform https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
|
|
49
|
+
*/
|
|
50
|
+
textTransform?: TextTransform;
|
|
51
|
+
/**
|
|
52
|
+
* Vertical align https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
|
|
53
|
+
*/
|
|
54
|
+
verticalAlign?: VerticalAlign;
|
|
55
|
+
}
|
|
56
|
+
declare type FontSize = keyof typeof fontSizeMap;
|
|
57
|
+
declare const fontSizeMap: {
|
|
58
|
+
'11px': import("@emotion/react").SerializedStyles;
|
|
59
|
+
'12px': import("@emotion/react").SerializedStyles;
|
|
60
|
+
'14px': import("@emotion/react").SerializedStyles;
|
|
61
|
+
};
|
|
62
|
+
declare type FontWeight = keyof typeof fontWeightMap;
|
|
63
|
+
declare const fontWeightMap: {
|
|
64
|
+
'400': import("@emotion/react").SerializedStyles;
|
|
65
|
+
'500': import("@emotion/react").SerializedStyles;
|
|
66
|
+
'700': import("@emotion/react").SerializedStyles;
|
|
67
|
+
};
|
|
68
|
+
declare type LineHeight = keyof typeof lineHeightMap;
|
|
69
|
+
declare const lineHeightMap: {
|
|
70
|
+
'12px': import("@emotion/react").SerializedStyles;
|
|
71
|
+
'16px': import("@emotion/react").SerializedStyles;
|
|
72
|
+
'20px': import("@emotion/react").SerializedStyles;
|
|
73
|
+
'24px': import("@emotion/react").SerializedStyles;
|
|
74
|
+
'28px': import("@emotion/react").SerializedStyles;
|
|
75
|
+
'32px': import("@emotion/react").SerializedStyles;
|
|
76
|
+
'40px': import("@emotion/react").SerializedStyles;
|
|
77
|
+
};
|
|
78
|
+
declare type TextAlign = keyof typeof textAlignMap;
|
|
79
|
+
declare const textAlignMap: {
|
|
80
|
+
center: import("@emotion/react").SerializedStyles;
|
|
81
|
+
end: import("@emotion/react").SerializedStyles;
|
|
82
|
+
start: import("@emotion/react").SerializedStyles;
|
|
83
|
+
};
|
|
84
|
+
declare type TextTransform = keyof typeof textTransformMap;
|
|
85
|
+
declare const textTransformMap: {
|
|
86
|
+
none: import("@emotion/react").SerializedStyles;
|
|
87
|
+
lowercase: import("@emotion/react").SerializedStyles;
|
|
88
|
+
uppercase: import("@emotion/react").SerializedStyles;
|
|
89
|
+
};
|
|
90
|
+
declare type VerticalAlign = keyof typeof verticalAlignMap;
|
|
91
|
+
declare const verticalAlignMap: {
|
|
92
|
+
top: import("@emotion/react").SerializedStyles;
|
|
93
|
+
middle: import("@emotion/react").SerializedStyles;
|
|
94
|
+
bottom: import("@emotion/react").SerializedStyles;
|
|
95
|
+
};
|
|
96
|
+
/**
|
|
97
|
+
* __Text__
|
|
98
|
+
*
|
|
99
|
+
* Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
|
|
100
|
+
* This includes considerations for text attributes such as color, font size, font weight, and line height.
|
|
101
|
+
* It renders a `span` by default.
|
|
102
|
+
*
|
|
103
|
+
* @internal
|
|
104
|
+
*/
|
|
105
|
+
declare const Text: FC<TextProps>;
|
|
106
|
+
export default Text;
|
|
107
|
+
/**
|
|
108
|
+
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
109
|
+
* @codegen <<SignedSource::140ffff6e1310c1c37e2067e2c232b92>>
|
|
110
|
+
* @codegenId colors
|
|
111
|
+
* @codegenCommand yarn codegen-styles
|
|
112
|
+
* @codegenParams ["text"]
|
|
113
|
+
*/
|
|
114
|
+
declare const textColorMap: {
|
|
115
|
+
'color.text': import("@emotion/react").SerializedStyles;
|
|
116
|
+
subtle: import("@emotion/react").SerializedStyles;
|
|
117
|
+
subtlest: import("@emotion/react").SerializedStyles;
|
|
118
|
+
disabled: import("@emotion/react").SerializedStyles;
|
|
119
|
+
inverse: import("@emotion/react").SerializedStyles;
|
|
120
|
+
brand: import("@emotion/react").SerializedStyles;
|
|
121
|
+
selected: import("@emotion/react").SerializedStyles;
|
|
122
|
+
danger: import("@emotion/react").SerializedStyles;
|
|
123
|
+
warning: import("@emotion/react").SerializedStyles;
|
|
124
|
+
'warning.inverse': import("@emotion/react").SerializedStyles;
|
|
125
|
+
success: import("@emotion/react").SerializedStyles;
|
|
126
|
+
discovery: import("@emotion/react").SerializedStyles;
|
|
127
|
+
information: import("@emotion/react").SerializedStyles;
|
|
128
|
+
};
|
|
129
|
+
export declare type TextColor = keyof typeof textColorMap;
|
|
130
|
+
/**
|
|
131
|
+
* @codegenEnd
|
|
132
|
+
*/
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { CSSProperties } from 'react';
|
|
2
|
+
export interface BasePrimitiveProps {
|
|
3
|
+
/**
|
|
4
|
+
* A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
|
|
5
|
+
*/
|
|
6
|
+
testId?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Inline styles to be applied to the primitive.
|
|
9
|
+
* Marked as "unsafe" because any CSS properties can be provided here without any extra control or validation, including those that would be better managed by the primitive itself via props.
|
|
10
|
+
* Effectively equivalent to the standard `style` prop but marked with a special name so we can rationalise its usage IN THE FUTURE.
|
|
11
|
+
*/
|
|
12
|
+
UNSAFE_style?: CSSProperties;
|
|
13
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare const SPACING_SCALE: {
|
|
2
|
+
'sp-0': number;
|
|
3
|
+
'sp-25': number;
|
|
4
|
+
'sp-50': number;
|
|
5
|
+
'sp-75': number;
|
|
6
|
+
'sp-100': number;
|
|
7
|
+
'sp-150': number;
|
|
8
|
+
'sp-200': number;
|
|
9
|
+
'sp-300': number;
|
|
10
|
+
'sp-400': number;
|
|
11
|
+
'sp-500': number;
|
|
12
|
+
'sp-600': number;
|
|
13
|
+
'sp-800': number;
|
|
14
|
+
};
|
|
15
|
+
export declare type GlobalSpacingToken = keyof typeof SPACING_SCALE;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { default as UNSAFE_Box } from './components/box.partial';
|
|
2
|
+
export { default as UNSAFE_Text } from './components/text.partial';
|
|
3
|
+
export { default as UNSAFE_Inline } from './components/inline.partial';
|
|
4
|
+
export { default as UNSAFE_Stack } from './components/stack.partial';
|
|
5
|
+
export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
|
|
6
|
+
export type { BoxProps as UNSAFE_BoxProps } from './components/box.partial';
|
|
7
|
+
export type { TextProps as UNSAFE_TextProps } from './components/text.partial';
|
|
8
|
+
export { SPACING_SCALE as UNSAFE_SPACING_SCALE } from './constants';
|