npm - @openmrs/esm-styleguide - Versions diffs - 9.0.3-pre.4633 → 9.0.3-pre.4643 - Mend

@openmrs/esm-styleguide 9.0.3-pre.4633 → 9.0.3-pre.4643

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 (13) hide show

package/.turbo/turbo-build.log CHANGED Viewed

@@ -1,3 +1,3 @@
-[0] Successfully compiled: 123 files, copied 164 files with swc (284.05ms)
+[0] Successfully compiled: 123 files, copied 164 files with swc (253.91ms)
 [0] swc --strip-leading-paths --copy-files src -d dist && svgo -rf dist --quiet exited with code 0
 [1] tsc --project tsconfig.build.json exited with code 0

package/dist/datepicker/datepicker.module.scss CHANGED Viewed

@@ -114,6 +114,14 @@
   block-size: layout.$spacing-08;
 }
+.inputWrapperSm {
+  block-size: layout.$spacing-07;
+}
+.inputWrapperLg {
+  block-size: layout.$spacing-09;
+}
 // Range date picker inputs
 .inputsWrapper {
   display: flex;
@@ -123,6 +131,18 @@
   inline-size: 15rem;
 }
+.inputsWrapperSm {
+  block-size: layout.$spacing-07;
+}
+.inputsWrapperMd {
+  block-size: layout.$spacing-08;
+}
+.inputsWrapperLg {
+  block-size: layout.$spacing-09;
+}
 .dateInputWrapper {
   @extend .inputWrapper;
   min-width: unset;
@@ -154,20 +174,31 @@
 }
 // Used for calendar pop-over
-@keyframes fade-in-down {
+@keyframes expand-in {
   from {
     opacity: 0;
-    transform: translate3d(0, -20px, 0);
+    transform: scale(0.93);
   }
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    transform: scale(1);
   }
 }
