@instructure/ui-top-nav-bar 8.56.0 → 9.0.0

package/src/TopNavBar/README.md

@@ -24,11 +24,8 @@ class PlaygroundExample extends React.Component {
     hasMenuItemsSection: true,
     hasActionItemsSection: true,
     hasUserSection: true,
-    hideActionsUserSeparator: true,
     useAlternativeTitle: false,
-    renderName: true,
     renderIcon: true,
-    nameBackground: false,
     iconBackground: true,
     extraMenuItems: false,
     extraActionItems: false,
@@ -308,12 +305,6 @@ class PlaygroundExample extends React.Component {
           'hasUserSection',
         ]
       },
-      desktopLayout: {
-        label: 'Desktop layout settings',
-        checkboxes: [
-          'hideActionsUserSeparator'
-        ]
-      },
       smallViewportLayout: {
         label: 'Small viewport layout settings',
         checkboxes: [
@@ -323,9 +314,7 @@ class PlaygroundExample extends React.Component {
       brand: {
         label: 'TopNavBar.Brand settings',
         checkboxes: [
-          'renderName',
           'renderIcon',
-          'nameBackground',
           'iconBackground',
         ]
       },
@@ -399,11 +388,8 @@ class PlaygroundExample extends React.Component {
       hasMenuItemsSection: 'Displays main navbar items',
       hasActionItemsSection: 'Displays action items',
       hasUserSection: 'Displays user menu',
-      hideActionsUserSeparator: 'Hides the separator between the action items and the user menu',
       useAlternativeTitle: 'Displays other data (e.g.: page title) instead of the Brand logo and link',
-      renderName: 'The app/product/brand/company/etc. name',
       renderIcon: 'Visible only in "desktop" mode',
-      nameBackground: 'Visible only in "desktop" mode',
       iconBackground: 'Visible only in "desktop" mode',
       extraMenuItems: 'In "desktop" mode, when there is not enough room to list all the menu items, they will be accessible via a dropdown menu at the end of the list',
       actionItemShowChevronForSubmenu: 'Displays the open/close chevron next to the item, when it has a submenu or custom popover',
@@ -604,9 +590,6 @@ class PlaygroundExample extends React.Component {
               navLabel={this.state.isSecondaryNavigation
                 ? 'Secondary navigation bar'
                 : 'Main navigation bar'}
-              desktopConfig={{
-                hideActionsUserSeparator: this.state.hideActionsUserSeparator
-              }}
               smallViewportConfig={{
                 dropdownMenuToggleButtonLabel: 'Toggle Menu',
                 dropdownMenuLabel: 'Main Menu',
@@ -632,11 +615,6 @@ class PlaygroundExample extends React.Component {
                   screenReaderLabel="Elevate Data Sync"
                   href="/#TopNavBar"
                   {...{
-                    ...(this.state.renderName && {
-                      renderName: inverseColor
-                        ? elevateLogoInverse
-                        : elevateLogo
-                    }),
                     ...(this.state.renderIcon && {
                       renderIcon: inverseColor
                         ? undefined
@@ -645,11 +623,6 @@ class PlaygroundExample extends React.Component {
                     ...(this.state.iconBackground && {
                       iconBackground: '#0097D3'
                     }),
-                    ...(this.state.nameBackground && {
-                      nameBackground: inverseColor
-                        ? '#F5F5F5'
-                        : '#2D3B45'
-                    }),
                   }}
                 />
               ) : undefined }
@@ -1108,7 +1081,7 @@ render(<PlaygroundExample />)
 
 TopNavBar is a responsive component, and it has 4 "sections" or "blocks".
 
-The `<TopNavBar.Layout>` component has a `desktopConfig` and a `smallViewportConfig` prop that handles how the different views are set up.
+The `<TopNavBar.Layout>` component has a `smallViewportConfig` prop that handles how the mobile viewport is set up.
 
 #### Main blocks
 
@@ -1116,9 +1089,7 @@ The `<TopNavBar.Layout>` component has a `desktopConfig` and a `smallViewportCon
 
 `<TopNavBar.Brand>` contains the brand logo and icon.
 
-Use the brand logo over the primary brand color in front of the brand's name. If there is no brand logo then use the name with darker background.
-
-**Note**: A console warning is thrown if the `renderName` prop of `<TopNavBar.Brand>` is used because it will be removed soon in Instructure UI v9. Please adjust the TopNavBar design in places, where you use `renderName` with `<TopNavBar.Brand>`.
+Use the brand logo over the primary brand color.
 
 ```js
 ---
@@ -1130,9 +1101,6 @@ type: example
       {() => (
         <TopNavBar.Layout
           navLabel="Example navigation bar"
-          desktopConfig={{
-            hideActionsUserSeparator: false
-          }}
           smallViewportConfig={{
             dropdownMenuToggleButtonLabel: 'Toggle Menu',
             dropdownMenuLabel: 'Main Menu',
@@ -1140,29 +1108,6 @@ type: example
           renderBrand={(
             <TopNavBar.Brand
               screenReaderLabel="Brand name"
-              renderName={(
-                <View as="div" minWidth="7rem">
-                  <Text
-                    as="div"
-                    color="primary-inverse"
-                    transform="uppercase"
-                    size="small"
-                    weight="bold"
-                    lineHeight="condensed"
-                  >
-                    Brand
-                  </Text>
-                  <Text
-                    as="div"
-                    color="primary-inverse"
-                    size="large"
-                    weight="normal"
-                    lineHeight="condensed"
-                  >
-                    Sub-brand
-                  </Text>
-                </View>
-              )}
               renderIcon={(
                 <IconBoldLine
                   size="small"
@@ -1185,9 +1130,6 @@ type: example
       {() => (
         <TopNavBar.Layout
           navLabel="Example navigation bar"
-          desktopConfig={{
-            hideActionsUserSeparator: false
-          }}
           smallViewportConfig={{
             dropdownMenuToggleButtonLabel: 'Toggle Menu',
             dropdownMenuLabel: 'Main Menu',
@@ -1195,30 +1137,6 @@ type: example
           renderBrand={(
             <TopNavBar.Brand
               screenReaderLabel="Brand name"
-              renderName={(
-                <View as="div" minWidth="7rem">
-                  <Text
-                    as="div"
-                    color="primary-inverse"
-                    transform="uppercase"
-                    size="small"
-                    weight="bold"
-                    lineHeight="condensed"
-                  >
-                    Brand
-                  </Text>
-                  <Text
-                    as="div"
-                    color="primary-inverse"
-                    size="large"
-                    weight="normal"
-                    lineHeight="condensed"
-                  >
-                    Sub-brand
-                  </Text>
-                </View>
-              )}
-              nameBackground="#2D3B45"
               href="/#TopNavBar"
             />
           )}
@@ -1257,9 +1175,6 @@ type: example
         {() => (
           <TopNavBar.Layout
             navLabel="Example navigation bar"
-            desktopConfig={{
-              hideActionsUserSeparator: false
-            }}
             smallViewportConfig={{
               dropdownMenuToggleButtonLabel: 'Toggle Menu',
               dropdownMenuLabel: 'Main Menu',
@@ -1302,9 +1217,6 @@ type: example
       {() => (
         <TopNavBar.Layout
           navLabel="Example navigation bar"
-          desktopConfig={{
-            hideActionsUserSeparator: false
-          }}
           smallViewportConfig={{
             dropdownMenuToggleButtonLabel: 'Toggle Menu',
             dropdownMenuLabel: 'Main Menu',
@@ -1353,9 +1265,6 @@ type: example
       {() => (
         <TopNavBar.Layout
           navLabel="Example navigation bar"
-          desktopConfig={{
-            hideActionsUserSeparator: false
-          }}
           smallViewportConfig={{
             dropdownMenuToggleButtonLabel: 'Toggle Menu',
             dropdownMenuLabel: 'Main Menu',
@@ -1417,8 +1326,6 @@ Action items can have submenus and popovers too. It is also recommended to add h
 
 **Special case:** The "Search" action should open in a flyout on desktop. On the mobile/tablet view it should fill the header (see the [Playground](/#TopNavBar/#playground) example).
 
-If the last action is shown as text and the user is shown as text, use the separator between the 2 blocks, otherwise it is optional (`desktopConfig.hideActionsUserSeparator` prop on the `<TopNavBar.Layout>`).
-
 ```js
 ---
 type: example
@@ -1429,9 +1336,6 @@ type: example
       {() => (
         <TopNavBar.Layout
           navLabel="Example navigation bar"
-          desktopConfig={{
-            hideActionsUserSeparator: true
-          }}
           smallViewportConfig={{
             dropdownMenuToggleButtonLabel: 'Toggle Menu',
             dropdownMenuLabel: 'Main Menu',
@@ -1523,69 +1427,6 @@ type: example
       )}
     </TopNavBar>
   </View>
-
-  <View as="div" margin="medium 0">
-    <TopNavBar>
-      {() => (
-        <TopNavBar.Layout
-          navLabel="Example navigation bar"
-          desktopConfig={{
-            hideActionsUserSeparator: false
-          }}
-          smallViewportConfig={{
-            dropdownMenuToggleButtonLabel: 'Toggle Menu',
-            dropdownMenuLabel: 'Main Menu',
-          }}
-          renderActionItems={(
-            <TopNavBar.ActionItems
-              listLabel="Actions"
-              renderHiddenItemsMenuTriggerLabel={(
-                hiddenChildrenCount
-              ) => `${hiddenChildrenCount} more actions`}
-            >
-              <TopNavBar.Item
-                id="AlertsAction2"
-                renderIcon={<IconAlertsLine />}
-                onClick={() => {
-                  console.log('Alerts')
-                }}
-              >
-                Alerts
-              </TopNavBar.Item>
-              <TopNavBar.Item
-                id="ForumAction2"
-                renderIcon={<IconDiscussionLine />}
-                onClick={() => {
-                  console.log('Forum')
-                }}
-              >
-                Forum
-              </TopNavBar.Item>
-              <TopNavBar.Item
-                id="InfoAction2"
-                renderIcon={<IconQuestionLine />}
-                onClick={() => {
-                  console.log('Info')
-                }}
-              >
-                Info
-              </TopNavBar.Item>
-            </TopNavBar.ActionItems>
-          )}
-          renderUser={(
-            <TopNavBar.User>
-              <TopNavBar.Item
-                id="LogInRegisterButton2"
-                href="/#TopNavBar"
-              >
-                Log In/Register
-              </TopNavBar.Item>
-            </TopNavBar.User>
-          )}
-        />
-      )}
-    </TopNavBar>
-  </View>
 </div>
 ```
 
@@ -1593,8 +1434,6 @@ type: example
 
 `<TopNavBar.User>` contains the login/register button and user menu.
 
-If the last action is shown as text and the user is shown as text, use the separator between the 2 blocks, otherwise it is optional (`desktopConfig.hideActionsUserSeparator` prop on the `<TopNavBar.Layout>`).
-
 ```js
 ---
 type: example
@@ -1605,9 +1444,6 @@ type: example
       {() => (
         <TopNavBar.Layout
           navLabel="Example navigation bar"
-          desktopConfig={{
-            hideActionsUserSeparator: false
-          }}
           smallViewportConfig={{
             dropdownMenuToggleButtonLabel: 'Toggle Menu',
             dropdownMenuLabel: 'Main Menu',
@@ -1632,9 +1468,6 @@ type: example
       {() => (
         <TopNavBar.Layout
           navLabel="Example navigation bar"
-          desktopConfig={{
-            hideActionsUserSeparator: false
-          }}
           smallViewportConfig={{
             dropdownMenuToggleButtonLabel: 'Toggle Menu',
             dropdownMenuLabel: 'Main Menu',
@@ -1660,9 +1493,6 @@ type: example
       {() => (
         <TopNavBar.Layout
           navLabel="Example navigation bar"
-          desktopConfig={{
-            hideActionsUserSeparator: false
-          }}
           smallViewportConfig={{
             dropdownMenuToggleButtonLabel: 'Toggle Menu',
             dropdownMenuLabel: 'Main Menu',
@@ -1701,9 +1531,6 @@ type: example
       {() => (
         <TopNavBar.Layout
           navLabel="Example navigation bar"
-          desktopConfig={{
-            hideActionsUserSeparator: false
-          }}
           smallViewportConfig={{
             dropdownMenuToggleButtonLabel: 'Toggle Menu',
             dropdownMenuLabel: 'Main Menu',
@@ -1743,9 +1570,6 @@ type: example
       {() => (
         <TopNavBar.Layout
           navLabel="Example navigation bar"
-          desktopConfig={{
-            hideActionsUserSeparator: false
-          }}
           smallViewportConfig={{
             dropdownMenuToggleButtonLabel: 'Toggle Menu',
             dropdownMenuLabel: 'Main Menu',
@@ -1844,9 +1668,6 @@ class LayoutExample extends React.Component {
                     navLabel={this.state.isSecondaryNavigation
                       ? 'Example secondary navigation bar'
                       : 'Example navigation bar'}
-                    desktopConfig={{
-                      hideActionsUserSeparator: true
-                    }}
                     smallViewportConfig={{
                       trayMountNode: () => document.getElementById('menuMountNode'),
                       dropdownMenuToggleButtonLabel: 'Toggle Menu',
@@ -1859,35 +1680,6 @@ class LayoutExample extends React.Component {
                     renderBrand={
                       <TopNavBar.Brand
                         screenReaderLabel="Brand name"
-                        renderName={(
-                          <View as="div" minWidth="7rem">
-                            <Text
-                              as="div"
-                              color={inverseColor
-                                ? "brand"
-                                : "primary-inverse"
-                              }
-                              transform="uppercase"
-                              size="small"
-                              weight="bold"
-                              lineHeight="condensed"
-                            >
-                              Brand
-                            </Text>
-                            <Text
-                              as="div"
-                              color={inverseColor
-                                ? "primary"
-                                : "primary-inverse"
-                              }
-                              size="large"
-                              weight="normal"
-                              lineHeight="condensed"
-                            >
-                              Sub-brand
-                            </Text>
-                          </View>
-                        )}
                         renderIcon={inverseColor ? undefined : (
                           <IconBoldLine
                             size="small"
@@ -2184,9 +1976,6 @@ type: example
       {() => (
         <TopNavBar.Layout
           navLabel="Example navigation bar"
-          desktopConfig={{
-            hideActionsUserSeparator: false
-          }}
           smallViewportConfig={{
             dropdownMenuToggleButtonLabel: 'Toggle Menu',
             dropdownMenuLabel: 'Main Menu',
@@ -2325,9 +2114,6 @@ class InPlaceDialogExample extends React.Component {
           {({ currentLayout }) => (
             <TopNavBar.Layout
               navLabel="Example navigation bar"
-              desktopConfig={{
-                hideActionsUserSeparator: false
-              }}
               smallViewportConfig={{
                 dropdownMenuToggleButtonLabel: 'Toggle Menu',
                 dropdownMenuLabel: 'Main Menu',
@@ -2445,41 +2231,9 @@ type: example
             navLabel={true
               ? 'Example secondary navigation bar'
               : 'Example navigation bar'}
-            desktopConfig={{
-              hideActionsUserSeparator: true
-            }}
             renderBrand={
               <TopNavBar.Brand
                 screenReaderLabel="Brand name"
-                renderName={(
-                  <View as="div" minWidth="7rem">
-                    <Text
-                      as="div"
-                      color={inverseColor
-                        ? "brand"
-                        : "primary-inverse"
-                      }
-                      transform="uppercase"
-                      size="small"
-                      weight="bold"
-                      lineHeight="condensed"
-                    >
-                      Brand
-                    </Text>
-                    <Text
-                      as="div"
-                      color={inverseColor
-                        ? "primary"
-                        : "primary-inverse"
-                      }
-                      size="large"
-                      weight="normal"
-                      lineHeight="condensed"
-                    >
-                      Sub-brand
-                    </Text>
-                  </View>
-                )}
                 renderIcon={inverseColor ? undefined : (
                   <IconBoldLine
                     size="small"

package/src/TopNavBar/TopNavBarBrand/TopNavBarBrandLocator.ts

@@ -32,9 +32,6 @@ export const TopNavBarBrandLocator = locator(TopNavBarBrand.selector, {
   findContainer: (...args: any[]) => {
     return find('[class$="-topNavBarBrand__container"]', ...args)
   },
-  findBrandNameContainer: (...args: any[]) => {
-    return find('[class$="-topNavBarBrand__nameContainer"]', ...args)
-  },
   findBrandIconContainer: (...args: any[]) => {
     return find('[class$="-topNavBarBrand__iconContainer"]', ...args)
   },

package/src/TopNavBar/TopNavBarBrand/index.tsx

@@ -25,11 +25,7 @@
 /** @jsx jsx */
 import React, { Component } from 'react'
 
-import {
-  deprecated,
-  getElementType,
-  omitProps
-} from '@instructure/ui-react-utils'
+import { getElementType, omitProps } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
 
 import { withStyle, jsx } from '@instructure/emotion'
@@ -54,11 +50,6 @@ id: TopNavBar.Brand
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
-@deprecated(
-  '9',
-  { renderName: true },
-  'Please use the updated TopNavBar design.'
-)
 class TopNavBarBrand extends Component<TopNavBarBrandProps> {
   static readonly componentId = 'TopNavBar.Brand'
   // TODO: add to the docs: making it static on parent and jsdocs parent/module settings, dont export child on its own
@@ -83,6 +74,20 @@ class TopNavBarBrand extends Component<TopNavBarBrandProps> {
   }
 
   componentDidMount() {
+    // TODO: Remove this in v10!
+    if ('renderName' in this.props) {
+      console.error(
+        'Warning: `renderName` prop on [TopNavBar.Brand] is deprecated, please remove it from your code. Further info: https://instructure.design/#v9-upgrade-guide/#deprecated-properties'
+      )
+    }
+
+    // TODO: Remove this in v10!
+    if ('nameBackground' in this.props) {
+      console.error(
+        'Warning: `nameBackground` prop on [TopNavBar.Brand] is deprecated, please remove it from your code. Further info: https://instructure.design/#v9-upgrade-guide/#deprecated-properties'
+      )
+    }
+
     this.props.makeStyles?.(this.makeStylesVariables)
   }
 
@@ -97,14 +102,13 @@ class TopNavBarBrand extends Component<TopNavBarBrandProps> {
   }
 
   render() {
-    const { screenReaderLabel, renderName, renderIcon, href, onClick, styles } =
-      this.props
+    const { screenReaderLabel, renderIcon, href, onClick, styles } = this.props
 
     const ElementType = getElementType(TopNavBarBrand, this.props)
 
     return (
       <div ref={this.handleRef} css={styles?.topNavBarBrand}>
-        {(renderIcon || renderName) && (
+        {renderIcon && (
           <View
             {...omitProps(this.props, allowedProps)}
             css={styles?.container}
@@ -127,15 +131,6 @@ class TopNavBarBrand extends Component<TopNavBarBrandProps> {
                 {renderIcon}
               </div>
             )}
-            {renderName && (
-              <div
-                css={styles?.nameContainer}
-                role="presentation"
-                aria-hidden="true"
-              >
-                {renderName}
-              </div>
-            )}
           </View>
         )}
       </div>

package/src/TopNavBar/TopNavBarBrand/props.ts

@@ -46,23 +46,12 @@ type TopNavBarBrandOwnProps = {
    */
   screenReaderLabel: string
 
-  /**
-   * The app/product/brand/company/etc. name.
-   */
-  renderName?: React.ReactNode
-
   /**
    * The app/product/brand/company/etc. logo or icon.
    * The icon is not displayed in "smallViewport" mode.
    */
   renderIcon?: React.ReactNode
 
-  /**
-   * Background color of the brand name.
-   * The background is not displayed in "smallViewport" mode.
-   */
-  nameBackground?: string
-
   /**
    * Background color of the icon, usually the brand color (when an icon is provided).
    * The background is not displayed in "smallViewport" mode.
@@ -99,12 +88,7 @@ type TopNavBarBrandProps = TopNavBarBrandOwnProps &
   OtherHTMLAttributes<TopNavBarBrandOwnProps>
 
 type TopNavBarBrandStyle = ComponentStyle<
-  | 'topNavBarBrand'
-  | 'container'
-  | 'nameContainer'
-  | 'name'
-  | 'iconContainer'
-  | 'icon'
+  'topNavBarBrand' | 'container' | 'name' | 'iconContainer' | 'icon'
 > &
   Pick<TopNavBarBrandTheme, 'focusOutlineInset'>
 
@@ -114,9 +98,7 @@ type TopNavBarBrandStyleProps = {
 
 const propTypes: PropValidators<PropKeys> = {
   screenReaderLabel: PropTypes.string.isRequired,
-  renderName: PropTypes.node,
   renderIcon: PropTypes.node,
-  nameBackground: PropTypes.string,
   iconBackground: PropTypes.string,
   href: PropTypes.string,
   onClick: PropTypes.func,
@@ -126,9 +108,7 @@ const propTypes: PropValidators<PropKeys> = {
 
 const allowedProps: AllowedPropKeys = [
   'screenReaderLabel',
-  'renderName',
   'renderIcon',
-  'nameBackground',
   'iconBackground',
   'href',
   'onClick',

package/src/TopNavBar/TopNavBarBrand/styles.ts

@@ -44,7 +44,7 @@ const generateStyle = (
   props: TopNavBarBrandProps,
   state: TopNavBarBrandStyleProps
 ): TopNavBarBrandStyle => {
-  const { nameBackground, iconBackground } = props
+  const { iconBackground } = props
   const isDesktop = state.layout === 'desktop'
 
   return {
@@ -65,15 +65,6 @@ const generateStyle = (
       appearance: 'none',
       textDecoration: 'none'
     },
-    nameContainer: {
-      label: 'topNavBarBrand__nameContainer',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      pointerEvents: 'none',
-      padding: componentTheme.logoPadding,
-      background: isDesktop ? nameBackground : undefined
-    },
     name: {
       label: 'topNavBarBrand__name',
       display: 'flex',