@atlaskit/textfield 5.6.8 → 6.0.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.
Files changed (22) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/index.js +1 -8
  3. package/dist/cjs/styles.js +45 -100
  4. package/dist/cjs/text-field.js +6 -12
  5. package/dist/es2019/index.js +1 -2
  6. package/dist/es2019/styles.js +45 -94
  7. package/dist/es2019/text-field.js +3 -7
  8. package/dist/esm/index.js +1 -2
  9. package/dist/esm/styles.js +44 -93
  10. package/dist/esm/text-field.js +4 -9
  11. package/dist/types/index.d.ts +0 -1
  12. package/dist/types/styles.d.ts +2 -127
  13. package/dist/types-ts4.5/index.d.ts +0 -1
  14. package/dist/types-ts4.5/styles.d.ts +2 -127
  15. package/package.json +7 -4
  16. package/report.api.md +0 -126
  17. package/dist/cjs/component-tokens.js +0 -63
  18. package/dist/es2019/component-tokens.js +0 -46
  19. package/dist/esm/component-tokens.js +0 -46
  20. package/dist/types/component-tokens.d.ts +0 -44
  21. package/dist/types-ts4.5/component-tokens.d.ts +0 -44
  22. package/tmp/api-report-tmp.d.ts +0 -166
package/report.api.md CHANGED
@@ -28,132 +28,6 @@ const _default: React_2.NamedExoticComponent<
28
28
  >;
29
29
  export default _default;
30
30
 
31
- // @public (undocumented)
32
- export const TextFieldColors: {
33
- backgroundColor: {
34
- standard: {
35
- light: 'var(--ds-background-input)';
36
- dark: 'var(--ds-background-input)';
37
- };
38
- subtle: {
39
- light: string;
40
- dark: string;
41
- };
42
- none: {
43
- light: string;
44
- dark: string;
45
- };
46
- };
47
- backgroundColorFocus: {
48
- standard: {
49
- light: 'var(--ds-background-input-pressed)';
50
- dark: 'var(--ds-background-input-pressed)';
51
- };
52
- subtle: {
53
- light: 'var(--ds-background-input-pressed)';
54
- dark: 'var(--ds-background-input-pressed)';
55
- };
56
- none: {
57
- light: string;
58
- dark: string;
59
- };
60
- };
61
- backgroundColorHover: {
62
- standard: {
63
- light: 'var(--ds-background-input-hovered)';
64
- dark: 'var(--ds-background-input-hovered)';
65
- };
66
- subtle: {
67
- light: 'var(--ds-background-input-hovered)';
68
- dark: 'var(--ds-background-input-hovered)';
69
- };
70
- none: {
71
- light: string;
72
- dark: string;
73
- };
74
- };
75
- borderColor: {
76
- standard: {
77
- light: 'var(--ds-border-input)';
78
- dark: 'var(--ds-border-input)';
79
- };
80
- subtle: {
81
- light: string;
82
- dark: string;
83
- };
84
- none: {
85
- light: string;
86
- dark: string;
87
- };
88
- };
89
- borderColorFocus: {
90
- standard: {
91
- light: 'var(--ds-border-focused)';
92
- dark: 'var(--ds-border-focused)';
93
- };
94
- subtle: {
95
- light: 'var(--ds-border-focused)';
96
- dark: 'var(--ds-border-focused)';
97
- };
98
- none: {
99
- light: string;
100
- dark: string;
101
- };
102
- };
103
- borderColorHover: {
104
- standard: {
105
- light: 'var(--ds-border-input)';
106
- dark: 'var(--ds-border-input)';
107
- };
108
- subtle: {
109
- light: 'var(--ds-border-input)';
110
- dark: 'var(--ds-border-input)';
111
- };
112
- none: {
113
- light: string;
114
- dark: string;
115
- };
116
- };
117
- placeholderTextColor: {
118
- light: 'var(--ds-text-subtlest)';
119
- dark: 'var(--ds-text-subtlest)';
120
- };
121
- textColor: {
122
- light: 'var(--ds-text)';
123
- dark: 'var(--ds-text)';
124
- };
125
- invalidRules: {
126
- light: {
127
- backgroundColor: 'var(--ds-background-input)';
128
- backgroundColorHover: 'var(--ds-background-input-hovered)';
129
- backgroundColorFocus: 'var(--ds-background-input-pressed)';
130
- borderColor: 'var(--ds-border-danger)';
131
- borderColorFocus: 'var(--ds-border-focused)';
132
- };
133
- dark: {
134
- backgroundColor: 'var(--ds-background-input)';
135
- backgroundColorHover: 'var(--ds-background-input-hovered)';
136
- backgroundColorFocus: 'var(--ds-background-input-pressed)';
137
- borderColor: 'var(--ds-border-danger)';
138
- borderColorFocus: 'var(--ds-border-focused)';
139
- };
140
- };
141
- disabledRules: {
142
- light: {
143
- backgroundColor: 'var(--ds-background-disabled)';
144
- backgroundColorHover: 'var(--ds-background-disabled)';
145
- borderColor: 'var(--ds-background-disabled)';
146
- textColor: 'var(--ds-text-disabled)';
147
- };
148
- dark: {
149
- backgroundColor: 'var(--ds-background-disabled)';
150
- backgroundColorHover: 'var(--ds-background-disabled)';
151
- borderColor: 'var(--ds-background-disabled)';
152
- textColor: 'var(--ds-text-disabled)';
153
- };
154
- };
155
- };
156
-
157
31
  // @public (undocumented)