+.popover {
+  transform-origin: top center;
+}
+// When the popover flips above the trigger (near bottom of viewport), anchor from the bottom
+.popover[data-placement='top'],
+.popover[data-placement='top-start'],
+.popover[data-placement='top-end'] {
+  transform-origin: bottom center;
+}
 .popover[data-entering] {
-  animation: fade-in-down motion.$duration-fast-02 motion.motion(entrance, productive);
+  animation: expand-in motion.$duration-fast-02 motion.motion(entrance, productive);
   @media screen and (prefers-reduced-motion: reduce) {
     animation: none;
@@ -223,6 +254,16 @@
   width: layout.$spacing-08;
 }
+.flatButtonSm {
+  height: layout.$spacing-07;
+  width: layout.$spacing-07;
+}
+.flatButtonLg {
+  height: layout.$spacing-09;
+  width: layout.$spacing-09;
+}
 .monthYear {
   @include component-reset.reset;
   @include type.type-style('heading-compact-01');

package/dist/datepicker/openmrs-date-picker.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"openmrs-date-picker.component.d.ts","sourceRoot":"","sources":["../../src/datepicker/openmrs-date-picker.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAsB,KAAK,eAAe,EAAsC,MAAM,uBAAuB,CAAC;AACrH,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAWxE;;GAEG;AACH,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,OAAO,CAAC,EAC9F,mBAAmB;IACrB,uCAAuC;IACvC,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IACpD,iHAAiH;IACjH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,kGAAkG;IAClG,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAOD;;GAEG;AACH,eAAO,MAAM,iBAAiB,+~~FA+G7B~~,CAAC"}
1	+ {"version":3,"file":"openmrs-date-picker.component.d.ts","sourceRoot":"","sources":["../../src/datepicker/openmrs-date-picker.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAsB,KAAK,eAAe,EAAsC,MAAM,uBAAuB,CAAC;AACrH,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAWxE;;GAEG;AACH,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,OAAO,CAAC,EAC9F,mBAAmB;IACrB,uCAAuC;IACvC,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IACpD,iHAAiH;IACjH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,kGAAkG;IAClG,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAOD;;GAEG;AACH,eAAO,MAAM,iBAAiB,+FAuH7B,CAAC"}

package/dist/datepicker/openmrs-date-picker.component.js CHANGED Viewed

@@ -103,7 +103,9 @@ const defaultProps = {
                                             id: hasVisibleLabel ? id : undefined,
                                             ref: ref,
                                             className: classNames('cds--date-picker-input__wrapper', styles.inputWrapper, {
-                                                [styles.inputWrapperMd]: size === 'md' || !size || size.length === 0
+                                                [styles.inputWrapperSm]: size === 'sm',
+                                                [styles.inputWrapperMd]: size === 'md' || !size || size.length === 0,
+                                                [styles.inputWrapperLg]: size === 'lg'
                                             }),
                                             children: (segment)=>{
                                                 return segment.type !== 'era' ? /*#__PURE__*/ _jsx(DateSegment, {
@@ -113,7 +115,11 @@ const defaultProps = {
                                             }
                                         }),
                                         /*#__PURE__*/ _jsx(Button, {
-                                            className: classNames(styles.flatButton, styles.flatButtonMd),
+                                            className: classNames(styles.flatButton, {
+                                                [styles.flatButtonSm]: size === 'sm',
+                                                [styles.flatButtonMd]: size === 'md' || !size || size.length === 0,
+                                                [styles.flatButtonLg]: size === 'lg'
+                                            }),
                                             children: /*#__PURE__*/ _jsx(DatePickerIcon, {})
                                         })
                                     ]

package/dist/datepicker/openmrs-date-range-picker.component.d.ts CHANGED Viewed

@@ -10,6 +10,8 @@ export interface OpenmrsDateRangePickerProps extends Omit<DateRangePickerProps<C
     onChange?: (value: [Date | null | undefined, Date | null | undefined]) => void;
     /** Handler that is called when the value changes. Note that this provides types from @internationalized/date. */
     onChangeRaw?: (value: DateRange | null) => void;
+    /** Specifies the size of the input. Currently supports either `sm`, `md`, or `lg` as an option */
+    size?: 'sm' | 'md' | 'lg';
     /** The value (controlled) */
     value?: [DateInputValue, DateInputValue];
 }

package/dist/datepicker/openmrs-date-range-picker.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"openmrs-date-range-picker.component.d.ts","sourceRoot":"","sources":["../../src/datepicker/openmrs-date-range-picker.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAIL,KAAK,oBAAoB,EAIzB,KAAK,SAAS,EAEf,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAOxE,gDAAgD;AAChD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,OAAO,CAAC,EACnG,mBAAmB;IACrB,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;IAChD,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,IAAI,GAAG,IAAI,GAAG,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC,KAAK,IAAI,CAAC;IAC/E,iHAAiH;IACjH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,6BAA6B;IAC7B,KAAK,CAAC,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;CAC1C;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,~~oGAiJlC~~,CAAC"}
1	+ {"version":3,"file":"openmrs-date-range-picker.component.d.ts","sourceRoot":"","sources":["../../src/datepicker/openmrs-date-range-picker.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAIL,KAAK,oBAAoB,EAIzB,KAAK,SAAS,EAEf,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAOxE,gDAAgD;AAChD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,OAAO,CAAC,EACnG,mBAAmB;IACrB,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;IAChD,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,IAAI,GAAG,IAAI,GAAG,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC,KAAK,IAAI,CAAC;IAC/E,iHAAiH;IACjH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,kGAAkG;IAClG,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;CAC1C;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,oGA8JlC,CAAC"}

package/dist/datepicker/openmrs-date-range-picker.component.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { dateToInternationalizedDate, internationalizedDateToDate } from "./util
 import { DEFAULT_MIN_DATE_FLOOR } from "./defaults.js";
 /**
  * A date range picker to enter or select a date and time range. Based on React Aria, but styled to look like Carbon.
- */ export const OpenmrsDateRangePicker = /*#__PURE__*/ forwardRef(function OpenmrsDateRangePicker({ className, defaultValue: rawDefaultValue, invalid, invalidText, isDisabled, isInvalid: isInvalidRaw, label, labelText, light, maxDate: rawMaxDate, minDate: rawMinDate, onChange, onChangeRaw, value: rawValue, ...dateRangePickerProps }, ref) {
+ */ export const OpenmrsDateRangePicker = /*#__PURE__*/ forwardRef(function OpenmrsDateRangePicker({ className, defaultValue: rawDefaultValue, invalid, invalidText, isDisabled, isInvalid: isInvalidRaw, label, labelText, light, maxDate: rawMaxDate, minDate: rawMinDate, onChange, onChangeRaw, size = 'md', value: rawValue, ...dateRangePickerProps }, ref) {
     const { calendar, intlLocale, today_ } = useDatepickerContext();
     const id = useId();
     const hasVisibleLabel = !!(labelText ?? label);
@@ -111,7 +111,11 @@ import { DEFAULT_MIN_DATE_FLOOR } from "./defaults.js";
                                 className: styles.inputGroup,
                                 children: [
                                     /*#__PURE__*/ _jsxs("div", {
-                                        className: styles.inputsWrapper,
+                                        className: classNames(styles.inputsWrapper, {
+                                            [styles.inputsWrapperSm]: size === 'sm',
+                                            [styles.inputsWrapperMd]: size === 'md' || !size || size.length === 0,
+                                            [styles.inputsWrapperLg]: size === 'lg'
+                                        }),
                                         children: [
                                             /*#__PURE__*/ _jsx(DateInput, {
                                                 className: classNames('cds--date-picker-input__wrapper', styles.startInput, styles.dateInputWrapper),
@@ -140,7 +144,11 @@ import { DEFAULT_MIN_DATE_FLOOR } from "./defaults.js";
                                         ]
                                     }),
                                     /*#__PURE__*/ _jsx(Button, {
-                                        className: classNames(styles.flatButton, styles.flatButtonMd),
+                                        className: classNames(styles.flatButton, {
+                                            [styles.flatButtonSm]: size === 'sm',
+                                            [styles.flatButtonMd]: size === 'md' || !size || size.length === 0,
+                                            [styles.flatButtonLg]: size === 'lg'
+                                        }),
                                         children: /*#__PURE__*/ _jsx(DatePickerIcon, {})
                                     })
                                 ]

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "9.0.3-pre.4633",
+  "version": "9.0.3-pre.4643",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "module": "dist/internal.js",
@@ -98,18 +98,18 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "9.0.3-pre.4633",
-    "@openmrs/esm-config": "9.0.3-pre.4633",
-    "@openmrs/esm-emr-api": "9.0.3-pre.4633",
-    "@openmrs/esm-error-handling": "9.0.3-pre.4633",
-    "@openmrs/esm-extensions": "9.0.3-pre.4633",
-    "@openmrs/esm-globals": "9.0.3-pre.4633",
-    "@openmrs/esm-navigation": "9.0.3-pre.4633",
-    "@openmrs/esm-react-utils": "9.0.3-pre.4633",
-    "@openmrs/esm-routes": "9.0.3-pre.4633",
-    "@openmrs/esm-state": "9.0.3-pre.4633",
-    "@openmrs/esm-translations": "9.0.3-pre.4633",
-    "@openmrs/esm-utils": "9.0.3-pre.4633",
+    "@openmrs/esm-api": "9.0.3-pre.4643",
+    "@openmrs/esm-config": "9.0.3-pre.4643",
+    "@openmrs/esm-emr-api": "9.0.3-pre.4643",
+    "@openmrs/esm-error-handling": "9.0.3-pre.4643",
+    "@openmrs/esm-extensions": "9.0.3-pre.4643",
+    "@openmrs/esm-globals": "9.0.3-pre.4643",
+    "@openmrs/esm-navigation": "9.0.3-pre.4643",
+    "@openmrs/esm-react-utils": "9.0.3-pre.4643",
+    "@openmrs/esm-routes": "9.0.3-pre.4643",
+    "@openmrs/esm-state": "9.0.3-pre.4643",
+    "@openmrs/esm-translations": "9.0.3-pre.4643",
+    "@openmrs/esm-utils": "9.0.3-pre.4643",
     "@swc/cli": "0.8.1",
     "@swc/core": "1.15.21",
     "@types/geopattern": "^1.2.9",

package/src/datepicker/date-range-picker.test.tsx CHANGED Viewed

@@ -7,6 +7,7 @@ import userEvent from '@testing-library/user-event';
 import { useConfig } from '@openmrs/esm-react-utils/mock';
 import { OpenmrsDateRangePicker } from './index';
 import { DEFAULT_MIN_DATE_FLOOR } from './defaults';
+import styles from './datepicker.module.scss';
 describe('OpenmrsDateRangePicker', () => {
   beforeEach(() => {
@@ -152,6 +153,41 @@ describe('OpenmrsDateRangePicker', () => {
     });
   });
+  describe('size prop', () => {
+    /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+    const getInputsWrapper = (container: HTMLElement) =>
+      Array.from(container.querySelectorAll('div')).find((el) => el.className.includes('inputsWrapper')) ?? null;
+    it('should apply md size classes by default', () => {
+      const { container } = render(<OpenmrsDateRangePicker aria-label="datepicker" />);
+      const wrapper = getInputsWrapper(container)!;
+      expect(wrapper).toHaveClass(styles.inputsWrapperMd);
+      expect(screen.getByRole('button')).toHaveClass(styles.flatButtonMd);
+    });
+    it('should apply sm size classes when size="sm"', () => {
+      const { container } = render(<OpenmrsDateRangePicker aria-label="datepicker" size="sm" />);
+      const wrapper = getInputsWrapper(container)!;
+      expect(wrapper).toHaveClass(styles.inputsWrapperSm);
+      expect(screen.getByRole('button')).toHaveClass(styles.flatButtonSm);
+    });
+    it('should apply md size classes when size="md"', () => {
+      const { container } = render(<OpenmrsDateRangePicker aria-label="datepicker" size="md" />);
+      const wrapper = getInputsWrapper(container)!;
+      expect(wrapper).toHaveClass(styles.inputsWrapperMd);
+      expect(screen.getByRole('button')).toHaveClass(styles.flatButtonMd);
+    });
+    it('should apply lg size classes when size="lg"', () => {
+      const { container } = render(<OpenmrsDateRangePicker aria-label="datepicker" size="lg" />);
+      const wrapper = getInputsWrapper(container)!;
+      expect(wrapper).toHaveClass(styles.inputsWrapperLg);
+      expect(screen.getByRole('button')).toHaveClass(styles.flatButtonLg);
+    });
+    /* eslint-enable testing-library/no-container, testing-library/no-node-access */
+  });
   describe('calendar popover', () => {
     it('should open the calendar popover when the calendar button is clicked', async () => {
       const user = userEvent.setup();

package/src/datepicker/datepicker.module.scss CHANGED Viewed

@@ -114,6 +114,14 @@
   block-size: layout.$spacing-08;
 }
+.inputWrapperSm {
+  block-size: layout.$spacing-07;
+}
+.inputWrapperLg {
+  block-size: layout.$spacing-09;
+}
 // Range date picker inputs
 .inputsWrapper {
   display: flex;
@@ -123,6 +131,18 @@
   inline-size: 15rem;
 }
+.inputsWrapperSm {
+  block-size: layout.$spacing-07;
+}
+.inputsWrapperMd {
+  block-size: layout.$spacing-08;
+}
+.inputsWrapperLg {
+  block-size: layout.$spacing-09;
+}
 .dateInputWrapper {
   @extend .inputWrapper;
   min-width: unset;
@@ -154,20 +174,31 @@
 }
 // Used for calendar pop-over
-@keyframes fade-in-down {
+@keyframes expand-in {
   from {
     opacity: 0;
-    transform: translate3d(0, -20px, 0);
+    transform: scale(0.93);
   }
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    transform: scale(1);
   }
 }
+.popover {
+  transform-origin: top center;
+}
+// When the popover flips above the trigger (near bottom of viewport), anchor from the bottom
+.popover[data-placement='top'],
+.popover[data-placement='top-start'],
+.popover[data-placement='top-end'] {
+  transform-origin: bottom center;
+}
 .popover[data-entering] {
-  animation: fade-in-down motion.$duration-fast-02 motion.motion(entrance, productive);
+  animation: expand-in motion.$duration-fast-02 motion.motion(entrance, productive);
   @media screen and (prefers-reduced-motion: reduce) {
     animation: none;
@@ -223,6 +254,16 @@
   width: layout.$spacing-08;
 }
+.flatButtonSm {
+  height: layout.$spacing-07;
+  width: layout.$spacing-07;
+}
+.flatButtonLg {
+  height: layout.$spacing-09;
+  width: layout.$spacing-09;
+}
 .monthYear {
   @include component-reset.reset;
   @include type.type-style('heading-compact-01');

package/src/datepicker/datepicker.test.tsx CHANGED Viewed

@@ -7,6 +7,7 @@ import userEvent from '@testing-library/user-event';
 import { useConfig } from '@openmrs/esm-react-utils/mock';
 import { OpenmrsDatePicker } from './index';
 import { DEFAULT_MIN_DATE_FLOOR } from './defaults';
+import styles from './datepicker.module.scss';
 window.i18next = { language: 'en' } as i18n;
@@ -145,6 +146,38 @@ describe('OpenmrsDatePicker', () => {
     });
   });
+  describe('size prop', () => {
+    /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+    it('should apply md size classes by default', () => {
+      const { container } = render(<OpenmrsDatePicker aria-label="datepicker" />);
+      const wrapper = container.querySelector('.cds--date-picker-input__wrapper')!;
+      expect(wrapper).toHaveClass(styles.inputWrapperMd);
+      expect(screen.getByRole('button')).toHaveClass(styles.flatButtonMd);
+    });
+    it('should apply sm size classes when size="sm"', () => {
+      const { container } = render(<OpenmrsDatePicker aria-label="datepicker" size="sm" />);
+      const wrapper = container.querySelector('.cds--date-picker-input__wrapper')!;
+      expect(wrapper).toHaveClass(styles.inputWrapperSm);
+      expect(screen.getByRole('button')).toHaveClass(styles.flatButtonSm);
+    });
+    it('should apply md size classes when size="md"', () => {
+      const { container } = render(<OpenmrsDatePicker aria-label="datepicker" size="md" />);
+      const wrapper = container.querySelector('.cds--date-picker-input__wrapper')!;
+      expect(wrapper).toHaveClass(styles.inputWrapperMd);
+      expect(screen.getByRole('button')).toHaveClass(styles.flatButtonMd);
+    });
+    it('should apply lg size classes when size="lg"', () => {
+      const { container } = render(<OpenmrsDatePicker aria-label="datepicker" size="lg" />);
+      const wrapper = container.querySelector('.cds--date-picker-input__wrapper')!;
+      expect(wrapper).toHaveClass(styles.inputWrapperLg);
+      expect(screen.getByRole('button')).toHaveClass(styles.flatButtonLg);
+    });
+    /* eslint-enable testing-library/no-container, testing-library/no-node-access */
+  });
   describe('calendar popover', () => {
     it('should open the calendar popover when the calendar button is clicked', async () => {
       const user = userEvent.setup();

package/src/datepicker/openmrs-date-picker.component.tsx CHANGED Viewed

@@ -129,7 +129,9 @@ export const OpenmrsDatePicker = /*#__PURE__*/ forwardRef<HTMLDivElement, Openmr
                     id={hasVisibleLabel ? id : undefined}
                     ref={ref}
                     className={classNames('cds--date-picker-input__wrapper', styles.inputWrapper, {
+                      [styles.inputWrapperSm]: size === 'sm',
                       [styles.inputWrapperMd]: size === 'md' || !size || size.length === 0,
+                      [styles.inputWrapperLg]: size === 'lg',
                     })}
                   >
                     {(segment) => {
@@ -140,7 +142,13 @@ export const OpenmrsDatePicker = /*#__PURE__*/ forwardRef<HTMLDivElement, Openmr
                       );
                     }}
                   </DatePickerInput>
-                  <Button className={classNames(styles.flatButton, styles.flatButtonMd)}>
+                  <Button
+                    className={classNames(styles.flatButton, {
+                      [styles.flatButtonSm]: size === 'sm',
+                      [styles.flatButtonMd]: size === 'md' || !size || size.length === 0,
+                      [styles.flatButtonLg]: size === 'lg',
+                    })}
+                  >
                     <DatePickerIcon />
                   </Button>
                 </Group>

package/src/datepicker/openmrs-date-range-picker.component.tsx CHANGED Viewed

@@ -32,6 +32,8 @@ export interface OpenmrsDateRangePickerProps
   onChange?: (value: [Date | null | undefined, Date | null | undefined]) => void;
   /** Handler that is called when the value changes. Note that this provides types from @internationalized/date. */
   onChangeRaw?: (value: DateRange | null) => void;
+  /** Specifies the size of the input. Currently supports either `sm`, `md`, or `lg` as an option */
+  size?: 'sm' | 'md' | 'lg';
   /** The value (controlled) */
   value?: [DateInputValue, DateInputValue];
 }
@@ -55,6 +57,7 @@ export const OpenmrsDateRangePicker = /*#__PURE__*/ forwardRef<HTMLDivElement, O
       minDate: rawMinDate,
       onChange,
       onChangeRaw,
+      size = 'md',
       value: rawValue,
       ...dateRangePickerProps
     },
@@ -144,7 +147,13 @@ export const OpenmrsDateRangePicker = /*#__PURE__*/ forwardRef<HTMLDivElement, O
                 )}
                 <Group className={styles.inputGroup}>
-                  <div className={styles.inputsWrapper}>
+                  <div
+                    className={classNames(styles.inputsWrapper, {
+                      [styles.inputsWrapperSm]: size === 'sm',
+                      [styles.inputsWrapperMd]: size === 'md' || !size || size.length === 0,
+                      [styles.inputsWrapperLg]: size === 'lg',
+                    })}
+                  >
                     <DateInput
                       className={classNames(
                         'cds--date-picker-input__wrapper',
@@ -171,7 +180,13 @@ export const OpenmrsDateRangePicker = /*#__PURE__*/ forwardRef<HTMLDivElement, O
                       {(segment) => <DateSegment className={styles.inputSegment} segment={segment} />}
                     </DateInput>
                   </div>
-                  <Button className={classNames(styles.flatButton, styles.flatButtonMd)}>
+                  <Button
+                    className={classNames(styles.flatButton, {
+                      [styles.flatButtonSm]: size === 'sm',
+                      [styles.flatButtonMd]: size === 'md' || !size || size.length === 0,
+                      [styles.flatButtonLg]: size === 'lg',
+                    })}
+                  >
                     <DatePickerIcon />
                   </Button>
                 </Group>