@atlaskit/textfield 5.6.0 → 5.6.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/textfield
 
+## 5.6.2
+
+### Patch Changes
+
+- [`a01cf0168b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a01cf0168b8) - update border width with border spacing token
+
+## 5.6.1
+
+### Patch Changes
+
+- [`3a8d6f61240`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3a8d6f61240) - [ux] Adds `text-overflow: ellipsis` to placeholder text.
+
 ## 5.6.0
 
 ### Minor Changes

package/dist/cjs/styles.js

@@ -94,7 +94,7 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     '&:focus-within:not([data-disabled])': {
       backgroundColor: backgroundColorFocus[appearance][mode],
       borderColor: borderColorFocus[appearance][mode],
-      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(borderColorFocus[appearance][mode]) : undefined
+      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance][mode]) : undefined
     },
     '&[data-disabled]': _objectSpread({
       color: disabledRules[mode].textColor,
@@ -105,12 +105,12 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     }),
     '&[data-invalid], &[data-invalid]:hover': {
       borderColor: invalidRules[mode].borderColor,
-      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(invalidRules[mode].borderColor) : undefined
+      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules[mode].borderColor) : undefined
     },
     '&[data-invalid]:focus-within': {
       backgroundColor: invalidRules[mode].backgroundColorFocus,
       borderColor: invalidRules[mode].borderColorFocus,
-      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(invalidRules[mode].borderColorFocus) : undefined
+      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules[mode].borderColorFocus) : undefined
     },
     '@media screen and (-ms-high-contrast: active)': {
       '&[data-invalid]:focus-within': {
@@ -140,11 +140,11 @@ var containerStyles = function containerStyles(appearance, mode, width) {
     alignItems: 'center'
   }, getContainerTextBgAndBorderColor(appearance, mode)), {}, {
     borderRadius: 3,
-    borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2
+    borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2
   }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ?
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   {
-    padding: '1px 0'
+    padding: "var(--ds-border-width, 1px)".concat(" 0")
   } : {}), {}, {
     borderStyle: appearance === 'none' ? 'none' : 'solid',
     boxSizing: 'border-box',
@@ -198,6 +198,9 @@ var inputStyles = function inputStyles(mode) {
     '&:invalid': {
       boxShadow: 'none'
     },
+    '&:placeholder-shown': {
+      textOverflow: 'ellipsis'
+    },
     '&::placeholder': {
       color: componentTokens.placeholderTextColor[mode],
       '&:disabled': {

package/dist/cjs/text-field.js

@@ -24,7 +24,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.6.0"
+  packageVersion: "5.6.2"
 };
 var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$appearance = props.appearance,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.6.0",
+	"version": "5.6.2",
 	"sideEffects": false
 }

package/dist/es2019/styles.js

@@ -82,7 +82,7 @@ const getContainerTextBgAndBorderColor = (appearance, mode) => ({
   '&:focus-within:not([data-disabled])': {
     backgroundColor: backgroundColorFocus[appearance][mode],
     borderColor: borderColorFocus[appearance][mode],
-    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 1px ${borderColorFocus[appearance][mode]}` : undefined
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance][mode]}` : undefined
   },
   '&[data-disabled]': {
     color: disabledRules[mode].textColor,
@@ -96,12 +96,12 @@ const getContainerTextBgAndBorderColor = (appearance, mode) => ({
   },
   '&[data-invalid], &[data-invalid]:hover': {
     borderColor: invalidRules[mode].borderColor,
-    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 1px ${invalidRules[mode].borderColor}` : undefined
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules[mode].borderColor}` : undefined
   },
   '&[data-invalid]:focus-within': {
     backgroundColor: invalidRules[mode].backgroundColorFocus,
     borderColor: invalidRules[mode].borderColorFocus,
-    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 1px ${invalidRules[mode].borderColorFocus}` : undefined
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules[mode].borderColorFocus}` : undefined
   },
   '@media screen and (-ms-high-contrast: active)': {
     '&[data-invalid]:focus-within': {
@@ -127,12 +127,12 @@ export const containerStyles = (appearance, mode, width) => ({
   alignItems: 'center',
   ...getContainerTextBgAndBorderColor(appearance, mode),
   borderRadius: 3,
-  borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2,
+  borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2,
   // add 1px padding on both top and bottom to keep the same overall height after border reduced from 2px to 1px under feature flag
   ...(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ?
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   {
-    padding: '1px 0'
+    padding: `${"var(--ds-border-width, 1px)"} 0`
   } : {}),
   borderStyle: appearance === 'none' ? 'none' : 'solid',
   boxSizing: 'border-box',
@@ -183,6 +183,9 @@ export const inputStyles = mode => ({
   '&:invalid': {
     boxShadow: 'none'
   },
+  '&:placeholder-shown': {
+    textOverflow: 'ellipsis'
+  },
   '&::placeholder': {
     color: componentTokens.placeholderTextColor[mode],
     '&:disabled': {

package/dist/es2019/text-field.js

@@ -8,7 +8,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
 const analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.6.0"
+  packageVersion: "5.6.2"
 };
 const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.6.0",
+	"version": "5.6.2",
 	"sideEffects": false
 }

package/dist/esm/styles.js

@@ -86,7 +86,7 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     '&:focus-within:not([data-disabled])': {
       backgroundColor: backgroundColorFocus[appearance][mode],
       borderColor: borderColorFocus[appearance][mode],
-      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(borderColorFocus[appearance][mode]) : undefined
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance][mode]) : undefined
     },
     '&[data-disabled]': _objectSpread({
       color: disabledRules[mode].textColor,
@@ -97,12 +97,12 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     }),
     '&[data-invalid], &[data-invalid]:hover': {
       borderColor: invalidRules[mode].borderColor,
-      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(invalidRules[mode].borderColor) : undefined
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules[mode].borderColor) : undefined
     },
     '&[data-invalid]:focus-within': {
       backgroundColor: invalidRules[mode].backgroundColorFocus,
       borderColor: invalidRules[mode].borderColorFocus,
-      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(invalidRules[mode].borderColorFocus) : undefined
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules[mode].borderColorFocus) : undefined
     },
     '@media screen and (-ms-high-contrast: active)': {
       '&[data-invalid]:focus-within': {
@@ -132,11 +132,11 @@ export var containerStyles = function containerStyles(appearance, mode, width) {
     alignItems: 'center'
   }, getContainerTextBgAndBorderColor(appearance, mode)), {}, {
     borderRadius: 3,
-    borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2
+    borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2
   }, getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ?
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   {
-    padding: '1px 0'
+    padding: "var(--ds-border-width, 1px)".concat(" 0")
   } : {}), {}, {
     borderStyle: appearance === 'none' ? 'none' : 'solid',
     boxSizing: 'border-box',
@@ -189,6 +189,9 @@ export var inputStyles = function inputStyles(mode) {
     '&:invalid': {
       boxShadow: 'none'
     },
+    '&:placeholder-shown': {
+      textOverflow: 'ellipsis'
+    },
     '&::placeholder': {
       color: componentTokens.placeholderTextColor[mode],
       '&:disabled': {

package/dist/esm/text-field.js

@@ -14,7 +14,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.6.0"
+  packageVersion: "5.6.2"
 };
 var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.6.0",
+	"version": "5.6.2",
 	"sideEffects": false
 }

package/dist/types/styles.d.ts

@@ -15,7 +15,7 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
     readonly pointerEvents: "auto";
     readonly padding?: string | undefined;
     readonly borderRadius: 3;
-    readonly borderWidth: 1 | 2;
+    readonly borderWidth: "var(--ds-border-width)" | 2;
     readonly backgroundColor: string;
     readonly borderColor: string;
     readonly color: "var(--ds-text)";
@@ -89,6 +89,9 @@ export declare const inputStyles: (mode: ThemeModes) => {
     readonly '&:invalid': {
         readonly boxShadow: "none";
     };
+    readonly '&:placeholder-shown': {
+        readonly textOverflow: "ellipsis";
+    };
     readonly '&::placeholder': {
         readonly color: "var(--ds-text-subtlest)";
         readonly '&:disabled': {

package/dist/types-ts4.5/styles.d.ts

@@ -15,7 +15,7 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
     readonly pointerEvents: "auto";
     readonly padding?: string | undefined;
     readonly borderRadius: 3;
-    readonly borderWidth: 1 | 2;
+    readonly borderWidth: "var(--ds-border-width)" | 2;
     readonly backgroundColor: string;
     readonly borderColor: string;
     readonly color: "var(--ds-text)";
@@ -89,6 +89,9 @@ export declare const inputStyles: (mode: ThemeModes) => {
     readonly '&:invalid': {
         readonly boxShadow: "none";
     };
+    readonly '&:placeholder-shown': {
+        readonly textOverflow: "ellipsis";
+    };
     readonly '&::placeholder': {
         readonly color: "var(--ds-text-subtlest)";
         readonly '&:disabled': {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.6.0",
+  "version": "5.6.2",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -54,6 +54,7 @@
     "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
+    "jest-axe": "^4.0.0",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",