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

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.0.0](https://github.com/instructure/instructure-ui/compare/v8.56.0...v9.0.0) (2024-05-09)
+
+
+### Features
+
+* **instui-cli,ui-codemods,ui-top-nav-bar:** remove desktopConfig prop from TopNavBar.Layout ([d5efe5f](https://github.com/instructure/instructure-ui/commit/d5efe5f76b5af15db6ff9224a501121f35bf1ed9))
+* **ui-top-nav-bar:** remove renderName and nameBackground prop from TopNavBar.Brand ([8e48ab5](https://github.com/instructure/instructure-ui/commit/8e48ab5d0302d6205f372a6ddd833cae860aee5b))
+
+
+### BREAKING CHANGES
+
+* **ui-top-nav-bar:** renderName and nameBackground props have been removed
+* **instui-cli,ui-codemods,ui-top-nav-bar:** desktopConfig prop from TopNavBar.Layout has been removed
+
+
+
+
+
 # [8.56.0](https://github.com/instructure/instructure-ui/compare/v8.55.1...v8.56.0) (2024-05-06)
 
 

package/es/TopNavBar/TopNavBarBrand/TopNavBarBrandLocator.js

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

package/es/TopNavBar/TopNavBarBrand/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class, _class2;
+var _dec, _dec2, _class, _class2;
 /*
  * The MIT License (MIT)
  *
@@ -25,7 +25,7 @@ var _dec, _dec2, _dec3, _class, _class2;
 
 /** @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';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
@@ -41,9 +41,7 @@ id: TopNavBar.Brand
 ---
 @module TopNavBarBrand
 **/
-let TopNavBarBrand = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec3 = deprecated('9', {
-  renderName: true
-}, 'Please use the updated TopNavBar design.'), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TopNavBarBrand extends Component {
+let TopNavBarBrand = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TopNavBarBrand extends Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -57,6 +55,11 @@ let TopNavBarBrand = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
+    // TODO: Remove this in v10!
+    if ('renderName' in this.props) {}
+
+    // TODO: Remove this in v10!
+    if ('nameBackground' in this.props) {}
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
   }
   componentDidUpdate() {
@@ -71,7 +74,6 @@ let TopNavBarBrand = (_dec = withStyle(generateStyle, generateComponentTheme), _
   render() {
     const _this$props3 = this.props,
       screenReaderLabel = _this$props3.screenReaderLabel,
-      renderName = _this$props3.renderName,
       renderIcon = _this$props3.renderIcon,
       href = _this$props3.href,
       onClick = _this$props3.onClick,
@@ -80,7 +82,7 @@ let TopNavBarBrand = (_dec = withStyle(generateStyle, generateComponentTheme), _
     return jsx("div", {
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarBrand
-    }, (renderIcon || renderName) && jsx(View, Object.assign({}, omitProps(this.props, allowedProps), {
+    }, renderIcon && jsx(View, Object.assign({}, omitProps(this.props, allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.container,
       as: ElementType,
       href: href,
@@ -96,12 +98,8 @@ let TopNavBarBrand = (_dec = withStyle(generateStyle, generateComponentTheme), _
       css: styles === null || styles === void 0 ? void 0 : styles.iconContainer,
       role: "presentation",
       "aria-hidden": "true"
-    }, renderIcon), renderName && jsx("div", {
-      css: styles === null || styles === void 0 ? void 0 : styles.nameContainer,
-      role: "presentation",
-      "aria-hidden": "true"
-    }, renderName)));
+    }, renderIcon)));
   }
-}, _class2.displayName = "TopNavBarBrand", _class2.componentId = 'TopNavBar.Brand', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {}, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class) || _class);
+}, _class2.displayName = "TopNavBarBrand", _class2.componentId = 'TopNavBar.Brand', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {}, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class);
 export { TopNavBarBrand };
 export default TopNavBarBrand;

package/es/TopNavBar/TopNavBarBrand/props.js

@@ -25,14 +25,12 @@
 import PropTypes from 'prop-types';
 const propTypes = {
   screenReaderLabel: PropTypes.string.isRequired,
-  renderName: PropTypes.node,
   renderIcon: PropTypes.node,
-  nameBackground: PropTypes.string,
   iconBackground: PropTypes.string,
   href: PropTypes.string,
   onClick: PropTypes.func,
   as: PropTypes.elementType,
   elementRef: PropTypes.func
 };
-const allowedProps = ['screenReaderLabel', 'renderName', 'renderIcon', 'nameBackground', 'iconBackground', 'href', 'onClick', 'as', 'elementRef'];
+const allowedProps = ['screenReaderLabel', 'renderIcon', 'iconBackground', 'href', 'onClick', 'as', 'elementRef'];
 export { propTypes, allowedProps };

package/es/TopNavBar/TopNavBarBrand/styles.js

@@ -33,8 +33,7 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props, state) => {
-  const nameBackground = props.nameBackground,
-    iconBackground = props.iconBackground;
+  const iconBackground = props.iconBackground;
   const isDesktop = state.layout === 'desktop';
   return {
     topNavBarBrand: {
@@ -54,15 +53,6 @@ const generateStyle = (componentTheme, props, state) => {
       appearance: 'none',
       textDecoration: 'none'
     },
-    nameContainer: {
-      label: 'topNavBarBrand__nameContainer',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      pointerEvents: 'none',
-      padding: componentTheme.logoPadding,
-      background: isDesktop ? nameBackground : void 0
-    },
     name: {
       label: 'topNavBarBrand__name',
       display: 'flex',

package/es/TopNavBar/TopNavBarLayout/DesktopLayout/__new-tests__/TopNavBarDesktopLayout.test.js

@@ -25,7 +25,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { getActionItems, getBrand, getMenuItems, getUser, getBreadcrumb, SmallViewportModeWrapper } from '../../../utils/exampleHelpers';
+import { getActionItems, getBrand, getMenuItems, getUser, getBreadcrumb } from '../../../utils/exampleHelpers';
 import { TopNavBarDesktopLayout } from '../index';
 import TopNavBarContext from '../../../TopNavBarContext';
 import { runAxeCheck } from '@instructure/ui-axe-check';
@@ -93,7 +93,6 @@ describe('<TopNavBarDesktopLayout />', () => {
       expect(consoleMock.mock.calls[0][0]).toEqual('Warning: [TopNavBarBreadcrumb] If the inverseColor prop is not set to true, TopNavBarBreadcrumb fails to render.');
     });
     it('should not render breadcrumb if brand exists', () => {
-      const consoleMock = jest.spyOn(console, 'warn').mockImplementation();
       const _render3 = render( /*#__PURE__*/React.createElement(TopNavBarContext.Provider, {
           value: {
             layout: 'desktop',
@@ -113,7 +112,6 @@ describe('<TopNavBarDesktopLayout />', () => {
       expect(crumb1).not.toBeInTheDocument();
       expect(crumb2).not.toBeInTheDocument();
       expect(crumb3).not.toBeInTheDocument();
-      expect(consoleMock.mock.calls[0][0]).toEqual('Warning: [TopNavBarBrand] `renderName` is deprecated and will be removed in version 9. Please use the updated TopNavBar design.');
     });
     it('should not render breadcrumb if menuitems exist', () => {
       const _render4 = render( /*#__PURE__*/React.createElement(TopNavBarContext.Provider, {
@@ -158,11 +156,10 @@ describe('<TopNavBarDesktopLayout />', () => {
       expect(brandContainer).not.toBeInTheDocument();
       expect(desktopLayout).not.toHaveTextContent('Brand name');
     });
-    it('should not render brand container when "renderName" and "renderIcon" props are both missing', () => {
+    it('should not render brand container when "renderIcon" props is missing', () => {
       const _render7 = render( /*#__PURE__*/React.createElement(TopNavBarDesktopLayout, Object.assign({}, defaultBlocks, {
           renderBrand: getBrand({
             brandProps: {
-              renderName: void 0,
               renderIcon: void 0
             }
           })
@@ -313,135 +310,10 @@ describe('<TopNavBarDesktopLayout />', () => {
       expect(elementRef).toHaveBeenCalledWith(container.firstChild);
     });
   });
-  describe('hideActionsUserSeparator prop', () => {
-    describe('in default mode', () => {
-      it('should hide separator between actions and user', () => {
-        const _render20 = render( /*#__PURE__*/React.createElement(TopNavBarDesktopLayout, Object.assign({}, defaultBlocks, {
-            hideActionsUserSeparator: true
-          }))),
-          container = _render20.container;
-        const userContainer = container.querySelector("[class$='topNavBarDesktopLayout__userContainer']");
-
-        // TODO convert to e2e
-        // const actionsUserSeparator = await component.getActionsUserSeparatorBackground()
-        // expect(actionsUserSeparator).to.equal('rgba(0, 0, 0, 0)')
-        // const actionsUserSeparator = getComputedStyle(userContainer!, '::before')
-        // const actionsUserSeparatorBackground = actionsUserSeparator.getPropertyValue('background-color')
-
-        // expect(actionsUserSeparatorBackground).toBe('rgba(0, 0, 0, 0)')
-
-        expect(userContainer).toBeInTheDocument();
-      });
-      it('should show separator between actions and user, when false', () => {
-        const _render21 = render( /*#__PURE__*/React.createElement(TopNavBarDesktopLayout, Object.assign({}, defaultBlocks, {
-            hideActionsUserSeparator: false
-          }))),
-          container = _render21.container;
-        const userContainer = container.querySelector("[class$='topNavBarDesktopLayout__userContainer']");
-
-        // TODO convert to e2e
-        // const component = await TopNavBarDesktopLayoutLocator.find()
-        // const actionsUserSeparator = await component.getActionsUserSeparatorBackground()
-        // expect(actionsUserSeparator).to.equal('rgb(199, 205, 209)')
-
-        expect(userContainer).toBeInTheDocument();
-      });
-    });
-    describe('in inverse mode', () => {
-      it('should hide separator between actions and user', () => {
-        const _render22 = render( /*#__PURE__*/React.createElement(SmallViewportModeWrapper, {
-            layout: "desktop",
-            inverseColor: true
-          }, /*#__PURE__*/React.createElement(TopNavBarDesktopLayout, Object.assign({}, defaultBlocks, {
-            hideActionsUserSeparator: true
-          })))),
-          container = _render22.container;
-        const userContainer = container.querySelector("[class$='topNavBarDesktopLayout__userContainer']");
-
-        // TODO convert to e2e
-        // const component = await TopNavBarDesktopLayoutLocator.find()
-        // const actionsUserSeparator = await component.getActionsUserSeparatorBackground()
-        // expect(actionsUserSeparator).to.equal('rgba(0, 0, 0, 0)')
-
-        expect(userContainer).toBeInTheDocument();
-      });
-      it('should show separator between actions and user, when false', () => {
-        const _render23 = render( /*#__PURE__*/React.createElement(SmallViewportModeWrapper, {
-            layout: "desktop",
-            inverseColor: true
-          }, /*#__PURE__*/React.createElement(TopNavBarDesktopLayout, Object.assign({}, defaultBlocks, {
-            hideActionsUserSeparator: false
-          })))),
-          container = _render23.container;
-        const userContainer = container.querySelector("[class$='topNavBarDesktopLayout__userContainer']");
-
-        // TODO convert to e2e
-        // const component = await TopNavBarDesktopLayoutLocator.find()
-        // const actionsUserSeparator = await component.getActionsUserSeparatorBackground()
-        // expect(actionsUserSeparator).to.equal('rgb(199, 205, 209)')
-
-        expect(userContainer).toBeInTheDocument();
-      });
-    });
-    describe('should not display when:', () => {
-      it('renderActionItems is missing', () => {
-        const _render24 = render( /*#__PURE__*/React.createElement(TopNavBarDesktopLayout, Object.assign({}, defaultBlocks, {
-            hideActionsUserSeparator: void 0,
-            renderActionItems: void 0
-          }))),
-          container = _render24.container;
-        const userContainer = container.querySelector("[class$='topNavBarDesktopLayout__userContainer']");
-        const actionItemsContainer = container.querySelector("[class$='topNavBarDesktopLayout__actionItemsContainer']");
-
-        // TODO convert to e2e
-        // const component = await TopNavBarDesktopLayoutLocator.find()
-        // const actionsUserSeparator = await component.getActionsUserSeparatorBackground()
-        // expect(actionsUserSeparator).to.equal('rgba(0, 0, 0, 0)')
-
-        expect(actionItemsContainer).not.toBeInTheDocument();
-        expect(userContainer).toBeInTheDocument();
-      });
-      it('renderUser is missing', () => {
-        const _render25 = render( /*#__PURE__*/React.createElement(TopNavBarDesktopLayout, Object.assign({}, defaultBlocks, {
-            hideActionsUserSeparator: void 0,
-            renderUser: void 0
-          }))),
-          container = _render25.container;
-        const userContainer = container.querySelector("[class$='topNavBarDesktopLayout__userContainer']");
-        const actionItemsContainer = container.querySelector("[class$='topNavBarDesktopLayout__actionItemsContainer']");
-
-        // TODO convert to e2e
-        // const component = await TopNavBarDesktopLayoutLocator.find()
-        // const actionsUserSeparator = await component.getActionsUserSeparatorBackground()
-        // expect(actionsUserSeparator).to.equal('rgba(0, 0, 0, 0)')
-
-        expect(actionItemsContainer).toBeInTheDocument();
-        expect(userContainer).not.toBeInTheDocument();
-      });
-      it('renderActionItems and renderUser is missing', () => {
-        const _render26 = render( /*#__PURE__*/React.createElement(TopNavBarDesktopLayout, Object.assign({}, defaultBlocks, {
-            hideActionsUserSeparator: void 0,
-            renderActionItems: void 0,
-            renderUser: void 0
-          }))),
-          container = _render26.container;
-        const userContainer = container.querySelector("[class$='topNavBarDesktopLayout__userContainer']");
-        const actionItemsContainer = container.querySelector("[class$='topNavBarDesktopLayout__actionItemsContainer']");
-
-        // TODO convert to e2e
-        // const component = await TopNavBarDesktopLayoutLocator.find()
-        // const actionsUserSeparator =  await component.getActionsUserSeparatorBackground()
-        // expect(actionsUserSeparator).to.equal('rgba(0, 0, 0, 0)')
-
-        expect(actionItemsContainer).not.toBeInTheDocument();
-        expect(userContainer).not.toBeInTheDocument();
-      });
-    });
-  });
   describe('should be accessible', () => {
     it('a11y', async () => {
-      const _render27 = render( /*#__PURE__*/React.createElement(TopNavBarDesktopLayout, defaultBlocks)),
-        container = _render27.container;
+      const _render20 = render( /*#__PURE__*/React.createElement(TopNavBarDesktopLayout, defaultBlocks)),
+        container = _render20.container;
       const axeCheck = await runAxeCheck(container);
       expect(axeCheck).toBe(true);
     });

package/es/TopNavBar/TopNavBarLayout/DesktopLayout/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class, _class2;
+var _dec, _dec2, _class, _class2;
 /*
  * The MIT License (MIT)
  *
@@ -25,7 +25,7 @@ var _dec, _dec2, _dec3, _class, _class2;
 
 /** @jsx jsx */
 import React, { Component } from 'react';
-import { deprecated, omitProps } from '@instructure/ui-react-utils';
+import { omitProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { withStyle, jsx } from '@instructure/emotion';
 import { TopNavBarContext } from '../../TopNavBarContext';
@@ -37,9 +37,7 @@ import { propTypes, allowedProps } from './props';
 private: true
 ---
 **/
-let TopNavBarDesktopLayout = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec3 = deprecated('9', {
-  hideActionsUserSeparator: true
-}, 'From v9, actionUserSeparator has to be visible at all times. Please do not use designs which hide it. Note: this prop is probably used inside the desktopConfig prop on [TopNavBar.Layout]'), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TopNavBarDesktopLayout extends Component {
+let TopNavBarDesktopLayout = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TopNavBarDesktopLayout extends Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -69,7 +67,7 @@ let TopNavBarDesktopLayout = (_dec = withStyle(generateStyle, generateComponentT
   }
   get hasBrandBlock() {
     const renderBrand = this.props.renderBrand;
-    return !!renderBrand && (!!renderBrand.props.renderName || !!renderBrand.props.renderIcon);
+    return !!renderBrand && !!renderBrand.props.renderIcon;
   }
   get hasActionItemsBlock() {
     const renderActionItems = this.props.renderActionItems;
@@ -115,6 +113,6 @@ let TopNavBarDesktopLayout = (_dec = withStyle(generateStyle, generateComponentT
       css: styles === null || styles === void 0 ? void 0 : styles.userContainer
     }, renderUser));
   }
-}, _class2.displayName = "TopNavBarDesktopLayout", _class2.componentId = 'TopNavBar.DesktopLayout', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {}, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class) || _class);
+}, _class2.displayName = "TopNavBarDesktopLayout", _class2.componentId = 'TopNavBar.DesktopLayout', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {}, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class);
 export { TopNavBarDesktopLayout };
 export default TopNavBarDesktopLayout;

package/es/TopNavBar/TopNavBarLayout/DesktopLayout/styles.js

@@ -28,17 +28,16 @@
  * ---
  * 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} _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 hideActionsUserSeparator = props.hideActionsUserSeparator;
+const generateStyle = (componentTheme, _props, state) => {
   const inverseColor = state.inverseColor,
     hasBrandBlock = state.hasBrandBlock,
     hasActionItemsBlock = state.hasActionItemsBlock,
     hasUserBlock = state.hasUserBlock;
-  const hasUserSeparator = hasActionItemsBlock && hasUserBlock && !hideActionsUserSeparator;
+  const hasUserSeparator = hasActionItemsBlock && hasUserBlock;
   return {
     topNavBarDesktopLayout: {
       label: 'topNavBarDesktopLayout',

package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/__new-tests__/TopNavBarSmallViewportLayout.test.js

@@ -136,11 +136,10 @@ describe('<TopNavBarSmallViewportLayout />', () => {
       expect(brandContainer).not.toBeInTheDocument();
       expect(brandNameText).not.toBeInTheDocument();
     });
-    it('should not render brand container when "renderName" and "renderIcon" props are both missing', () => {
+    it('should not render brand container when "renderIcon" prop is missing', () => {
       const _render6 = render( /*#__PURE__*/React.createElement(SmallViewportModeWrapper, null, /*#__PURE__*/React.createElement(TopNavBarSmallViewportLayout, Object.assign({}, defaultProps, {
           renderBrand: getBrand({
             brandProps: {
-              renderName: void 0,
               renderIcon: void 0
             }
           })

package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.js

@@ -133,7 +133,7 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
     };
   }
   hasBrandBlock(renderBrand) {
-    return !!renderBrand && (!!renderBrand.props.renderName || !!renderBrand.props.renderIcon);
+    return !!renderBrand && !!renderBrand.props.renderIcon;
   }
   hasMenuItemsBlock(renderMenuItems) {
     return !!renderMenuItems && React.Children.count(renderMenuItems.props.children) > 0;

package/es/TopNavBar/TopNavBarLayout/__new-tests__/TopNavBarLayout.test.js

@@ -70,24 +70,6 @@ describe('<TopNavBarLayout />', () => {
       expect(desktopLayout).toBeVisible();
       expect(smallViewportLayout).toBeUndefined();
     });
-    it('should pass the "desktopConfig" props to DesktopLayout', () => {
-      render( /*#__PURE__*/React.createElement(SmallViewportModeWrapper, {
-        layout: "desktop"
-      }, /*#__PURE__*/React.createElement(TopNavBarLayout, Object.assign({}, getLayoutProps({
-        currentLayout: 'desktop',
-        inverseColor: false
-      }), {
-        desktopConfig: {
-          hideActionsUserSeparator: false
-        }
-      }))));
-      const navElement = screen.getByRole('navigation');
-      const userContainer = Array.from(navElement.children).find(child => child.className.includes('topNavBarDesktopLayout__userContainer'));
-      const userContainerStyle = userContainer ? window.getComputedStyle(userContainer) : null;
-
-      // userContainer get position relative and a pseudo ::before as a separator
-      expect(userContainerStyle === null || userContainerStyle === void 0 ? void 0 : userContainerStyle.position).toBe('relative');
-    });
     it('should pass the proper "themeOverride"-s to DesktopLayout', () => {
       render( /*#__PURE__*/React.createElement(SmallViewportModeWrapper, {
         layout: "desktop"

package/es/TopNavBar/TopNavBarLayout/index.js

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["desktopConfig", "smallViewportConfig", "styles", "makeStyles"];
+const _excluded = ["smallViewportConfig", "styles", "makeStyles"];
 var _dec, _dec2, _class, _class2;
 /*
  * The MIT License (MIT)
@@ -53,6 +53,10 @@ let TopNavBarLayout = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
       }
     };
   }
+  componentDidMount() {
+    // TODO: Remove this in v10!
+    if ('desktopConfig' in this.props) {}
+  }
   get sortedThemeOverride() {
     const themeOverride = this.props.themeOverride;
 
@@ -82,7 +86,6 @@ let TopNavBarLayout = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
   }
   render() {
     const _this$props = this.props,
-      desktopConfig = _this$props.desktopConfig,
       smallViewportConfig = _this$props.smallViewportConfig,
       styles = _this$props.styles,
       makeStyles = _this$props.makeStyles,
@@ -93,13 +96,12 @@ let TopNavBarLayout = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
         elementRef: this.handleRef
       }));
     }
-    return jsx(TopNavBarDesktopLayout, Object.assign({}, desktopConfig, restProps, {
+    return jsx(TopNavBarDesktopLayout, Object.assign({}, restProps, {
       themeOverride: this.sortedThemeOverride.desktopThemeOverride,
       elementRef: this.handleRef
     }));
   }
 }, _class2.displayName = "TopNavBarLayout", _class2.componentId = 'TopNavBar.Layout', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  desktopConfig: {},
   smallViewportConfig: {}
 }, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class);
 export { TopNavBarLayout };

package/es/TopNavBar/TopNavBarLayout/props.js

@@ -63,11 +63,10 @@ const smallViewportPropTypes = {
 };
 const propTypes = {
   ...commonPropTypes,
-  desktopConfig: PropTypes.shape(desktopPropTypes),
   smallViewportConfig: PropTypes.shape(smallViewportPropTypes).isRequired
 };
 const commonAllowedProps = ['renderBrand', 'renderMenuItems', 'renderActionItems', 'renderUser', 'renderBreadcrumb', 'navLabel', 'elementRef'];
 const desktopAllowedProps = ['hideActionsUserSeparator'];
 const smallViewportAllowedProps = ['dropdownMenuToggleButtonLabel', 'dropdownMenuToggleButtonTooltip', 'dropdownMenuLabel', 'alternativeTitle', 'renderInPlaceDialogConfig', 'trayMountNode', 'onDropdownMenuToggle', 'onDropdownMenuSelect'];
-const allowedProps = [...commonAllowedProps, 'desktopConfig', 'smallViewportConfig'];
+const allowedProps = [...commonAllowedProps, 'smallViewportConfig'];
 export { propTypes, allowedProps, commonPropTypes, commonAllowedProps, desktopPropTypes, smallViewportPropTypes, desktopAllowedProps, smallViewportAllowedProps };

package/es/TopNavBar/__new-tests__/TopNavBar.test.js

@@ -64,7 +64,6 @@ const BaseExample = () => {
   return /*#__PURE__*/React.createElement(TopNavBar, {
     breakpoint: 700
   }, () => /*#__PURE__*/React.createElement(TopNavBar.Layout, {
-    desktopConfig: {},
     smallViewportConfig: {
       dropdownMenuToggleButtonLabel: 'Toggle Menu',
       dropdownMenuLabel: 'Main Menu'

package/es/TopNavBar/utils/exampleHelpers.js

@@ -28,7 +28,7 @@ import { Drilldown } from '@instructure/ui-drilldown';
 import { IconQuestionLine, IconAlertsLine, IconConfigureLine, IconSearchLine, IconDiscussionLine, IconDashboardLine } from '@instructure/ui-icons';
 import { TopNavBarContext } from '../TopNavBarContext';
 import { TopNavBar } from '../index';
-import { elevateIcon, elevateLogo, elevateLogoInverse } from './exampleSvgFiles';
+import { elevateIcon } from './exampleSvgFiles';
 import { Breadcrumb } from '@instructure/ui-breadcrumb';
 const avatarExample = {
   avatarName: 'User Name',
@@ -85,14 +85,10 @@ SmallViewportModeWrapper.defaultProps = {
   inverseColor: false
 };
 const getBrand = (config = {}) => {
-  const logo = config.inverseColor ? elevateLogoInverse : elevateLogo;
-  const nameBackground = !config.hasBrandNameBackground ? void 0 : config.inverseColor ? '#F5F5F5' : '#2D3B45';
   return /*#__PURE__*/React.createElement(TopNavBar.Brand, Object.assign({
     screenReaderLabel: "Brand name",
-    renderName: logo,
     renderIcon: elevateIcon,
     iconBackground: "#0097D3",
-    nameBackground: nameBackground,
     href: "/#TopNavBar"
   }, config.brandProps));
 };
@@ -169,9 +165,6 @@ const getBreadcrumb = (_config = {}) => {
 };
 const getLayoutProps = (props, config = {}) => {
   return {
-    desktopConfig: {
-      hideActionsUserSeparator: config.hideActionsUserSeparator
-    },
     smallViewportConfig: {
       dropdownMenuToggleButtonLabel: 'Toggle Menu',
       dropdownMenuLabel: 'Main Menu',

package/lib/TopNavBar/TopNavBarBrand/TopNavBarBrandLocator.js

@@ -36,9 +36,6 @@ const TopNavBarBrandLocator = exports.TopNavBarBrandLocator = (0, _locator.locat
   findContainer: (...args) => {
     return (0, _uiTestUtils.find)('[class$="-topNavBarBrand__container"]', ...args);
   },
-  findBrandNameContainer: (...args) => {
-    return (0, _uiTestUtils.find)('[class$="-topNavBarBrand__nameContainer"]', ...args);
-  },
   findBrandIconContainer: (...args) => {
     return (0, _uiTestUtils.find)('[class$="-topNavBarBrand__iconContainer"]', ...args);
   },

package/lib/TopNavBar/TopNavBarBrand/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.TopNavBarBrand = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _deprecated = require("@instructure/ui-react-utils/lib/deprecated.js");
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
@@ -18,7 +17,7 @@ var _TopNavBarContext = require("../TopNavBarContext");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
-var _dec, _dec2, _dec3, _class, _class2;
+var _dec, _dec2, _class, _class2;
 /*
  * The MIT License (MIT)
  *
@@ -50,9 +49,7 @@ id: TopNavBar.Brand
 ---
 @module TopNavBarBrand
 **/
-let TopNavBarBrand = exports.TopNavBarBrand = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec3 = (0, _deprecated.deprecated)('9', {
-  renderName: true
-}, 'Please use the updated TopNavBar design.'), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TopNavBarBrand extends _react.Component {
+let TopNavBarBrand = exports.TopNavBarBrand = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class TopNavBarBrand extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -66,6 +63,11 @@ let TopNavBarBrand = exports.TopNavBarBrand = (_dec = (0, _emotion.withStyle)(_s
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
+    // TODO: Remove this in v10!
+    if ('renderName' in this.props) {}
+
+    // TODO: Remove this in v10!
+    if ('nameBackground' in this.props) {}
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
   }
   componentDidUpdate() {
@@ -80,7 +82,6 @@ let TopNavBarBrand = exports.TopNavBarBrand = (_dec = (0, _emotion.withStyle)(_s
   render() {
     const _this$props3 = this.props,
       screenReaderLabel = _this$props3.screenReaderLabel,
-      renderName = _this$props3.renderName,
       renderIcon = _this$props3.renderIcon,
       href = _this$props3.href,
       onClick = _this$props3.onClick,
@@ -89,7 +90,7 @@ let TopNavBarBrand = exports.TopNavBarBrand = (_dec = (0, _emotion.withStyle)(_s
     return (0, _emotion.jsx)("div", {
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.topNavBarBrand
-    }, (renderIcon || renderName) && (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _omitProps.omitProps)(this.props, _props.allowedProps), {
+    }, renderIcon && (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _omitProps.omitProps)(this.props, _props.allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.container,
       as: ElementType,
       href: href,
@@ -105,11 +106,7 @@ let TopNavBarBrand = exports.TopNavBarBrand = (_dec = (0, _emotion.withStyle)(_s
       css: styles === null || styles === void 0 ? void 0 : styles.iconContainer,
       role: "presentation",
       "aria-hidden": "true"
-    }, renderIcon), renderName && (0, _emotion.jsx)("div", {
-      css: styles === null || styles === void 0 ? void 0 : styles.nameContainer,
-      role: "presentation",
-      "aria-hidden": "true"
-    }, renderName)));
+    }, renderIcon)));
   }
-}, _class2.displayName = "TopNavBarBrand", _class2.componentId = 'TopNavBar.Brand', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {}, _class2.contextType = _TopNavBarContext.TopNavBarContext, _class2)) || _class) || _class) || _class);
+}, _class2.displayName = "TopNavBarBrand", _class2.componentId = 'TopNavBar.Brand', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {}, _class2.contextType = _TopNavBarContext.TopNavBarContext, _class2)) || _class) || _class);
 var _default = exports.default = TopNavBarBrand;

package/lib/TopNavBar/TopNavBarBrand/props.js

@@ -32,13 +32,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 const propTypes = exports.propTypes = {
   screenReaderLabel: _propTypes.default.string.isRequired,
-  renderName: _propTypes.default.node,
   renderIcon: _propTypes.default.node,
-  nameBackground: _propTypes.default.string,
   iconBackground: _propTypes.default.string,
   href: _propTypes.default.string,
   onClick: _propTypes.default.func,
   as: _propTypes.default.elementType,
   elementRef: _propTypes.default.func
 };
-const allowedProps = exports.allowedProps = ['screenReaderLabel', 'renderName', 'renderIcon', 'nameBackground', 'iconBackground', 'href', 'onClick', 'as', 'elementRef'];
+const allowedProps = exports.allowedProps = ['screenReaderLabel', 'renderIcon', 'iconBackground', 'href', 'onClick', 'as', 'elementRef'];