(feat) Add ResponsiveWrapper to style guide

[denniskigen]

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

• My work conforms to the O3 Styleguide and design documentation.

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 PR adds a new component, ResponsiveWrapper to the style guide that makes it easier to provide responsive behaviour for form inputs.

In our form designs, inputs have a light background on tablet and a grey background on desktop. This component wraps its children within a Carbon Layer component on tablet, and renders them as is on desktop. In older versions of carbon, form inputs such as TextInput, NumberInput and Textarea exposed a light prop that could be used to toggle similar behaviour. v11 of Carbon deprecated the light prop in favour of the Layer component. This component leverages Layer to provide consistent rendering behaviour on both desktop and tablet.

I'd originally added this component to the @openmrs/esm-patient-common-lib library in openmrs/openmrs-esm-patient-chart#1622, but it seems more appropriate to have it here as it'll likely be used in many other places than just the Patient Chart.

Screenshots

Light inputs on tablet, gray inputs on desktop

Related Issue

None

Other

None

[github-actions]

Size Change: +9 B (0%)

Total Size: 2.85 MB

Filename	Size	Change
packages/shell/esm-app-shell/dist/openmrs.18ec21ee46c807cb.js	0 B	-335 kB (removed)	🏆
packages/shell/esm-app-shell/dist/openmrs.eaf38a953ae5836b.js	335 kB	+335 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size	Change
packages/apps/esm-devtools-app/dist/630.js	2.69 kB	0 B
packages/apps/esm-devtools-app/dist/729.js	6.79 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.76 kB	0 B
packages/apps/esm-devtools-app/dist/889.js	123 kB	0 B
packages/apps/esm-devtools-app/dist/961.js	25.3 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.18 kB	0 B
packages/apps/esm-implementer-tools-app/dist/271.js	517 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	0 B
packages/apps/esm-implementer-tools-app/dist/460.js	735 B	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.61 kB	0 B
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	0 B
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/651.js	6.86 kB	0 B
packages/apps/esm-implementer-tools-app/dist/727.js	33 kB	0 B
packages/apps/esm-implementer-tools-app/dist/735.js	2.63 kB	0 B
packages/apps/esm-implementer-tools-app/dist/738.js	6.79 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/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	123 kB	0 B
packages/apps/esm-implementer-tools-app/dist/913.js	61.2 kB	0 B
packages/apps/esm-implementer-tools-app/dist/main.js	73.3 kB	0 B
packages/apps/esm-implementer-tools-app/dist/openmrs-esm-implementer-tools-app.js	3.3 kB	0 B
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	713 B	0 B
packages/apps/esm-login-app/dist/272.js	264 B	0 B
packages/apps/esm-login-app/dist/319.js	690 B	0 B
packages/apps/esm-login-app/dist/336.js	234 B	0 B
packages/apps/esm-login-app/dist/363.js	30.2 kB	0 B
packages/apps/esm-login-app/dist/460.js	778 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	604 B	0 B
packages/apps/esm-login-app/dist/625.js	596 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	305 B	0 B
packages/apps/esm-login-app/dist/673.js	284 B	0 B
packages/apps/esm-login-app/dist/729.js	6.78 kB	0 B
packages/apps/esm-login-app/dist/735.js	2.63 kB	0 B
packages/apps/esm-login-app/dist/757.js	695 B	0 B
packages/apps/esm-login-app/dist/788.js	42.9 kB	0 B
packages/apps/esm-login-app/dist/807.js	961 B	0 B
packages/apps/esm-login-app/dist/833.js	723 B	0 B
packages/apps/esm-login-app/dist/836.js	22.5 kB	0 B
packages/apps/esm-login-app/dist/889.js	123 kB	0 B
packages/apps/esm-login-app/dist/main.js	56.7 kB	0 B
packages/apps/esm-login-app/dist/openmrs-esm-login-app.js	3.37 kB	0 B
packages/apps/esm-offline-tools-app/dist/271.js	1.14 kB	0 B
packages/apps/esm-offline-tools-app/dist/319.js	1.24 kB	0 B
packages/apps/esm-offline-tools-app/dist/430.js	55.4 kB	0 B
packages/apps/esm-offline-tools-app/dist/460.js	1.42 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.13 kB	0 B
packages/apps/esm-offline-tools-app/dist/625.js	1.12 kB	0 B
packages/apps/esm-offline-tools-app/dist/63.js	16.5 kB	0 B
packages/apps/esm-offline-tools-app/dist/729.js	6.79 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.3 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.19 kB	0 B
packages/apps/esm-offline-tools-app/dist/833.js	1.31 kB	0 B
packages/apps/esm-offline-tools-app/dist/889.js	123 kB	0 B
packages/apps/esm-offline-tools-app/dist/922.js	81.2 kB	0 B
packages/apps/esm-offline-tools-app/dist/main.js	136 kB	0 B
packages/apps/esm-offline-tools-app/dist/openmrs-esm-offline-tools-app.js	3.29 kB	0 B
packages/apps/esm-primary-navigation-app/dist/271.js	202 B	0 B
packages/apps/esm-primary-navigation-app/dist/319.js	233 B	0 B
packages/apps/esm-primary-navigation-app/dist/34.js	21.1 kB	0 B
packages/apps/esm-primary-navigation-app/dist/460.js	258 B	0 B
packages/apps/esm-primary-navigation-app/dist/574.js	226 B	0 B
packages/apps/esm-primary-navigation-app/dist/625.js	227 B	0 B
packages/apps/esm-primary-navigation-app/dist/63.js	16.5 kB	0 B
packages/apps/esm-primary-navigation-app/dist/729.js	6.79 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	234 B	0 B
packages/apps/esm-primary-navigation-app/dist/762.js	7.29 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	291 B	0 B
packages/apps/esm-primary-navigation-app/dist/833.js	254 B	0 B
packages/apps/esm-primary-navigation-app/dist/889.js	123 kB	0 B
packages/apps/esm-primary-navigation-app/dist/958.js	22.1 kB	0 B
packages/apps/esm-primary-navigation-app/dist/main.js	44.8 kB	0 B
packages/apps/esm-primary-navigation-app/dist/openmrs-esm-primary-navigation-app.js	3.23 kB	0 B
packages/framework/esm-api/dist/openmrs-esm-api.js	16.2 kB	0 B
packages/framework/esm-config/dist/openmrs-esm-module-config.js	7.99 kB	0 B
packages/framework/esm-dynamic-loading/dist/openmrs-esm-dynamic-loading.js	2.12 kB	0 B
packages/framework/esm-error-handling/dist/openmrs-esm-error-handling.js	894 B	0 B
packages/framework/esm-extensions/dist/openmrs-esm-extensions.js	8.05 kB	0 B
packages/framework/esm-feature-flags/dist/openmrs-esm-feature-flags.js	1.67 kB	0 B
packages/framework/esm-framework/dist/455.openmrs-esm-framework.js	4.57 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/655.openmrs-esm-framework.js	6.83 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	391 kB	0 B
packages/framework/esm-globals/dist/openmrs-esm-globals.js	756 B	0 B
packages/framework/esm-navigation/dist/openmrs-esm-navigation.js	9.27 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.7 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	19.4 kB	0 B
packages/framework/esm-utils/dist/openmrs-esm-utils.js	11.2 kB	0 B
packages/shell/esm-app-shell/dist/1348b3a910102b7f.js	0 B	-1.58 kB (removed)	🏆
packages/shell/esm-app-shell/dist/9c61459c588fc919.js	0 B	-6.43 kB (removed)	🏆
packages/shell/esm-app-shell/dist/b66a463116735f62.js	3.81 kB	0 B
packages/shell/esm-app-shell/dist/service-worker.js	60.5 kB	+1 B (0%)
packages/tooling/openmrs/dist/cli.js	2.86 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
packages/shell/esm-app-shell/dist/5146a968e86f23ce.js	1.58 kB	+1.58 kB (new file)	🆕
packages/shell/esm-app-shell/dist/d1c9be6bc86c0b3d.js	6.43 kB	+6.43 kB (new file)	🆕

_{compressed-size-action}

[ibacher]

Very nice work!

[denniskigen]

Thanks, @ibacher.