feat(ui-top-nav-bar,shared-types): style fix

Author: joyenjoyer

packages/__docs__/src/App/index.tsx

@@ -388,7 +388,7 @@ class App extends Component<AppProps, AppState> {
                   ]
                 }
               ]}
-              currentPageId="library" // ltiCurrentPageID
+              currentPageId="share" // ltiCurrentPageID
             />
             <Tray
               label="Courses"

packages/shared-types/src/ComponentThemeVariables.ts

@@ -1771,6 +1771,7 @@ export type CanvasTopNavTheme = {
   drilldownBorderColor: string
   topNavBarItemColor: string
   topNavBarItemActiveIndicatorColor: string
+  optionSeparatorColor: string
 }
 
 export interface ThemeVariables {

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

@@ -40,6 +40,7 @@ import {
   DeepPartial,
   DrilldownTheme,
   OptionsItemTheme,
+  OptionsSeparatorTheme,
   TopNavBarItemTheme
 } from '@instructure/shared-types'
 
@@ -152,6 +153,9 @@ const CanvasTopNav = ({
               },
               Drilldown: {
                 ...(styles.drilldownOverride as DeepPartial<DrilldownTheme>)
+              },
+              'Options.Separator': {
+                ...(styles.optionSeparatorOverride as DeepPartial<OptionsSeparatorTheme>)
               }
             }
           }}

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

@@ -50,6 +50,7 @@ type CanvasTopNavStyle = ComponentStyle<
   | 'topNavBarItemOverride'
   | 'ltiIcon'
   | 'menuItems'
+  | 'optionSeparatorOverride'
 >
 
 type CanvasTopNavProps = CanvasTopNavOwnProps & PropsWithChildren

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

@@ -56,6 +56,10 @@ const generateStyle = (
       gap: '8px',
       alignItems: 'center'
     },
+    optionSeparatorOverride: {
+      background: componentTheme.optionSeparatorColor,
+      margin: '0'
+    },
     topNavBarItemOverride: {
       color: componentTheme.topNavBarItemColor,
       activeIndicatorColor: componentTheme.topNavBarItemActiveIndicatorColor

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

@@ -35,8 +35,9 @@ const generateComponentTheme = (theme: Theme): CanvasTopNavTheme => {
     optionColor: theme?.colors?.contrasts?.white1010,
     optionHighlightedLabelColorLti: theme?.colors?.contrasts?.grey125125,
     optionHighlightedLabelColor: theme?.colors?.contrasts?.white1010,
-    drilldownBorderColorLti: theme?.colors?.contrasts?.grey1424,
+    drilldownBorderColorLti: theme?.colors?.contrasts?.grey1111,
     drilldownBorderColor: theme?.colors?.contrasts?.grey100100,
+    optionSeparatorColor: theme?.colors?.contrasts?.grey1424,
     topNavBarItemColor: theme?.colors?.contrasts?.grey125125,
     topNavBarItemActiveIndicatorColor: theme?.colors?.contrasts?.grey125125
   }