@atlaskit/textfield 6.0.1 → 6.1.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 (12) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/styles.js +5 -5
  3. package/dist/cjs/text-field.js +3 -3
  4. package/dist/es2019/styles.js +5 -5
  5. package/dist/es2019/text-field.js +1 -1
  6. package/dist/esm/styles.js +5 -5
  7. package/dist/esm/text-field.js +1 -1
  8. package/dist/types/styles.d.ts +4 -4
  9. package/dist/types/types.d.ts +5 -2
  10. package/dist/types-ts4.5/styles.d.ts +4 -4
  11. package/dist/types-ts4.5/types.d.ts +5 -2
  12. package/package.json +2 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/textfield
2
2
 
3
+ ## 6.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#80805](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80805) [`427c2dd9e0d6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/427c2dd9e0d6) - [ux] Update input border width from 2px to 1px with darker color to meet 3:1 color contrast
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+
3
13
  ## 6.0.1
4
14
 
5
15
  ### Patch Changes
package/dist/cjs/styles.js CHANGED
@@ -56,7 +56,7 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
56
56
  '&:focus-within:not([data-disabled])': {
57
57
  backgroundColor: backgroundColorFocus[appearance],
58
58
  borderColor: borderColorFocus[appearance],
59
- boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance]) : undefined
59
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance])
60
60
  },
61
61
  '&[data-disabled]': _objectSpread({
62
62
  color: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
@@ -67,12 +67,12 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
67
67
  }),
68
68
  '&[data-invalid], &[data-invalid]:hover': {
69
69
  borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")"),
70
- boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(_colors.R400, ")")) : undefined
70
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(_colors.R400, ")"))
71
71
  },
72
72
  '&[data-invalid]:focus-within': {
73
73
  backgroundColor: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")"),
74
74
  borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
75
- boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B200, ")")) : undefined
75
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B200, ")"))
76
76
  },
77
77
  '@media screen and (-ms-high-contrast: active)': {
78
78
  '&[data-invalid]:focus-within': {
@@ -102,8 +102,8 @@ var containerStyles = exports.containerStyles = function containerStyles(appeara
102
102
  alignItems: 'center'
103
103
  }, getContainerTextBgAndBorderColor(appearance)), {}, {
104
104
  borderRadius: 3,
105
- borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : 2
106
- }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') && appearance !== 'none' ? {
105
+ borderWidth: "var(--ds-border-width, 1px)"
106
+ }, appearance !== 'none' ? {
107
107
  padding: "var(--ds-border-width, 1px)".concat(" 0")
108
108
  } : {}), {}, {
109
109
  borderStyle: appearance === 'none' ? 'none' : 'solid',
package/dist/cjs/text-field.js CHANGED
@@ -16,14 +16,14 @@ var _analyticsNext = require("@atlaskit/analytics-next");
16
16
  var _styles = require("./styles");
17
17
  var _excluded = ["appearance", "className", "elemAfterInput", "elemBeforeInput", "isCompact", "isDisabled", "isInvalid", "isMonospaced", "isReadOnly", "isRequired", "name", "onBlur", "onChange", "onFocus", "onMouseDown", "placeholder", "testId", "width"];
18
18
  /** @jsx jsx */
19
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
20
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
21
21
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
22
22
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
23
23
  var analyticsParams = {
24
24
  componentName: 'textField',
25
25
  packageName: "@atlaskit/textfield",
26
- packageVersion: "6.0.1"
26
+ packageVersion: "6.1.0"
27
27
  };
28
28
  var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
29
29
  var _props$appearance = props.appearance,
package/dist/es2019/styles.js CHANGED
@@ -47,7 +47,7 @@ const getContainerTextBgAndBorderColor = appearance => ({
47
47
  '&:focus-within:not([data-disabled])': {
48
48
  backgroundColor: backgroundColorFocus[appearance],
49
49
  borderColor: borderColorFocus[appearance],
50
- boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance]}` : undefined
50
+ boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance]}`
51
51
  },
52
52
  '&[data-disabled]': {
53
53
  color: `var(--ds-text-disabled, ${N70})`,
@@ -61,12 +61,12 @@ const getContainerTextBgAndBorderColor = appearance => ({
61
61
  },
62
62
  '&[data-invalid], &[data-invalid]:hover': {
63
63
  borderColor: `var(--ds-border-danger, ${R400})`,
64
- boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-danger, ${R400})`}` : undefined
64
+ boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-danger, ${R400})`}`
65
65
  },
66
66
  '&[data-invalid]:focus-within': {
67
67
  backgroundColor: `var(--ds-background-input-pressed, ${N0})`,
68
68
  borderColor: `var(--ds-border-focused, ${B200})`,
69
- boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B200})`}` : undefined
69
+ boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B200})`}`
70
70
  },
