@instructure/ui-text-input 11.6.0 → 11.6.1-snapshot-129

package/lib/TextInput/v2/theme.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = theme => {
+  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8;
+  const colors = theme.colors,
+    typography = theme.typography,
+    borders = theme.borders,
+    spacing = theme.spacing,
+    forms = theme.forms,
+    themeName = theme.key;
+  const themeSpecificStyle = {
+    canvas: {
+      color: theme['ic-brand-font-color-dark'],
+      focusOutlineColor: theme['ic-brand-primary']
+    }
+  };
+  const componentVariables = {
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey3045,
+    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
+    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
+    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
+    requiredInvalidColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.red5782,
+    padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue4570,
+    errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.red4570,
+    errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.red4570,
+    placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey4570,
+    smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
+    smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
+    mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
+    largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
+    largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
+  };
+  return {
+    ...componentVariables,
+    ...themeSpecificStyle[themeName]
+  };
+};
+var _default = exports.default = generateComponentTheme;

package/lib/{index.js → exports/a.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "TextInput", {
   enumerable: true,
   get: function () {
-    return _TextInput.TextInput;
+    return _v.TextInput;
   }
 });
-var _TextInput = require("./TextInput");
+var _v = require("../TextInput/v1");

package/lib/exports/b.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TextInput", {
+  enumerable: true,
+  get: function () {
+    return _v.TextInput;
+  }
+});
+var _v = require("../TextInput/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-input",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A styled HTML text input component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -13,27 +13,26 @@
   "homepage": "https://instructure.github.io/instructure-ui/",
   "bugs": "https://github.com/instructure/instructure-ui/issues",
   "license": "MIT",
-  "dependencies": {
-    "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-a11y-utils": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/ui-form-field": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-tag": "11.6.0"
-  },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-badge": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-badge": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.27.6",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-a11y-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-dom-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-form-field": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129",
+    "@instructure/ui-tag": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -43,17 +42,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/TextInput/{index.tsx → v1/index.tsx}

@@ -35,8 +35,8 @@ import {
   addEventListener,
   getCSSStyleDeclaration
 } from '@instructure/ui-dom-utils'
-import { FormField } from '@instructure/ui-form-field'
-import { withStyle } from '@instructure/emotion'
+import { FormField } from '@instructure/ui-form-field/v11_6'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 
 import generateStyle from './styles'

package/src/TextInput/{props.ts → v1/props.ts}

@@ -24,7 +24,7 @@
 
 import { InputHTMLAttributes } from 'react'
 
-import type { FormFieldProps, FormMessage } from '@instructure/ui-form-field'
+import type { FormFieldProps, FormMessage } from '@instructure/ui-form-field/v11_6'
 import type {
   OtherHTMLAttributes,
   TextInputTheme

package/src/TextInput/v2/README.md

@@ -0,0 +1,334 @@
+---
+describes: TextInput
+---
+
+`TextInput` is a custom styled `input` element. It supports the following types: `text` (default) / `email` / `url` / `tel` / `search` / `password`
+
+### Uncontrolled TextInput
+
+```js
+---
+type: example
+---
+<TextInput
+  renderLabel="Name"
+  placeholder="Doe, John Doe"
+  onChange={(event, value) => { console.log(value) }}
+/>
+```
+
+#### Controlled TextInput
+
+```js
+---
+type: example
+---
+  const ControlledTextInputExample = () => {
+    const [value, setValue] = useState('Supertramp')
+    const [disabled, setDisabled] = useState(false)
+    const [readOnly, setReadOnly] = useState(false)
+    const [inline, setInline] = useState(false)
+    const [messages, setMessages] = useState(null)
+
+    const handleChange = (e, value) => {
+      setValue(value)
+      setMessages(null)
+    }
+
+    const handleBlur = (e) => {
+      if (value === 'Supertramp') {
+        setMessages([
+          {
+            text: "Come on. There's no way your favorite band is really Supertramp.",
+            type: 'error'
+          }
+        ])
+      }
+    }
+
+    const toggleDisabled = () => setDisabled((prev) => !prev)
+    const toggleReadOnly = () => setReadOnly((prev) => !prev)
+    const toggleInline = () => setInline((prev) => !prev)
+
+    return (
+      <div>
+        <FormFieldGroup
+          description="Controlled TextInput state"
+          layout="columns"
+        >
+          <Checkbox
+            checked={disabled}
+            label="disabled"
+            onChange={toggleDisabled}
+          />
+          <Checkbox
+            checked={readOnly}
+            label="readOnly"
+            onChange={toggleReadOnly}
+          />
+          <Checkbox
+            checked={inline}
+            label="inline display"
+            onChange={toggleInline}
+          />
+        </FormFieldGroup>
+        <View display="block" margin="medium 0 0">
+          <TextInput
+            renderLabel="What is your favorite band?"
+            display={inline ? 'inline-block' : null}
+            value={value}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            interaction={
+              disabled ? 'disabled' : readOnly ? 'readonly' : 'enabled'
+            }
+            messages={messages}
+            renderAfterInput={<HeartInstUIIcon />}
+          />
+        </View>
+      </div>
+    )
+  }
+
+  render(<ControlledTextInputExample />)
+```
+
+### Prepending and appending content
+
+TextInput accepts focusable and non-focusable content before and/or after
+the input text. A common use case is adding an icon or avatar to the input.
+Focusable content will be focused separately from the input itself.
+
+```js
+---
+type: example
+---
+  class ExtraContentExample extends React.Component {
+    constructor(props) {
+      super(props)
+
+      this.state = {
+        value: ''
+      }
+    }
+
+    handleChange = (e, value) => this.setState({ value })
+
+    render() {
+      return (
+        <View as="div">
+          <TextInput
+            renderLabel="What are Paula Panda's favorite ice cream flavors?"
+            value={this.state.value}
+            onChange={this.handleChange}
+            renderBeforeInput={
+              <>
+                {this.state.value !== '' && (
+                  <Tag
+                    text={this.state.value}
+                    margin="xxx-small xx-small xxx-small none"
+                    onClick={() => console.log(this.state.value)}
+                  />
+                )}
+                <Tag
+                  text="Rocky road"
+                  margin="xxx-small xx-small xxx-small none"
+                  onClick={() => console.log('Rocky road')}
+                />
+                <Tag
+                  text="Vanilla"
+                  margin="xxx-small xx-small xxx-small none"
+                  onClick={() => console.log('Vanilla')}
+                />
+                <Tag
+                  text="Coffee"
+                  margin="xxx-small xx-small xxx-small none"
+                  onClick={() => console.log('Coffee')}
+                />
+                <Tag
+                  text="Strawberry"
+                  margin="xxx-small xx-small xxx-small none"
+                  onClick={() => console.log('Strawberry')}
+                />
+              </>
+            }
+            renderAfterInput={() => (
+              <Avatar name="Paula Panda" src={avatarSquare} size="x-small" />
+            )}
+          />
+        </View>
+      )
+    }
+  }
+
+  render(<ExtraContentExample />)
+```
+
+Another common usecase is to add an `IconButton` at the end of a TextInput, e.g. for revealing the content of a password field. In these cases, please use the `withBorder={false}` and `withBackground={false}` props for the IconButton.
+
+```js
+---
+type: example
+---
+const InputsWithButtonsExample = () => {
+  const [passwordValue, setPasswordValue] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  return (
+    <TextInput
+      renderLabel="Password"
+      type={showPassword ? 'text' : 'password'}
+      placeholder="Find something..."
+      value={passwordValue}
+      onChange={(e, newValue) => setPasswordValue(newValue)}
+      renderAfterInput={
+        <IconButton withBorder={false} withBackground={false} onClick={() => setShowPassword(prevState => !prevState)} screenReaderLabel={showPassword ? 'Hide password' : 'Show password'}>
+          {showPassword ? <IconOffLine/> : <IconEyeLine/>}
+        </IconButton>
+      }
+    />
+  )
+}
+render(<InputsWithButtonsExample />)
+```
+
+### Setting width and display
+
+To make the component display inline, set the `display` property to `inline-block`. To constrain the
+size of the component, use `width`.
+
+```js
+---
+type: example
+---
+<div>
+  <TextInput
+    renderLabel={<ScreenReaderContent>I am a hidden label</ScreenReaderContent>}
+    display="inline-block"
+    width="4rem"
+  />
+  &nbsp;
+  <Button>I Am Inline Content</Button>
+</div>
+```
+
+### `shouldNotWrap`
+
+If there is content rendered before the input (via `renderBeforeInput`), the
+input will wrap to a new line when the browser determines it does
+not have enough room (for most browsers, this is 20 characters). Wrapping allows
+the component to accommodate large lists of [Tags](Tag), for example.
+
+If not desired, this behavior can be overridden by setting the `shouldNotWrap`
+boolean prop to `true`.
+
+```js
+---
+type: example
+---
+<View as="div" maxWidth="250px">
+  <TextInput
+    renderLabel="I will not wrap"
+    renderBeforeInput={() => (<IconSearchLine inline={false} />)}
+    renderAfterInput={<Avatar name="Paula Panda" src={avatarSquare} size="x-small" />}
+    shouldNotWrap
+  />
+  <View as="div" margin="medium none none">
+    <TextInput
+      renderLabel="I will wrap"
+      renderBeforeInput={
+        <>
+          <Tag
+            text="English 101"
+            margin="xx-small xxx-small"
+          />
+          <Tag
+            text="History 205"
+            margin="xx-small xxx-small"
+          />
+        </>
+      }
+      renderAfterInput={<Avatar name="Paula Panda" src={avatarSquare} size="x-small" />}
+    />
+  </View>
+</View>
+```
+
+You can see here most of the visual states of the component:
+
+```js
+---
+type: example
+---
+  <Flex gap='medium' direction='column'>
+    <TextInput
+      size="small"
+      renderAfterInput={<AlarmClockInstUIIcon />}
+      renderBeforeInput={<AlarmClockInstUIIcon />}
+      renderLabel='small'
+      placeholder="placeholder"
+    />
+    <TextInput
+      renderAfterInput={<AlarmClockInstUIIcon />}
+      renderBeforeInput={<AlarmClockInstUIIcon />}
+      renderLabel='normal'
+      placeholder="placeholder"
+    />
+    <TextInput
+      size="large"
+      renderAfterInput={<AlarmClockInstUIIcon />}
+      renderBeforeInput={<AlarmClockInstUIIcon />}
+      renderLabel='large'
+      placeholder="placeholder"
+    />
+    <TextInput
+      interaction='disabled'
+      renderLabel='disabled'
+      placeholder="placeholder"
+    />
+    <TextInput
+      interaction='readonly'
+      renderLabel='readonly'
+      placeholder="placeholder"
+    />
+    <TextInput
+      renderLabel='with error message'
+      placeholder="placeholder"
+      messages={[{ text: 'This is an error.', type: 'error' }]}
+    />
+    <TextInput
+      renderLabel='with success message'
+      placeholder="placeholder"
+      messages={[{ text: 'Great success!', type: 'success' }]}
+    />
+    <TextInput
+      renderLabel='large size (default is "medium")'
+      placeholder="placeholder"
+      size='large'
+    />
+    <TextInput
+      renderLabel='small size (default is "medium")'
+      placeholder="placeholder"
+      size='small'
+    />
+  </Flex>
+```
+
+### Guidelines
+
+```js
+---
+type: embed
+---
+<Guidelines>
+  <Figure recommendation="yes" title="Do">
+    <Figure.Item>Left align text (exceptions may apply)</Figure.Item>
+    <Figure.Item>Place labels on top or to the left (inline)</Figure.Item>
+    <Figure.Item>Make placeholder text different than the label</Figure.Item>
+    <Figure.Item>Use React fragments for <code>renderBeforeInput</code>. This will nicely float the text input box to the remaining space</Figure.Item>
+  </Figure>
+  <Figure recommendation="no" title="Don't">
+    <Figure.Item>Place labels to the right of the input</Figure.Item>
+    <Figure.Item>Place inputs in the middle of sentences or phrases</Figure.Item>
+  </Figure>
+</Guidelines>
+```