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

package/src/ContextView/v2/index.tsx

@@ -0,0 +1,144 @@
+/*
+ * 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 { Component } from 'react'
+
+import { withStyle } from '@instructure/emotion'
+import { omitProps } from '@instructure/ui-react-utils'
+
+import { View } from '../../View/v2'
+
+import generateStyle from './styles'
+import { allowedProps } from './props'
+import type { ContextViewProps } from './props'
+
+/**
+---
+category: components
+---
+**/
+
+@withStyle(generateStyle)
+class ContextView extends Component<ContextViewProps> {
+  static readonly componentId = 'ContextView'
+  static allowedProps = allowedProps
+  static defaultProps = {
+    as: 'span',
+    elementRef: () => {},
+    debug: false,
+    width: 'auto',
+    height: 'auto',
+    children: null,
+    textAlign: 'start',
+    background: 'default',
+    shadow: 'above',
+    placement: 'center end'
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  render() {
+    const {
+      as,
+      background,
+      children,
+      debug,
+      height,
+      width,
+      maxHeight,
+      maxWidth,
+      minHeight,
+      minWidth,
+      margin,
+      padding,
+      shadow,
+      stacking,
+      style,
+      textAlign,
+      styles,
+      borderColor
+    } = this.props
+
+    return (
+      <View
+        {...omitProps(this.props, ContextView.allowedProps)}
+        css={styles?.contextView}
+        style={style}
+        borderWidth="none"
+        display="inline-block"
+        as={as}
+        withVisualDebug={debug}
+        elementRef={this.handleRef}
+        margin={margin}
+        stacking={stacking}
+      >
+        <View
+          css={styles?.contextView__content}
+          display="block"
+          borderRadius={styles?.borderRadius}
+          borderWidth="small"
+          borderColor={
+            borderColor ||
+            (background === 'default' ? 'primary' : 'transparent')
+          }
+          background={background === 'default' ? 'primary' : 'primary-inverse'}
+          withVisualDebug={debug}
+          height={height}
+          width={width}
+          maxHeight={maxHeight}
+          maxWidth={maxWidth}
+          minHeight={minHeight}
+          minWidth={minWidth}
+          padding={padding}
+          shadow={shadow}
+          textAlign={textAlign}
+        >
+          <span css={styles?.contextView__arrow} />
+          {children}
+        </View>
+      </View>
+    )
+  }
+}
+
+export default ContextView
+export { ContextView }

package/src/ContextView/v2/props.ts

@@ -0,0 +1,98 @@
+/*
+ * 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 {
+  AsElementType,
+  ContextViewTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+import type { PlacementPropValues } from '@instructure/ui-position'
+import type {
+  Shadow,
+  Spacing,
+  Stacking,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+
+type ContextViewOwnProps = {
+  as?: AsElementType
+  elementRef?: (element: Element | null) => void
+  height?: string | number
+  width?: string | number
+  maxHeight?: string | number
+  maxWidth?: string | number
+  minHeight?: string | number
+  minWidth?: string | number
+  children?: React.ReactNode
+  textAlign?: 'start' | 'center' | 'end'
+  background?: 'default' | 'inverse'
+  debug?: boolean
+  margin?: Spacing
+  padding?: Spacing
+  shadow?: Shadow
+  stacking?: Stacking
+  placement?: PlacementPropValues
+  borderColor?: string
+}
+
+type PropKeys = keyof ContextViewOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ContextViewProps = ContextViewOwnProps &
+  WithStyleProps<ContextViewTheme, ContextViewStyle> &
+  OtherHTMLAttributes<ContextViewOwnProps>
+
+type ContextViewStyle = ComponentStyle<
+  'contextView' | 'contextView__content' | 'contextView__arrow'
+> & {
+  arrowSize: string | 0
+  arrowBorderWidth: string | 0
+  borderRadius: string
+}
+const allowedProps: AllowedPropKeys = [
+  'as',
+  'elementRef',
+  'margin',
+  'padding',
+  'height',
+  'width',
+  'maxHeight',
+  'maxWidth',
+  'minHeight',
+  'minWidth',
+  'children',
+  'textAlign',
+  'shadow',
+  'stacking',
+  'background',
+  'placement',
+  'debug',
+  'borderColor'
+]
+
+export type { ContextViewProps, ContextViewStyle }
+export { allowedProps }

package/src/ContextView/v2/styles.ts

@@ -0,0 +1,332 @@
+/*
+ * 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 { mirrorPlacement } from '@instructure/ui-position'
+
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { PlacementPropValues } from '@instructure/ui-position'
+import type { ContextViewProps, ContextViewStyle } from './props'
+
+type PlacementArray = PlacementPropValues[]
+
+const endPlacements: PlacementArray = [
+  'end center',
+  'end top',
+  'end bottom',
+  'end stretch',
+  'center end',
+  'end'
+]
+const startPlacements: PlacementArray = [
+  'start center',
+  'start top',
+  'start bottom',
+  'start stretch',
+  'center start',
+  'start'
+]
+const bottomPlacements: PlacementArray = [
+  'bottom',
+  'bottom end',
+  'bottom start',
+  'bottom stretch',
+  'bottom center'
+]
+const topPlacements: PlacementArray = [
+  'top',
+  'top start',
+  'top end',
+  'top stretch',
+  'top center'
+]
+
+const getPlacementStyle = (
+  placement: PlacementPropValues,
+  theme: NewComponentTypes['ContextView']
+) => {
+  if (endPlacements.includes(placement)) {
+    return { paddingInlineStart: theme?.arrowSize, paddingInlineEnd: '0' }
+  }
+  if (startPlacements.includes(placement)) {
+    return { paddingInlineEnd: theme?.arrowSize, paddingInlineStart: '0' }
+  }
+  if (bottomPlacements.includes(placement)) {
+    return { paddingTop: theme?.arrowSize }
+  }
+  if (topPlacements.includes(placement)) {
+    return { paddingBottom: theme?.arrowSize }
+  }
+
+  return { position: 'absolute', left: '-999em' }
+}
+
+const getArrowCorrections = (
+  placement: PlacementPropValues,
+  theme: NewComponentTypes['ContextView']
+) => {
+  const center: PlacementArray = [
+    'top',
+    'bottom',
+    'top center',
+    'bottom center',
+    'top stretch',
+    'bottom stretch'
+  ]
+  const start: PlacementArray = ['top start', 'bottom start']
+  const end: PlacementArray = ['top end', 'bottom end']
+  const top: PlacementArray = ['start top', 'end top']
+  const bottom: PlacementArray = ['start bottom', 'end bottom']
+
+  if (center.includes(placement)) {
+    return {
+      insetInlineStart: '50%'
+    }
+  }
+  if (start.includes(placement)) {
+    return {
+      insetInlineStart: `calc((${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`,
+      insetInlineEnd: 'auto'
+    }
+  }
+  if (end.includes(placement)) {
+    return {
+      insetInlineStart: `calc(100% - (${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`,
+      insetInlineEnd: 'auto'
+    }
+  }
+  if (top.includes(placement)) {
+    return {
+      top: `calc((${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`
+    }
+  }
+  if (bottom.includes(placement)) {
+    return {
+      top: `calc(100% - (${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`
+    }
+  }
+
+  return {}
+}
+
+const getArrowPlacementVariant = (
+  placement: PlacementPropValues,
+  background: ContextViewProps['background'],
+  theme: NewComponentTypes['ContextView'],
+  props: ContextViewProps
+) => {
+  const transformedPlacement = mirrorPlacement(placement, ' ')
+  const isInversed = background === 'inverse'
+  const { borderColor } = props
+
+  if (endPlacements.includes(transformedPlacement)) {
+    return {
+      main: {
+        top: '50%',
+        insetInlineStart: '100%',
+        insetInlineEnd: 'auto',
+        marginTop: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
+        borderInlineEndWidth: '0',
+        borderInlineEndColor: 'transparent',
+        borderInlineStartColor:
+          borderColor ||
+          (isInversed
+            ? theme?.arrowBorderColorInverse
+            : theme?.arrowBorderColor),
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent',
+        borderInlineStartWidth: theme?.arrowSize
+      },
+
+      __after: {
+        insetInlineEnd: theme?.arrowBorderWidth,
+        insetInlineStart: 'auto',
+        marginTop: `calc(-1 * ${theme?.arrowSize})`,
+        borderInlineEndWidth: '0',
+        borderInlineEndColor: 'transparent',
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent',
+        borderInlineStartWidth: theme?.arrowSize,
+        borderInlineStartColor: isInversed
+          ? theme?.arrowBackgroundColorInverse
+          : theme?.arrowBackgroundColor
+      }
+    }
+  }
+
+  if (startPlacements.includes(transformedPlacement)) {
+    return {
+      main: {
+        top: '50%',
+        insetInlineEnd: '100%',
+        insetInlineStart: 'auto',
+        marginTop: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
+        borderInlineStartWidth: '0',
+        borderInlineStartColor: 'transparent',
+        borderInlineEndColor:
+          borderColor ||
+          (isInversed
+            ? theme?.arrowBorderColorInverse
+            : theme?.arrowBorderColor),
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent',
+        borderInlineEndWidth: theme?.arrowSize
+      },
+      __after: {
+        insetInlineStart: theme?.arrowBorderWidth,
+        insetInlineEnd: 'auto',
+        marginTop: `calc(-1 * ${theme?.arrowSize})`,
+        borderInlineStartWidth: '0',
+        borderInlineStartColor: 'transparent',
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent',
+        borderInlineEndWidth: theme?.arrowSize,
+        borderInlineEndColor: isInversed
+          ? theme?.arrowBackgroundColorInverse
+          : theme?.arrowBackgroundColor
+      }
+    }
+  }
+
+  if (bottomPlacements.includes(transformedPlacement)) {
+    return {
+      main: {
+        top: '100%',
+        marginInlineStart: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
+        marginInlineEnd: '0',
+        borderBottomWidth: '0',
+        borderBottomColor: 'transparent',
+        borderInlineStartColor: 'transparent',
+        borderInlineEndColor: 'transparent'
+      },
+      __after: {
+        bottom: theme?.arrowBorderWidth,
+        marginInlineStart: `calc(-1 * ${theme?.arrowSize})`,
+        marginInlineEnd: '0',
+        borderBottomWidth: '0',
+        borderBottomColor: 'transparent',
+        borderInlineStartColor: 'transparent',
+        borderInlineEndColor: 'transparent',
+        borderTopColor: isInversed
+          ? theme?.arrowBackgroundColorInverse
+          : theme?.arrowBackgroundColor
+      }
+    }
+  }
+
+  return {
+    main: {
+      bottom: '100%',
+      marginInlineStart: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
+      marginInlineEnd: '0',
+      borderTopWidth: '0',
+      borderTopColor: 'transparent',
+      borderInlineStartColor: 'transparent',
+      borderInlineEndColor: 'transparent'
+    },
+    __after: {
+      top: theme?.arrowBorderWidth,
+      marginInlineStart: `calc(-1 * ${theme?.arrowSize})`,
+      marginInlineEnd: '0',
+      borderTopWidth: '0',
+      borderTopColor: 'transparent',
+      borderInlineStartColor: 'transparent',
+      borderInlineEndColor: 'transparent',
+      borderBottomColor: isInversed
+        ? theme?.arrowBackgroundColorInverse
+        : theme?.arrowBackgroundColor
+    }
+  }
+}
+
+/**
+ * ---
+ * 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
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['ContextView'],
+  props: ContextViewProps
+): ContextViewStyle => {
+  const { placement, background, borderColor } = props
+
+  const arrowBaseStyles = {
+    content: '""',
+    height: '0',
+    width: '0',
+    position: 'absolute',
+    display: 'block',
+    boxSizing: 'border-box',
+    pointerEvents: 'none',
+    borderStyle: 'solid'
+  }
+
+  const arrowBackGroundVariants = {
+    default: componentTheme?.arrowBorderColor,
+    inverse: componentTheme?.arrowBorderColorInverse
+  }
+
+  const arrowPlacementVariant = getArrowPlacementVariant(
+    placement!,
+    background,
+    componentTheme,
+    props
+  )
+
+  return {
+    borderRadius: componentTheme?.borderRadius,
+    contextView: {
+      label: 'contextView',
+      boxSizing: 'border-box',
+      minHeight: `calc(${componentTheme?.arrowSize} * 2)`,
+      ...getPlacementStyle(placement!, componentTheme)
+    },
+    contextView__content: {
+      label: 'contextView__content',
+      position: 'relative'
+    },
+    contextView__arrow: {
+      label: 'contextView__arrow',
+      ...arrowBaseStyles,
+      display: 'block',
+      borderWidth: `calc(${componentTheme?.arrowSize} + ${componentTheme?.arrowBorderWidth})`,
+      borderColor: borderColor || arrowBackGroundVariants[background!],
+      ...arrowPlacementVariant.main,
+      ...getArrowCorrections(placement!, componentTheme),
+      '&::after': {
+        borderWidth: componentTheme?.arrowSize,
+        borderColor: arrowBackGroundVariants[background!],
+        ...arrowPlacementVariant.__after,
+        ...arrowBaseStyles
+      }
+    },
+    arrowSize: componentTheme.arrowSize,
+    arrowBorderWidth: componentTheme.arrowBorderWidth
+  }
+}
+
+export default generateStyle

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

@@ -33,7 +33,7 @@ import {
   pickProps,
   passthroughProps
 } from '@instructure/ui-react-utils'
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'