WIP(ui-top-nav-bar): add inversColor to docs example

instructure · Nov 2, 2023 · 06e3428 · 06e3428
1 parent ba90489
commit 06e3428
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 5 deletions.
diff --git a/packages/ui-top-nav-bar/src/TopNavBar/README.md b/packages/ui-top-nav-bar/src/TopNavBar/README.md
@@ -1104,7 +1104,7 @@ example: true
 ---
 <div>
   <View as="div" margin="medium 0">
-    <TopNavBar>
+    <TopNavBar inverseColor>
       {() => (
         <TopNavBar.Layout
           navLabel="Example navigation bar"

diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarBreadcrumb/index.tsx b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarBreadcrumb/index.tsx
@@ -50,6 +50,14 @@ class TopNavBarBreadcrumb extends Component<
 
   ref: HTMLDivElement | null = null
 
+  componentDidMount() {
+    this.props.makeStyles?.({ inverseColor: this.context.inverseColor })
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.({ inverseColor: this.context.inverseColor })
+  }
+
   renderMenu() {
     const { onClick } = this.props
     return (

diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarBreadcrumb/props.ts b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarBreadcrumb/props.ts
@@ -61,7 +61,7 @@ type TopNavBarBreadcrumbStyle = ComponentStyle<
 >
 
 type TopNavBarBreadcrumbStyleProps = {
-  layout: TopNavBarContextType['layout']
+  inverseColor: TopNavBarContextType['inverseColor']
 }
 
 export type {

diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarBreadcrumb/styles.ts b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarBreadcrumb/styles.ts
@@ -36,7 +36,7 @@ const generateStyle = (
   _props: TopNavBarBreadcrumbProps,
   _state: TopNavBarBreadcrumbStyleProps
 ): TopNavBarBreadcrumbStyle => {
-  // const isDesktop = state.layout === 'desktop'
+  //const { inverseColor } = state
 
   return {
     topNavBarBreadcrumb: {

diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/props.ts b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/props.ts
@@ -52,7 +52,7 @@ import { topNavBarItemTooltipPropType } from '../TopNavBarItem/props'
 import { TopNavBarLayout } from './index'
 import type { DesktopLayoutOwnProps } from './DesktopLayout/props'
 import type { SmallViewportLayoutOwnProps } from './SmallViewportLayout/props'
-import { Breadcrumb } from '@instructure/ui-breadcrumb'
+import { TopNavBarBreadcrumb } from '../TopNavBarBreadcrumb'
 
 type LayoutChild = React.ComponentElement<TopNavBarLayoutProps, TopNavBarLayout>
 
@@ -139,7 +139,7 @@ const commonPropTypes: PropValidators<CommonPropKeys> = {
   renderActionItems: ChildrenPropTypes.oneOf([TopNavBarActionItems]),
   renderUser: ChildrenPropTypes.oneOf([TopNavBarUser]),
   //TODO BreadCrumb wrapper
-  renderBreadcrumb: ChildrenPropTypes.oneOf([Breadcrumb]),
+  renderBreadcrumb: ChildrenPropTypes.oneOf([TopNavBarBreadcrumb]),
   navLabel: PropTypes.string,
   elementRef: PropTypes.func
 }