@instructure/ui-tag 11.6.0 → 11.6.1-snapshot-129

package/src/Tag/v2/props.ts

@@ -0,0 +1,93 @@
+/*
+ * 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 { ViewProps } from '@instructure/ui-view/latest'
+import type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type { OtherHTMLAttributes, TagTheme } from '@instructure/shared-types'
+
+type TagOwnProps = {
+  className?: string
+  text: string | React.ReactNode
+  /**
+   * @deprecated since version 10
+   * Use of the title attribute is highly problematic due to accessibility concerns
+   */
+  title?: string
+  /**
+   * Whether or not to disable the tag
+   */
+  disabled?: boolean
+  /**
+   * Works just like disabled but keeps the same styles as if it were active
+   */
+  readOnly?: boolean
+  dismissible?: boolean
+  /**
+   * Valid values are `0`, `none`, `auto`, `xxxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   */
+  margin?: Spacing
+  /**
+   * If you add an onClick prop, Tag renders as a clickable button
+   */
+  onClick?: (event: React.MouseEvent<ViewProps & Element>) => void
+  /**
+   * Provides a reference to the underlying html root element
+   */
+  elementRef?: (element: Element | null) => void
+  size?: 'small' | 'medium' | 'large'
+  variant?: 'default' | 'inline'
+}
+
+type PropKeys = keyof TagOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TagProps = TagOwnProps &
+  WithStyleProps<TagTheme, TagStyle> &
+  OtherHTMLAttributes<TagOwnProps>
+
+type TagStyle = ComponentStyle<'tag' | 'text' | 'icon'>
+const allowedProps: AllowedPropKeys = [
+  'className',
+  'text',
+  'title',
+  'disabled',
+  'readOnly',
+  'dismissible',
+  'margin',
+  'onClick',
+  'elementRef',
+  'size',
+  'variant'
+]
+
+export type { TagProps, TagStyle }
+export { allowedProps }

package/src/Tag/v2/styles.ts

