@atlaskit/textfield 5.0.5 → 5.1.3

package/dist/types/component-tokens.d.ts

@@ -1,44 +1,44 @@
 export declare const disabledBackgroundColor: {
-    light: string;
-    dark: string;
-};
-export declare const invalidBorderColor: {
-    light: string;
-    dark: string;
+    light: "var(--ds-background-disabled)";
+    dark: "var(--ds-background-disabled)";
 };
 export declare const defaultBackgroundColor: {
-    light: string;
-    dark: string;
+    light: "var(--ds-background-subtleBorderedNeutral-resting)";
+    dark: "var(--ds-background-subtleBorderedNeutral-resting)";
 };
 export declare const defaultBackgroundColorFocus: {
-    light: string;
-    dark: string;
+    light: "var(--ds-background-default)";
+    dark: "var(--ds-background-default)";
 };
 export declare const defaultBackgroundColorHover: {
-    light: string;
-    dark: string;
+    light: "var(--ds-background-default)";
+    dark: "var(--ds-background-default)";
+};
+export declare const subtleBackgroundColorHover: {
+    light: "var(--ds-background-transparentNeutral-hover)";
+    dark: "var(--ds-background-transparentNeutral-hover)";
 };
 export declare const defaultBorderColor: {
-    light: string;
-    dark: string;
+    light: "var(--ds-border-neutral)";
+    dark: "var(--ds-border-neutral)";
 };
 export declare const defaultBorderColorFocus: {
-    light: string;
-    dark: string;
+    light: "var(--ds-border-focus)";
+    dark: "var(--ds-border-focus)";
 };
 export declare const transparent: {
     light: string;
     dark: string;
 };
 export declare const textColor: {
-    light: string;
-    dark: string;
+    light: "var(--ds-text-highEmphasis)";
+    dark: "var(--ds-text-highEmphasis)";
 };
 export declare const disabledTextColor: {
-    light: string;
-    dark: string;
+    light: "var(--ds-text-disabled)";
+    dark: "var(--ds-text-disabled)";
 };
 export declare const placeholderTextColor: {
-    light: string;
-    dark: string;
+    light: "var(--ds-text-lowEmphasis)";
+    dark: "var(--ds-text-lowEmphasis)";
 };

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './text-field';
-export { TextFieldColors } from './styles';
-export type { PublicProps as TextFieldProps, Appearance } from './types';
+export { textFieldColors as TextFieldColors } from './styles';
+export type { TextfieldProps as TextFieldProps, Appearance } from './types';

package/dist/types/styles.d.ts

@@ -1,13 +1,106 @@
-import { CSSObject } from '@emotion/core';
 import { ThemeModes } from '@atlaskit/theme/types';
 import { Appearance } from './types';
