@instructure/ui-top-nav-bar 8.48.4-snapshot-2 → 8.48.4-snapshot-4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +29 -29
  3. package/src/TopNavBar/README.md +188 -0
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [8.48.4-snapshot-2](https://github.com/instructure/instructure-ui/compare/v8.48.3...v8.48.4-snapshot-2) (2023-11-24)
6
+ ## [8.48.4-snapshot-4](https://github.com/instructure/instructure-ui/compare/v8.48.3...v8.48.4-snapshot-4) (2023-11-24)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-top-nav-bar
9
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-top-nav-bar",
3
- "version": "8.48.4-snapshot-2",
3
+ "version": "8.48.4-snapshot-4",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,37 +24,37 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.23.2",
27
- "@instructure/console": "8.48.4-snapshot-2",
28
- "@instructure/emotion": "8.48.4-snapshot-2",
29
- "@instructure/shared-types": "8.48.4-snapshot-2",
30
- "@instructure/ui-a11y-content": "8.48.4-snapshot-2",
31
- "@instructure/ui-avatar": "8.48.4-snapshot-2",
32
- "@instructure/ui-breadcrumb": "8.48.4-snapshot-2",
33
- "@instructure/ui-buttons": "8.48.4-snapshot-2",
34
- "@instructure/ui-dialog": "8.48.4-snapshot-2",
35
- "@instructure/ui-dom-utils": "8.48.4-snapshot-2",
36
- "@instructure/ui-drilldown": "8.48.4-snapshot-2",
37
- "@instructure/ui-icons": "8.48.4-snapshot-2",
38
- "@instructure/ui-link": "8.48.4-snapshot-2",
39
- "@instructure/ui-popover": "8.48.4-snapshot-2",
40
- "@instructure/ui-prop-types": "8.48.4-snapshot-2",
41
- "@instructure/ui-react-utils": "8.48.4-snapshot-2",
42
- "@instructure/ui-responsive": "8.48.4-snapshot-2",
43
- "@instructure/ui-testable": "8.48.4-snapshot-2",
44
- "@instructure/ui-tooltip": "8.48.4-snapshot-2",
45
- "@instructure/ui-tray": "8.48.4-snapshot-2",
46
- "@instructure/ui-truncate-list": "8.48.4-snapshot-2",
47
- "@instructure/ui-utils": "8.48.4-snapshot-2",
48
- "@instructure/ui-view": "8.48.4-snapshot-2",
27
+ "@instructure/console": "8.48.4-snapshot-4",
28
+ "@instructure/emotion": "8.48.4-snapshot-4",
29
+ "@instructure/shared-types": "8.48.4-snapshot-4",
30
+ "@instructure/ui-a11y-content": "8.48.4-snapshot-4",
31
+ "@instructure/ui-avatar": "8.48.4-snapshot-4",
32
+ "@instructure/ui-breadcrumb": "8.48.4-snapshot-4",
33
+ "@instructure/ui-buttons": "8.48.4-snapshot-4",
34
+ "@instructure/ui-dialog": "8.48.4-snapshot-4",
35
+ "@instructure/ui-dom-utils": "8.48.4-snapshot-4",
36
+ "@instructure/ui-drilldown": "8.48.4-snapshot-4",
37
+ "@instructure/ui-icons": "8.48.4-snapshot-4",
38
+ "@instructure/ui-link": "8.48.4-snapshot-4",
39
+ "@instructure/ui-popover": "8.48.4-snapshot-4",
40
+ "@instructure/ui-prop-types": "8.48.4-snapshot-4",
41
+ "@instructure/ui-react-utils": "8.48.4-snapshot-4",
42
+ "@instructure/ui-responsive": "8.48.4-snapshot-4",
43
+ "@instructure/ui-testable": "8.48.4-snapshot-4",
44
+ "@instructure/ui-tooltip": "8.48.4-snapshot-4",
45
+ "@instructure/ui-tray": "8.48.4-snapshot-4",
46
+ "@instructure/ui-truncate-list": "8.48.4-snapshot-4",
47
+ "@instructure/ui-utils": "8.48.4-snapshot-4",
48
+ "@instructure/ui-view": "8.48.4-snapshot-4",
49
49
  "prop-types": "^15.8.1"
50
50
  },
