@atlaskit/textfield 5.5.1 → 5.5.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/textfield
 
+## 5.5.2
+
+### Patch Changes
+
+- [`8f436f0c301`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f436f0c301) - extend border contrast feature flag to support confluence
+
 ## 5.5.1
 
 ### Patch Changes

package/dist/cjs/component-tokens.js

@@ -27,8 +27,8 @@ var defaultBackgroundColorHover = {
 };
 exports.defaultBackgroundColorHover = defaultBackgroundColorHover;
 var defaultBorderColor = {
-  light: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.N100 : _colors.N40, ")"),
-  dark: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.DN200 : _colors.DN40, ")")
+  light: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N40, ")"),
+  dark: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.DN200 : _colors.DN40, ")")
 };
 exports.defaultBorderColor = defaultBorderColor;
 var defaultBorderColorFocus = {

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.update-border-input_ff9l1') ? "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 1px ".concat(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.update-border-input_ff9l1') ? "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 1px ".concat(invalidRules[mode].borderColor) : undefined
     },
     '&[data-invalid]:focus-within': {
       backgroundColor: invalidRules[mode].backgroundColorFocus,
       borderColor: invalidRules[mode].borderColorFocus,
-      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? "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 1px ".concat(invalidRules[mode].borderColorFocus) : undefined
     },
     '@media screen and (-ms-high-contrast: active)': {
       '&[data-invalid]:focus-within': {
@@ -140,8 +140,8 @@ var containerStyles = function containerStyles(appearance, mode, width) {
     alignItems: 'center'
   }, getContainerTextBgAndBorderColor(appearance, mode)), {}, {
     borderRadius: 3,
-    borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? 1 : 2
-  }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') && appearance !== 'none' ?
+    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
   {
     padding: '1px 0'

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.1"
+  packageVersion: "5.5.2"
 };
 var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$appearance = props.appearance,
@@ -109,7 +109,7 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       "data-testid": testId && "".concat(testId, "-container"),
       onMouseDown: handleOnMouseDown
       // TODO: When removing legacy theming fix this.
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
       css: containerStyles,
       className: className
@@ -126,7 +126,7 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onFocus: handleOnFocus,
       ref: setInputRef
       // TODO: When removing legacy theming fix this.
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
       css: inputStyle
     })), elemAfterInput)

package/dist/cjs/version.json

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

package/dist/es2019/component-tokens.js

