@atlaskit/textfield 8.0.15 → 8.2.0

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 (8) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/text-field.compiled.css +14 -19
  3. package/dist/cjs/text-field.js +20 -17
  4. package/dist/es2019/text-field.compiled.css +14 -19
  5. package/dist/es2019/text-field.js +20 -17
  6. package/dist/esm/text-field.compiled.css +14 -19
  7. package/dist/esm/text-field.js +20 -17
  8. package/package.json +11 -13
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/textfield
2
2
 
3
+ ## 8.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`b867e641d818d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b867e641d818d) -
8
+ Updated border radius values behind a feature gate `platform-dst-shape-theme-default`.
9
+
10
+ ## 8.1.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`2568622464f45`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2568622464f45) -
15
+ release previously feature-gated change to textfield, textarea, and select to increase font size
16
+ to 16px on mobile
17
+
3
18
  ## 8.0.15
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/text-field.compiled.css CHANGED
@@ -1,24 +1,24 @@
1
1
  ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
3
  ._19itidpf{border:0}
4
+ ._1tnq1qi0._1tnq1qi0{border-radius:var(--ds-radius-medium,6px)}
4
5
  ._1tnqfajl._1tnqfajl{border-radius:var(--ds-radius-small,3px)}
5
6
  ._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
6
7
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
7
8
  ._1dqoglyw{border-style:none}
8
9
  ._1dqonqa1{border-style:solid}
9
10
  ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
10
- ._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
11
11
  ._1h6d1j28{border-color:transparent}
