@instructure/ui-text-input 11.7.8 → 11.7.9-pr-snapshot-1792147648392

package/es/TextInput/v1/styles.js

@@ -1,218 +1,162 @@
-/*
- * 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.
- */
-
-/**
- * ---
- * private: true
- * ---
- * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
- */
-const generateStyle = (componentTheme, props, state) => {
-  const {
-    size,
-    textAlign,
-    shouldNotWrap
-  } = props;
-  const {
-    disabled,
-    invalid,
-    focused,
-    afterElementHasWidth,
-    beforeElementExists
-  } = state;
-  const sizeVariants = {
-    small: {
-      fontSize: componentTheme.smallFontSize,
-      height: `calc(${componentTheme.smallHeight} - (2 * ${componentTheme.borderWidth}))`,
-      lineHeight: `calc(${componentTheme.smallHeight} - (2 * ${componentTheme.borderWidth}))`
-    },
-    medium: {
-      fontSize: componentTheme.mediumFontSize,
-      height: `calc(${componentTheme.mediumHeight} - (2 * ${componentTheme.borderWidth}))`,
-      lineHeight: `calc(${componentTheme.mediumHeight} - (2 * ${componentTheme.borderWidth}))`
-    },
-    large: {
-      fontSize: componentTheme.largeFontSize,
-      height: `calc(${componentTheme.largeHeight} - (2 * ${componentTheme.borderWidth}))`,
-      lineHeight: `calc(${componentTheme.largeHeight} - (2 * ${componentTheme.borderWidth}))`
-    }
-  };
-  const disabledStyle = disabled ? {
-    cursor: 'not-allowed',
-    pointerEvents: 'none',
-    opacity: '0.5'
-  } : {};
-  const focusedStyle = focused ? {
-    opacity: 1,
-    transform: 'scale(1)'
-  } : {
-    opacity: 0,
-    transform: 'scale(0.95)'
-  };
-  const invalidStyle = invalid ? {
-    borderColor: componentTheme.errorBorderColor
-  } : {};
-  const invalidAndFocusedStyle = invalid && focused ? {
-    borderColor: componentTheme.errorBorderColor
-  } : {};
-  const inputStyle = {
-    all: 'initial',
-    '&::-ms-clear': {
-      display: 'none'
-    },
-    width: '100%',
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
-    appearance: 'none',
-    margin: 0,
-    display: 'block',
-    boxSizing: 'border-box',
-    outline: 'none',
-    fontFamily: componentTheme.fontFamily,
-    fontWeight: componentTheme.fontWeight,
-    color: componentTheme.color,
-    padding: `0 ${componentTheme.padding}`,
-    background: 'transparent',
-    border: 'none',
-    verticalAlign: 'baseline',
-    '&[autocomplete="off"]::-webkit-contacts-auto-fill-button': {
-      display: 'none !important'
-    },
-    '&:focus': {
-      boxShadow: 'initial'
-    },
-    '&::placeholder': {
-      color: componentTheme.placeholderColor
-    },
-    ...sizeVariants[size],
-    textAlign: textAlign
-  };
-  const viewBase = {
-    boxSizing: 'border-box',
-    fontFamily: componentTheme.fontFamily,
-    maxWidth: '100%',
-    overflow: 'visible',
-    unicodeBidi: 'isolate'
-  };
-  const flexBase = {
-    ...viewBase,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    flexDirection: 'row'
-  };
-  return {
-    requiredInvalid: {
-      color: componentTheme.requiredInvalidColor
-    },
-    textInput: {
-      label: 'textInput',
-      ...inputStyle,
-      '&:is(input)[type]': inputStyle,
-      '&:-webkit-any(input)[type]': inputStyle
-    },
-    facade: {
-      label: 'textInput__facade',
-      position: 'relative',
-      display: 'block',
-      boxSizing: 'border-box',
-      border: `${componentTheme.borderWidth} ${componentTheme.borderStyle} ${componentTheme.borderColor}`,
-      borderRadius: componentTheme.borderRadius,
-      background: componentTheme.background,
-      color: componentTheme.color,
-      '&::before': {
-        content: '""',
+const generateStyle = (componentTheme, props, state)=>{
+    const { size, textAlign, shouldNotWrap } = props;
+    const { disabled, invalid, focused, afterElementHasWidth, beforeElementExists } = state;
+    const sizeVariants = {
+        small: {
+            fontSize: componentTheme.smallFontSize,
+            height: `calc(${componentTheme.smallHeight} - (2 * ${componentTheme.borderWidth}))`,
+            lineHeight: `calc(${componentTheme.smallHeight} - (2 * ${componentTheme.borderWidth}))`
+        },
+        medium: {
+            fontSize: componentTheme.mediumFontSize,
+            height: `calc(${componentTheme.mediumHeight} - (2 * ${componentTheme.borderWidth}))`,
+            lineHeight: `calc(${componentTheme.mediumHeight} - (2 * ${componentTheme.borderWidth}))`
+        },
+        large: {
+            fontSize: componentTheme.largeFontSize,
+            height: `calc(${componentTheme.largeHeight} - (2 * ${componentTheme.borderWidth}))`,
+            lineHeight: `calc(${componentTheme.largeHeight} - (2 * ${componentTheme.borderWidth}))`
+        }
+    };
+    const disabledStyle = disabled ? {
+        cursor: 'not-allowed',
         pointerEvents: 'none',
-        position: 'absolute',
+        opacity: '0.5'
+    } : {};
+    const focusedStyle = focused ? {
+        opacity: 1,
+        transform: 'scale(1)'
+    } : {
+        opacity: 0,
+        transform: 'scale(0.95)'
+    };
+    const invalidStyle = invalid ? {
+        borderColor: componentTheme.errorBorderColor
+    } : {};
+    const invalidAndFocusedStyle = invalid && focused ? {
+        borderColor: componentTheme.errorBorderColor
+    } : {};
+    const inputStyle = {
+        all: 'initial',
+        '&::-ms-clear': {
+            display: 'none'
+        },
+        width: '100%',
+        WebkitFontSmoothing: 'antialiased',
+        MozOsxFontSmoothing: 'grayscale',
+        appearance: 'none',
+        margin: 0,
         display: 'block',
         boxSizing: 'border-box',
-        top: '-0.25rem',
-        bottom: '-0.25rem',
-        left: '-0.25rem',
-        right: '-0.25rem',
-        border: `${componentTheme.focusOutlineWidth} ${componentTheme.focusOutlineStyle} ${componentTheme.focusOutlineColor}`,
-        borderRadius: `calc(${componentTheme.borderRadius} * 1.5)`,
-        transition: 'all 0.2s',
-        ...focusedStyle,
-        // properties to transition on :focus
-        ...invalidAndFocusedStyle
-      },
-      ...disabledStyle,
-      ...invalidStyle
-    },
-    layout: {
-      label: 'textInput__layout',
-      ...viewBase,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      flexDirection: 'row',
-      ...(!shouldNotWrap && {
-        flexWrap: 'wrap'
-      }),
-      ...(beforeElementExists && {
-        paddingInlineStart: componentTheme.padding
-      })
-    },
-    inputLayout: {
-      label: 'textInput__inputLayout',
-      flexGrow: 1,
-      ...flexBase
-    },
-    afterElement: {
-      // the next couple lines (until the `label`) is needed so the IconButton looks OK inside the TextInput
-      // explanation: if the content inside is not a button or a popover (which could contain a button) it should have some padding on the right
-      // lineHeight is only needed if it is not popover or button
-      '& > :not(button):not([data-position^="Popover"])': {
-        marginRight: componentTheme.padding,
-        ...(sizeVariants[size] && {
-          lineHeight: sizeVariants[size].lineHeight
-        })
-      },
-      display: 'flex',
-      alignItems: 'center',
-      // Spread all sizeVariants except lineHeight (handled above)
-      ...(sizeVariants[size] ?
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      (({
-        lineHeight,
-        ...rest
-      }) => rest)(sizeVariants[size]) : {}),
-      label: 'textInput__afterElement',
-      ...viewBase,
-      borderRadius: componentTheme.borderRadius,
-      flexShrink: 0,
-      // we only override the padding once the width is calculated,
-      // it needs the padding on render
-      ...(afterElementHasWidth === false && {
-        paddingInlineEnd: 0
-      })
-    }
-  };
+        outline: 'none',
+        fontFamily: componentTheme.fontFamily,
+        fontWeight: componentTheme.fontWeight,
+        color: componentTheme.color,
+        padding: `0 ${componentTheme.padding}`,
+        background: 'transparent',
+        border: 'none',
+        verticalAlign: 'baseline',
+        '&[autocomplete="off"]::-webkit-contacts-auto-fill-button': {
+            display: 'none !important'
+        },
+        '&:focus': {
+            boxShadow: 'initial'
+        },
+        '&::placeholder': {
+            color: componentTheme.placeholderColor
+        },
+        ...sizeVariants[size],
+        textAlign: textAlign
+    };
+    const viewBase = {
+        boxSizing: 'border-box',
+        fontFamily: componentTheme.fontFamily,
+        maxWidth: '100%',
+        overflow: 'visible',
+        unicodeBidi: 'isolate'
+    };
+    const flexBase = {
+        ...viewBase,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        flexDirection: 'row'
+    };
+    return {
+        requiredInvalid: {
+            color: componentTheme.requiredInvalidColor
+        },
+        textInput: {
+            label: 'textInput',
+            ...inputStyle,
+            '&:is(input)[type]': inputStyle,
+            '&:-webkit-any(input)[type]': inputStyle
+        },
+        facade: {
+            label: 'textInput__facade',
+            position: 'relative',
+            display: 'block',
+            boxSizing: 'border-box',
+            border: `${componentTheme.borderWidth} ${componentTheme.borderStyle} ${componentTheme.borderColor}`,
+            borderRadius: componentTheme.borderRadius,
+            background: componentTheme.background,
+            color: componentTheme.color,
+            '&::before': {
+                content: '""',
+                pointerEvents: 'none',
+                position: 'absolute',
+                display: 'block',
+                boxSizing: 'border-box',
+                top: '-0.25rem',
+                bottom: '-0.25rem',
+                left: '-0.25rem',
+                right: '-0.25rem',
+                border: `${componentTheme.focusOutlineWidth} ${componentTheme.focusOutlineStyle} ${componentTheme.focusOutlineColor}`,
+                borderRadius: `calc(${componentTheme.borderRadius} * 1.5)`,
+                transition: 'all 0.2s',
+                ...focusedStyle,
+                ...invalidAndFocusedStyle
+            },
+            ...disabledStyle,
+            ...invalidStyle
+        },
+        layout: {
+            label: 'textInput__layout',
+            ...viewBase,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            flexDirection: 'row',
+            ...!shouldNotWrap && {
+                flexWrap: 'wrap'
+            },
+            ...beforeElementExists && {
+                paddingInlineStart: componentTheme.padding
+            }
+        },
+        inputLayout: {
+            label: 'textInput__inputLayout',
+            flexGrow: 1,
+            ...flexBase
+        },
+        afterElement: {
+            '& > :not(button):not([data-position^="Popover"])': {
+                marginRight: componentTheme.padding,
+                ...sizeVariants[size] && {
+                    lineHeight: sizeVariants[size].lineHeight
+                }
+            },
+            display: 'flex',
+            alignItems: 'center',
+            ...sizeVariants[size] ? (({ lineHeight, ...rest })=>rest)(sizeVariants[size]) : {},
+            label: 'textInput__afterElement',
+            ...viewBase,
+            borderRadius: componentTheme.borderRadius,
+            flexShrink: 0,
+            ...afterElementHasWidth === false && {
+                paddingInlineEnd: 0
+            }
+        }
+    };
 };
-export default generateStyle;
+export default generateStyle;

package/es/TextInput/v1/theme.js

@@ -1,74 +1,38 @@
-/*
- * 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 => {
-  const {
-    colors,
-    typography,
-    borders,
-    spacing,
-    forms,
-    key: themeName
-  } = theme;
-  const themeSpecificStyle = {
-    canvas: {
-      color: theme['ic-brand-font-color-dark'],
-      focusOutlineColor: theme['ic-brand-primary']
-    }
-  };
-  const componentVariables = {
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    borderWidth: borders?.widthSmall,
-    borderStyle: borders?.style,
-    borderColor: colors?.contrasts?.grey3045,
-    borderRadius: borders?.radiusMedium,
-    color: colors?.contrasts?.grey125125,
-    background: colors?.contrasts?.white1010,
-    requiredInvalidColor: colors?.contrasts?.red5782,
-    padding: spacing?.small,
-    focusOutlineWidth: borders?.widthMedium,
-    focusOutlineStyle: borders?.style,
-    focusOutlineColor: colors?.contrasts?.blue4570,
-    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]
-  };
+const generateComponentTheme = (theme)=>{
+    const { colors, typography, borders, spacing, forms, key: themeName } = theme;
+    const themeSpecificStyle = {
+        canvas: {
+            color: theme['ic-brand-font-color-dark'],
+            focusOutlineColor: theme['ic-brand-primary']
+        }
+    };
+    const componentVariables = {
+        fontFamily: typography?.fontFamily,
+        fontWeight: typography?.fontWeightNormal,
+        borderWidth: borders?.widthSmall,
+        borderStyle: borders?.style,
+        borderColor: colors?.contrasts?.grey3045,
+        borderRadius: borders?.radiusMedium,
+        color: colors?.contrasts?.grey125125,
+        background: colors?.contrasts?.white1010,
+        requiredInvalidColor: colors?.contrasts?.red5782,
+        padding: spacing?.small,
+        focusOutlineWidth: borders?.widthMedium,
+        focusOutlineStyle: borders?.style,
+        focusOutlineColor: colors?.contrasts?.blue4570,
+        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;
+export default generateComponentTheme;