@instructure/ui-text-input 8.26.2 → 8.26.4-snapshot-3

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.26.4-snapshot-3](https://github.com/instructure/instructure-ui/compare/v8.26.3...v8.26.4-snapshot-3) (2022-07-18)
+
+
+### Features
+
+* support React 18 ([0a2bf0c](https://github.com/instructure/instructure-ui/commit/0a2bf0cdd4d8bcec6e42a7ccf28a787e4a35bc40))
+
+
+
+
+
+## [8.26.3](https://github.com/instructure/instructure-ui/compare/v8.26.2...v8.26.3) (2022-07-14)
+
+### Bug Fixes
+
+- **ui-color-picker,ui-date-input,ui-date-time-input,ui-select,ui-simple-select,ui-text-input,ui-time-select:** before/after elements should inherit input color ([7daf257](https://github.com/instructure/instructure-ui/commit/7daf257a8ee491f84de2f00a56becd22636891e3))
+
 ## [8.26.2](https://github.com/instructure/instructure-ui/compare/v8.26.1...v8.26.2) (2022-07-11)
 
 **Note:** Version bump only for package @instructure/ui-text-input

package/es/TextInput/styles.js

@@ -139,6 +139,7 @@ const generateStyle = (componentTheme, props, state) => {
       border: `${componentTheme.borderWidth} ${componentTheme.borderStyle} ${componentTheme.borderColor}`,
       borderRadius: componentTheme.borderRadius,
       background: componentTheme.background,
+      color: componentTheme.color,
       '&::before': {
         content: '""',
         pointerEvents: 'none',

package/lib/TextInput/styles.js

@@ -146,6 +146,7 @@ const generateStyle = (componentTheme, props, state) => {
       border: `${componentTheme.borderWidth} ${componentTheme.borderStyle} ${componentTheme.borderColor}`,
       borderRadius: componentTheme.borderRadius,
       background: componentTheme.background,
+      color: componentTheme.color,
       '&::before': {
         content: '""',
         pointerEvents: 'none',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-input",
-  "version": "8.26.2",
+  "version": "8.26.4-snapshot-3",
   "description": "A styled HTML text input component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,27 +23,27 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.26.2",
-    "@instructure/ui-badge": "8.26.2",
-    "@instructure/ui-color-utils": "8.26.2",
-    "@instructure/ui-test-utils": "8.26.2",
-    "@instructure/ui-themes": "8.26.2"
+    "@instructure/ui-babel-preset": "8.26.4-snapshot-3",
+    "@instructure/ui-badge": "8.26.4-snapshot-3",
+    "@instructure/ui-color-utils": "8.26.4-snapshot-3",
+    "@instructure/ui-test-utils": "8.26.4-snapshot-3",
+    "@instructure/ui-themes": "8.26.4-snapshot-3"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.26.2",
-    "@instructure/shared-types": "8.26.2",
-    "@instructure/ui-dom-utils": "8.26.2",
-    "@instructure/ui-form-field": "8.26.2",
-    "@instructure/ui-icons": "8.26.2",
-    "@instructure/ui-prop-types": "8.26.2",
-    "@instructure/ui-react-utils": "8.26.2",
-    "@instructure/ui-tag": "8.26.2",
-    "@instructure/ui-testable": "8.26.2",
+    "@instructure/emotion": "8.26.4-snapshot-3",
+    "@instructure/shared-types": "8.26.4-snapshot-3",
+    "@instructure/ui-dom-utils": "8.26.4-snapshot-3",
+    "@instructure/ui-form-field": "8.26.4-snapshot-3",
+    "@instructure/ui-icons": "8.26.4-snapshot-3",
+    "@instructure/ui-prop-types": "8.26.4-snapshot-3",
+    "@instructure/ui-react-utils": "8.26.4-snapshot-3",
+    "@instructure/ui-tag": "8.26.4-snapshot-3",
+    "@instructure/ui-testable": "8.26.4-snapshot-3",
     "prop-types": "^15"
   },
   "peerDependencies": {
-    "react": ">=16.8 <=17"
+    "react": ">=16.8 <=18"
   },
   "publishConfig": {
     "access": "public"

package/src/TextInput/props.ts

@@ -28,7 +28,6 @@ import PropTypes from 'prop-types'
 import { FormPropTypes } from '@instructure/ui-form-field'
 import { controllable } from '@instructure/ui-prop-types'
 
-import type { InteractionType } from '@instructure/ui-react-utils'
 import type { FormFieldProps, FormMessage } from '@instructure/ui-form-field'
 import type {
   OtherHTMLAttributes,
@@ -36,13 +35,17 @@ import type {
   TextInputTheme
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import type {
+  InteractionType,
+  WithDeterministicIdProps
+} from '@instructure/ui-react-utils'
+import { Renderable } from '@instructure/shared-types'
 
 type TextInputOwnProps = {
   /**
    * The form field label.
    */
-  renderLabel?: React.ReactNode | (() => React.ReactNode)
+  renderLabel?: Renderable
 
   /**
    * Determines the underlying native HTML `<input>` element's `type`.
@@ -146,12 +149,12 @@ type TextInputOwnProps = {
   /**
    * Content to display before the input text, such as an icon
    */
-  renderBeforeInput?: React.ReactNode | (() => React.ReactNode)
+  renderBeforeInput?: Renderable
 
   /**
    * Content to display after the input text, such as an icon
    */
-  renderAfterInput?: React.ReactNode | (() => React.ReactNode)
+  renderAfterInput?: Renderable
 
   /**
    * Callback executed when the input fires a change event.

package/src/TextInput/styles.ts

@@ -171,6 +171,8 @@ const generateStyle = (
       border: `${componentTheme.borderWidth} ${componentTheme.borderStyle} ${componentTheme.borderColor}`,
       borderRadius: componentTheme.borderRadius,
       background: componentTheme.background,
+      color: componentTheme.color,
+
       '&::before': {
         content: '""',
         pointerEvents: 'none',