@@ -0,0 +1,219 @@
+/*
+ * 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 { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import type { TagProps, TagStyle } from './props'
+import { calcFocusOutlineStyles } from '@instructure/emotion'
+
+/**
+ * ---
+ * 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} sharedTokens 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: NewComponentTypes['Tag'],
+  props: TagProps,
+  sharedTokens: SharedTokens
+): TagStyle => {
+  const { variant, size, dismissible, onClick, disabled } = props
+
+  const isButton = !!onClick
+
+  const sizeVariants = {
+    small: {
+      tag: {
+        paddingLeft: componentTheme.paddingHorizontalSmall,
+        paddingRight: componentTheme.paddingHorizontalSmall,
+        fontSize: componentTheme.fontSizeSmall
+      },
+      text: {
+        lineHeight: `calc(${componentTheme.heightSmall} - (${componentTheme.defaultBorderWidth} * 2))`
+      }
+    },
+    medium: {
+      tag: {
+        paddingLeft: componentTheme.paddingHorizontal,
+        paddingRight: componentTheme.paddingHorizontal,
+        fontSize: `calc(${componentTheme.fontSizeMedium} - 0.0625rem)`
+      },
+      text: {
+        lineHeight: `calc(${componentTheme.heightMedium} - (${componentTheme.defaultBorderWidth} * 2))`
+      }
+    },
+    large: {
+      tag: {
+        paddingLeft: componentTheme.paddingHorizontalSmall,
+        paddingRight: componentTheme.paddingHorizontal,
+        fontSize: `calc(${componentTheme.fontSizeLarge} - 0.0625rem)`
+      },
+      text: {
+        lineHeight: `calc(${componentTheme.heightLarge} - (${componentTheme.defaultBorderWidth} * 2))`
+      }
+    }
+  }
+
+  const buttonVariant = isButton
+    ? {
+        tag: {
+          touchAction: 'manipulation',
+          outline: 'none',
+          position: 'relative',
+          overflow: 'visible',
+          transition: `background-color ${componentTheme.transitionTiming}`,
+          ...(!dismissible && { cursor: 'pointer' }),
+
+          '&:focus': {
+            '&::before': {
+              opacity: 1,
+              transform: 'scale(1)'
+            }
+          },
+
+          ...(disabled && {
+            cursor: 'not-allowed',
+            pointerEvents: 'none',
+            opacity: 0.5
+          })
+        },
+        tagBefore: {
+          content: '""',
+          boxSizing: 'border-box',
+          border: calcFocusOutlineStyles(sharedTokens.focusOutline),
+          position: 'absolute',
+          top: '-0.3125rem',
+          bottom: '-0.3125rem',
+          left: '-0.3125rem',
+          right: '-0.3125rem',
+          opacity: 0,
+          transform: 'scale(0.9)',
+          transition: `all ${componentTheme.transitionTiming}`,
+          pointerEvents: 'none'
+        }
+      }
+    : {}
+
+  const tagVariantVariants = {
+    default: {
+      tag: {
+        backgroundColor: componentTheme.defaultBackground,
+        border: `${componentTheme.defaultBorderWidth} ${componentTheme.defaultBorderStyle} ${componentTheme.defaultBorderColor}`,
+        borderRadius: componentTheme.defaultBorderRadius,
+        color: componentTheme.defaultColor,
+        ...(isButton && {
+          '&:hover': { backgroundColor: componentTheme.defaultBackgroundHover }
+        })
+      },
+      tagBefore: {
+        ...(isButton && {
+          borderRadius: componentTheme.defaultBorderRadius
+        })
+      }
+    },
+    inline: {
+      tag: {
+        backgroundColor: componentTheme.inlineBackground,
+        border: `${componentTheme.inlineBorderWidth} ${componentTheme.inlineBorderStyle} ${componentTheme.inlineBorderColor}`,
+        borderRadius: componentTheme.inlineBorderRadius,
+        color: componentTheme.inlineColor,
+        cursor: 'text',
+        margin: '0 0.1875rem 0.1875rem',
+        ...(isButton && {
+          '&:hover': { backgroundColor: componentTheme.inlineBackgroundHover }
+        })
+      },
+      tagBefore: {
+        ...(isButton && {
+          borderRadius: `calc(${componentTheme.inlineBorderRadius} * 1.5)`
+        })
+      }
+    }
+  }
+
+  const inlineIconVariant =
+    variant === 'inline' && dismissible
+      ? {
+          backgroundColor: componentTheme.inlineIconColor,
+          borderRadius: '50%',
+          padding: '0.25rem',
+          position: 'absolute',
+          insetInlineEnd: 0,
+          insetInlineStart: 'auto',
+          top: 0,
+          transform: 'translate(40%, -40%)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+
+          '[class$="-tag"]:hover > &': {
+            backgroundColor: componentTheme.inlineIconHoverColor
+          },
+
+          '[dir="rtl"] &': { transform: 'translate(-40%, -40%)' }
+        }
+      : {}
+
+  return {
+    tag: {
+      label: 'tag',
+      boxSizing: 'border-box',
+      fontFamily: componentTheme.fontFamily,
+      display: 'inline-flex',
+      alignItems: 'center',
+      textAlign: 'center',
+      verticalAlign: 'middle',
+      userSelect: 'none',
+      ...sizeVariants[size!].tag,
+      ...buttonVariant.tag,
+      ...tagVariantVariants[variant!].tag,
+
+      '&::before': {
+        ...buttonVariant.tagBefore,
+        ...tagVariantVariants[variant!].tagBefore
+      }
+    },
+    text: {
+      label: 'tag__text',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      maxWidth: componentTheme.maxWidth,
+      ...sizeVariants[size!].text
+    },
+    icon: {
+      label: 'tag__icon',
+      marginInlineStart: componentTheme.iconMargin,
+      marginInlineEnd: 0,
+      transition: `all ${componentTheme.transitionTiming}`,
+      cursor: 'pointer',
+      ...inlineIconVariant
+    }
+  }
+}
+
+export default generateStyle

package/src/exports/a.ts

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

package/src/exports/b.ts

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