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

package/src/TextArea/v2/props.ts

@@ -0,0 +1,160 @@
+/*
+ * 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.
+ */
+
+import React from 'react'
+import type { TextareaHTMLAttributes } from 'react'
+import type {
+  OtherHTMLAttributes,
+  PickPropsWithExceptions
+} from '@instructure/shared-types'
+import type { FormMessage, FormFieldOwnProps } from '@instructure/ui-form-field/latest'
+import type {
+  ComponentStyle,
+  Spacing,
+  ThemeOverrideValue
+} from '@instructure/emotion'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+
+type TextAreaOwnProps = {
+  label: React.ReactNode
+  id?: string
+  /**
+   * sets the font-size for the textarea
+   */
+  size?: 'small' | 'medium' | 'large'
+  layout?: 'stacked' | 'inline'
+  /**
+   * the textarea will expand vertically to fit the height of the content,
+   * unless its content exceeds `maxHeight`
+   */
+  autoGrow?: boolean
+  /**
+   * is the textarea resizable (in supported browsers)
+   */
+  resize?: 'none' | 'both' | 'horizontal' | 'vertical'
+  /**
+   * a fixed width for the textarea
+   */
+  width?: string
+  /**
+   * Initial height for the textarea (if autoGrow is true it will grow vertically)
+   * Accepts CSS units, e.g. '55px'
+   */
+  height?: string
+  /**
+   * when autoGrow is true, the textarea will never grow beyond this value
+   */
+  maxHeight?: number | string
+  /**
+   * Array of objects with shape: `{
+   *   text: React.ReactNode,
+   *   type: One of: ['newError', 'error', 'hint', 'success', 'screenreader-only']
+   * }`
+   */
+  messages?: FormMessage[]
+  inline?: boolean
+  /**
+   * Html placeholder text to display when the input has no value. This should be hint text, not a label
+   * replacement.
+   */
+  placeholder?: string
+  /**
+   * Whether or not to disable the textarea
+   */
+  disabled?: boolean
+  /**
+   * Works just like disabled but keeps the same styles as if it were active
+   */
+  readOnly?: boolean
+  /**
+   * Sets the required property on the underlying native textArea
+   */
+  required?: boolean
+  /**
+   * a function that provides a reference to the actual textarea element
+   */
+  textareaRef?: (textarea: HTMLTextAreaElement | null) => void
+  /**
+   * value to set on initial render
+   */
+  defaultValue?: string
+  /**
+   * the selected value (must be accompanied by an `onChange` prop)
+   */
+  value?: string // TODO: controllable(PropTypes.string)
+  /**
+   * when used with the `value` prop, the component will not control its own state
+   */
+  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
+
+  /**
+   * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
+   */
+  margin?: Spacing
+}
+
+type PropKeys = keyof TextAreaOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TextAreaProps =
+  // pickProps passes through FormField.allowedProps, except the ones set manually
+  PickPropsWithExceptions<
+    FormFieldOwnProps,
+    'label' | 'inline' | 'id' | 'elementRef'
+  > &
+    TextAreaOwnProps & {
+      themeOverride?: ThemeOverrideValue
+    } & OtherHTMLAttributes<
+      TextAreaOwnProps,
+      TextareaHTMLAttributes<TextAreaOwnProps & Element>
+    > &
+    WithDeterministicIdProps
+
+type TextAreaStyle = ComponentStyle<'textArea' | 'textAreaLayout'>
+const allowedProps: AllowedPropKeys = [
+  'label',
+  'id',
+  'size',
+  'layout',
+  'autoGrow',
+  'resize',
+  'width',
+  'height',
+  'maxHeight',
+  'messages',
+  'inline',
+  'placeholder',
+  'disabled',
+  'readOnly',
+  'required',
+  'textareaRef',
+  'defaultValue',
+  'value',
+  'onChange',
+  'margin'
+]
+
+export type { TextAreaProps, TextAreaStyle }
+export { allowedProps }

package/src/TextArea/v2/styles.ts