71
71
  '@media screen and (-ms-high-contrast: active)': {
72
72
  '&[data-invalid]:focus-within': {
@@ -92,9 +92,9 @@ export const containerStyles = (appearance, width) => ({
92
92
  alignItems: 'center',
93
93
  ...getContainerTextBgAndBorderColor(appearance),
94
94
  borderRadius: 3,
95
- borderWidth: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : 2,
95
+ borderWidth: "var(--ds-border-width, 1px)",
96
96
  // add 1px padding on both top and bottom to keep the same overall height after border reduced from 2px to 1px under feature flag
97
- ...(getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') && appearance !== 'none' ? {
97
+ ...(appearance !== 'none' ? {
98
98
  padding: `${"var(--ds-border-width, 1px)"} 0`
99
99
  } : {}),
100
100
  borderStyle: appearance === 'none' ? 'none' : 'solid',
package/dist/es2019/text-field.js CHANGED
@@ -7,7 +7,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
7
7
  const analyticsParams = {
8
8
  componentName: 'textField',
9
9
  packageName: "@atlaskit/textfield",
10
- packageVersion: "6.0.1"
10
+ packageVersion: "6.1.0"
11
11
  };
12
12
  const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
13
13
  const {
package/dist/esm/styles.js CHANGED
@@ -51,7 +51,7 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
51
51
  '&:focus-within:not([data-disabled])': {
52
52
  backgroundColor: backgroundColorFocus[appearance],
53
53
  borderColor: borderColorFocus[appearance],
54
- boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance]) : undefined
54
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance])
55
55
  },
56
56
  '&[data-disabled]': _objectSpread({
57
57
  color: "var(--ds-text-disabled, ".concat(N70, ")"),
@@ -62,12 +62,12 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
62
62
  }),
63
63
  '&[data-invalid], &[data-invalid]:hover': {
64
64
  borderColor: "var(--ds-border-danger, ".concat(R400, ")"),
65
- boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(R400, ")")) : undefined
65
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(R400, ")"))
66
66
  },
67
67
  '&[data-invalid]:focus-within': {
68
68
  backgroundColor: "var(--ds-background-input-pressed, ".concat(N0, ")"),
69
69
  borderColor: "var(--ds-border-focused, ".concat(B200, ")"),
70
- boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(B200, ")")) : undefined
70
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(B200, ")"))
71
71
  },