@@ -17,8 +17,8 @@ export const defaultBackgroundColorHover = {
   dark: `var(--ds-background-input-hovered, ${DN30})`
 };
 export const defaultBorderColor = {
-  light: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40})`,
-  dark: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? DN200 : DN40})`
+  light: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
+  dark: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : DN40})`
 };
 export const defaultBorderColorFocus = {
   light: `var(--ds-border-focused, ${B100})`,

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.update-border-input_ff9l1') ? `inset 0 0 0 1px ${borderColorFocus[appearance][mode]}` : undefined
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 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.update-border-input_ff9l1') ? `inset 0 0 0 1px ${invalidRules[mode].borderColor}` : undefined
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 1px ${invalidRules[mode].borderColor}` : undefined
   },
   '&[data-invalid]:focus-within': {
     backgroundColor: invalidRules[mode].backgroundColorFocus,
     borderColor: invalidRules[mode].borderColorFocus,
-    boxShadow: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? `inset 0 0 0 1px ${invalidRules[mode].borderColorFocus}` : undefined
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 1px ${invalidRules[mode].borderColorFocus}` : undefined
   },
   '@media screen and (-ms-high-contrast: active)': {
     '&[data-invalid]:focus-within': {
@@ -127,9 +127,9 @@ export const containerStyles = (appearance, mode, width) => ({
   alignItems: 'center',
   ...getContainerTextBgAndBorderColor(appearance, mode),
   borderRadius: 3,
-  borderWidth: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? 1 : 2,
+  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.update-border-input_ff9l1') && appearance !== 'none' ?
+  ...(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ?
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   {
     padding: '1px 0'

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.1"
+  packageVersion: "5.5.2"
 };
 const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -87,7 +87,7 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
       "data-testid": testId && `${testId}-container`,
       onMouseDown: handleOnMouseDown
       // TODO: When removing legacy theming fix this.
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
       css: containerStyles,
       className: className
@@ -104,7 +104,7 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
       onFocus: handleOnFocus,
       ref: setInputRef
       // TODO: When removing legacy theming fix this.
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
       css: inputStyle
     })), elemAfterInput)

package/dist/es2019/version.json

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

package/dist/esm/component-tokens.js

@@ -17,8 +17,8 @@ export var defaultBackgroundColorHover = {
   dark: "var(--ds-background-input-hovered, ".concat(DN30, ")")
 };
 export var defaultBorderColor = {
-  light: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40, ")"),
-  dark: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? DN200 : DN40, ")")
+  light: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
+  dark: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : DN40, ")")
 };
 export var defaultBorderColorFocus = {
   light: "var(--ds-border-focused, ".concat(B100, ")"),

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.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(borderColorFocus[appearance][mode]) : undefined
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(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.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(invalidRules[mode].borderColor) : undefined
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(invalidRules[mode].borderColor) : undefined
     },
     '&[data-invalid]:focus-within': {
       backgroundColor: invalidRules[mode].backgroundColorFocus,
       borderColor: invalidRules[mode].borderColorFocus,
-      boxShadow: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(invalidRules[mode].borderColorFocus) : undefined
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(invalidRules[mode].borderColorFocus) : undefined
     },
     '@media screen and (-ms-high-contrast: active)': {
       '&[data-invalid]:focus-within': {
@@ -132,8 +132,8 @@ export var containerStyles = function containerStyles(appearance, mode, width) {
     alignItems: 'center'
   }, getContainerTextBgAndBorderColor(appearance, mode)), {}, {
     borderRadius: 3,
-    borderWidth: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? 1 : 2
-  }, getBooleanFF('platform.design-system-team.update-border-input_ff9l1') && appearance !== 'none' ?
+    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
   {
     padding: '1px 0'

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.1"
+  packageVersion: "5.5.2"
 };
 var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,
@@ -99,7 +99,7 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
       "data-testid": testId && "".concat(testId, "-container"),
       onMouseDown: handleOnMouseDown
       // TODO: When removing legacy theming fix this.
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
       css: containerStyles,
       className: className
@@ -116,7 +116,7 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
       onFocus: handleOnFocus,
       ref: setInputRef
       // TODO: When removing legacy theming fix this.
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
       css: inputStyle
     })), elemAfterInput)

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.5.1",
+  "version": "5.5.2",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,7 +24,7 @@
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Text field",
       "category": "Components"
@@ -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.5.0",
+    "@atlaskit/tokens": "^1.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -92,7 +92,7 @@
     }
   },
   "platform-feature-flags": {
-    "platform.design-system-team.update-border-input_ff9l1": {
+    "platform.design-system-team.border-checkbox_nyoiu": {
       "type": "boolean"
     }
   },

package/report.api.md

@@ -22,7 +22,7 @@ import { default as React_2 } from 'react';
 // @public (undocumented)
 export type Appearance = 'none' | 'standard' | 'subtle';
 
-// @public (undocumented)
+// @public
 const _default: React_2.NamedExoticComponent<
   TextFieldProps & React_2.RefAttributes<unknown>
 >;

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

@@ -0,0 +1,166 @@
+## API Report File for "@atlaskit/textfield"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { AllHTMLAttributes } from 'react';
+import { FormEventHandler } from 'react';
+import { default as React_2 } from 'react';
+
+// @public (undocumented)
+export type Appearance = 'none' | 'standard' | 'subtle';
+
+// @public
+const _default: React_2.NamedExoticComponent<TextFieldProps & React_2.RefAttributes<unknown>>;
+export default _default;
+
+// @public (undocumented)
+export const TextFieldColors: {
+    backgroundColor: {
+        standard: {
+            light: "var(--ds-background-input)";
+            dark: "var(--ds-background-input)";
+        };
+        subtle: {
+            light: string;
+            dark: string;
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    backgroundColorFocus: {
+        standard: {
+            light: "var(--ds-background-input-pressed)";
+            dark: "var(--ds-background-input-pressed)";
+        };
+        subtle: {
+            light: "var(--ds-background-input-pressed)";
+            dark: "var(--ds-background-input-pressed)";
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    backgroundColorHover: {
+        standard: {
+            light: "var(--ds-background-input-hovered)";
+            dark: "var(--ds-background-input-hovered)";
+        };
+        subtle: {
+            light: "var(--ds-background-input-hovered)";
+            dark: "var(--ds-background-input-hovered)";
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    borderColor: {
+        standard: {
+            light: "var(--ds-border-input)";
+            dark: "var(--ds-border-input)";
+        };
+        subtle: {
+            light: string;
+            dark: string;
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    borderColorFocus: {
+        standard: {
+            light: "var(--ds-border-focused)";
+            dark: "var(--ds-border-focused)";
+        };
+        subtle: {
+            light: "var(--ds-border-focused)";
+            dark: "var(--ds-border-focused)";
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    borderColorHover: {
+        standard: {
+            light: "var(--ds-border-input)";
+            dark: "var(--ds-border-input)";
+        };
+        subtle: {
+            light: "var(--ds-border-input)";
+            dark: "var(--ds-border-input)";
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    placeholderTextColor: {
+        light: "var(--ds-text-subtlest)";
+        dark: "var(--ds-text-subtlest)";
+    };
+    textColor: {
+        light: "var(--ds-text)";
+        dark: "var(--ds-text)";
+    };
+    invalidRules: {
+        light: {
+            backgroundColor: "var(--ds-background-input)";
+            backgroundColorHover: "var(--ds-background-input-hovered)";
+            backgroundColorFocus: "var(--ds-background-input-pressed)";
+            borderColor: "var(--ds-border-danger)";
+            borderColorFocus: "var(--ds-border-focused)";
+        };
+        dark: {
+            backgroundColor: "var(--ds-background-input)";
+            backgroundColorHover: "var(--ds-background-input-hovered)";
+            backgroundColorFocus: "var(--ds-background-input-pressed)";
+            borderColor: "var(--ds-border-danger)";
+            borderColorFocus: "var(--ds-border-focused)";
+        };
+    };
+    disabledRules: {
+        light: {
+            backgroundColor: "var(--ds-background-disabled)";
+            backgroundColorHover: "var(--ds-background-disabled)";
+            borderColor: "var(--ds-background-disabled)";
+            textColor: "var(--ds-text-disabled)";
+        };
+        dark: {
+            backgroundColor: "var(--ds-background-disabled)";
+            backgroundColorHover: "var(--ds-background-disabled)";
+            borderColor: "var(--ds-background-disabled)";
+            textColor: "var(--ds-text-disabled)";
+        };
+    };
+};
+
+// @public (undocumented)
+export interface TextFieldProps extends AllHTMLAttributes<HTMLInputElement> {
+    appearance?: Appearance;
+    className?: string;
+    elemAfterInput?: React_2.ReactNode;
+    elemBeforeInput?: React_2.ReactNode;
+    isCompact?: boolean;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isMonospaced?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    name?: string;
+    onChange?: FormEventHandler<HTMLInputElement>;
+    onMouseDown?: React_2.MouseEventHandler<HTMLElement>;
+    placeholder?: string;
+    testId?: string;
+    width?: number | string;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```