@@ -0,0 +1,156 @@
+/*
+ * 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.
+ */
+
+import type { TextAreaProps, TextAreaStyle } from './props'
+import { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import { calcFocusOutlineStyles } from '@instructure/emotion'
+
+type StyleParams = {
+  disabled: TextAreaProps['disabled']
+  readOnly: TextAreaProps['readOnly']
+  size: TextAreaProps['size']
+  success: boolean
+  invalid: boolean
+}
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} params Additional parameters to customize the style.
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['TextArea'],
+  params: StyleParams,
+  sharedTokens: SharedTokens
+): TextAreaStyle => {
+  const { disabled, size, success, invalid, readOnly } = params
+
+  const fontSizeVariants = {
+    small: {
+      fontSize: componentTheme.fontSizeSm
+    },
+    medium: {
+      fontSize: componentTheme.fontSizeMd
+    },
+    large: {
+      fontSize: componentTheme.fontSizeLg
+    }
+  }
+
+  const focusColor =
+    disabled || readOnly
+      ? 'info'
+      : invalid
+      ? 'danger'
+      : success
+      ? 'success'
+      : 'info'
+
+  return {
+    textArea: {
+      label: 'textArea',
+      all: 'initial',
+      WebkitFontSmoothing: 'antialiased',
+      MozOsxFontSmoothing: 'grayscale',
+      appearance: 'none',
+      height: 'auto',
+      margin: 0,
+      width: '100%',
+      display: 'block',
+      boxSizing: 'border-box',
+      padding: componentTheme.padding,
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      borderWidth: componentTheme.borderWidth,
+      borderStyle: 'solid',
+      borderColor: componentTheme.borderColor,
+      borderRadius: componentTheme.borderRadius,
+      color: componentTheme.textColor,
+      background: componentTheme.backgroundColor,
+      whiteSpace: 'pre-wrap',
+      wordWrap: 'break-word',
+      textAlign: 'start',
+      ...(!disabled &&
+        !readOnly && {
+          '&:hover': {
+            background: componentTheme.backgroundHoverColor,
+            borderColor: componentTheme.borderHoverColor,
+            '&::placeholder': {
+              color: componentTheme.placeholderHoverColor
+            }
+          }
+        }),
+      ...(readOnly && {
+        color: componentTheme.textReadonlyColor,
+        background: componentTheme.backgroundReadonlyColor,
+        borderColor: componentTheme.borderReadonlyColor
+      }),
+      ...(disabled && {
+        color: componentTheme.textDisabledColor,
+        background: componentTheme.backgroundDisabledColor,
+        borderColor: componentTheme.borderDisabledColor,
+        cursor: 'not-allowed',
+        pointerEvents: 'none',
+        opacity: 0.5
+      }),
+      ...(!disabled &&
+        !readOnly &&
+        success && {
+          borderColor: componentTheme.successBorderColor
+        }),
+      ...fontSizeVariants[size!],
+      ...calcFocusOutlineStyles(sharedTokens.focusOutline, {
+        focusColor
+      }),
+      ...(!disabled &&
+        !readOnly && {
+          '&[aria-invalid], &[aria-invalid]:focus': {
+            borderColor: componentTheme.errorBorderColor
+          }
+        }),
+      '&::placeholder': {
+        color: componentTheme.placeholderColor
+      },
+      '&::-webkit-resizer': {
+        backgroundImage: `url("data:image/svg+xml,${encodeURIComponent(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9" fill="none"><path d="M8.35352 0.353516L0.353516 8.35352M8.35352 4.35352L4.35352 8.35352" stroke="#8D959F"/></svg>'
+        )}")`,
+        backgroundColor: 'transparent',
+        backgroundPosition: 'bottom 2px right 2px', // Position away from edges
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '10px 10px'
+      }
+    },
+    textAreaLayout: {
+      label: 'textArea__layout',
+      position: 'relative'
+    }
+  }
+}
+
+export default generateStyle

package/src/TextArea/v2/theme.ts

@@ -0,0 +1,87 @@
+/*
+ * 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.
+ */
+
+import type { Theme, ThemeSpecificStyle } from '@instructure/ui-themes'
+import { TextAreaTheme } from '@instructure/shared-types'
+
+/**
+ * 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: Theme): TextAreaTheme => {
+  const { colors, typography, borders, spacing, forms, key: themeName } = theme
+
+  const themeSpecificStyle: ThemeSpecificStyle<TextAreaTheme> = {
+    canvas: {
+      color: theme['ic-brand-font-color-dark'],
+      focusOutlineColor: theme['ic-brand-primary']
+    }
+  }
+
+  const componentVariables: TextAreaTheme = {
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightNormal,
+    color: colors?.contrasts?.grey125125,
+
+    background: colors?.contrasts?.white1010,
+
+    requiredInvalidColor: colors?.contrasts?.red5782,
+
+    borderWidth: borders?.widthSmall,
+    borderStyle: borders?.style,
+    borderTopColor: colors?.contrasts?.grey3045,
+    borderRightColor: colors?.contrasts?.grey3045,
+    borderBottomColor: colors?.contrasts?.grey3045,
+    borderLeftColor: colors?.contrasts?.grey3045,
+    borderRadius: borders?.radiusMedium,
+
+    padding: spacing?.small,
+
+    focusOutlineColor: colors?.contrasts?.blue4570,
+    focusOutlineWidth: borders?.widthMedium,
+    focusOutlineStyle: borders?.style,
+
+    errorBorderColor: colors?.contrasts?.red4570,
+    errorOutlineColor: colors?.contrasts?.red4570,
+
+    placeholderColor: colors?.contrasts?.grey4570,
+
+    smallFontSize: typography?.fontSizeSmall,
+    smallHeight: forms?.inputHeightSmall,
+
+    mediumFontSize: typography?.fontSizeMedium,
+    mediumHeight: forms?.inputHeightMedium,
+
+    largeFontSize: typography?.fontSizeLarge,
+    largeHeight: forms?.inputHeightLarge
+  }
+
+  return {
+    ...componentVariables,
+    ...themeSpecificStyle[themeName]
+  }
+}
+
+export default generateComponentTheme

package/src/exports/a.ts

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+export { TextArea } from '../TextArea/v1'
+export type { TextAreaProps } from '../TextArea/v1/props'

package/src/exports/b.ts

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+export { TextArea } from '../TextArea/v2'
+export type { TextAreaProps } from '../TextArea/v2/props'