158
32
  export interface TextFieldProps
159
33
  extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
package/dist/cjs/component-tokens.js DELETED
@@ -1,63 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.transparent = exports.textColor = exports.subtleBorderColorHover = exports.placeholderTextColor = exports.disabledTextColor = exports.disabledBackgroundColor = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = void 0;
7
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
8
- var _colors = require("@atlaskit/theme/colors");
9
- var disabledBackgroundColor = {
10
- light: "var(--ds-background-disabled, ".concat(_colors.N10, ")"),
11
- dark: "var(--ds-background-disabled, ".concat(_colors.DN10, ")")
12
- };
13
- exports.disabledBackgroundColor = disabledBackgroundColor;
14
- var defaultBackgroundColor = {
15
- light: "var(--ds-background-input, ".concat(_colors.N10, ")"),
16
- dark: "var(--ds-background-input, ".concat(_colors.DN10, ")")
17
- };
18
- exports.defaultBackgroundColor = defaultBackgroundColor;
19
- var defaultBackgroundColorFocus = {
20
- light: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")"),
21
- dark: "var(--ds-background-input-pressed, ".concat(_colors.DN10, ")")
22
- };
23
- exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;
24
- var defaultBackgroundColorHover = {
25
- light: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
26
- dark: "var(--ds-background-input-hovered, ".concat(_colors.DN30, ")")
27
- };
28
- exports.defaultBackgroundColorHover = defaultBackgroundColorHover;
29
- var defaultBorderColor = {
30
- light: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N40, ")"),
31
- dark: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.DN200 : _colors.DN40, ")")
32
- };
33
- exports.defaultBorderColor = defaultBorderColor;
34
- var defaultBorderColorFocus = {
35
- light: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
36
- dark: "var(--ds-border-focused, ".concat(_colors.B100, ")")
37
- };
38
- exports.defaultBorderColorFocus = defaultBorderColorFocus;
39
- var subtleBorderColorHover = {
40
- light: "var(--ds-border-input, transparent)",
41
- dark: "var(--ds-border-input, transparent)"
42
- };
43
- exports.subtleBorderColorHover = subtleBorderColorHover;
44
- var transparent = {
45
- light: 'transparent',
46
- dark: 'transparent'
47
- };
48
- exports.transparent = transparent;
49
- var textColor = {
50
- light: "var(--ds-text, ".concat(_colors.N900, ")"),
51
- dark: "var(--ds-text, ".concat(_colors.DN600, ")")
52
- };
53
- exports.textColor = textColor;
54
- var disabledTextColor = {
55
- light: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
56
- dark: "var(--ds-text-disabled, ".concat(_colors.DN90, ")")
57
- };
58
- exports.disabledTextColor = disabledTextColor;
59
- var placeholderTextColor = {
60
- light: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
61
- dark: "var(--ds-text-subtlest, ".concat(_colors.DN200, ")")
62
- };
63
- exports.placeholderTextColor = placeholderTextColor;
package/dist/es2019/component-tokens.js DELETED
@@ -1,46 +0,0 @@
1
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
- import { B100, B200, DN10, DN200, DN30, DN40, DN600, DN90, N0, N10, N100, N200, N30, N40, N70, N900 } from '@atlaskit/theme/colors';
3
- export const disabledBackgroundColor = {
4
- light: `var(--ds-background-disabled, ${N10})`,
5
- dark: `var(--ds-background-disabled, ${DN10})`
6
- };
7
- export const defaultBackgroundColor = {
8
- light: `var(--ds-background-input, ${N10})`,
9
- dark: `var(--ds-background-input, ${DN10})`
10
- };
11
- export const defaultBackgroundColorFocus = {
12
- light: `var(--ds-background-input-pressed, ${N0})`,
13
- dark: `var(--ds-background-input-pressed, ${DN10})`
14
- };
15
- export const defaultBackgroundColorHover = {
16
- light: `var(--ds-background-input-hovered, ${N30})`,
17
- dark: `var(--ds-background-input-hovered, ${DN30})`
18
- };
19
- export const defaultBorderColor = {
20
- light: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
21
- dark: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : DN40})`
22
- };
23
- export const defaultBorderColorFocus = {
24
- light: `var(--ds-border-focused, ${B200})`,
25
- dark: `var(--ds-border-focused, ${B100})`
26
- };
27
- export const subtleBorderColorHover = {
28
- light: "var(--ds-border-input, transparent)",
29
- dark: "var(--ds-border-input, transparent)"
30
- };
31
- export const transparent = {
32
- light: 'transparent',
33
- dark: 'transparent'
34
- };
35
- export const textColor = {
36
- light: `var(--ds-text, ${N900})`,
37
- dark: `var(--ds-text, ${DN600})`
38
- };
39
- export const disabledTextColor = {
40
- light: `var(--ds-text-disabled, ${N70})`,
41
- dark: `var(--ds-text-disabled, ${DN90})`
42
- };
43
- export const placeholderTextColor = {
44
- light: `var(--ds-text-subtlest, ${N200})`,
45
- dark: `var(--ds-text-subtlest, ${DN200})`
46
- };
package/dist/esm/component-tokens.js DELETED
@@ -1,46 +0,0 @@
1
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
- import { B100, B200, DN10, DN200, DN30, DN40, DN600, DN90, N0, N10, N100, N200, N30, N40, N70, N900 } from '@atlaskit/theme/colors';
3
- export var disabledBackgroundColor = {
4
- light: "var(--ds-background-disabled, ".concat(N10, ")"),
5
- dark: "var(--ds-background-disabled, ".concat(DN10, ")")
6
- };
7
- export var defaultBackgroundColor = {
8
- light: "var(--ds-background-input, ".concat(N10, ")"),
9
- dark: "var(--ds-background-input, ".concat(DN10, ")")
10
- };
11
- export var defaultBackgroundColorFocus = {
12
- light: "var(--ds-background-input-pressed, ".concat(N0, ")"),
13
- dark: "var(--ds-background-input-pressed, ".concat(DN10, ")")
14
- };
15
- export var defaultBackgroundColorHover = {
16
- light: "var(--ds-background-input-hovered, ".concat(N30, ")"),
17
- dark: "var(--ds-background-input-hovered, ".concat(DN30, ")")
18
- };
19
- export var defaultBorderColor = {
20
- light: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
21
- dark: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : DN40, ")")
22
- };
23
- export var defaultBorderColorFocus = {
24
- light: "var(--ds-border-focused, ".concat(B200, ")"),
25
- dark: "var(--ds-border-focused, ".concat(B100, ")")
26
- };
27
- export var subtleBorderColorHover = {
28
- light: "var(--ds-border-input, transparent)",
29
- dark: "var(--ds-border-input, transparent)"
30
- };
31
- export var transparent = {
32
- light: 'transparent',
33
- dark: 'transparent'
34
- };
35
- export var textColor = {
36
- light: "var(--ds-text, ".concat(N900, ")"),
37
- dark: "var(--ds-text, ".concat(DN600, ")")
38
- };
39
- export var disabledTextColor = {
40
- light: "var(--ds-text-disabled, ".concat(N70, ")"),
41
- dark: "var(--ds-text-disabled, ".concat(DN90, ")")
42
- };
43
- export var placeholderTextColor = {
44
- light: "var(--ds-text-subtlest, ".concat(N200, ")"),
45
- dark: "var(--ds-text-subtlest, ".concat(DN200, ")")
46
- };
package/dist/types/component-tokens.d.ts DELETED
@@ -1,44 +0,0 @@
1
- export declare const disabledBackgroundColor: {
2
- light: "var(--ds-background-disabled)";
3
- dark: "var(--ds-background-disabled)";
4
- };
5
- export declare const defaultBackgroundColor: {
6
- light: "var(--ds-background-input)";
7
- dark: "var(--ds-background-input)";
8
- };
9
- export declare const defaultBackgroundColorFocus: {
10
- light: "var(--ds-background-input-pressed)";
11
- dark: "var(--ds-background-input-pressed)";
12
- };
13
- export declare const defaultBackgroundColorHover: {
14
- light: "var(--ds-background-input-hovered)";
15
- dark: "var(--ds-background-input-hovered)";
16
- };
17
- export declare const defaultBorderColor: {
18
- light: "var(--ds-border-input)";
19
- dark: "var(--ds-border-input)";
20
- };
21
- export declare const defaultBorderColorFocus: {
22
- light: "var(--ds-border-focused)";
23
- dark: "var(--ds-border-focused)";
24
- };
25
- export declare const subtleBorderColorHover: {
26
- light: "var(--ds-border-input)";
27
- dark: "var(--ds-border-input)";
28
- };
29
- export declare const transparent: {
30
- light: string;
31
- dark: string;
32
- };
33
- export declare const textColor: {
34
- light: "var(--ds-text)";
35
- dark: "var(--ds-text)";
36
- };
37
- export declare const disabledTextColor: {
38
- light: "var(--ds-text-disabled)";
39
- dark: "var(--ds-text-disabled)";
40
- };
41
- export declare const placeholderTextColor: {
42
- light: "var(--ds-text-subtlest)";
43
- dark: "var(--ds-text-subtlest)";
44
- };
package/dist/types-ts4.5/component-tokens.d.ts DELETED
@@ -1,44 +0,0 @@
1
- export declare const disabledBackgroundColor: {
2
- light: "var(--ds-background-disabled)";
3
- dark: "var(--ds-background-disabled)";
4
- };
5
- export declare const defaultBackgroundColor: {
6
- light: "var(--ds-background-input)";
7
- dark: "var(--ds-background-input)";
8
- };
9
- export declare const defaultBackgroundColorFocus: {
10
- light: "var(--ds-background-input-pressed)";
11
- dark: "var(--ds-background-input-pressed)";
12
- };
13
- export declare const defaultBackgroundColorHover: {
14
- light: "var(--ds-background-input-hovered)";
15
- dark: "var(--ds-background-input-hovered)";
16
- };
17
- export declare const defaultBorderColor: {
18
- light: "var(--ds-border-input)";
19
- dark: "var(--ds-border-input)";
20
- };
21
- export declare const defaultBorderColorFocus: {
22
- light: "var(--ds-border-focused)";
23
- dark: "var(--ds-border-focused)";
24
- };
25
- export declare const subtleBorderColorHover: {
26
- light: "var(--ds-border-input)";
27
- dark: "var(--ds-border-input)";
28
- };
29
- export declare const transparent: {
30
- light: string;
31
- dark: string;
32
- };
33
- export declare const textColor: {
34
- light: "var(--ds-text)";
35
- dark: "var(--ds-text)";
36
- };
37
- export declare const disabledTextColor: {
38
- light: "var(--ds-text-disabled)";
39
- dark: "var(--ds-text-disabled)";
40
- };
41
- export declare const placeholderTextColor: {
42
- light: "var(--ds-text-subtlest)";
43
- dark: "var(--ds-text-subtlest)";
44
- };
package/tmp/api-report-tmp.d.ts DELETED
@@ -1,166 +0,0 @@
1
- ## API Report File for "@atlaskit/textfield"
2
-
3
- > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4
-
5
- ```ts
6
-
7
- import { AllHTMLAttributes } from 'react';
8
- import { FormEventHandler } from 'react';
9
- import { default as React_2 } from 'react';
10
-
11
- // @public (undocumented)
12
- export type Appearance = 'none' | 'standard' | 'subtle';
13
-
14
- // @public
15
- const _default: React_2.NamedExoticComponent<TextFieldProps & React_2.RefAttributes<unknown>>;
16
- export default _default;
17
-
18
- // @public (undocumented)
19
- export const TextFieldColors: {
20
- backgroundColor: {
21
- standard: {
22
- light: "var(--ds-background-input)";
23
- dark: "var(--ds-background-input)";
24
- };
25
- subtle: {
26
- light: string;
27
- dark: string;
28
- };
29
- none: {
30
- light: string;
31
- dark: string;
32
- };
33
- };
34
- backgroundColorFocus: {
35
- standard: {
36
- light: "var(--ds-background-input-pressed)";
37
- dark: "var(--ds-background-input-pressed)";
38
- };
39
- subtle: {
40
- light: "var(--ds-background-input-pressed)";
41
- dark: "var(--ds-background-input-pressed)";
42
- };
43
- none: {
44
- light: string;
45
- dark: string;
46
- };
47
- };
48
- backgroundColorHover: {
49
- standard: {
50
- light: "var(--ds-background-input-hovered)";
51
- dark: "var(--ds-background-input-hovered)";
52
- };
53
- subtle: {
54
- light: "var(--ds-background-input-hovered)";
55
- dark: "var(--ds-background-input-hovered)";
56
- };
57
- none: {
58
- light: string;
59
- dark: string;
60
- };
61
- };
62
- borderColor: {
63
- standard: {
64
- light: "var(--ds-border-input)";
65
- dark: "var(--ds-border-input)";
66
- };
67
- subtle: {
68
- light: string;
69
- dark: string;
70
- };
71
- none: {
72
- light: string;
73
- dark: string;
74
- };
75
- };
76
- borderColorFocus: {
77
- standard: {
78
- light: "var(--ds-border-focused)";
79
- dark: "var(--ds-border-focused)";
80
- };
81
- subtle: {
82
- light: "var(--ds-border-focused)";
83
- dark: "var(--ds-border-focused)";
84
- };
85
- none: {
86
- light: string;
87
- dark: string;
88
- };
89
- };
90
- borderColorHover: {
91
- standard: {
92
- light: "var(--ds-border-input)";
93
- dark: "var(--ds-border-input)";
94
- };
95
- subtle: {
96
- light: "var(--ds-border-input)";
97
- dark: "var(--ds-border-input)";
98
- };
99
- none: {
100
- light: string;
101
- dark: string;
102
- };
103
- };
104
- placeholderTextColor: {
105
- light: "var(--ds-text-subtlest)";
106
- dark: "var(--ds-text-subtlest)";
107
- };
108
- textColor: {
109
- light: "var(--ds-text)";
110
- dark: "var(--ds-text)";
111
- };
112
- invalidRules: {
113
- light: {
114
- backgroundColor: "var(--ds-background-input)";
115
- backgroundColorHover: "var(--ds-background-input-hovered)";
116
- backgroundColorFocus: "var(--ds-background-input-pressed)";
117
- borderColor: "var(--ds-border-danger)";
118
- borderColorFocus: "var(--ds-border-focused)";
119
- };
120
- dark: {
121
- backgroundColor: "var(--ds-background-input)";
122
- backgroundColorHover: "var(--ds-background-input-hovered)";
123
- backgroundColorFocus: "var(--ds-background-input-pressed)";
124
- borderColor: "var(--ds-border-danger)";
125
- borderColorFocus: "var(--ds-border-focused)";
126
- };
127
- };
128
- disabledRules: {
129
- light: {
130
- backgroundColor: "var(--ds-background-disabled)";
131
- backgroundColorHover: "var(--ds-background-disabled)";
132
- borderColor: "var(--ds-background-disabled)";
133
- textColor: "var(--ds-text-disabled)";
134
- };
135
- dark: {
136
- backgroundColor: "var(--ds-background-disabled)";
137
- backgroundColorHover: "var(--ds-background-disabled)";
138
- borderColor: "var(--ds-background-disabled)";
139
- textColor: "var(--ds-text-disabled)";
140
- };
141
- };
142
- };
143
-
144
- // @public (undocumented)
145
- export interface TextFieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
146
- appearance?: Appearance;
147
- className?: string;
148
- elemAfterInput?: React_2.ReactNode;
149
- elemBeforeInput?: React_2.ReactNode;
150
- isCompact?: boolean;
151
- isDisabled?: boolean;
152
- isInvalid?: boolean;
153
- isMonospaced?: boolean;
154
- isReadOnly?: boolean;
155
- isRequired?: boolean;
156
- name?: string;
157
- onChange?: FormEventHandler<HTMLInputElement>;
158
- onMouseDown?: React_2.MouseEventHandler<HTMLElement>;
159
- placeholder?: string;
160
- testId?: string;
161
- width?: number | string;
162
- }
163
-
164
- // (No @packageDocumentation comment for this package)
165
-
166
- ```