12
- ._1h6dsyzs{border-color:var(--ds-background-disabled,#091e4208)}
12
+ ._1h6dby5v{border-color:var(--ds-background-disabled,#17171708)}
13
+ ._1h6drsbi{border-color:var(--ds-border-input,#8c8f97)}
13
14
  ._1p9x1j28._1p9x1j28:has(input:focus){border-color:transparent}
14
- ._1p9x1p6i._1p9x1p6i:has(input:focus){border-color:var(--ds-border-focused,#388bff)}
15
+ ._1p9x1v1w._1p9x1v1w:has(input:focus){border-color:var(--ds-border-focused,#4688ec)}
15
16
  ._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
16
17
  ._12ji1r31{outline-color:currentColor}
17
18
  ._12y31o36{outline-width:medium}
18
19
  ._13xeglyw:invalid{box-shadow:none}
19
20
  ._141f12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}
20
21
  ._14ji12x7:not([data-compact]){padding-block-end:var(--ds-space-075,6px)}
21
- ._14jiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}
22
22
  ._16hg1j28._16hg1j28{background-color:transparent}
23
23
  ._16jlkb7n{flex-grow:1}
24
24
  ._16qsizbr{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
@@ -27,15 +27,14 @@
27
27
  ._1bsb1osq{width:100%}
28
28
  ._1e0c1txw{display:flex}
29
29
  ._1goxglyw::-ms-clear{display:none}
30
- ._1idr131l::-ms-input-placeholder{color:var(--ds-text-subtlest,#626f86)}
31
- ._1idr131l::placeholder{color:var(--ds-text-subtlest,#626f86)}
32
- ._1idr1lh4::-ms-input-placeholder{color:var(--ds-text-disabled,#091e424f)}
33
- ._1idr1lh4::placeholder{color:var(--ds-text-disabled,#091e424f)}
30
+ ._1idr1gmx::-ms-input-placeholder{color:var(--ds-text-disabled,#080f214a)}
31
+ ._1idr1gmx::placeholder{color:var(--ds-text-disabled,#080f214a)}
32
+ ._1idr1rpy::-ms-input-placeholder{color:var(--ds-text-subtlest,#6b6e76)}
33
+ ._1idr1rpy::placeholder{color:var(--ds-text-subtlest,#6b6e76)}
34
34
  ._1kod12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}
35
35
  ._1l02v77o[data-compact]{padding-block-start:var(--ds-space-025,2px)}
36
36
  ._1n7e1l2s:placeholder-shown{text-overflow:ellipsis}
37
37
  ._1o9zkb7n{flex-shrink:1}
38
- ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
39
38
  ._1q51e4h9{padding-block-start:var(--ds-border-width,1px)}
40
39
  ._1qu2glyw{outline-style:none}
41
40
  ._1reo15vq{overflow-x:hidden}
@@ -45,37 +44,33 @@
45
44
  ._80om13gf{cursor:not-allowed}
46
45
  ._80om1kdv{cursor:text}
47
46
  ._80om1kw7{cursor:inherit}
48
- ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
49
47
  ._85i5e4h9{padding-block-end:var(--ds-border-width,1px)}
50
48
  ._bfhk1j28{background-color:transparent}
51
49
  ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
52
- ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
53
- ._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
50
+ ._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
54
51
  ._bozgidpf{padding-inline-start:0}
55
52
  ._daj712x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}
56
53
  ._ect41odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
57
54
  ._i0dl1osq{flex-basis:100%}
58
55
  ._lcxv1wug{pointer-events:auto}
59
56
  ._olc612x7:not([data-compact]){padding-block-start:var(--ds-space-075,6px)}
60
- ._olc6u2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}
61
57
  ._q4333sij._q4333sij:has(input:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
62
- ._q433q049._q433q049:has(input:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
58
+ ._q433vyy1._q433vyy1:has(input:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
63
59
  ._qao91j28._qao91j28:has(input:focus){background-color:transparent}
64
60
  ._qao9r01l._qao9r01l:has(input:focus){background-color:var(--ds-background-input-pressed,#fff)}
65
61
  ._s7n4jp4b{vertical-align:top}
66
62
  ._slp31hna{word-wrap:break-word}
67
- ._syaz1fxt{color:var(--ds-text,#172b4d)}
63
+ ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
68
64
  ._syaz1kw7{color:inherit}
69
- ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
65
+ ._syazi7uo{color:var(--ds-text,#292a2e)}
70
66
  ._uk1sr01l:has(input:focus){background-color:var(--ds-background-input-pressed,#fff)}
71
67
  ._vchhusvi{box-sizing:border-box}
72
- ._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
73
68
  ._y4tiidpf{padding-inline-end:0}
74
69
  ._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}
75
- ._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
76
70
  ._4cvx1j28:hover{border-color:transparent}
71
+ ._4cvxrsbi:hover{border-color:var(--ds-border-input,#8c8f97)}
77
72
  ._1dbzizbr:hover{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
78
- ._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
79
73
  ._irr31j28:hover{background-color:transparent}
74
+ ._irr3l4ek:hover{background-color:var(--ds-background-input-hovered,#f8f8f8)}
80
75
  @media screen and (-ms-high-contrast:active){._1fnx18qt{color:GrayText}._6up518qt{border-color:GrayText}._msj6gir2:has(input:focus){border-color:Highlight}}
81
76
  @media (min-width:30rem){._14md1odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}._1srd1b66[data-compact]{padding-block-end:var(--ds-space-050,4px)}._oi9h1b66[data-compact]{padding-block-start:var(--ds-space-050,4px)}._1e3012x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}._1txv12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}._1tn22smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._l9oiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}._549yu2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}._1h5w12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}._124212x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}}
package/dist/cjs/text-field.js CHANGED
@@ -28,28 +28,28 @@ var inputMediaDisabled = null;
28
28
  var analyticsParams = {
29
29
  componentName: 'textField',
30
30
  packageName: "@atlaskit/textfield",
31
- packageVersion: "8.0.14"
31
+ packageVersion: "8.1.0"
32
32
  };
33
33
  var disabledStyle = {
34
- standard: "_1h6dsyzs _bfhksyzs _syaz1lh4 _80om13gf",
35
- subtle: "_1h6d1j28 _bfhk1j28 _syaz1lh4 _80om13gf",
36
- none: "_1h6d1j28 _bfhk1j28 _syaz1lh4 _80om13gf"
34
+ standard: "_1h6dby5v _bfhkby5v _syaz1gmx _80om13gf",
35
+ subtle: "_1h6d1j28 _bfhk1j28 _syaz1gmx _80om13gf",
36
+ none: "_1h6d1j28 _bfhk1j28 _syaz1gmx _80om13gf"
37
37
  };
38
38
  var invalidStyle = null;
39
39
  var focusWithinStyle = {
40
- standard: "_1p9x1p6i _qao9r01l _q433q049",
41
- subtle: "_1p9x1p6i _qao9r01l _q433q049",
40
+ standard: "_1p9x1v1w _qao9r01l _q433vyy1",
41
+ subtle: "_1p9x1v1w _qao9r01l _q433vyy1",
42
42
  none: "_1p9x1j28 _qao91j28 _q4333sij"
43
43
  };
44
44
  var hoverStyle = {
45
- standard: "_4cvx1elr _irr31d5g",
46
- subtle: "_4cvx1elr _irr31d5g",
45
+ standard: "_4cvxrsbi _irr3l4ek",
46
+ subtle: "_4cvxrsbi _irr3l4ek",
47
47
  none: "_4cvx1j28 _irr31j28"
48
48
  };
49
49
  var getContainerTextBgAndBorderColor = {
50
- standard: "_1h6d1elr _1dqonqa1 _syaz1fxt _80om1kdv _bfhk1j9a _msj6gir2",
51
- subtle: "_1h6d1j28 _1dqonqa1 _syaz1fxt _80om1kdv _16hg1j28 _msj6gir2",
52
- none: "_1h6d1j28 _1dqoglyw _syaz1fxt _80om1kdv _16hg1j28 _msj6gir2"
50
+ standard: "_1h6drsbi _1dqonqa1 _syazi7uo _80om1kdv _bfhk1j9a _msj6gir2",
51
+ subtle: "_1h6d1j28 _1dqonqa1 _syazi7uo _80om1kdv _16hg1j28 _msj6gir2",
52
+ none: "_1h6d1j28 _1dqoglyw _syazi7uo _80om1kdv _16hg1j28 _msj6gir2"
53
53
  };
54
54
  var widthMap = {
55
55
  xsmall: 80,
@@ -67,13 +67,16 @@ var containerStyleAppearance = {
67
67
  none: "_1dqoglyw"
68
68
  };
69
69
  var containerStyles = null;
70
+ var containerStylesT26Shape = null;
70
71
  var inputDisabledStyle = null;
71
- var inputCompactStyleWithFg = null;
72
72
  var inputCompactStyle = null;
73
73
  var inputMonospacedStyle = null;
74
- var inputFontStyleWithFG = null;
75
- var inputStyleMonospacedWithFg = null;
76
- var inputStyleNotDataCompactWithFG = null;
74
+
75
+ // iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
76
+ // To prevent this zoom behaviour on mobile devices, the textfield uses font.body.large (16px) by default,
77
+ // then switches to the smaller font.body on screens wider than 30rem (desktop).
78
+ // @see: https://medium.com/@rares.popescu/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields-8a71479e542e
79
+
77
80
  var inputStyle = null;
78
81
 
79
82
  /**
@@ -160,7 +163,7 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
160
163
  maxWidth: "".concat(getMaxWidth(width))
161
164
  },
162
165
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
163
- className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnqfajl", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qsizbr _1dbzizbr _uk1sr01l", className])
166
+ className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnqfajl", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_1tnq1qi0", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qsizbr _1dbzizbr _uk1sr01l", className])
164
167
  }, elemBeforeInput, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, spreadProps, {
165
168
  "aria-invalid": isInvalid ? isInvalid : undefined
166
169
  // TODO: When removing legacy theming fix this.
@@ -179,7 +182,7 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
179
182
  readOnly: isReadOnly,
180
183
  ref: setInputRef,
181
184
  required: isRequired,
182
- className: (0, _runtime.ax)(["_19itidpf _11c82smr _12ji1r31 _1qu2glyw _12y31o36 _vchhusvi _1bsb1osq _1ul9idpf _bfhk1j28 _syaz1kw7 _80om1kw7 _14jiu2gc _olc6u2gc _1kod12x7 _7ba012x7 _1goxglyw _13xeglyw _1n7e1l2s _1idr131l", isMonospaced && "_ect41odn", isCompact && "_85i51b66 _1q511b66 _y4ti12x7 _bozg12x7", isDisabled && "_syaz1lh4 _1idr1lh4", isDisabled && "_1fnx18qt", !isCompact && (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') && "_14ji12x7 _olc612x7 _1kod12x7 _7ba012x7 _l9oiu2gc _549yu2gc _1h5w12x7 _124212x7", (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') && "_11c81ixg _1tn22smr", isCompact && (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') && "_11zpv77o _1l02v77o _daj712x7 _141f12x7 _1srd1b66 _oi9h1b66 _1e3012x7 _1txv12x7", isMonospaced && (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') && "_ect41odn _14md1odn"])
185
+ className: (0, _runtime.ax)(["_19itidpf _11c81ixg _12ji1r31 _1qu2glyw _12y31o36 _vchhusvi _1bsb1osq _1ul9idpf _bfhk1j28 _syaz1kw7 _80om1kw7 _14ji12x7 _olc612x7 _1kod12x7 _7ba012x7 _1goxglyw _13xeglyw _1n7e1l2s _1idr1rpy _1tn22smr _l9oiu2gc _549yu2gc _1h5w12x7 _124212x7", isMonospaced && "_ect41odn _14md1odn", isCompact && "_11zpv77o _1l02v77o _daj712x7 _141f12x7 _1srd1b66 _oi9h1b66 _1e3012x7 _1txv12x7", isDisabled && "_syaz1gmx _1idr1gmx", isDisabled && "_1fnx18qt"])
183
186
  })), elemAfterInput);
184
187
  });
185
188
  var _default = exports.default = Textfield;
package/dist/es2019/text-field.compiled.css CHANGED
@@ -1,24 +1,24 @@
1
1
  ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
3
  ._19itidpf{border:0}
4
+ ._1tnq1qi0._1tnq1qi0{border-radius:var(--ds-radius-medium,6px)}
4
5
  ._1tnqfajl._1tnqfajl{border-radius:var(--ds-radius-small,3px)}
5
6
  ._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
6
7
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
7
8
  ._1dqoglyw{border-style:none}
8
9
  ._1dqonqa1{border-style:solid}
9
10
  ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
10
- ._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
11
11
  ._1h6d1j28{border-color:transparent}
12
- ._1h6dsyzs{border-color:var(--ds-background-disabled,#091e4208)}
12
+ ._1h6dby5v{border-color:var(--ds-background-disabled,#17171708)}
13
+ ._1h6drsbi{border-color:var(--ds-border-input,#8c8f97)}
13
14
  ._1p9x1j28._1p9x1j28:has(input:focus){border-color:transparent}
14
- ._1p9x1p6i._1p9x1p6i:has(input:focus){border-color:var(--ds-border-focused,#388bff)}
15
+ ._1p9x1v1w._1p9x1v1w:has(input:focus){border-color:var(--ds-border-focused,#4688ec)}
15
16
  ._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
16
17
  ._12ji1r31{outline-color:currentColor}
17
18
  ._12y31o36{outline-width:medium}
18
19
  ._13xeglyw:invalid{box-shadow:none}
19
20
  ._141f12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}
20
21
  ._14ji12x7:not([data-compact]){padding-block-end:var(--ds-space-075,6px)}
21
- ._14jiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}
22
22
  ._16hg1j28._16hg1j28{background-color:transparent}
23
23
  ._16jlkb7n{flex-grow:1}
24
24
  ._16qsizbr{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
@@ -27,15 +27,14 @@
27
27
  ._1bsb1osq{width:100%}
28
28
  ._1e0c1txw{display:flex}
29
29
  ._1goxglyw::-ms-clear{display:none}
30
- ._1idr131l::-ms-input-placeholder{color:var(--ds-text-subtlest,#626f86)}
31
- ._1idr131l::placeholder{color:var(--ds-text-subtlest,#626f86)}
32
- ._1idr1lh4::-ms-input-placeholder{color:var(--ds-text-disabled,#091e424f)}
33
- ._1idr1lh4::placeholder{color:var(--ds-text-disabled,#091e424f)}
30
+ ._1idr1gmx::-ms-input-placeholder{color:var(--ds-text-disabled,#080f214a)}
31
+ ._1idr1gmx::placeholder{color:var(--ds-text-disabled,#080f214a)}
32
+ ._1idr1rpy::-ms-input-placeholder{color:var(--ds-text-subtlest,#6b6e76)}
33
+ ._1idr1rpy::placeholder{color:var(--ds-text-subtlest,#6b6e76)}
34
34
  ._1kod12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}
35
35
  ._1l02v77o[data-compact]{padding-block-start:var(--ds-space-025,2px)}
36
36
  ._1n7e1l2s:placeholder-shown{text-overflow:ellipsis}
37
37
  ._1o9zkb7n{flex-shrink:1}
38
- ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
39
38
  ._1q51e4h9{padding-block-start:var(--ds-border-width,1px)}
40
39
  ._1qu2glyw{outline-style:none}
41
40
  ._1reo15vq{overflow-x:hidden}
@@ -45,37 +44,33 @@
45
44
  ._80om13gf{cursor:not-allowed}
46
45
  ._80om1kdv{cursor:text}
47
46
  ._80om1kw7{cursor:inherit}
48
- ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
49
47
  ._85i5e4h9{padding-block-end:var(--ds-border-width,1px)}
50
48
  ._bfhk1j28{background-color:transparent}
51
49
  ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
52
- ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
53
- ._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
50
+ ._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
54
51
  ._bozgidpf{padding-inline-start:0}
55
52
  ._daj712x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}
56
53
  ._ect41odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
57
54
  ._i0dl1osq{flex-basis:100%}
58
55
  ._lcxv1wug{pointer-events:auto}
59
56
  ._olc612x7:not([data-compact]){padding-block-start:var(--ds-space-075,6px)}
60
- ._olc6u2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}
61
57
  ._q4333sij._q4333sij:has(input:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
62
- ._q433q049._q433q049:has(input:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
58
+ ._q433vyy1._q433vyy1:has(input:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
63
59
  ._qao91j28._qao91j28:has(input:focus){background-color:transparent}
64
60
  ._qao9r01l._qao9r01l:has(input:focus){background-color:var(--ds-background-input-pressed,#fff)}
65
61
  ._s7n4jp4b{vertical-align:top}
66
62
  ._slp31hna{word-wrap:break-word}
67
- ._syaz1fxt{color:var(--ds-text,#172b4d)}
63
+ ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
68
64
  ._syaz1kw7{color:inherit}
69
- ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
65
+ ._syazi7uo{color:var(--ds-text,#292a2e)}
70
66
  ._uk1sr01l:has(input:focus){background-color:var(--ds-background-input-pressed,#fff)}
71
67
  ._vchhusvi{box-sizing:border-box}
72
- ._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
73
68
  ._y4tiidpf{padding-inline-end:0}
74
69
  ._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}
75
- ._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
76
70
  ._4cvx1j28:hover{border-color:transparent}
71
+ ._4cvxrsbi:hover{border-color:var(--ds-border-input,#8c8f97)}
77
72
  ._1dbzizbr:hover{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
78
- ._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
79
73
  ._irr31j28:hover{background-color:transparent}
74
+ ._irr3l4ek:hover{background-color:var(--ds-background-input-hovered,#f8f8f8)}
80
75
  @media screen and (-ms-high-contrast:active){._1fnx18qt{color:GrayText}._6up518qt{border-color:GrayText}._msj6gir2:has(input:focus){border-color:Highlight}}
81
76
  @media (min-width:30rem){._14md1odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}._1srd1b66[data-compact]{padding-block-end:var(--ds-space-050,4px)}._oi9h1b66[data-compact]{padding-block-start:var(--ds-space-050,4px)}._1e3012x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}._1txv12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}._1tn22smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._l9oiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}._549yu2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}._1h5w12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}._124212x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}}
package/dist/es2019/text-field.js CHANGED
@@ -13,28 +13,28 @@ const inputMediaDisabled = null;
13
13
  const analyticsParams = {
14
14
  componentName: 'textField',
15
15
  packageName: "@atlaskit/textfield",
16
- packageVersion: "8.0.14"
16
+ packageVersion: "8.1.0"
17
17
  };
18
18
  const disabledStyle = {
19
- standard: "_1h6dsyzs _bfhksyzs _syaz1lh4 _80om13gf",
20
- subtle: "_1h6d1j28 _bfhk1j28 _syaz1lh4 _80om13gf",
21
- none: "_1h6d1j28 _bfhk1j28 _syaz1lh4 _80om13gf"
19
+ standard: "_1h6dby5v _bfhkby5v _syaz1gmx _80om13gf",
20
+ subtle: "_1h6d1j28 _bfhk1j28 _syaz1gmx _80om13gf",
21
+ none: "_1h6d1j28 _bfhk1j28 _syaz1gmx _80om13gf"
22
22
  };
23
23
  const invalidStyle = null;
24
24
  const focusWithinStyle = {
25
- standard: "_1p9x1p6i _qao9r01l _q433q049",
26
- subtle: "_1p9x1p6i _qao9r01l _q433q049",
25
+ standard: "_1p9x1v1w _qao9r01l _q433vyy1",
26
+ subtle: "_1p9x1v1w _qao9r01l _q433vyy1",
27
27
  none: "_1p9x1j28 _qao91j28 _q4333sij"
28
28
  };
29
29
  const hoverStyle = {
30
- standard: "_4cvx1elr _irr31d5g",
31
- subtle: "_4cvx1elr _irr31d5g",
30
+ standard: "_4cvxrsbi _irr3l4ek",
31
+ subtle: "_4cvxrsbi _irr3l4ek",
32
32
  none: "_4cvx1j28 _irr31j28"
33
33
  };
34
34
  const getContainerTextBgAndBorderColor = {
35
- standard: "_1h6d1elr _1dqonqa1 _syaz1fxt _80om1kdv _bfhk1j9a _msj6gir2",
36
- subtle: "_1h6d1j28 _1dqonqa1 _syaz1fxt _80om1kdv _16hg1j28 _msj6gir2",
37
- none: "_1h6d1j28 _1dqoglyw _syaz1fxt _80om1kdv _16hg1j28 _msj6gir2"
35
+ standard: "_1h6drsbi _1dqonqa1 _syazi7uo _80om1kdv _bfhk1j9a _msj6gir2",
36
+ subtle: "_1h6d1j28 _1dqonqa1 _syazi7uo _80om1kdv _16hg1j28 _msj6gir2",
37
+ none: "_1h6d1j28 _1dqoglyw _syazi7uo _80om1kdv _16hg1j28 _msj6gir2"
38
38
  };
39
39
  const widthMap = {
40
40
  xsmall: 80,
@@ -50,13 +50,16 @@ const containerStyleAppearance = {
50
50
  none: "_1dqoglyw"
51
51
  };
52
52
  const containerStyles = null;
53
+ const containerStylesT26Shape = null;
53
54
  const inputDisabledStyle = null;
54
- const inputCompactStyleWithFg = null;
55
55
  const inputCompactStyle = null;
56
56
  const inputMonospacedStyle = null;
57
- const inputFontStyleWithFG = null;
58
- const inputStyleMonospacedWithFg = null;
59
- const inputStyleNotDataCompactWithFG = null;
57
+
58
+ // iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
59
+ // To prevent this zoom behaviour on mobile devices, the textfield uses font.body.large (16px) by default,
60
+ // then switches to the smaller font.body on screens wider than 30rem (desktop).
61
+ // @see: https://medium.com/@rares.popescu/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields-8a71479e542e
62
+
60
63
  const inputStyle = null;
61
64
 
62
65
  /**
@@ -140,7 +143,7 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
140
143
  maxWidth: `${getMaxWidth(width)}`
141
144
  },
142
145
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
143
- className: ax(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnqfajl", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qsizbr _1dbzizbr _uk1sr01l", className])
146
+ className: ax(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnqfajl", fg('platform-dst-shape-theme-default') && "_1tnq1qi0", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qsizbr _1dbzizbr _uk1sr01l", className])
144
147
  }, elemBeforeInput, /*#__PURE__*/React.createElement("input", _extends({}, spreadProps, {
145
148
  "aria-invalid": isInvalid ? isInvalid : undefined
146
149
  // TODO: When removing legacy theming fix this.
@@ -159,7 +162,7 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
159
162
  readOnly: isReadOnly,
160
163
  ref: setInputRef,
161
164
  required: isRequired,
162
- className: ax(["_19itidpf _11c82smr _12ji1r31 _1qu2glyw _12y31o36 _vchhusvi _1bsb1osq _1ul9idpf _bfhk1j28 _syaz1kw7 _80om1kw7 _14jiu2gc _olc6u2gc _1kod12x7 _7ba012x7 _1goxglyw _13xeglyw _1n7e1l2s _1idr131l", isMonospaced && "_ect41odn", isCompact && "_85i51b66 _1q511b66 _y4ti12x7 _bozg12x7", isDisabled && "_syaz1lh4 _1idr1lh4", isDisabled && "_1fnx18qt", !isCompact && fg('platform_design_system_team_safari_input_fix') && "_14ji12x7 _olc612x7 _1kod12x7 _7ba012x7 _l9oiu2gc _549yu2gc _1h5w12x7 _124212x7", fg('platform_design_system_team_safari_input_fix') && "_11c81ixg _1tn22smr", isCompact && fg('platform_design_system_team_safari_input_fix') && "_11zpv77o _1l02v77o _daj712x7 _141f12x7 _1srd1b66 _oi9h1b66 _1e3012x7 _1txv12x7", isMonospaced && fg('platform_design_system_team_safari_input_fix') && "_ect41odn _14md1odn"])
165
+ className: ax(["_19itidpf _11c81ixg _12ji1r31 _1qu2glyw _12y31o36 _vchhusvi _1bsb1osq _1ul9idpf _bfhk1j28 _syaz1kw7 _80om1kw7 _14ji12x7 _olc612x7 _1kod12x7 _7ba012x7 _1goxglyw _13xeglyw _1n7e1l2s _1idr1rpy _1tn22smr _l9oiu2gc _549yu2gc _1h5w12x7 _124212x7", isMonospaced && "_ect41odn _14md1odn", isCompact && "_11zpv77o _1l02v77o _daj712x7 _141f12x7 _1srd1b66 _oi9h1b66 _1e3012x7 _1txv12x7", isDisabled && "_syaz1gmx _1idr1gmx", isDisabled && "_1fnx18qt"])
163
166
  })), elemAfterInput);
164
167
  });
165
168
  export default Textfield;
package/dist/esm/text-field.compiled.css CHANGED
@@ -1,24 +1,24 @@
1
1
  ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
3
  ._19itidpf{border:0}
4
+ ._1tnq1qi0._1tnq1qi0{border-radius:var(--ds-radius-medium,6px)}
4
5
  ._1tnqfajl._1tnqfajl{border-radius:var(--ds-radius-small,3px)}
5
6
  ._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
6
7
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
7
8
  ._1dqoglyw{border-style:none}
8
9
  ._1dqonqa1{border-style:solid}
9
10
  ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
10
- ._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
11
11
  ._1h6d1j28{border-color:transparent}
12
- ._1h6dsyzs{border-color:var(--ds-background-disabled,#091e4208)}
12
+ ._1h6dby5v{border-color:var(--ds-background-disabled,#17171708)}
13
+ ._1h6drsbi{border-color:var(--ds-border-input,#8c8f97)}
13
14
  ._1p9x1j28._1p9x1j28:has(input:focus){border-color:transparent}
14
- ._1p9x1p6i._1p9x1p6i:has(input:focus){border-color:var(--ds-border-focused,#388bff)}
15
+ ._1p9x1v1w._1p9x1v1w:has(input:focus){border-color:var(--ds-border-focused,#4688ec)}
15
16
  ._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
16
17
  ._12ji1r31{outline-color:currentColor}
17
18
  ._12y31o36{outline-width:medium}
18
19
  ._13xeglyw:invalid{box-shadow:none}
19
20
  ._141f12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}
20
21
  ._14ji12x7:not([data-compact]){padding-block-end:var(--ds-space-075,6px)}
21
- ._14jiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}
22
22
  ._16hg1j28._16hg1j28{background-color:transparent}
23
23
  ._16jlkb7n{flex-grow:1}
24
24
  ._16qsizbr{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
@@ -27,15 +27,14 @@
27
27
  ._1bsb1osq{width:100%}
28
28
  ._1e0c1txw{display:flex}
29
29
  ._1goxglyw::-ms-clear{display:none}
30
- ._1idr131l::-ms-input-placeholder{color:var(--ds-text-subtlest,#626f86)}
31
- ._1idr131l::placeholder{color:var(--ds-text-subtlest,#626f86)}
32
- ._1idr1lh4::-ms-input-placeholder{color:var(--ds-text-disabled,#091e424f)}
33
- ._1idr1lh4::placeholder{color:var(--ds-text-disabled,#091e424f)}
30
+ ._1idr1gmx::-ms-input-placeholder{color:var(--ds-text-disabled,#080f214a)}
31
+ ._1idr1gmx::placeholder{color:var(--ds-text-disabled,#080f214a)}
32
+ ._1idr1rpy::-ms-input-placeholder{color:var(--ds-text-subtlest,#6b6e76)}
33
+ ._1idr1rpy::placeholder{color:var(--ds-text-subtlest,#6b6e76)}
34
34
  ._1kod12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}
35
35
  ._1l02v77o[data-compact]{padding-block-start:var(--ds-space-025,2px)}
36
36
  ._1n7e1l2s:placeholder-shown{text-overflow:ellipsis}
37
37
  ._1o9zkb7n{flex-shrink:1}
38
- ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
39
38
  ._1q51e4h9{padding-block-start:var(--ds-border-width,1px)}
40
39
  ._1qu2glyw{outline-style:none}
41
40
  ._1reo15vq{overflow-x:hidden}
@@ -45,37 +44,33 @@
45
44
  ._80om13gf{cursor:not-allowed}
46
45
  ._80om1kdv{cursor:text}
47
46
  ._80om1kw7{cursor:inherit}
48
- ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
49
47
  ._85i5e4h9{padding-block-end:var(--ds-border-width,1px)}
50
48
  ._bfhk1j28{background-color:transparent}
51
49
  ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
52
- ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
53
- ._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
50
+ ._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
54
51
  ._bozgidpf{padding-inline-start:0}
55
52
  ._daj712x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}
56
53
  ._ect41odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
57
54
  ._i0dl1osq{flex-basis:100%}
58
55
  ._lcxv1wug{pointer-events:auto}
59
56
  ._olc612x7:not([data-compact]){padding-block-start:var(--ds-space-075,6px)}
60
- ._olc6u2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}
61
57
  ._q4333sij._q4333sij:has(input:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
62
- ._q433q049._q433q049:has(input:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
58
+ ._q433vyy1._q433vyy1:has(input:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
63
59
  ._qao91j28._qao91j28:has(input:focus){background-color:transparent}
64
60
  ._qao9r01l._qao9r01l:has(input:focus){background-color:var(--ds-background-input-pressed,#fff)}
65
61
  ._s7n4jp4b{vertical-align:top}
66
62
  ._slp31hna{word-wrap:break-word}
67
- ._syaz1fxt{color:var(--ds-text,#172b4d)}
63
+ ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
68
64
  ._syaz1kw7{color:inherit}
69
- ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
65
+ ._syazi7uo{color:var(--ds-text,#292a2e)}
70
66
  ._uk1sr01l:has(input:focus){background-color:var(--ds-background-input-pressed,#fff)}
71
67
  ._vchhusvi{box-sizing:border-box}
72
- ._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
73
68
  ._y4tiidpf{padding-inline-end:0}
74
69
  ._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}
75
- ._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
76
70
  ._4cvx1j28:hover{border-color:transparent}
71
+ ._4cvxrsbi:hover{border-color:var(--ds-border-input,#8c8f97)}
77
72
  ._1dbzizbr:hover{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
78
- ._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
79
73
  ._irr31j28:hover{background-color:transparent}
74
+ ._irr3l4ek:hover{background-color:var(--ds-background-input-hovered,#f8f8f8)}
80
75
  @media screen and (-ms-high-contrast:active){._1fnx18qt{color:GrayText}._6up518qt{border-color:GrayText}._msj6gir2:has(input:focus){border-color:Highlight}}
81
76
  @media (min-width:30rem){._14md1odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}._1srd1b66[data-compact]{padding-block-end:var(--ds-space-050,4px)}._oi9h1b66[data-compact]{padding-block-start:var(--ds-space-050,4px)}._1e3012x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}._1txv12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}._1tn22smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._l9oiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}._549yu2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}._1h5w12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}._124212x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}}
package/dist/esm/text-field.js CHANGED
@@ -19,28 +19,28 @@ var inputMediaDisabled = null;
19
19
  var analyticsParams = {
20
20
  componentName: 'textField',
21
21
  packageName: "@atlaskit/textfield",
22
- packageVersion: "8.0.14"
22
+ packageVersion: "8.1.0"
23
23
  };
24
24
  var disabledStyle = {
25
- standard: "_1h6dsyzs _bfhksyzs _syaz1lh4 _80om13gf",
26
- subtle: "_1h6d1j28 _bfhk1j28 _syaz1lh4 _80om13gf",
27
- none: "_1h6d1j28 _bfhk1j28 _syaz1lh4 _80om13gf"
25
+ standard: "_1h6dby5v _bfhkby5v _syaz1gmx _80om13gf",
26
+ subtle: "_1h6d1j28 _bfhk1j28 _syaz1gmx _80om13gf",
27
+ none: "_1h6d1j28 _bfhk1j28 _syaz1gmx _80om13gf"
28
28
  };
29
29
  var invalidStyle = null;
30
30
  var focusWithinStyle = {
31
- standard: "_1p9x1p6i _qao9r01l _q433q049",
32
- subtle: "_1p9x1p6i _qao9r01l _q433q049",
31
+ standard: "_1p9x1v1w _qao9r01l _q433vyy1",
32
+ subtle: "_1p9x1v1w _qao9r01l _q433vyy1",
33
33
  none: "_1p9x1j28 _qao91j28 _q4333sij"
34
34
  };
35
35
  var hoverStyle = {
36
- standard: "_4cvx1elr _irr31d5g",
37
- subtle: "_4cvx1elr _irr31d5g",
36
+ standard: "_4cvxrsbi _irr3l4ek",
37
+ subtle: "_4cvxrsbi _irr3l4ek",
38
38
  none: "_4cvx1j28 _irr31j28"
39
39
  };
40
40
  var getContainerTextBgAndBorderColor = {
41
- standard: "_1h6d1elr _1dqonqa1 _syaz1fxt _80om1kdv _bfhk1j9a _msj6gir2",
42
- subtle: "_1h6d1j28 _1dqonqa1 _syaz1fxt _80om1kdv _16hg1j28 _msj6gir2",
43
- none: "_1h6d1j28 _1dqoglyw _syaz1fxt _80om1kdv _16hg1j28 _msj6gir2"
41
+ standard: "_1h6drsbi _1dqonqa1 _syazi7uo _80om1kdv _bfhk1j9a _msj6gir2",
42
+ subtle: "_1h6d1j28 _1dqonqa1 _syazi7uo _80om1kdv _16hg1j28 _msj6gir2",
43
+ none: "_1h6d1j28 _1dqoglyw _syazi7uo _80om1kdv _16hg1j28 _msj6gir2"
44
44
  };
45
45
  var widthMap = {
46
46
  xsmall: 80,
@@ -58,13 +58,16 @@ var containerStyleAppearance = {
58
58
  none: "_1dqoglyw"
59
59
  };
60
60
  var containerStyles = null;
61
+ var containerStylesT26Shape = null;
61
62
  var inputDisabledStyle = null;
62
- var inputCompactStyleWithFg = null;
63
63
  var inputCompactStyle = null;
64
64
  var inputMonospacedStyle = null;
65
- var inputFontStyleWithFG = null;
66
- var inputStyleMonospacedWithFg = null;
67
- var inputStyleNotDataCompactWithFG = null;
65
+
66
+ // iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
67
+ // To prevent this zoom behaviour on mobile devices, the textfield uses font.body.large (16px) by default,
68
+ // then switches to the smaller font.body on screens wider than 30rem (desktop).
69
+ // @see: https://medium.com/@rares.popescu/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields-8a71479e542e
70
+
68
71
  var inputStyle = null;
69
72
 
70
73
  /**
@@ -151,7 +154,7 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
151
154
  maxWidth: "".concat(getMaxWidth(width))
152
155
  },
153
156
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
154
- className: ax(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnqfajl", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qsizbr _1dbzizbr _uk1sr01l", className])
157
+ className: ax(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnqfajl", fg('platform-dst-shape-theme-default') && "_1tnq1qi0", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qsizbr _1dbzizbr _uk1sr01l", className])
155
158
  }, elemBeforeInput, /*#__PURE__*/React.createElement("input", _extends({}, spreadProps, {
156
159
  "aria-invalid": isInvalid ? isInvalid : undefined
157
160
  // TODO: When removing legacy theming fix this.
@@ -170,7 +173,7 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
170
173
  readOnly: isReadOnly,
171
174
  ref: setInputRef,
172
175
  required: isRequired,
173
- className: ax(["_19itidpf _11c82smr _12ji1r31 _1qu2glyw _12y31o36 _vchhusvi _1bsb1osq _1ul9idpf _bfhk1j28 _syaz1kw7 _80om1kw7 _14jiu2gc _olc6u2gc _1kod12x7 _7ba012x7 _1goxglyw _13xeglyw _1n7e1l2s _1idr131l", isMonospaced && "_ect41odn", isCompact && "_85i51b66 _1q511b66 _y4ti12x7 _bozg12x7", isDisabled && "_syaz1lh4 _1idr1lh4", isDisabled && "_1fnx18qt", !isCompact && fg('platform_design_system_team_safari_input_fix') && "_14ji12x7 _olc612x7 _1kod12x7 _7ba012x7 _l9oiu2gc _549yu2gc _1h5w12x7 _124212x7", fg('platform_design_system_team_safari_input_fix') && "_11c81ixg _1tn22smr", isCompact && fg('platform_design_system_team_safari_input_fix') && "_11zpv77o _1l02v77o _daj712x7 _141f12x7 _1srd1b66 _oi9h1b66 _1e3012x7 _1txv12x7", isMonospaced && fg('platform_design_system_team_safari_input_fix') && "_ect41odn _14md1odn"])
176
+ className: ax(["_19itidpf _11c81ixg _12ji1r31 _1qu2glyw _12y31o36 _vchhusvi _1bsb1osq _1ul9idpf _bfhk1j28 _syaz1kw7 _80om1kw7 _14ji12x7 _olc612x7 _1kod12x7 _7ba012x7 _1goxglyw _13xeglyw _1n7e1l2s _1idr1rpy _1tn22smr _l9oiu2gc _549yu2gc _1h5w12x7 _124212x7", isMonospaced && "_ect41odn _14md1odn", isCompact && "_11zpv77o _1l02v77o _daj712x7 _141f12x7 _1srd1b66 _oi9h1b66 _1e3012x7 _1txv12x7", isDisabled && "_syaz1gmx _1idr1gmx", isDisabled && "_1fnx18qt"])
174
177
  })), elemAfterInput);
175
178
  });
176
179
  export default Textfield;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "8.0.15",
3
+ "version": "8.2.0",
4
4
  "description": "A text field is an input that allows a user to write or edit text.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -26,8 +26,7 @@
26
26
  "dependencies": {
27
27
  "@atlaskit/analytics-next": "^11.1.0",
28
28
  "@atlaskit/platform-feature-flags": "^1.1.0",
29
- "@atlaskit/theme": "^21.0.0",
30
- "@atlaskit/tokens": "^8.0.0",
29
+ "@atlaskit/tokens": "^8.4.0",
31
30
  "@babel/runtime": "^7.0.0",
32
31
  "@compiled/react": "^0.18.6"
33
32
  },
@@ -39,15 +38,14 @@
39
38
  "@af/integration-testing": "workspace:^",
40
39
  "@af/visual-regression": "workspace:^",
41
40
  "@atlaskit/avatar": "^25.5.0",
42
- "@atlaskit/button": "^23.6.0",
41
+ "@atlaskit/button": "^23.7.0",
43
42
  "@atlaskit/docs": "^11.2.0",
44
- "@atlaskit/ds-lib": "^5.2.0",
45
- "@atlaskit/form": "^14.2.0",
46
- "@atlaskit/icon": "^28.5.0",
43
+ "@atlaskit/ds-lib": "^5.3.0",
44
+ "@atlaskit/form": "^14.3.0",
45
+ "@atlaskit/icon": "^29.0.0",
47
46
  "@atlaskit/link": "^3.2.0",
48
- "@atlaskit/primitives": "^16.1.0",
49
- "@atlaskit/section-message": "^8.9.0",
50
- "@atlaskit/ssr": "workspace:^",
47
+ "@atlaskit/primitives": "^16.4.0",
48
+ "@atlaskit/section-message": "^8.10.0",
51
49
  "@atlassian/ssr-tests": "workspace:^",
52
50
  "@testing-library/react": "^13.4.0",
53
51
  "@testing-library/user-event": "^14.4.3",
@@ -86,10 +84,10 @@
86
84
  ]
87
85
  }
88
86
  },
89
- "homepage": "https://atlassian.design/components/textfield/",
90
87
  "platform-feature-flags": {
91
- "platform_design_system_team_safari_input_fix": {
88
+ "platform-dst-shape-theme-default": {
92
89
  "type": "boolean"
93
90
  }
94
- }
91
+ },
92
+ "homepage": "https://atlassian.design/components/textfield/"
95
93
  }