72
72
  '@media screen and (-ms-high-contrast: active)': {
73
73
  '&[data-invalid]:focus-within': {
@@ -97,8 +97,8 @@ export var containerStyles = function containerStyles(appearance, width) {
97
97
  alignItems: 'center'
98
98
  }, getContainerTextBgAndBorderColor(appearance)), {}, {
99
99
  borderRadius: 3,
100
- borderWidth: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : 2
101
- }, getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') && appearance !== 'none' ? {
100
+ borderWidth: "var(--ds-border-width, 1px)"
101
+ }, appearance !== 'none' ? {
102
102
  padding: "var(--ds-border-width, 1px)".concat(" 0")
103
103
  } : {}), {}, {
104
104
  borderStyle: appearance === 'none' ? 'none' : 'solid',
package/dist/esm/text-field.js CHANGED
@@ -13,7 +13,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
13
13
  var analyticsParams = {
14
14
  componentName: 'textField',
15
15
  packageName: "@atlaskit/textfield",
16
- packageVersion: "6.0.1"
16
+ packageVersion: "6.1.0"
17
17
  };
18
18
  var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
19
19
  var _props$appearance = props.appearance,
package/dist/types/styles.d.ts CHANGED
@@ -14,7 +14,7 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
14
14
  readonly pointerEvents: "auto";
15
15
  readonly padding?: string | undefined;
16
16
  readonly borderRadius: 3;
17
- readonly borderWidth: "var(--ds-border-width)" | 2;
17
+ readonly borderWidth: "var(--ds-border-width)";
18
18
  readonly backgroundColor: string;
19
19
  readonly borderColor: string;
20
20
  readonly color: "var(--ds-text)";
@@ -26,7 +26,7 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
26
26
  readonly '&:focus-within:not([data-disabled])': {
27
27
  backgroundColor: string;
28
28
  borderColor: string;
29
- boxShadow: string | undefined;
29
+ boxShadow: string;
30
30
  };
31
31
  readonly '&[data-disabled]': {
32
32
  backgroundColor?: "var(--ds-background-disabled)" | undefined;
@@ -36,12 +36,12 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
36
36
  };
37
37
  readonly '&[data-invalid], &[data-invalid]:hover': {
38
38
  borderColor: "var(--ds-border-danger)";
39
- boxShadow: string | undefined;
39
+ boxShadow: string;
40
40
  };
41
41
  readonly '&[data-invalid]:focus-within': {
42
42
  backgroundColor: "var(--ds-background-input-pressed)";
43
43
  borderColor: "var(--ds-border-focused)";
44
- boxShadow: string | undefined;
44
+ boxShadow: string;
45
45
  };
46
46
  readonly '@media screen and (-ms-high-contrast: active)': {
47
47
  '&[data-invalid]:focus-within': {
package/dist/types/types.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  import React, { AllHTMLAttributes, FormEventHandler } from 'react';
2
2
  export interface TextfieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
3
3
  /**
4
- * Affects the visual style of the text field.
4
+ * Controls the appearance of the field.
5
+ * Subtle shows styling on hover.
6
+ * None prevents all field styling. Take care when using the none appearance as this doesn't include accessible interactions.
5
7
  */
6
8
  appearance?: Appearance;
7
9
  /**
@@ -10,7 +12,8 @@ export interface TextfieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>
10
12
  isCompact?: boolean;
11
13
  /**
12
14
  * Sets the field as to appear disabled,
13
- * users will not be able to interact with the text field.
15
+ * people will not be able to interact with the text field and it won't appear in the focus order.
16
+ * Wherever possible, prefer using validation and error messaging over disabled fields for a more accessible experience.
14
17
  */
15
18
  isDisabled?: boolean;
16
19
  /**
package/dist/types-ts4.5/styles.d.ts CHANGED
@@ -14,7 +14,7 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
14
14
  readonly pointerEvents: "auto";
15
15
  readonly padding?: string | undefined;
16
16
  readonly borderRadius: 3;
17
- readonly borderWidth: "var(--ds-border-width)" | 2;
17
+ readonly borderWidth: "var(--ds-border-width)";
18
18
  readonly backgroundColor: string;
19
19
  readonly borderColor: string;
20
20
  readonly color: "var(--ds-text)";
@@ -26,7 +26,7 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
26
26
  readonly '&:focus-within:not([data-disabled])': {
27
27
  backgroundColor: string;
28
28
  borderColor: string;
29
- boxShadow: string | undefined;
29
+ boxShadow: string;
30
30
  };
31
31
  readonly '&[data-disabled]': {
32
32
  backgroundColor?: "var(--ds-background-disabled)" | undefined;
@@ -36,12 +36,12 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
36
36
  };
37
37
  readonly '&[data-invalid], &[data-invalid]:hover': {
38
38
  borderColor: "var(--ds-border-danger)";
39
- boxShadow: string | undefined;
39
+ boxShadow: string;
40
40
  };
41
41
  readonly '&[data-invalid]:focus-within': {
42
42
  backgroundColor: "var(--ds-background-input-pressed)";
43
43
  borderColor: "var(--ds-border-focused)";
44
- boxShadow: string | undefined;
44
+ boxShadow: string;
45
45
  };
46
46
  readonly '@media screen and (-ms-high-contrast: active)': {
47
47
  '&[data-invalid]:focus-within': {
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  import React, { AllHTMLAttributes, FormEventHandler } from 'react';
2
2
  export interface TextfieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
3
3
  /**
4
- * Affects the visual style of the text field.
4
+ * Controls the appearance of the field.
5
+ * Subtle shows styling on hover.
6
+ * None prevents all field styling. Take care when using the none appearance as this doesn't include accessible interactions.
5
7
  */
6
8
  appearance?: Appearance;
7
9
  /**
@@ -10,7 +12,8 @@ export interface TextfieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>
10
12
  isCompact?: boolean;
11
13
  /**
12
14
  * Sets the field as to appear disabled,
13
- * users will not be able to interact with the text field.
15
+ * people will not be able to interact with the text field and it won't appear in the focus order.
16
+ * Wherever possible, prefer using validation and error messaging over disabled fields for a more accessible experience.
14
17
  */
15
18
  isDisabled?: boolean;
16
19
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "6.0.1",
3
+ "version": "6.1.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/"
@@ -29,7 +29,7 @@
29
29
  "@atlaskit/analytics-next": "^9.2.0",
30
30
  "@atlaskit/platform-feature-flags": "^0.2.0",
31
31
  "@atlaskit/theme": "^12.6.0",
32
- "@atlaskit/tokens": "^1.38.0",
32
+ "@atlaskit/tokens": "^1.41.0",
33
33
  "@babel/runtime": "^7.0.0",
34
34
  "@emotion/react": "^11.7.1"
35
35
  },
@@ -93,9 +93,6 @@
93
93
  "platform-feature-flags": {
94
94
  "platform.design-system-team.border-checkbox_nyoiu": {
95
95
  "type": "boolean"
96
- },
97
- "platform.design-system-team.update-input-border-wdith_5abwv": {
98
- "type": "boolean"
99
96
  }
100
97
  },
101
98
  "homepage": "https://atlassian.design/components/textfield/",