51
51
  "devDependencies": {
52
- "@instructure/ui-axe-check": "8.48.4-snapshot-2",
53
- "@instructure/ui-babel-preset": "8.48.4-snapshot-2",
54
- "@instructure/ui-color-utils": "8.48.4-snapshot-2",
55
- "@instructure/ui-test-locator": "8.48.4-snapshot-2",
56
- "@instructure/ui-test-utils": "8.48.4-snapshot-2",
57
- "@instructure/ui-themes": "8.48.4-snapshot-2",
52
+ "@instructure/ui-axe-check": "8.48.4-snapshot-4",
53
+ "@instructure/ui-babel-preset": "8.48.4-snapshot-4",
54
+ "@instructure/ui-color-utils": "8.48.4-snapshot-4",
55
+ "@instructure/ui-test-locator": "8.48.4-snapshot-4",
56
+ "@instructure/ui-test-utils": "8.48.4-snapshot-4",
57
+ "@instructure/ui-themes": "8.48.4-snapshot-4",
58
58
  "@testing-library/jest-dom": "^6.1.4",
59
59
  "@testing-library/react": "^14.1.0"
60
60
  },
package/src/TopNavBar/README.md CHANGED
@@ -2408,3 +2408,191 @@ class InPlaceDialogExample extends React.Component {
2408
2408
  render(<InPlaceDialogExample />)
2409
2409
 
2410
2410
  ```
2411
+
2412
+ #### Color override example for more complex customization
2413
+
2414
+ There's no one-size-fits-all solution when it comes to coloring the items in `TopNavBar.Item`, or anywhere else. You have to override the instUI component that is rendered in place. In the following example we override `Text` and `BaseButton`.
2415
+
2416
+ ```js
2417
+ ---
2418
+ example: true
2419
+ render: true
2420
+ ---
2421
+ <InstUISettingsProvider theme={{
2422
+ componentOverrides: {
2423
+ "TopNavBar.Item": {
2424
+ activeIndicatorColorInverse: "red"
2425
+ },
2426
+ BaseButton: {
2427
+ secondaryGhostColor: "green",
2428
+ primaryColor: "yellow",
2429
+ primaryBackground:"brown"
2430
+ },
2431
+ Text:{
2432
+ primaryColor: "blue",
2433
+ brandColor:"purple"
2434
+ },
2435
+ }
2436
+ }}>
2437
+ <View as="div" margin="medium 0 0" width={1000}>
2438
+ <TopNavBar
2439
+ breakpoint='650'
2440
+ mediaQueryMatch='element'
2441
+ inverseColor={true}
2442
+ key={1000}
2443
+ >
2444
+ {({ currentLayout, inverseColor }) => {
2445
+ return (
2446
+ <TopNavBar.Layout
2447
+ navLabel={true
2448
+ ? 'Example secondary navigation bar'
2449
+ : 'Example navigation bar'}
2450
+ desktopConfig={{
2451
+ hideActionsUserSeparator: true
2452
+ }}
2453
+ renderBrand={
2454
+ <TopNavBar.Brand
2455
+ screenReaderLabel="Brand name"
2456
+ renderName={(
2457
+ <View as="div" minWidth="7rem">
2458
+ <Text
2459
+ as="div"
2460
+ color={inverseColor
2461
+ ? "brand"
2462
+ : "primary-inverse"
2463
+ }
2464
+ transform="uppercase"
2465
+ size="small"
2466
+ weight="bold"
2467
+ lineHeight="condensed"
2468
+ >
2469
+ Brand
2470
+ </Text>
2471
+ <Text
2472
+ as="div"
2473
+ color={inverseColor
2474
+ ? "primary"
2475
+ : "primary-inverse"
2476
+ }
2477
+ size="large"
2478
+ weight="normal"
2479
+ lineHeight="condensed"
2480
+ >
2481
+ Sub-brand
2482
+ </Text>
2483
+ </View>
2484
+ )}
2485
+ renderIcon={inverseColor ? undefined : (
2486
+ <IconBoldLine
2487
+ size="small"
2488
+ color="primary-inverse"
2489
+ height="2.5rem"
2490
+ width="2.5rem"
2491
+ />
2492
+ )}
2493
+ iconBackground="#0097D3"
2494
+ href="/#TopNavBar"
2495
+ />
2496
+ }
2497
+ renderMenuItems={
2498
+ <TopNavBar.MenuItems
2499
+ listLabel="Page navigation"
2500
+ currentPageId="OverviewPage"
2501
+ renderHiddenItemsMenuTriggerLabel={(
2502
+ hiddenChildrenCount
2503
+ ) => `${hiddenChildrenCount} More`}
2504
+ >
2505
+ <TopNavBar.Item
2506
+ id="OverviewPage"
2507
+ href="/#TopNavBar"
2508
+ >
2509
+ Overview
2510
+ </TopNavBar.Item>
2511
+ <TopNavBar.Item
2512
+ id="AdminPage"
2513
+ href="/#TopNavBar"
2514
+ >
2515
+ Admin
2516
+ </TopNavBar.Item>
2517
+ <TopNavBar.Item
2518
+ id="SettingsPage"
2519
+ href="/#TopNavBar"
2520
+ >
2521
+ Settings
2522
+ </TopNavBar.Item>
2523
+ <TopNavBar.Item
2524
+ id="MapsPage"
2525
+ href="/#TopNavBar"
2526
+ >
2527
+ Maps
2528
+ </TopNavBar.Item>
2529
+ <TopNavBar.Item
2530
+ id="AssessmentsPage"
2531
+ href="/#TopNavBar"
2532
+ >
2533
+ Assessments
2534
+ </TopNavBar.Item>
2535
+ <TopNavBar.Item
2536
+ id="CommunityPage"
2537
+ href="/#TopNavBar"
2538
+ >
2539
+ Community
2540
+ </TopNavBar.Item>
2541
+ </TopNavBar.MenuItems>
2542
+ }
2543
+ renderActionItems={
2544
+ <TopNavBar.ActionItems
2545
+ listLabel="Actions"
2546
+ renderHiddenItemsMenuTriggerLabel={(
2547
+ hiddenChildrenCount
2548
+ ) => `${hiddenChildrenCount} more actions`}
2549
+ >
2550
+ <TopNavBar.Item
2551
+ id="InfoAction3"
2552
+ variant="icon"
2553
+ tooltip="Info"
2554
+ renderIcon={<IconQuestionLine />}
2555
+ onClick={() => {
2556
+ console.log('Info')
2557
+ }}
2558
+ >
2559
+ Info
2560
+ </TopNavBar.Item>
2561
+ <TopNavBar.Item
2562
+ id="AlertsAction3"
2563
+ variant="icon"
2564
+ tooltip="Alerts"
2565
+ renderIcon={<IconAlertsLine />}
2566
+ onClick={() => {
2567
+ console.log('Alerts')
2568
+ }}
2569
+ >
2570
+ Alerts
2571
+ </TopNavBar.Item>
2572
+ </TopNavBar.ActionItems>
2573
+ }
2574
+ renderUser={
2575
+ <TopNavBar.User>
2576
+ <TopNavBar.Item
2577
+ id="LogInRegisterButton5"
2578
+ href="/#TopNavBar"
2579
+ variant="button"
2580
+ >
2581
+ Log In/Register
2582
+ </TopNavBar.Item>
2583
+ </TopNavBar.User>
2584
+ }
2585
+ themeOverride={{
2586
+ // For example demo
2587
+ smallViewportZIndex: 9999,
2588
+ smallViewportTrayFixTopPosition: true
2589
+ ? `57px`
2590
+ : '56px'
2591
+ }}
2592
+ />
2593
+ )
2594
+ }}
2595
+ </TopNavBar>
2596
+ </View>
2597
+ </InstUISettingsProvider>
2598
+ ```