@atlaskit/textfield 5.5.2 → 5.6.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/textfield
 
+## 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
+
+- [`a90730ddb33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a90730ddb33) - Disallow use of unused prop `disabled`. Disabled textfields should use
+  `isDisabled`. This change includes a codemod for transitioning existing code
+  over to the proper usage.
+
 ## 5.5.2
 
 ### Patch Changes

package/codemods/5.6.0-deprecate-disabled.tsx

@@ -0,0 +1,7 @@
+import { createTransformer } from '@atlaskit/codemod-utils';
+
+import { renameDisabledToIsDisabled } from './migrations/rename-disabled-to-isdisabled';
+
+const transformer = createTransformer([renameDisabledToIsDisabled]);
+
+export default transformer;

package/codemods/__tests__/rename-disabled-to-isdisabled.tsx

@@ -0,0 +1,143 @@
+jest.autoMockOff();
+
+import { createTransformer } from '@atlaskit/codemod-utils';
+
+import { renameDisabledToIsDisabled } from '../migrations/rename-disabled-to-isdisabled';
+
+const transformer = createTransformer([renameDisabledToIsDisabled]);
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('Rename `disabled` prop to `isDisabled`', () => {
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Textfield from '@atlaskit/textfield';
+
+    const SimpleTextfield = () => {
+      return <Textfield disabled />;
+    }
+  `,
+    `
+    import React from 'react';
+    import Textfield from '@atlaskit/textfield';
+
+    const SimpleTextfield = () => {
+      return <Textfield isDisabled />;
+    }
+  `,
+    'should rename single line disabled to isDisabled',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Textfield from '@atlaskit/textfield';
+
+    const SimpleTextfield = () => {
+      return (
+        <Textfield
+          name="basic"
+          aria-label="default text field"
+          disabled
+        />
+      );
+    }
+  `,
+    `
+    import React from 'react';
+    import Textfield from '@atlaskit/textfield';
+
+    const SimpleTextfield = () => {
+      return (
+        <Textfield
+          name="basic"
+          aria-label="default text field"
+          isDisabled
+        />
+      );
+    }
+  `,
+    'should rename multiline disabled to isDisabled',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import Textfield from '@atlaskit/textfield';
+
+    const SimpleTextfield = () => {
+      const disabled = true;
+
+      return (
+        <Textfield
+          name="basic"
+          aria-label="default text field"
+          disabled={disabled}
+        />
+      );
+    }
+  `,
+    `
+    import React from 'react';
+    import Textfield from '@atlaskit/textfield';
+
+    const SimpleTextfield = () => {
+      const disabled = true;
+
+      return (
+        <Textfield
+          name="basic"
+          aria-label="default text field"
+          isDisabled={disabled}
+        />
+      );
+    }
+  `,
+    'should rename disabled to isDisabled with indirection',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import AkTextfield from '@atlaskit/textfield';
+
+    const SimpleTextfield = () => {
+      const disabled = true;
+
+      return (
+        <AkTextfield
+          name="basic"
+          aria-label="default text field"
+          disabled={disabled}
+        />
+      );
+    }
+  `,
+    `
+    import React from 'react';
+    import AkTextfield from '@atlaskit/textfield';
+
+    const SimpleTextfield = () => {
+      const disabled = true;
+
+      return (
+        <AkTextfield
+          name="basic"
+          aria-label="default text field"
+          isDisabled={disabled}
+        />
+      );
+    }
+  `,
+    'should rename disabled to isDisabled with indirection and different default import',
+  );
+});

package/codemods/migrations/rename-disabled-to-isdisabled.tsx

@@ -0,0 +1,11 @@
+import { createRenameFuncFor } from '@atlaskit/codemod-utils';
+
+const component = '@atlaskit/textfield';
+const from = 'disabled';
+const to = 'isDisabled';
+
+export const renameDisabledToIsDisabled = createRenameFuncFor(
+  component,
+  from,
+  to,
+);

package/dist/cjs/styles.js

@@ -142,7 +142,7 @@ var containerStyles = function containerStyles(appearance, mode, width) {
     borderRadius: 3,
     borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2
   }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ?
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   {
     padding: '1px 0'
   } : {}), {}, {
@@ -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.5.2"
+  packageVersion: "5.6.1"
 };
 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.5.2",
+	"version": "5.6.1",
 	"sideEffects": false
 }

package/dist/es2019/styles.js

@@ -130,7 +130,7 @@ export const containerStyles = (appearance, mode, width) => ({
   borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 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-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   {
     padding: '1px 0'
   } : {}),
@@ -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.5.2"
+  packageVersion: "5.6.1"
 };
 const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/dist/es2019/version.json

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

package/dist/esm/styles.js

@@ -134,7 +134,7 @@ export var containerStyles = function containerStyles(appearance, mode, width) {
     borderRadius: 3,
     borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2
   }, getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ?
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   {
     padding: '1px 0'
   } : {}), {}, {
@@ -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.5.2"
+  packageVersion: "5.6.1"
 };
 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.5.2",
+	"version": "5.6.1",
 	"sideEffects": false
 }

package/dist/types/styles.d.ts

@@ -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/types.d.ts

@@ -1,5 +1,5 @@
 import React, { AllHTMLAttributes, FormEventHandler } from 'react';
-export interface TextfieldProps extends AllHTMLAttributes<HTMLInputElement> {
+export interface TextfieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
     /**
      * Affects the visual style of the text field.
      */

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

@@ -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/types.d.ts

@@ -1,5 +1,5 @@
 import React, { AllHTMLAttributes, FormEventHandler } from 'react';
-export interface TextfieldProps extends AllHTMLAttributes<HTMLInputElement> {
+export interface TextfieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
     /**
      * Affects the visual style of the text field.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.5.2",
+  "version": "5.6.1",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.8.0",
+    "@atlaskit/tokens": "^1.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -45,15 +45,9 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "^21.3.0",
-    "@atlaskit/button": "^16.7.0",
-    "@atlaskit/docs": "*",
+    "@atlaskit/codemod-utils": "^4.2.3",
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/form": "^8.11.0",
-    "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^12.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/report.api.md

@@ -155,7 +155,8 @@ export const TextFieldColors: {
 };
 
 // @public (undocumented)
-export interface TextFieldProps extends AllHTMLAttributes<HTMLInputElement> {
+export interface TextFieldProps
+  extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
   appearance?: Appearance;
   className?: string;
   elemAfterInput?: React_2.ReactNode;

package/tmp/api-report-tmp.d.ts

@@ -142,7 +142,7 @@ export const TextFieldColors: {
 };
 
 // @public (undocumented)
-export interface TextFieldProps extends AllHTMLAttributes<HTMLInputElement> {
+export interface TextFieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
     appearance?: Appearance;
     className?: string;
     elemAfterInput?: React_2.ReactNode;