feat(ui-navigation): rework AppNav

packages/ui-navigation/package.json

@@ -80,18 +80,18 @@
       "default": "./es/exports/a.js"
     },
     "./v11_7": {
-      "src": "./src/exports/a.ts",
-      "types": "./types/exports/a.d.ts",
-      "import": "./es/exports/a.js",
-      "require": "./lib/exports/a.js",
-      "default": "./es/exports/a.js"
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
     },
     "./latest": {
-      "src": "./src/exports/a.ts",
-      "types": "./types/exports/a.d.ts",
-      "import": "./es/exports/a.js",
-      "require": "./lib/exports/a.js",
-      "default": "./es/exports/a.js"
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
     }
   }
 }

packages/ui-navigation/src/AppNav/v1/Item/index.tsx

@@ -32,7 +32,7 @@ import {
   passthroughProps
 } from '@instructure/ui-react-utils'
 
-import { View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 import type { ScreenReaderContentProps } from '@instructure/ui-a11y-content'
 

packages/ui-navigation/src/AppNav/v1/index.tsx

@@ -28,8 +28,8 @@ import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import { callRenderProp, omitProps } from '@instructure/ui-react-utils'
 
-import { View } from '@instructure/ui-view/latest'
-import { Menu } from '@instructure/ui-menu/latest'
+import { View } from '@instructure/ui-view/v11_6'
+import { Menu } from '@instructure/ui-menu/v11_6'
 import { Item } from './Item'
 
 import generateStyle from './styles'

packages/ui-navigation/src/AppNav/v2/Item/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 { ComponentElement, Component } from 'react'
+
+import { logError as error } from '@instructure/console'
+import {
+  callRenderProp,
+  getElementType,
+  matchComponentTypes,
+  passthroughProps
+} from '@instructure/ui-react-utils'
+
+import { View } from '@instructure/ui-view/latest'
+import { ScreenReaderContent } from '@instructure/ui-a11y-content'
+import type { ScreenReaderContentProps } from '@instructure/ui-a11y-content'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+import type { AppNavItemProps } from './props'
+import { allowedProps } from './props'
+
+/**
+---
+parent: AppNav
+id: AppNav.Item
+---
+@module Item
+**/
+@withStyle(generateStyle)
+class Item extends Component<AppNavItemProps> {
+  static readonly componentId = 'AppNav.Item'
+
+  static allowedProps = allowedProps
+
+  static defaultProps = {
+    children: null,
+    isSelected: false,
+    cursor: 'pointer',
+    isDisabled: false
+  } as const
+
+  ref: Element | null = null
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  handleClick = (e: React.MouseEvent) => {
+    const { isDisabled, onClick } = this.props
+
+    if (isDisabled) {
+      e.preventDefault()
+      e.stopPropagation()
+    } else if (typeof onClick === 'function') {
+      onClick(e)
+    }
+  }
+
+  render() {
+    const ElementType = getElementType(Item, this.props)
+
+    const { renderIcon, renderLabel, href, renderAfter, cursor, isDisabled } =
+      this.props
+
+    const icon = callRenderProp(renderIcon)
+    const label = callRenderProp(renderLabel)
+
+    const labelIsForScreenReaders = matchComponentTypes<
+      ComponentElement<ScreenReaderContentProps, ScreenReaderContent>
+    >(label, [ScreenReaderContent])
+
+    if (icon) {
+      error(
+        labelIsForScreenReaders,
+        '[AppNav] If an icon is used, the label text should be wrapped in <ScreenReaderContent />.'
+      )
+    }
+
+    return (
+      <View
+        {...passthroughProps(this.props)}
+        as={ElementType}
+        href={href}
+        onClick={this.handleClick}
+        disabled={isDisabled}
+        elementRef={this.handleRef}
+        display="flex"
+        position="relative"
+        borderRadius="medium"
+        cursor={isDisabled ? 'not-allowed' : cursor}
+        css={this.props.styles?.item}
+        data-cid="AppNav.Item"
+      >
+        {icon}
+        {labelIsForScreenReaders ? (
+          label
+        ) : (
+          <span css={this.props.styles?.label}>{label}</span>
+        )}
+        {renderAfter && callRenderProp(renderAfter)}
+      </View>
+    )
+  }
+}
+
+export default Item
+export { Item }

packages/ui-navigation/src/AppNav/v2/Item/props.ts

@@ -0,0 +1,103 @@
+/*
+ * 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 {
+  AsElementType,
+  AppNavItemTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { Cursor } from '@instructure/shared-types'
+import React from 'react'
+import { Renderable } from '@instructure/shared-types'
+
+type AppNavItemOwnProps = {
+  /**
+   * The text to display. If the `icon` prop is used, label text must be wrapped
+   * in `ScreenReaderContent`.
+   */
+  renderLabel: Renderable
+  /**
+   * Content to display after the renderLabel text, such as a badge
+   */
+  renderAfter?: Renderable
+  /**
+   * The visual to display (ex. an Image, Logo, Avatar, or Icon)
+   */
+  renderIcon?: Renderable
+  /**
+   * If the item goes to a new page, pass an href
+   */
+  href?: string
+  /**
+   * If the item does not go to a new page, pass an onClick
+   */
+  onClick?: (event: React.MouseEvent) => void
+  /**
+   * Denotes which item is currently selected
+   */
+  isSelected?: boolean
+  /**
+   * provides a reference to the underlying focusable (`button` or `a`) element
+   */
+  elementRef?: (element: Element | null) => void
+  /**
+   * The element type to render as (will default to `<a>` if href is provided)
+   */
+  as?: AsElementType
+  /**
+   * Specify the mouse cursor to use on :hover.
+   * The `pointer` cursor is used by default.
+   */
+  cursor?: Cursor
+  /**
+   * Disables the link or button visually and functionally
+   */
+  isDisabled?: boolean
+}
+
+type PropKeys = keyof AppNavItemOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type AppNavItemProps = AppNavItemOwnProps &
+  WithStyleProps<AppNavItemTheme, AppNavItemStyle> &
+  OtherHTMLAttributes<AppNavItemOwnProps>
+
+type AppNavItemStyle = ComponentStyle<'item' | 'label'>
+const allowedProps: AllowedPropKeys = [
+  'renderLabel',
+  'renderAfter',
+  'renderIcon',
+  'href',
+  'onClick',
+  'isSelected',
+  'elementRef',
+  'as',
+  'cursor',
+  'isDisabled'
+]
+
+export type { AppNavItemProps, AppNavItemStyle }
+export { allowedProps }