-export declare const containerStyles: (appearance: Appearance, mode: ThemeModes, width?: string | number | undefined) => CSSObject;
-export declare const inputStyles: (mode: ThemeModes) => CSSObject;
-export declare const TextFieldColors: {
+export declare const containerStyles: (appearance: Appearance, mode: ThemeModes, width?: string | number | undefined) => {
+    readonly borderRadius: 3;
+    readonly borderWidth: 2;
+    readonly borderStyle: "none" | "solid";
+    readonly boxSizing: "border-box";
+    readonly display: "flex";
+    readonly flex: "1 1 100%";
+    readonly fontSize: number;
+    readonly justifyContent: "space-between";
+    readonly maxWidth: string | number;
+    readonly overflow: "hidden";
+    readonly transition: "background-color 0.2s ease-in-out, border-color 0.2s ease-in-out";
+    readonly wordWrap: "break-word";
+    readonly verticalAlign: "top";
+    readonly pointerEvents: "auto";
+    readonly backgroundColor: string;
+    readonly borderColor: string;
+    readonly color: "var(--ds-text-highEmphasis)";
+    readonly cursor: string;
+    readonly '&:hover': {
+        backgroundColor: string;
+    };
+    readonly '&:focus-within': {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    readonly '&[data-disabled]': {
+        backgroundColor: "var(--ds-background-disabled)";
+        borderColor: "var(--ds-background-disabled)";
+        color: "var(--ds-text-disabled)";
+        cursor: string;
+    };
+    readonly '&[data-invalid]': {
+        borderColor: "var(--ds-iconBorder-danger)";
+    };
+    readonly '&[data-invalid]:focus-within': {
+        backgroundColor: "var(--ds-background-default)";
+        borderColor: "var(--ds-border-focus)";
+    };
+    readonly '@media screen and (-ms-high-contrast: active)': {
+        '&[data-invalid]:focus-within': {
+            borderColor: string;
+        };
+        '&:focus-within': {
+            borderColor: string;
+        };
+        '&[data-disabled]': {
+            borderColor: string;
+        };
+    };
+    readonly alignItems: "center";
+};
+export declare const inputStyles: (mode: ThemeModes) => {
+    readonly backgroundColor: "transparent";
+    readonly border: 0;
+    readonly boxSizing: "border-box";
+    readonly color: "inherit";
+    readonly cursor: "inherit";
+    readonly fontSize: number;
+    readonly minWidth: "0";
+    readonly outline: "none";
+    readonly width: "100%";
+    readonly lineHeight: number;
+    readonly fontFamily: string;
+    readonly '&[data-monospaced]': {
+        readonly fontFamily: string;
+    };
+    readonly '&[data-compact]': {
+        readonly padding: string;
+        readonly height: string;
+    };
+    readonly '&:not([data-compact])': {
+        readonly padding: string;
+        readonly height: string;
+    };
+    readonly '&[disabled]': {
+        readonly WebkitTextFillColor: "var(--ds-text-disabled)";
+    };
+    readonly '&::-ms-clear': {
+        readonly display: "none";
+    };
+    readonly '&:invalid': {
+        readonly boxShadow: "none";
+    };
+    readonly '&::placeholder': {
+        readonly color: "var(--ds-text-lowEmphasis)";
+        readonly '&:disabled': {
+            readonly color: "var(--ds-text-disabled)";
+        };
+    };
+    readonly '@media screen and (-ms-high-contrast: active)': {
+        readonly '&[disabled]': {
+            readonly color: "GrayText";
+        };
+    };
+};
+export declare const textFieldColors: {
     backgroundColor: {
         standard: {
-            light: string;
-            dark: string;
+            light: "var(--ds-background-subtleBorderedNeutral-resting)";
+            dark: "var(--ds-background-subtleBorderedNeutral-resting)";
         };
         subtle: {
             light: string;
@@ -20,12 +113,12 @@ export declare const TextFieldColors: {
     };
     backgroundColorFocus: {
         standard: {
-            light: string;
-            dark: string;
+            light: "var(--ds-background-default)";
+            dark: "var(--ds-background-default)";
         };
         subtle: {
-            light: string;
-            dark: string;
+            light: "var(--ds-background-default)";
+            dark: "var(--ds-background-default)";
         };
         none: {
             light: string;
@@ -34,12 +127,12 @@ export declare const TextFieldColors: {
     };
     backgroundColorHover: {
         standard: {
-            light: string;
-            dark: string;
+            light: "var(--ds-background-default)";
+            dark: "var(--ds-background-default)";
         };
         subtle: {
-            light: string;
-            dark: string;
+            light: "var(--ds-background-transparentNeutral-hover)";
+            dark: "var(--ds-background-transparentNeutral-hover)";
         };
         none: {
             light: string;
@@ -48,8 +141,8 @@ export declare const TextFieldColors: {
     };
     borderColor: {
         standard: {
-            light: string;
-            dark: string;
+            light: "var(--ds-border-neutral)";
+            dark: "var(--ds-border-neutral)";
         };
         subtle: {
             light: string;
@@ -62,12 +155,12 @@ export declare const TextFieldColors: {
     };
     borderColorFocus: {
         standard: {
-            light: string;
-            dark: string;
+            light: "var(--ds-border-focus)";
+            dark: "var(--ds-border-focus)";
         };
         subtle: {
-            light: string;
-            dark: string;
+            light: "var(--ds-border-focus)";
+            dark: "var(--ds-border-focus)";
         };
         none: {
             light: string;
@@ -75,45 +168,41 @@ export declare const TextFieldColors: {
         };
     };
     placeholderTextColor: {
-        light: string;
-        dark: string;
+        light: "var(--ds-text-lowEmphasis)";
+        dark: "var(--ds-text-lowEmphasis)";
     };
     textColor: {
-        light: string;
-        dark: string;
+        light: "var(--ds-text-highEmphasis)";
+        dark: "var(--ds-text-highEmphasis)";
     };
     invalidRules: {
         light: {
-            backgroundColor: string;
-            backgroundColorFocus: string;
-            backgroundColorHover: string;
-            borderColor: string;
-            borderColorFocus: string;
+            backgroundColor: "var(--ds-background-subtleBorderedNeutral-resting)";
+            backgroundColorHover: "var(--ds-background-default)";
+            backgroundColorFocus: "var(--ds-background-default)";
+            borderColor: "var(--ds-iconBorder-danger)";
+            borderColorFocus: "var(--ds-border-focus)";
         };
         dark: {
-            backgroundColor: string;
-            backgroundColorFocus: string;
-            backgroundColorHover: string;
-            borderColor: string;
-            borderColorFocus: string;
+            backgroundColor: "var(--ds-background-subtleBorderedNeutral-resting)";
+            backgroundColorHover: "var(--ds-background-default)";
+            backgroundColorFocus: "var(--ds-background-default)";
+            borderColor: "var(--ds-iconBorder-danger)";
+            borderColorFocus: "var(--ds-border-focus)";
         };
     };
     disabledRules: {
         light: {
-            backgroundColor: string;
-            backgroundColorFocus: string;
-            backgroundColorHover: string;
-            borderColor: string;
-            borderColorFocus: string;
-            textColor: string;
+            backgroundColor: "var(--ds-background-disabled)";
+            backgroundColorHover: "var(--ds-background-disabled)";
+            borderColor: "var(--ds-background-disabled)";
+            textColor: "var(--ds-text-disabled)";
         };
         dark: {
-            backgroundColor: string;
-            backgroundColorFocus: string;
-            backgroundColorHover: string;
-            borderColor: string;
-            borderColorFocus: string;
-            textColor: string;
+            backgroundColor: "var(--ds-background-disabled)";
+            backgroundColorHover: "var(--ds-background-disabled)";
+            borderColor: "var(--ds-background-disabled)";
+            textColor: "var(--ds-text-disabled)";
         };
     };
 };

package/dist/types/text-field.d.ts

@@ -1,5 +1,14 @@
 /** @jsx jsx */
 import React from 'react';
-import { PublicProps } from './types';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<PublicProps, "appearance" | "color" | "content" | "height" | "width" | "start" | "hidden" | "default" | "isCompact" | "isDisabled" | "isInvalid" | "isMonospaced" | "isReadOnly" | "isRequired" | "elemAfterInput" | "elemBeforeInput" | "onMouseDown" | "testId" | "name" | "className" | "placeholder" | "onChange" | "createAnalyticsEvent" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css"> & React.RefAttributes<any>>>;
+import { TextfieldProps } from './types';
+declare const _default: React.NamedExoticComponent<TextfieldProps & React.RefAttributes<unknown>>;
+/**
+ * __Textfield__
+ *
+ * A text field is an input that allows a user to write or edit text.
+ *
+ * - [Examples](https://atlassian.design/components/textfield/examples)
+ * - [Code](https://atlassian.design/components/textfield/code)
+ * - [Usage](https://atlassian.design/components/textfield/usage)
+ */
 export default _default;

package/dist/types/types.d.ts

@@ -1,7 +1,5 @@
 import React, { AllHTMLAttributes, FormEventHandler } from 'react';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { ThemeModes } from '@atlaskit/theme/types';
-export interface PublicProps extends WithAnalyticsEventsProps, AllHTMLAttributes<HTMLInputElement> {
+export interface TextfieldProps extends AllHTMLAttributes<HTMLInputElement> {
     /**
      * Affects the visual style of the text field.
      */
@@ -70,7 +68,4 @@ export interface PublicProps extends WithAnalyticsEventsProps, AllHTMLAttributes
      */
     onChange?: FormEventHandler<HTMLInputElement>;
 }
-export interface InternalProps extends PublicProps {
-    mode: ThemeModes;
-}
 export declare type Appearance = 'subtle' | 'standard' | 'none';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.0.5",
+  "version": "5.1.3",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,7 +13,7 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
     "inPublicMirror": true,
@@ -23,11 +23,12 @@
     }
   },
   "af:exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.tsx"
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/theme": "^11.3.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -35,14 +36,15 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "^20.1.0",
+    "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/build-utils": "*",
-    "@atlaskit/button": "^15.1.0",
+    "@atlaskit/button": "^16.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/form": "^8.1.0",
-    "@atlaskit/icon": "^21.7.0",
+    "@atlaskit/form": "^8.4.0",
+    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^12.0.0",
+    "@atlaskit/toggle": "^12.3.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -64,18 +66,12 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
-      "ui-components": [
-        "lite-mode"
-      ],
-      "analytics": [
-        "analytics-next"
-      ],
-      "theming": [
-        "new-theming-api"
-      ],
-      "deprecation": [
-        "no-deprecated-imports"
-      ]
+      "ui-components": "lite-mode",
+      "styling": "emotion",
+      "analytics": "analytics-next",
+      "theming": "tokens",
+      "design-system": "v1",
+      "deprecation": "no-deprecated-imports"
     }
   },
   "homepage": "https://atlassian.design/components/textfield/",

package/extract-react-types/text-field-props.tsx

@@ -1,5 +0,0 @@
-import { PublicProps } from '../src/types';
-
-export default function TextFieldProps(props: PublicProps) {
-  return null;
-}