Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(feat) Even more left nav UI tweaks #647

Merged
merged 1 commit into from
Mar 16, 2023
Merged

Conversation

denniskigen
Copy link
Member

@denniskigen denniskigen commented Mar 15, 2023

Requirements

  • This PR has a title that briefly describes the work done, including the ticket number if there is a ticket.

For changes to apps

If applicable

  • My work includes tests or is validated by existing tests.
  • I have updated the esm-framework mock to reflect any API changes I have made.

Summary

Annoying that we're here again, but I cannot for the life of me figure out why local changes to the styleguide don't get propagated to my dev server after rebuilding the styleguide when running yarn run:shell. Regardless, here we are. The basic premise here is that these changes:

  • Ensure that the right border of the left nav menu begins at the very top of the nav. This is achieved by using padding at the top of the menu instead of some margin.
  • We're setting the background color of nav menu items to a light gray (#f4f4f4) on focus and hover.
  • We're ensuring that the active menu item has a text color of #161616, whereas inactive items have a text color of #525252.
  • We're using a more specific selector combination to ensure that menu items are 3rem tall on a tablet, and 2rem tall on a desktop.

Other

This is the desired outcome.

@github-actions
Copy link
Contributor

Size Change: -64 B (0%)

Total Size: 2.19 MB

ℹ️ View Unchanged
Filename Size Change
packages/apps/esm-devtools-app/dist/68.js 4.23 kB 0 B
packages/apps/esm-devtools-app/dist/735.js 2.63 kB 0 B
packages/apps/esm-devtools-app/dist/889.js 109 kB 0 B
packages/apps/esm-devtools-app/dist/988.js 366 B 0 B
packages/apps/esm-devtools-app/dist/main.js 2.87 kB 0 B
packages/apps/esm-devtools-app/dist/openmrs-esm-devtools-app.js 3.04 kB 0 B
packages/apps/esm-implementer-tools-app/dist/102.js 2.76 kB 0 B
packages/apps/esm-implementer-tools-app/dist/139.js 11.7 kB 0 B
packages/apps/esm-implementer-tools-app/dist/242.js 6.72 kB 0 B
packages/apps/esm-implementer-tools-app/dist/246.js 447 B 0 B
packages/apps/esm-implementer-tools-app/dist/305.js 5.07 kB 0 B
packages/apps/esm-implementer-tools-app/dist/319.js 458 B 0 B
packages/apps/esm-implementer-tools-app/dist/369.js 2.63 kB 0 B
packages/apps/esm-implementer-tools-app/dist/426.js 1.66 kB 0 B
packages/apps/esm-implementer-tools-app/dist/466.js 5.82 kB 0 B
packages/apps/esm-implementer-tools-app/dist/574.js 425 B 0 B
packages/apps/esm-implementer-tools-app/dist/587.js 4.03 kB 0 B
packages/apps/esm-implementer-tools-app/dist/600.js 61.8 kB 0 B
packages/apps/esm-implementer-tools-app/dist/620.js 126 kB 0 B
packages/apps/esm-implementer-tools-app/dist/696.js 29.3 kB 0 B
packages/apps/esm-implementer-tools-app/dist/735.js 2.63 kB 0 B
packages/apps/esm-implementer-tools-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-implementer-tools-app/dist/807.js 1.48 kB 0 B
packages/apps/esm-implementer-tools-app/dist/889.js 109 kB 0 B
packages/apps/esm-implementer-tools-app/dist/895.js 2.29 kB 0 B
packages/apps/esm-implementer-tools-app/dist/main.js 3.94 kB 0 B
packages/apps/esm-implementer-tools-app/dist/openmrs-esm-implementer-tools-app.js 3.27 kB 0 B
packages/apps/esm-login-app/dist/236.js 272 B 0 B
packages/apps/esm-login-app/dist/240.js 364 B 0 B
packages/apps/esm-login-app/dist/261.js 6.25 kB 0 B
packages/apps/esm-login-app/dist/263.js 6.66 kB 0 B
packages/apps/esm-login-app/dist/272.js 264 B 0 B
packages/apps/esm-login-app/dist/319.js 360 B 0 B
packages/apps/esm-login-app/dist/336.js 234 B 0 B
packages/apps/esm-login-app/dist/337.js 1.62 kB 0 B
packages/apps/esm-login-app/dist/390.js 603 B 0 B
packages/apps/esm-login-app/dist/539.js 298 B 0 B
packages/apps/esm-login-app/dist/574.js 428 B 0 B
packages/apps/esm-login-app/dist/610.js 5.8 kB 0 B
packages/apps/esm-login-app/dist/611.js 726 B 0 B
packages/apps/esm-login-app/dist/63.js 16.5 kB 0 B
packages/apps/esm-login-app/dist/642.js 10.7 kB 0 B
packages/apps/esm-login-app/dist/644.js 305 B 0 B
packages/apps/esm-login-app/dist/673.js 284 B 0 B
packages/apps/esm-login-app/dist/735.js 2.63 kB 0 B
packages/apps/esm-login-app/dist/737.js 24.9 kB 0 B
packages/apps/esm-login-app/dist/75.js 5.71 kB 0 B
packages/apps/esm-login-app/dist/757.js 603 B 0 B
packages/apps/esm-login-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-login-app/dist/829.js 10 kB 0 B
packages/apps/esm-login-app/dist/889.js 109 kB 0 B
packages/apps/esm-login-app/dist/main.js 3.3 kB 0 B
packages/apps/esm-login-app/dist/openmrs-esm-login-app.js 3.18 kB 0 B
packages/apps/esm-offline-tools-app/dist/206.js 7.21 kB 0 B
packages/apps/esm-offline-tools-app/dist/263.js 6.67 kB 0 B
packages/apps/esm-offline-tools-app/dist/264.js 9.49 kB 0 B
packages/apps/esm-offline-tools-app/dist/281.js 12.3 kB 0 B
packages/apps/esm-offline-tools-app/dist/290.js 438 B 0 B
packages/apps/esm-offline-tools-app/dist/316.js 2.06 kB 0 B
packages/apps/esm-offline-tools-app/dist/391.js 305 B 0 B
packages/apps/esm-offline-tools-app/dist/411.js 17.2 kB 0 B
packages/apps/esm-offline-tools-app/dist/412.js 2.34 kB 0 B
packages/apps/esm-offline-tools-app/dist/47.js 6.31 kB 0 B
packages/apps/esm-offline-tools-app/dist/526.js 15.6 kB 0 B
packages/apps/esm-offline-tools-app/dist/538.js 6.75 kB 0 B
packages/apps/esm-offline-tools-app/dist/541.js 384 B 0 B
packages/apps/esm-offline-tools-app/dist/574.js 999 B 0 B
packages/apps/esm-offline-tools-app/dist/594.js 11.2 kB 0 B
packages/apps/esm-offline-tools-app/dist/63.js 16.5 kB 0 B
packages/apps/esm-offline-tools-app/dist/697.js 5.47 kB 0 B
packages/apps/esm-offline-tools-app/dist/733.js 290 B 0 B
packages/apps/esm-offline-tools-app/dist/735.js 2.63 kB 0 B
packages/apps/esm-offline-tools-app/dist/752.js 2.83 kB 0 B
packages/apps/esm-offline-tools-app/dist/757.js 1.15 kB 0 B
packages/apps/esm-offline-tools-app/dist/78.js 6.13 kB 0 B
packages/apps/esm-offline-tools-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-offline-tools-app/dist/82.js 51.7 kB 0 B
packages/apps/esm-offline-tools-app/dist/889.js 109 kB 0 B
packages/apps/esm-offline-tools-app/dist/937.js 6.53 kB 0 B
packages/apps/esm-offline-tools-app/dist/967.js 492 B 0 B
packages/apps/esm-offline-tools-app/dist/main.js 58 kB 0 B
packages/apps/esm-offline-tools-app/dist/openmrs-esm-offline-tools-app.js 3.26 kB 0 B
packages/apps/esm-primary-navigation-app/dist/113.js 11.6 kB 0 B
packages/apps/esm-primary-navigation-app/dist/216.js 549 B 0 B
packages/apps/esm-primary-navigation-app/dist/242.js 6.72 kB 0 B
packages/apps/esm-primary-navigation-app/dist/363.js 3.05 kB 0 B
packages/apps/esm-primary-navigation-app/dist/406.js 9.38 kB 0 B
packages/apps/esm-primary-navigation-app/dist/414.js 467 B 0 B
packages/apps/esm-primary-navigation-app/dist/574.js 183 B 0 B
packages/apps/esm-primary-navigation-app/dist/710.js 6.28 kB 0 B
packages/apps/esm-primary-navigation-app/dist/716.js 6.08 kB 0 B
packages/apps/esm-primary-navigation-app/dist/735.js 2.64 kB 0 B
packages/apps/esm-primary-navigation-app/dist/743.js 7.05 kB 0 B
packages/apps/esm-primary-navigation-app/dist/757.js 209 B 0 B
packages/apps/esm-primary-navigation-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-primary-navigation-app/dist/889.js 109 kB 0 B
packages/apps/esm-primary-navigation-app/dist/899.js 14.8 kB 0 B
packages/apps/esm-primary-navigation-app/dist/90.js 4.52 kB 0 B
packages/apps/esm-primary-navigation-app/dist/main.js 9.41 kB 0 B
packages/apps/esm-primary-navigation-app/dist/openmrs-esm-primary-navigation-app.js 3.28 kB 0 B
packages/framework/esm-api/dist/openmrs-esm-api.js 9.49 kB 0 B
packages/framework/esm-breadcrumbs/dist/openmrs-esm-breadcrumbs.js 3.24 kB 0 B
packages/framework/esm-config/dist/openmrs-esm-module-config.js 7.87 kB 0 B
packages/framework/esm-error-handling/dist/openmrs-esm-error-handling.js 1.49 kB 0 B
packages/framework/esm-extensions/dist/openmrs-esm-extensions.js 8.45 kB 0 B
packages/framework/esm-framework/dist/openmrs-esm-framework.js 202 kB -63 B (0%)
packages/framework/esm-globals/dist/openmrs-esm-globals.js 1.59 kB 0 B
packages/framework/esm-offline/dist/openmrs-esm-offline.js 35 kB 0 B
packages/framework/esm-react-utils/dist/openmrs-esm-react-utils.js 18.2 kB 0 B
packages/framework/esm-state/dist/openmrs-esm-state.js 1.47 kB 0 B
packages/framework/esm-styleguide/dist/openmrs-esm-styleguide.js 19 kB 0 B
packages/framework/esm-utils/dist/openmrs-esm-utils.js 10.8 kB 0 B
packages/shell/esm-app-shell/dist/767dbddad899fe9e.js 922 B 0 B
packages/shell/esm-app-shell/dist/openmrs.008a8426b37a70c6.js 350 kB 0 B
packages/shell/esm-app-shell/dist/service-worker.js 50.5 kB -1 B (0%)
packages/tooling/openmrs/dist/cli.js 2.92 kB 0 B
packages/tooling/openmrs/dist/commands/assemble.js 2.48 kB 0 B
packages/tooling/openmrs/dist/commands/build.js 1.48 kB 0 B
packages/tooling/openmrs/dist/commands/debug.js 539 B 0 B
packages/tooling/openmrs/dist/commands/develop.js 1.66 kB 0 B
packages/tooling/openmrs/dist/commands/index.js 360 B 0 B
packages/tooling/openmrs/dist/commands/start.js 848 B 0 B
packages/tooling/openmrs/dist/index.js 445 B 0 B
packages/tooling/openmrs/dist/runner.js 799 B 0 B
packages/tooling/openmrs/dist/utils/config.js 639 B 0 B
packages/tooling/openmrs/dist/utils/debugger.js 529 B 0 B
packages/tooling/openmrs/dist/utils/dependencies.js 403 B 0 B
packages/tooling/openmrs/dist/utils/helpers.js 393 B 0 B
packages/tooling/openmrs/dist/utils/importmap.js 2.79 kB 0 B
packages/tooling/openmrs/dist/utils/index.js 370 B 0 B
packages/tooling/openmrs/dist/utils/logger.js 234 B 0 B
packages/tooling/openmrs/dist/utils/npmConfig.js 854 B 0 B
packages/tooling/openmrs/dist/utils/untar.js 648 B 0 B
packages/tooling/openmrs/dist/utils/variables.js 192 B 0 B
packages/tooling/openmrs/dist/utils/webpack.js 276 B 0 B
packages/tooling/webpack-config/dist/index.js 3 kB 0 B
packages/tooling/webpack-config/dist/optimize.js 1.79 kB 0 B

compressed-size-action

Copy link
Member

@vasharma05 vasharma05 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me!
I believe the height should be taken care by size prop.
Thanks for working on it.

/* Tablet */
:global(.omrs-breakpoint-lt-desktop) {
:global(.cds--side-nav__link) {
height: 3rem;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this should be taken by the size prop of the menu item instead of CSS, creates confusion when making changes in the component. Faced it when working with tables too.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Although, there is a large prop on side nav links which applies the .#{$prefix}--side-nav__item--large class which defaults to 3rem.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't see it in the docs. Mind dropping a link, Ian?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Never mind, just seen it

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The SideNavLink component in the docs you shared. The class I was referring to is defined here

@denniskigen denniskigen merged commit e5f2817 into main Mar 16, 2023
@denniskigen denniskigen deleted the feat/more-left-nav-tweaks branch March 16, 2023 09:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants