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) Add CarbonMRS icon set and React components #969

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

ibacher
Copy link
Member

@ibacher ibacher commented Apr 9, 2024

Requirements

  • This PR has a title that briefly describes the work done including the ticket number. Ensure your PR title includes a conventional commit label (such as feat, fix, or chore, among others). See existing PR titles for inspiration.

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

This is a draft PR for implementing the CarbonMRS icon set and replacing most uses of the Carbon icons with the custom icons. The root idea here is to leverage the existing SVG sprites system, so that all svgs are loaded only once and simply cloned in place as needed.

Currently, the main limitation of this implementation is the lack of actual SVG icons (the files here are simply placeholders), so things I'm looking for feedback on are:

  • Is it too much to load 50-ish SVGs up front? (Especially curious about the size implications this has for the openmrs.js file).
  • Does the naming convention for icons here make sense? (These icon names are mostly directly taken from CarbonMRS / the Zero Height docs with a couple of aliases where I thought it made sense)
  • Are there other properties we should support on the simple icon component?

Screenshots

Related Issue

Other

@ibacher ibacher marked this pull request as draft April 9, 2024 14:24
Copy link
Contributor

github-actions bot commented Apr 9, 2024

Size Change: -584 kB (-15%) 👏

Total Size: 3.19 MB

Filename Size Change
packages/apps/esm-devtools-app/dist/961.js 0 B -25.3 kB (removed) 🏆
packages/apps/esm-implementer-tools-app/dist/72.js 0 B -61.2 kB (removed) 🏆
packages/apps/esm-login-app/dist/836.js 0 B -22.5 kB (removed) 🏆
packages/apps/esm-offline-tools-app/dist/430.js 0 B -55.4 kB (removed) 🏆
packages/apps/esm-primary-navigation-app/dist/780.js 0 B -22.3 kB (removed) 🏆
packages/shell/esm-app-shell/dist/openmrs.494f6d8328d28397.js 0 B -368 kB (removed) 🏆
ℹ️ View Unchanged
Filename Size Change
packages/apps/esm-devtools-app/dist/630.js 2.69 kB +1 B (0%)
packages/apps/esm-devtools-app/dist/667.js 6.96 kB 0 B
packages/apps/esm-devtools-app/dist/735.js 2.63 kB 0 B
packages/apps/esm-devtools-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-devtools-app/dist/875.js 9.74 kB -19 B (0%)
packages/apps/esm-devtools-app/dist/884.js 15.2 kB 0 B
packages/apps/esm-devtools-app/dist/889.js 151 kB -3.43 kB (-2%)
packages/apps/esm-devtools-app/dist/933.js 25.2 kB 0 B
packages/apps/esm-devtools-app/dist/988.js 328 B 0 B
packages/apps/esm-devtools-app/dist/main.js 3.14 kB 0 B
packages/apps/esm-devtools-app/dist/openmrs-esm-devtools-app.js 3.19 kB 0 B
packages/apps/esm-implementer-tools-app/dist/271.js 716 B 0 B
packages/apps/esm-implementer-tools-app/dist/319.js 633 B 0 B
packages/apps/esm-implementer-tools-app/dist/426.js 1.67 kB -1 B (0%)
packages/apps/esm-implementer-tools-app/dist/460.js 735 B 0 B
packages/apps/esm-implementer-tools-app/dist/482.js 15.2 kB 0 B
packages/apps/esm-implementer-tools-app/dist/498.js 60.4 kB 0 B
packages/apps/esm-implementer-tools-app/dist/56.js 3.07 kB 0 B
packages/apps/esm-implementer-tools-app/dist/560.js 9.62 kB -16 B (0%)
packages/apps/esm-implementer-tools-app/dist/574.js 560 B 0 B
packages/apps/esm-implementer-tools-app/dist/587.js 2.92 kB -4 B (0%)
packages/apps/esm-implementer-tools-app/dist/620.js 126 kB 0 B
packages/apps/esm-implementer-tools-app/dist/625.js 562 B 0 B
packages/apps/esm-implementer-tools-app/dist/644.js 717 B 0 B
packages/apps/esm-implementer-tools-app/dist/657.js 7.01 kB 0 B
packages/apps/esm-implementer-tools-app/dist/71.js 6.97 kB 0 B
packages/apps/esm-implementer-tools-app/dist/727.js 33.1 kB -45 B (0%)
packages/apps/esm-implementer-tools-app/dist/735.js 2.63 kB 0 B
packages/apps/esm-implementer-tools-app/dist/757.js 560 B 0 B
packages/apps/esm-implementer-tools-app/dist/767.js 10.4 kB 0 B
packages/apps/esm-implementer-tools-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-implementer-tools-app/dist/791.js 284 B 0 B
packages/apps/esm-implementer-tools-app/dist/807.js 559 B 0 B
packages/apps/esm-implementer-tools-app/dist/833.js 681 B 0 B
packages/apps/esm-implementer-tools-app/dist/889.js 151 kB -3.43 kB (-2%)
packages/apps/esm-implementer-tools-app/dist/main.js 72.5 kB -861 B (-1%)
packages/apps/esm-implementer-tools-app/dist/openmrs-esm-implementer-tools-app.js 3.32 kB +1 B (0%)
packages/apps/esm-login-app/dist/111.js 1.22 kB 0 B
packages/apps/esm-login-app/dist/126.js 2.5 kB 0 B
packages/apps/esm-login-app/dist/173.js 1.22 kB 0 B
packages/apps/esm-login-app/dist/224.js 256 B 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/271.js 718 B 0 B
packages/apps/esm-login-app/dist/272.js 264 B 0 B
packages/apps/esm-login-app/dist/319.js 664 B 0 B
packages/apps/esm-login-app/dist/336.js 234 B 0 B
packages/apps/esm-login-app/dist/363.js 30.1 kB -9 B (0%)
packages/apps/esm-login-app/dist/460.js 737 B 0 B
packages/apps/esm-login-app/dist/539.js 298 B 0 B
packages/apps/esm-login-app/dist/56.js 3.06 kB 0 B
packages/apps/esm-login-app/dist/574.js 577 B 0 B
packages/apps/esm-login-app/dist/625.js 579 B 0 B
packages/apps/esm-login-app/dist/627.js 257 B 0 B
packages/apps/esm-login-app/dist/63.js 16.5 kB 0 B
packages/apps/esm-login-app/dist/644.js 718 B 0 B
packages/apps/esm-login-app/dist/667.js 6.96 kB 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/757.js 660 B 0 B
packages/apps/esm-login-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-login-app/dist/807.js 897 B 0 B
packages/apps/esm-login-app/dist/833.js 684 B 0 B
packages/apps/esm-login-app/dist/884.js 15.2 kB 0 B
packages/apps/esm-login-app/dist/889.js 151 kB -3.43 kB (-2%)
packages/apps/esm-login-app/dist/905.js 22 kB 0 B
packages/apps/esm-login-app/dist/main.js 56.1 kB -509 B (-1%)
packages/apps/esm-login-app/dist/openmrs-esm-login-app.js 3.37 kB +2 B (0%)
packages/apps/esm-offline-tools-app/dist/271.js 1.18 kB 0 B
packages/apps/esm-offline-tools-app/dist/319.js 1.13 kB 0 B
packages/apps/esm-offline-tools-app/dist/460.js 1.29 kB 0 B
packages/apps/esm-offline-tools-app/dist/56.js 3.07 kB 0 B
packages/apps/esm-offline-tools-app/dist/574.js 1.04 kB 0 B
packages/apps/esm-offline-tools-app/dist/625.js 1.04 kB 0 B
packages/apps/esm-offline-tools-app/dist/63.js 16.5 kB 0 B
packages/apps/esm-offline-tools-app/dist/644.js 1.18 kB 0 B
packages/apps/esm-offline-tools-app/dist/667.js 6.96 kB 0 B
packages/apps/esm-offline-tools-app/dist/735.js 2.63 kB 0 B
packages/apps/esm-offline-tools-app/dist/757.js 1.2 kB 0 B
packages/apps/esm-offline-tools-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-offline-tools-app/dist/807.js 1.11 kB 0 B
packages/apps/esm-offline-tools-app/dist/833.js 1.21 kB 0 B
packages/apps/esm-offline-tools-app/dist/847.js 55.5 kB 0 B
packages/apps/esm-offline-tools-app/dist/884.js 15.2 kB 0 B
packages/apps/esm-offline-tools-app/dist/889.js 151 kB -3.43 kB (-2%)
packages/apps/esm-offline-tools-app/dist/922.js 81.2 kB -1 B (0%)
packages/apps/esm-offline-tools-app/dist/main.js 137 kB +68 B (0%)
packages/apps/esm-offline-tools-app/dist/openmrs-esm-offline-tools-app.js 3.29 kB -1 B (0%)
packages/apps/esm-primary-navigation-app/dist/271.js 267 B 0 B
packages/apps/esm-primary-navigation-app/dist/319.js 237 B 0 B
packages/apps/esm-primary-navigation-app/dist/460.js 264 B 0 B
packages/apps/esm-primary-navigation-app/dist/574.js 230 B 0 B
packages/apps/esm-primary-navigation-app/dist/625.js 232 B 0 B
packages/apps/esm-primary-navigation-app/dist/63.js 16.5 kB 0 B
packages/apps/esm-primary-navigation-app/dist/644.js 267 B 0 B
packages/apps/esm-primary-navigation-app/dist/653.js 21.8 kB 0 B
packages/apps/esm-primary-navigation-app/dist/667.js 6.97 kB 0 B
packages/apps/esm-primary-navigation-app/dist/735.js 2.64 kB 0 B
packages/apps/esm-primary-navigation-app/dist/757.js 238 B 0 B
packages/apps/esm-primary-navigation-app/dist/762.js 7.48 kB 0 B
packages/apps/esm-primary-navigation-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-primary-navigation-app/dist/807.js 290 B 0 B
packages/apps/esm-primary-navigation-app/dist/833.js 257 B 0 B
packages/apps/esm-primary-navigation-app/dist/884.js 15.2 kB 0 B
packages/apps/esm-primary-navigation-app/dist/889.js 151 kB -3.43 kB (-2%)
packages/apps/esm-primary-navigation-app/dist/958.js 22.1 kB -11 B (0%)
packages/apps/esm-primary-navigation-app/dist/main.js 45.4 kB -516 B (-1%)
packages/apps/esm-primary-navigation-app/dist/openmrs-esm-primary-navigation-app.js 3.23 kB +1 B (0%)
packages/framework/esm-api/dist/openmrs-esm-api.js 16.2 kB 0 B
packages/framework/esm-config/dist/openmrs-esm-module-config.js 8.02 kB 0 B
packages/framework/esm-dynamic-loading/dist/openmrs-esm-dynamic-loading.js 2.75 kB 0 B
packages/framework/esm-error-handling/dist/openmrs-esm-error-handling.js 889 B 0 B
packages/framework/esm-extensions/dist/openmrs-esm-extensions.js 8.1 kB 0 B
packages/framework/esm-feature-flags/dist/openmrs-esm-feature-flags.js 1.67 kB 0 B
packages/framework/esm-framework/dist/126.openmrs-esm-framework.js 2.47 kB 0 B
packages/framework/esm-framework/dist/278.openmrs-esm-framework.js 14.5 kB 0 B
packages/framework/esm-framework/dist/530.openmrs-esm-framework.js 2.92 kB 0 B
packages/framework/esm-framework/dist/619.openmrs-esm-framework.js 6.49 kB 0 B
packages/framework/esm-framework/dist/645.openmrs-esm-framework.js 9.31 kB 0 B
packages/framework/esm-framework/dist/680.openmrs-esm-framework.js 6.13 kB 0 B
packages/framework/esm-framework/dist/735.openmrs-esm-framework.js 2.66 kB 0 B
packages/framework/esm-framework/dist/788.openmrs-esm-framework.js 42.9 kB 0 B
packages/framework/esm-framework/dist/openmrs-esm-framework.js 443 kB +1.36 kB (0%)
packages/framework/esm-globals/dist/openmrs-esm-globals.js 770 B 0 B
packages/framework/esm-navigation/dist/openmrs-esm-navigation.js 9.35 kB 0 B
packages/framework/esm-offline/dist/openmrs-esm-offline.js 34.4 kB 0 B
packages/framework/esm-react-utils/dist/openmrs-esm-react-utils.js 15.1 kB 0 B
packages/framework/esm-routes/dist/openmrs-esm-utils.js 1.46 kB 0 B
packages/framework/esm-state/dist/openmrs-esm-state.js 888 B 0 B
packages/framework/esm-styleguide/dist/openmrs-esm-styleguide.js 49.6 kB -3.1 kB (-6%)
packages/framework/esm-translations/dist/openmrs-esm-core-translations.js 1.34 kB 0 B
packages/framework/esm-utils/dist/openmrs-esm-utils.js 11.1 kB 0 B
packages/shell/esm-app-shell/dist/11c63b65f96a8718.js 499 B 0 B
packages/shell/esm-app-shell/dist/1e0131662341578e.js 645 B 0 B
packages/shell/esm-app-shell/dist/2916d0aa7a9d5dc8.js 544 B 0 B
packages/shell/esm-app-shell/dist/4080333b51941032.js 0 B -6.8 kB (removed) 🏆
packages/shell/esm-app-shell/dist/45fcc893e89fd25c.js 6.8 kB 0 B
packages/shell/esm-app-shell/dist/4a3e954c45d63305.js 645 B 0 B
packages/shell/esm-app-shell/dist/4b4f127f96a81072.js 0 B -1.58 kB (removed) 🏆
packages/shell/esm-app-shell/dist/651172ae1548469c.js 499 B 0 B
packages/shell/esm-app-shell/dist/98343ad4bb547c48.js 499 B 0 B
packages/shell/esm-app-shell/dist/b66a463116735f62.js 3.81 kB 0 B
packages/shell/esm-app-shell/dist/ba933133ad512cac.js 499 B 0 B
packages/shell/esm-app-shell/dist/c360cbbeb9770f97.js 1.58 kB 0 B
packages/shell/esm-app-shell/dist/dae6aa8bf297bfda.js 499 B 0 B
packages/shell/esm-app-shell/dist/fa89289c9d9645c9.js 519 B 0 B
packages/shell/esm-app-shell/dist/openmrs.5f751a51da66c19f.js 366 kB 0 B
packages/shell/esm-app-shell/dist/service-worker.js 45.9 kB +3 B (0%)
packages/tooling/openmrs/dist/cli.js 2.88 kB 0 B
packages/tooling/openmrs/dist/commands/assemble.js 2.82 kB 0 B
packages/tooling/openmrs/dist/commands/build.js 1.34 kB 0 B
packages/tooling/openmrs/dist/commands/debug.js 545 B 0 B
packages/tooling/openmrs/dist/commands/develop.js 2.59 kB 0 B
packages/tooling/openmrs/dist/commands/index.js 438 B 0 B
packages/tooling/openmrs/dist/commands/start.js 851 B 0 B
packages/tooling/openmrs/dist/index.js 517 B 0 B
packages/tooling/openmrs/dist/runner.js 637 B 0 B
packages/tooling/openmrs/dist/utils/config.js 728 B 0 B
packages/tooling/openmrs/dist/utils/debugger.js 576 B 0 B
packages/tooling/openmrs/dist/utils/dependencies.js 648 B 0 B
packages/tooling/openmrs/dist/utils/helpers.js 395 B 0 B
packages/tooling/openmrs/dist/utils/importmap.js 3.07 kB 0 B
packages/tooling/openmrs/dist/utils/index.js 444 B 0 B
packages/tooling/openmrs/dist/utils/logger.js 368 B 0 B
packages/tooling/openmrs/dist/utils/npmConfig.js 830 B 0 B
packages/tooling/openmrs/dist/utils/untar.js 722 B 0 B
packages/tooling/openmrs/dist/utils/variables.js 192 B 0 B
packages/tooling/openmrs/dist/utils/webpack.js 278 B 0 B
packages/tooling/webpack-config/dist/index.js 3.58 kB 0 B

compressed-size-action

@brandones
Copy link
Collaborator

brandones commented Apr 19, 2024

Is it too much to load 50-ish SVGs up front? (Especially curious about the size implications this has for the openmrs.js file).

Seems like it would be great if we could avoid it, right? Even if all the icons shared their own bundle that would seem to be better than having them in openmrs.js.

Does the naming convention for icons here make sense? (These icon names are mostly directly taken from CarbonMRS / the Zero Height docs with a couple of aliases where I thought it made sense)

Yes, I think they do.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants