@khanacademy/wonder-blocks-birthday-picker 1.0.0 → 1.2.1

package/CHANGELOG.md

@@ -1,12 +1,45 @@
 # @khanacademy/wonder-blocks-birthday-picker
 
+## 1.2.1
+
+### Patch Changes
+
+-   Updated dependencies [246a921d]
+    -   @khanacademy/wonder-blocks-core@4.3.0
+    -   @khanacademy/wonder-blocks-dropdown@2.6.6
+    -   @khanacademy/wonder-blocks-icon@1.2.26
+    -   @khanacademy/wonder-blocks-layout@1.4.8
+    -   @khanacademy/wonder-blocks-typography@1.1.30
+
+## 1.2.0
+
+### Minor Changes
+
+-   5536d12e: Add `monthYearOnly` prop to hide the `day` field from the UI. Passes the first day of the selected month for this case.
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-dropdown@2.6.5
+
+## 1.1.0
+
+### Minor Changes
+
+-   17fa61fd: Add `disabled` prop
+
+### Patch Changes
+
+-   Updated dependencies [77e7523c]
+    -   @khanacademy/wonder-blocks-dropdown@2.6.4
+
 ## 1.0.0
+
 ### Major Changes
 
-- 11c87db3: - Added `wonder-blocks-birthday-picker`.
-  - Dropdown: Updated some styles from `backgroundColor` to `background` to avoid some warnings on unit tests.
+-   11c87db3: - Added `wonder-blocks-birthday-picker`.
+    -   Dropdown: Updated some styles from `backgroundColor` to `background` to avoid some warnings on unit tests.
 
 ### Patch Changes
 
-- Updated dependencies [11c87db3]
-  - @khanacademy/wonder-blocks-dropdown@2.6.3
+-   Updated dependencies [11c87db3]
+    -   @khanacademy/wonder-blocks-dropdown@2.6.3

package/dist/es/index.js

@@ -18,7 +18,12 @@ const defaultLabels = Object.freeze({
   month: "Month",
   year: "Year",
   day: "Day"
-});
+}); // Default minWidth value when we include the full DOB.
+
+const FIELD_MIN_WIDTH_FULL = 110; // Alternative minWidth value when we hide the day field.
+// See: https://www.figma.com/file/uJZi9ZvuEz5N8GJ3HqKFAa/(2021)-Account-records?node-id=20%3A398
+
+const FIELD_MIN_WIDTH_MONTH_YEAR = 167;
 /**
  * Birthday Picker. Similar to a datepicker, but specifically for birthdates.
  * We don't want to show a calendar in this case as it can be quite tedious to
@@ -127,11 +132,12 @@ class BirthdayPicker extends React.Component {
 
   getStateFromDefault() {
     const {
-      defaultValue
+      defaultValue,
+      monthYearOnly
     } = this.props;
     const initialState = {
       month: null,
-      day: null,
+      day: monthYearOnly ? "1" : null,
       year: null,
       error: null
     }; // merge custom labels with the default ones
@@ -191,32 +197,48 @@ class BirthdayPicker extends React.Component {
     }, error)));
   }
 
-  render() {
+  renderMonth() {
     const {
-      month,
-      day,
-      year
+      disabled,
+      monthYearOnly
+    } = this.props;
+    const {
+      month
     } = this.state;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
-      testId: "birthday-picker",
-      style: {
-        flexDirection: "row"
-      }
-    }, /*#__PURE__*/React.createElement(SingleSelect, {
+    const minWidth = monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
+    return /*#__PURE__*/React.createElement(SingleSelect, {
+      disabled: disabled,
       placeholder: this.labels.month,
       onChange: this.handleMonthChange,
       selectedValue: month,
       style: {
-        minWidth: 110
+        minWidth
       },
       testId: "birthday-picker-month"
     }, moment.monthsShort().map((month, i) => /*#__PURE__*/React.createElement(OptionItem, {
       key: month,
       label: month,
       value: String(i)
-    }))), /*#__PURE__*/React.createElement(Strut, {
+    })));
+  }
+
+  maybeRenderDay() {
+    const {
+      disabled,
+      monthYearOnly
+    } = this.props;
+    const {
+      day
+    } = this.state; // Hide the day field if the month/year only mode is enabled.
+
+    if (monthYearOnly) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(SingleSelect, {
+      disabled: disabled,
       placeholder: this.labels.day,
       onChange: this.handleDayChange,
       selectedValue: day,
@@ -228,21 +250,43 @@ class BirthdayPicker extends React.Component {
       key: String(day + 1),
       label: String(day + 1),
       value: String(day + 1)
-    }))), /*#__PURE__*/React.createElement(Strut, {
-      size: Spacing.xSmall_8
-    }), /*#__PURE__*/React.createElement(SingleSelect, {
+    }))));
+  }
+
+  renderYear() {
+    const {
+      disabled,
+      monthYearOnly
+    } = this.props;
+    const {
+      year
+    } = this.state;
+    const minWidth = monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
+    return /*#__PURE__*/React.createElement(SingleSelect, {
+      disabled: disabled,
       placeholder: this.labels.year,
       onChange: this.handleYearChange,
       selectedValue: year,
       style: {
-        minWidth: 110
+        minWidth
       },
       testId: "birthday-picker-year"
     }, Array.from(Array(120)).map((_, yearOffset) => /*#__PURE__*/React.createElement(OptionItem, {
       key: String(CUR_YEAR - yearOffset),
       label: String(CUR_YEAR - yearOffset),
       value: String(CUR_YEAR - yearOffset)
-    })))), this.maybeRenderError());
+    })));
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+      testId: "birthday-picker",
+      style: {
+        flexDirection: "row"
+      }
+    }, this.renderMonth(), this.maybeRenderDay(), /*#__PURE__*/React.createElement(Strut, {
+      size: Spacing.xSmall_8
+    }), this.renderYear()), this.maybeRenderError());
   }
 
 }

package/dist/index.js

@@ -176,7 +176,12 @@ const defaultLabels = Object.freeze({
   month: "Month",
   year: "Year",
   day: "Day"
-});
+}); // Default minWidth value when we include the full DOB.
+
+const FIELD_MIN_WIDTH_FULL = 110; // Alternative minWidth value when we hide the day field.
+// See: https://www.figma.com/file/uJZi9ZvuEz5N8GJ3HqKFAa/(2021)-Account-records?node-id=20%3A398
+
+const FIELD_MIN_WIDTH_MONTH_YEAR = 167;
 /**
  * Birthday Picker. Similar to a datepicker, but specifically for birthdates.
  * We don't want to show a calendar in this case as it can be quite tedious to
@@ -285,11 +290,12 @@ class BirthdayPicker extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
 
   getStateFromDefault() {
     const {
-      defaultValue
+      defaultValue,
+      monthYearOnly
     } = this.props;
     const initialState = {
       month: null,
-      day: null,
+      day: monthYearOnly ? "1" : null,
       year: null,
       error: null
     }; // merge custom labels with the default ones
@@ -351,32 +357,48 @@ class BirthdayPicker extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
     }, error)));
   }
 
-  render() {
+  renderMonth() {
     const {
-      month,
-      day,
-      year
+      disabled,
+      monthYearOnly
+    } = this.props;
+    const {
+      month
     } = this.state;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
-      testId: "birthday-picker",
-      style: {
-        flexDirection: "row"
-      }
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["SingleSelect"], {
+    const minWidth = monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["SingleSelect"], {
+      disabled: disabled,
       placeholder: this.labels.month,
       onChange: this.handleMonthChange,
       selectedValue: month,
       style: {
-        minWidth: 110
+        minWidth
       },
       testId: "birthday-picker-month"
     }, moment__WEBPACK_IMPORTED_MODULE_0___default.a.monthsShort().map((month, i) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["OptionItem"], {
       key: month,
       label: month,
       value: String(i)
-    }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["Strut"], {
+    })));
+  }
+
+  maybeRenderDay() {
+    const {
+      disabled,
+      monthYearOnly
+    } = this.props;
+    const {
+      day
+    } = this.state; // Hide the day field if the month/year only mode is enabled.
+
+    if (monthYearOnly) {
+      return null;
+    }
+
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["Strut"], {
       size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8
     }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["SingleSelect"], {
+      disabled: disabled,
       placeholder: this.labels.day,
       onChange: this.handleDayChange,
       selectedValue: day,
@@ -388,21 +410,43 @@ class BirthdayPicker extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
       key: String(day + 1),
       label: String(day + 1),
       value: String(day + 1)
-    }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["Strut"], {
-      size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8
-    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["SingleSelect"], {
+    }))));
+  }
+
+  renderYear() {
+    const {
+      disabled,
+      monthYearOnly
+    } = this.props;
+    const {
+      year
+    } = this.state;
+    const minWidth = monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["SingleSelect"], {
+      disabled: disabled,
       placeholder: this.labels.year,
       onChange: this.handleYearChange,
       selectedValue: year,
       style: {
-        minWidth: 110
+        minWidth
       },
       testId: "birthday-picker-year"
     }, Array.from(Array(120)).map((_, yearOffset) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["OptionItem"], {
       key: String(CUR_YEAR - yearOffset),
       label: String(CUR_YEAR - yearOffset),
       value: String(CUR_YEAR - yearOffset)
-    })))), this.maybeRenderError());
+    })));
+  }
+
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
+      testId: "birthday-picker",
+      style: {
+        flexDirection: "row"
+      }
+    }, this.renderMonth(), this.maybeRenderDay(), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["Strut"], {
+      size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8
+    }), this.renderYear()), this.maybeRenderError());
   }
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-birthday-picker",
-  "version": "1.0.0",
+  "version": "1.2.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -15,12 +15,12 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.2.0",
-    "@khanacademy/wonder-blocks-dropdown": "^2.6.3",
-    "@khanacademy/wonder-blocks-icon": "^1.2.24",
-    "@khanacademy/wonder-blocks-layout": "^1.4.6",
+    "@khanacademy/wonder-blocks-core": "^4.3.0",
+    "@khanacademy/wonder-blocks-dropdown": "^2.6.6",
+    "@khanacademy/wonder-blocks-icon": "^1.2.26",
+    "@khanacademy/wonder-blocks-layout": "^1.4.8",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.28"
+    "@khanacademy/wonder-blocks-typography": "^1.1.30"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

package/src/components/__docs__/birthday-picker.argtypes.js

@@ -2,37 +2,13 @@
 import {defaultLabels} from "../birthday-picker.js";
 
 export default {
-    defaultValue: {
-        control: {type: "text"},
-        description:
-            "The default value to populate the birthdate with. Should be in the format: `YYYY-MM-DD` (e.g. 2021-05-26). It's only used to populate the initial value as this is an uncontrolled component.",
-        table: {
-            type: {
-                summary: "string",
-            },
-        },
-    },
     labels: {
-        control: {type: "object"},
-        description:
-            "The object containing the custom labels used inside this component.",
         defaultValue: defaultLabels,
-        table: {
-            type: {
-                summary: "Labels",
-                detail: "{month?: string, year?: string, day?: string, errorMessage?: string}",
-            },
-        },
     },
     onChange: {
         action: "onChanged",
-        description:
-            "Listen for changes to the birthdate. Could be a string in the `YYYY-MM-DD` format or `null`.",
         table: {
             category: "Events",
-            type: {
-                summary: "(date: ?string) => mixed",
-            },
         },
     },
 };

package/src/components/__docs__/birthday-picker.stories.js

@@ -64,6 +64,10 @@ BirthdayPickerWithDefaultValue.parameters = {
     chromatic: {
         disableSnapshot: true,
     },
+    docs: {
+        storyDescription:
+            "This component is empty by default, but we can pass in a defined birthday by using the `defaultValue` prop.",
+    },
 };
 
 export const InvalidBirthdayPicker: StoryComponentType = Template.bind({});
@@ -73,6 +77,13 @@ InvalidBirthdayPicker.args = {
     defaultValue: "2030-07-19",
 };
 
+InvalidBirthdayPicker.parameters = {
+    docs: {
+        storyDescription:
+            "In case the birthday is invalid, we display an error message indicating this problem.",
+    },
+};
+
 export const BirthdayPickerWithCustomLabels: StoryComponentType = Template.bind(
     {},
 );
@@ -87,3 +98,42 @@ BirthdayPickerWithCustomLabels.args = {
         errorMessage: "Por favor seleccione una fecha válida.",
     },
 };
+
+BirthdayPickerWithCustomLabels.parameters = {
+    docs: {
+        storyDescription:
+            "We can pass custom labels to the component. This can be helpful when we need to pass in translated strings. The default labels are: `Day`, `Month`, `Year` used as placeholders and 'Please select a valid birthdate.' to indicate an `errorMessage` when the validation fails. For more info about how to use this, refer to the `labels` prop in the Props table documentation above.",
+    },
+};
+
+export const DisabledBirthdayPicker: StoryComponentType = Template.bind({});
+
+DisabledBirthdayPicker.args = {
+    onChange: () => {},
+    disabled: true,
+};
+
+DisabledBirthdayPicker.parameters = {
+    docs: {
+        storyDescription:
+            "A BirthdayPicker can be disabled by passing the `disabled` prop. This will disable all the dropdown controls and prevent them from being interacted with.",
+    },
+};
+
+export const BirthdayPickerWithYearAndMonthOnly: StoryComponentType =
+    Template.bind({});
+
+BirthdayPickerWithYearAndMonthOnly.args = {
+    monthYearOnly: true,
+    onChange: (date: ?string) => {
+        // eslint-disable-next-line no-console
+        console.log("Date selected: ", date);
+    },
+};
+
+BirthdayPickerWithYearAndMonthOnly.parameters = {
+    docs: {
+        storyDescription:
+            "A BirthdayPicker can be configured to only show the year and month dropdowns. This can be useful when we want to display and collect a birthday that doesn't require the full DOB for privacy reasons.",
+    },
+};

package/src/components/__tests__/birthday-picker.test.js

@@ -34,6 +34,18 @@ describe("BirthdayPicker", () => {
             expect(yearPicker).toHaveTextContent("Year");
         });
 
+        it("renders without the day field if monthYearOnly is set", () => {
+            // Arrange
+
+            // Act
+            render(<BirthdayPicker monthYearOnly={true} onChange={() => {}} />);
+
+            const dayPicker = screen.queryByTestId("birthday-picker-day");
+
+            // Assert
+            expect(dayPicker).not.toBeInTheDocument();
+        });
+
         it("renders with a valid default value", () => {
             // Arrange
             const date = moment(today);
@@ -122,6 +134,22 @@ describe("BirthdayPicker", () => {
             expect(yearPicker).toHaveTextContent("Year");
         });
 
+        it("renders correctly the disabled state", () => {
+            // Arrange
+
+            // Act
+            render(<BirthdayPicker disabled={true} onChange={() => {}} />);
+
+            const monthPicker = screen.getByTestId("birthday-picker-month");
+            const dayPicker = screen.getByTestId("birthday-picker-day");
+            const yearPicker = screen.getByTestId("birthday-picker-year");
+
+            // Assert
+            expect(monthPicker).toBeDisabled();
+            expect(dayPicker).toBeDisabled();
+            expect(yearPicker).toBeDisabled();
+        });
+
         it("renders an error with an invalid default value", async () => {
             // Arrange
             const defaultValue = "2021-02-31";
@@ -153,9 +181,9 @@ describe("BirthdayPicker", () => {
             // Arrange
             const onChange = jest.fn();
 
-            // Act
             render(<BirthdayPicker onChange={onChange} />);
 
+            // Act
             userEvent.click(screen.getByTestId("birthday-picker-month"));
             const monthOption = await screen.findByRole("option", {
                 name: "Jul",
@@ -242,7 +270,6 @@ describe("BirthdayPicker", () => {
             // Arrange
             const onChange = jest.fn();
 
-            // Act
             render(
                 <BirthdayPicker
                     defaultValue="2017-07-17"
@@ -250,6 +277,7 @@ describe("BirthdayPicker", () => {
                 />,
             );
 
+            // Act
             userEvent.click(screen.getByTestId("birthday-picker-month"));
             const monthOption = await screen.findByRole("option", {
                 name: "Aug",
@@ -311,7 +339,6 @@ describe("BirthdayPicker", () => {
             // Arrange
             const onChange = jest.fn();
 
-            // Act
             render(
                 <BirthdayPicker
                     defaultValue="2021-02-31"
@@ -319,6 +346,7 @@ describe("BirthdayPicker", () => {
                 />,
             );
 
+            // Act
             userEvent.click(screen.getByTestId("birthday-picker-year"));
             const yearOption = await screen.findByRole("option", {
                 name: "2020",
@@ -330,6 +358,68 @@ describe("BirthdayPicker", () => {
             // Assert
             expect(onChange).toHaveBeenCalledTimes(1);
         });
+
+        it("onChange triggers the first day of the month when monthYearOnly is set", async () => {
+            // Arrange
+            const onChange = jest.fn();
+
+            render(<BirthdayPicker monthYearOnly={true} onChange={onChange} />);
+
+            // Act
+            userEvent.click(screen.getByTestId("birthday-picker-month"));
+            const monthOption = await screen.findByRole("option", {
+                name: "Aug",
+            });
+            userEvent.click(monthOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            userEvent.click(screen.getByTestId("birthday-picker-year"));
+            const yearOption = await screen.findByRole("option", {
+                name: "2018",
+            });
+            userEvent.click(yearOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            // Assert
+            // Verify that we passed the first day of the month
+            expect(onChange).toHaveBeenCalledWith("2018-08-01");
+        });
+
+        it("onChange triggers the passed-in day intact when defaultValue and monthYearOnly are set", async () => {
+            // Arrange
+            const onChange = jest.fn();
+
+            render(
+                <BirthdayPicker
+                    defaultValue="2017-07-17"
+                    monthYearOnly={true}
+                    onChange={onChange}
+                />,
+            );
+
+            // Act
+            userEvent.click(screen.getByTestId("birthday-picker-month"));
+            const monthOption = await screen.findByRole("option", {
+                name: "Aug",
+            });
+            userEvent.click(monthOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            userEvent.click(screen.getByTestId("birthday-picker-year"));
+            const yearOption = await screen.findByRole("option", {
+                name: "2018",
+            });
+            userEvent.click(yearOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            // Assert
+            // Verify that we passed the same day originally passed in.
+            expect(onChange).toHaveBeenCalledWith("2018-08-17");
+        });
     });
 
     describe("labels", () => {

package/src/components/birthday-picker.js

@@ -39,11 +39,26 @@ type Props = {|
      */
     defaultValue?: string,
 
+    /**
+     * Whether the birthdate fields are disabled.
+     */
+    disabled?: boolean,
+
     /**
      * The object containing the custom labels used inside this component.
      */
     labels?: Labels,
 
+    /**
+     * Whether we want to hide the day field.
+     *
+     * **NOTE:** We will set the day to the _first_ day of the _selected_ month
+     * if the day field is hidden. Please make sure to modify the passed date
+     * value to fit different needs (e.g. if you want to set the _first_ day of
+     * the _following_ month instead).
+     */
+    monthYearOnly?: boolean,
+
     /**
      * Listen for changes to the birthdate. Could be a string in the YYYY-MM-DD
      * format or `null`.
@@ -82,6 +97,13 @@ export const defaultLabels: Labels = Object.freeze({
     day: "Day",
 });
 
+// Default minWidth value when we include the full DOB.
+const FIELD_MIN_WIDTH_FULL = 110;
+
+// Alternative minWidth value when we hide the day field.
+// See: https://www.figma.com/file/uJZi9ZvuEz5N8GJ3HqKFAa/(2021)-Account-records?node-id=20%3A398
+const FIELD_MIN_WIDTH_MONTH_YEAR = 167;
+
 /**
  * Birthday Picker. Similar to a datepicker, but specifically for birthdates.
  * We don't want to show a calendar in this case as it can be quite tedious to
@@ -129,10 +151,10 @@ export default class BirthdayPicker extends React.Component<Props, State> {
      * Calculates the initial state values based on the default value.
      */
     getStateFromDefault(): State {
-        const {defaultValue} = this.props;
+        const {defaultValue, monthYearOnly} = this.props;
         const initialState: State = {
             month: null,
-            day: null,
+            day: monthYearOnly ? "1" : null,
             year: null,
             error: null,
         };
@@ -247,59 +269,99 @@ export default class BirthdayPicker extends React.Component<Props, State> {
         );
     }
 
-    render(): React.Element<any> {
-        const {month, day, year} = this.state;
+    renderMonth(): React.Node {
+        const {disabled, monthYearOnly} = this.props;
+        const {month} = this.state;
+        const minWidth = monthYearOnly
+            ? FIELD_MIN_WIDTH_MONTH_YEAR
+            : FIELD_MIN_WIDTH_FULL;
+
+        return (
+            <SingleSelect
+                disabled={disabled}
+                placeholder={this.labels.month}
+                onChange={this.handleMonthChange}
+                selectedValue={month}
+                style={{minWidth}}
+                testId="birthday-picker-month"
+            >
+                {moment.monthsShort().map((month, i) => (
+                    <OptionItem key={month} label={month} value={String(i)} />
+                ))}
+            </SingleSelect>
+        );
+    }
+
+    maybeRenderDay(): ?React.Node {
+        const {disabled, monthYearOnly} = this.props;
+        const {day} = this.state;
+
+        // Hide the day field if the month/year only mode is enabled.
+        if (monthYearOnly) {
+            return null;
+        }
+
+        return (
+            <>
+                <Strut size={Spacing.xSmall_8} />
+                <SingleSelect
+                    disabled={disabled}
+                    placeholder={this.labels.day}
+                    onChange={this.handleDayChange}
+                    selectedValue={day}
+                    style={{minWidth: 100}}
+                    testId="birthday-picker-day"
+                >
+                    {Array.from(Array(31)).map((_, day) => (
+                        <OptionItem
+                            key={String(day + 1)}
+                            label={String(day + 1)}
+                            value={String(day + 1)}
+                        />
+                    ))}
+                </SingleSelect>
+            </>
+        );
+    }
+
+    renderYear(): React.Node {
+        const {disabled, monthYearOnly} = this.props;
+        const {year} = this.state;
+        const minWidth = monthYearOnly
+            ? FIELD_MIN_WIDTH_MONTH_YEAR
+            : FIELD_MIN_WIDTH_FULL;
+
+        return (
+            <SingleSelect
+                disabled={disabled}
+                placeholder={this.labels.year}
+                onChange={this.handleYearChange}
+                selectedValue={year}
+                style={{minWidth}}
+                testId="birthday-picker-year"
+            >
+                {Array.from(Array(120)).map((_, yearOffset) => (
+                    <OptionItem
+                        key={String(CUR_YEAR - yearOffset)}
+                        label={String(CUR_YEAR - yearOffset)}
+                        value={String(CUR_YEAR - yearOffset)}
+                    />
+                ))}
+            </SingleSelect>
+        );
+    }
 
+    render(): React.Element<any> {
         return (
             <>
                 <View testId="birthday-picker" style={{flexDirection: "row"}}>
-                    <SingleSelect
-                        placeholder={this.labels.month}
-                        onChange={this.handleMonthChange}
-                        selectedValue={month}
-                        style={{minWidth: 110}}
-                        testId="birthday-picker-month"
-                    >
-                        {moment.monthsShort().map((month, i) => (
-                            <OptionItem
-                                key={month}
-                                label={month}
-                                value={String(i)}
-                            />
-                        ))}
-                    </SingleSelect>
-                    <Strut size={Spacing.xSmall_8} />
-                    <SingleSelect
-                        placeholder={this.labels.day}
-                        onChange={this.handleDayChange}
-                        selectedValue={day}
-                        style={{minWidth: 100}}
-                        testId="birthday-picker-day"
-                    >
-                        {Array.from(Array(31)).map((_, day) => (
-                            <OptionItem
-                                key={String(day + 1)}
-                                label={String(day + 1)}
-                                value={String(day + 1)}
-                            />
-                        ))}
-                    </SingleSelect>
+                    {this.renderMonth()}
+
+                    {this.maybeRenderDay()}
+
                     <Strut size={Spacing.xSmall_8} />
-                    <SingleSelect
-                        placeholder={this.labels.year}
-                        onChange={this.handleYearChange}
-                        selectedValue={year}
-                        style={{minWidth: 110}}
-                        testId="birthday-picker-year"
-                    >
-                        {Array.from(Array(120)).map((_, yearOffset) => (
-                            <OptionItem
-                                key={String(CUR_YEAR - yearOffset)}
-                                label={String(CUR_YEAR - yearOffset)}
-                                value={String(CUR_YEAR - yearOffset)}
-                            />
-                        ))}
-                    </SingleSelect>
+
+                    {this.renderYear()}
                 </View>
                 {this.maybeRenderError()}
             </>