packages/ui-navigation/src/AppNav/v2/Item/styles.ts

@@ -0,0 +1,97 @@
+/*
+ * 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 } from '@instructure/ui-themes'
+import type { AppNavItemProps, AppNavItemStyle } from './props'
+
+/**
+ * ---
+ * 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: NewComponentTypes['AppNavItem'],
+  props: AppNavItemProps
+): AppNavItemStyle => {
+  const { isSelected, isDisabled } = props
+
+  const itemStyles = {
+    appearance: 'none',
+    overflow: 'visible',
+    direction: 'inherit',
+    margin: '0',
+    textDecoration: 'none',
+    userSelect: 'none',
+    touchAction: 'manipulation',
+    background: 'transparent',
+    border: 'none',
+    outline: 'none',
+    lineHeight: componentTheme.height,
+    padding: `0 ${componentTheme.padding}`,
+    alignItems: 'flex-start',
+
+    '&:hover': {
+      textDecoration: 'underline',
+      textDecorationColor: componentTheme.textColor
+    },
+    ...(isDisabled && {
+      pointerEvents: 'none',
+      opacity: 0.5
+    })
+  }
+
+  return {
+    item: {
+      label: 'item',
+      ...itemStyles,
+
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(a), &:is(button)': itemStyles,
+      '&:-webkit-any(a), &:-webkit-any(button)': itemStyles
+    },
+
+    label: {
+      label: 'item__label',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      fontFamily: componentTheme.fontFamily,
+      fontSize: componentTheme.fontSize,
+      fontWeight: componentTheme.fontWeight,
+      color: componentTheme.textColor,
+
+      ...(isSelected && {
+        color: componentTheme.textColorSelected,
+        textDecoration: 'underline'
+      })
+    }
+  }
+}
+
+export default generateStyle