chore(ui-top-nav-bar): add DeepPartial theme

Author: joyenjoyer

packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx

@@ -37,6 +37,12 @@ import { TopNavBarItem } from '../TopNavBar/TopNavBarItem'
 import { CanvasTopNavProps } from './props'
 import generateComponentTheme from './theme'
 import TopNavBarContext from '../TopNavBar/TopNavBarContext'
+import {
+  DeepPartial,
+  DrilldownTheme,
+  OptionsItemTheme,
+  TopNavBarItemTheme
+} from '@instructure/shared-types'
 
 /**
 ---
@@ -88,6 +94,7 @@ const CanvasTopNav = ({
         <Drilldown.Page
           key={item.id}
           id={item.id} //TODO renderbackbuttonlabel
+          renderBackButtonLabel={item?.backButtonLabel}
           renderBeforeChildren={item.renderBeforeMobileMenuItems}
           renderAfterChildren={item.renderAfterMobileMenuItems}
         >
@@ -142,10 +149,10 @@ const CanvasTopNav = ({
           theme={{
             componentOverrides: {
               'Options.Item': {
-                ...styles.optionsOverride
+                ...(styles.optionsOverride as DeepPartial<OptionsItemTheme>)
               },
               Drilldown: {
-                ...styles.drilldownOverride
+                ...(styles.drilldownOverride as DeepPartial<DrilldownTheme>)
               }
             }
           }}
@@ -188,67 +195,75 @@ const CanvasTopNav = ({
             </div>
           )}
           {lti && (
-            <InstUISettingsProvider
-              theme={{
-                componentOverrides: {
-                  'TopNavBar.Item': {
-                    ...styles.topNavBarItemOverride
+            <div css={styles.menuItems}>
+              <InstUISettingsProvider
+                theme={{
+                  componentOverrides: {
+                    'TopNavBar.Item': {
+                      ...(styles.topNavBarItemOverride as DeepPartial<TopNavBarItemTheme>)
+                    }
                   }
-                }
-              }}
-            >
-              <TopNavBarContext.Provider
-                value={{
-                  layout: 'desktop',
-                  inverseColor: true
                 }}
               >
-                <TopNavBarMenuItems
-                  renderHiddenItemsMenuTriggerLabel={() => ''}
-                  currentPageId={currentPageId}
+                <TopNavBarContext.Provider
+                  value={{
+                    layout: 'desktop',
+                    inverseColor: true
+                  }}
                 >
-                  {menuItems?.map((item: any) => (
-                    <TopNavBarItem key={item.id} id={item.id}>
-                      {item.title}
-                    </TopNavBarItem>
-                  ))}
-                  <TopNavBarItem
-                    id="submenu"
-                    renderSubmenu={
-                      <Drilldown rootPageId="root">
-                        <Drilldown.Page id="root">
-                          <Drilldown.Option
-                            id="rootOption1"
-                            subPageId="secondPage"
-                          >
-                            Link One
-                          </Drilldown.Option>
-                          <Drilldown.Option id="rootOption2" href="/#TopNavBar">
-                            Link Two
-                          </Drilldown.Option>
-                          <Drilldown.Option id="rootOption3" href="/#TopNavBar">
-                            Link Three
-                          </Drilldown.Option>
-                        </Drilldown.Page>
-                        <Drilldown.Page id="secondPage">
-                          <Drilldown.Option id="secondPageOption1">
-                            Level 2 Option One
-                          </Drilldown.Option>
-                          <Drilldown.Option
-                            id="secondPageOption2"
-                            href="/#TopNavBar"
-                          >
-                            Level 2 Option Two
-                          </Drilldown.Option>
-                        </Drilldown.Page>
-                      </Drilldown>
-                    }
+                  <TopNavBarMenuItems
+                    renderHiddenItemsMenuTriggerLabel={() => ''}
+                    currentPageId={currentPageId}
                   >
-                    Submenu
-                  </TopNavBarItem>
-                </TopNavBarMenuItems>
-              </TopNavBarContext.Provider>
-            </InstUISettingsProvider>
+                    {menuItems?.map((item: any) => (
+                      <TopNavBarItem key={item.id} id={item.id}>
+                        {item.title}
+                      </TopNavBarItem>
+                    ))}
+                    <TopNavBarItem
+                      id="submenu"
+                      renderSubmenu={
+                        <Drilldown rootPageId="root">
+                          <Drilldown.Page id="root">
+                            <Drilldown.Option
+                              id="rootOption1"
+                              subPageId="secondPage"
+                            >
+                              Link One
+                            </Drilldown.Option>
+                            <Drilldown.Option
+                              id="rootOption2"
+                              href="/#TopNavBar"
+                            >
+                              Link Two
+                            </Drilldown.Option>
+                            <Drilldown.Option
+                              id="rootOption3"
+                              href="/#TopNavBar"
+                            >
+                              Link Three
+                            </Drilldown.Option>
+                          </Drilldown.Page>
+                          <Drilldown.Page id="secondPage">
+                            <Drilldown.Option id="secondPageOption1">
+                              Level 2 Option One
+                            </Drilldown.Option>
+                            <Drilldown.Option
+                              id="secondPageOption2"
+                              href="/#TopNavBar"
+                            >
+                              Level 2 Option Two
+                            </Drilldown.Option>
+                          </Drilldown.Page>
+                        </Drilldown>
+                      }
+                    >
+                      Submenu
+                    </TopNavBarItem>
+                  </TopNavBarMenuItems>
+                </TopNavBarContext.Provider>
+              </InstUISettingsProvider>
+            </div>
           )}
         </DesktopTopNav.Start>
         <DesktopTopNav.End>

packages/ui-top-nav-bar/src/CanvasTopNav/props.ts

@@ -23,6 +23,7 @@
  */
 
 import type { PropsWithChildren, ReactNode } from 'react'
+import { ComponentStyle } from '@instructure/emotion'
 
 type CanvasTopNavOwnProps = {
   lti?: boolean
@@ -42,6 +43,15 @@ type CanvasTopNavOwnProps = {
   currentPageId?: string
 }
 
+type CanvasTopNavStyle = ComponentStyle<
+  | 'optionsOverride'
+  | 'drilldownOverride'
+  | 'optionContainer'
+  | 'topNavBarItemOverride'
+  | 'ltiIcon'
+  | 'menuItems'
+>
+
 type CanvasTopNavProps = CanvasTopNavOwnProps & PropsWithChildren
 
-export type { CanvasTopNavProps, CanvasTopNavOwnProps }
+export type { CanvasTopNavProps, CanvasTopNavOwnProps, CanvasTopNavStyle }

packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx

@@ -21,13 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import type { CanvasTopNavProps } from './props'
+import type { CanvasTopNavProps, CanvasTopNavStyle } from './props'
 import { CanvasTopNavTheme } from '@instructure/shared-types'
 
 const generateStyle = (
   componentTheme: CanvasTopNavTheme,
   params: CanvasTopNavProps
-) => {
+): CanvasTopNavStyle => {
   const { lti } = params
 
   return {
@@ -63,6 +63,11 @@ const generateStyle = (
     ltiIcon: {
       label: 'canvasTopNavLtiIcon',
       fontSize: '38px'
+    },
+    menuItems: {
+      label: 'canvasTopNavMenuitems',
+      display: 'flex',
+      height: '50px'
     }
   }
 }