@instructure/ui-date-time-input 8.52.0 → 8.52.1-snapshot-2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.52.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v8.52.0...v8.52.1-snapshot-2) (2024-02-06)
+
+
+### Features
+
+* **ui-date-time-input:** add placeholder to datetimeinput's timeselect ([3ec8cc3](https://github.com/instructure/instructure-ui/commit/3ec8cc31f06ee570b704f88b09739a0868da9ff7))
+
+
+
+
+
 # [8.52.0](https://github.com/instructure/instructure-ui/compare/v8.51.0...v8.52.0) (2024-02-02)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input

package/es/DateTimeInput/index.js

@@ -405,6 +405,7 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
     const _this$props3 = this.props,
       description = _this$props3.description,
       datePlaceholder = _this$props3.datePlaceholder,
+      timePlaceholder = _this$props3.timePlaceholder,
       dateRenderLabel = _this$props3.dateRenderLabel,
       dateInputRef = _this$props3.dateInputRef,
       timeRenderLabel = _this$props3.timeRenderLabel,
@@ -454,6 +455,7 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
     }, this.renderDays()), /*#__PURE__*/React.createElement(TimeSelect, {
       value: this.state.timeSelectValue,
       onChange: this.updateStateBasedOnTimeSelect,
+      placeholder: timePlaceholder,
       onBlur: this.handleBlur,
       renderLabel: timeRenderLabel,
       locale: locale,

package/es/DateTimeInput/props.js

@@ -32,6 +32,7 @@ const propTypes = {
   prevMonthLabel: PropTypes.string.isRequired,
   nextMonthLabel: PropTypes.string.isRequired,
   datePlaceholder: PropTypes.string,
+  timePlaceholder: PropTypes.string,
   dateFormat: PropTypes.string,
   interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
   timeRenderLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
@@ -58,5 +59,5 @@ const propTypes = {
   disabledDateTimeMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   allowNonStepInput: PropTypes.bool
 };
-const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'showMessages', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage', 'allowNonStepInput'];
+const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'timePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'showMessages', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage', 'allowNonStepInput'];
 export { propTypes, allowedProps };

package/lib/DateTimeInput/index.js

@@ -413,6 +413,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
     const _this$props3 = this.props,
       description = _this$props3.description,
       datePlaceholder = _this$props3.datePlaceholder,
+      timePlaceholder = _this$props3.timePlaceholder,
       dateRenderLabel = _this$props3.dateRenderLabel,
       dateInputRef = _this$props3.dateInputRef,
       timeRenderLabel = _this$props3.timeRenderLabel,
@@ -462,6 +463,7 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
     }, this.renderDays()), /*#__PURE__*/_react.default.createElement(_TimeSelect.TimeSelect, {
       value: this.state.timeSelectValue,
       onChange: this.updateStateBasedOnTimeSelect,
+      placeholder: timePlaceholder,
       onBlur: this.handleBlur,
       renderLabel: timeRenderLabel,
       locale: locale,

package/lib/DateTimeInput/props.js

@@ -39,6 +39,7 @@ const propTypes = exports.propTypes = {
   prevMonthLabel: _propTypes.default.string.isRequired,
   nextMonthLabel: _propTypes.default.string.isRequired,
   datePlaceholder: _propTypes.default.string,
+  timePlaceholder: _propTypes.default.string,
   dateFormat: _propTypes.default.string,
   interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
   timeRenderLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,
@@ -65,4 +66,4 @@ const propTypes = exports.propTypes = {
   disabledDateTimeMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
   allowNonStepInput: _propTypes.default.bool
 };
-const allowedProps = exports.allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'showMessages', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage', 'allowNonStepInput'];
+const allowedProps = exports.allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'timePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'showMessages', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage', 'allowNonStepInput'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-time-input",
-  "version": "8.52.0",
+  "version": "8.52.1-snapshot-2",
   "description": "A UI component that allows to select date and time.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,26 +23,26 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.52.0",
-    "@instructure/ui-test-locator": "8.52.0",
-    "@instructure/ui-test-utils": "8.52.0"
+    "@instructure/ui-babel-preset": "8.52.1-snapshot-2",
+    "@instructure/ui-test-locator": "8.52.1-snapshot-2",
+    "@instructure/ui-test-utils": "8.52.1-snapshot-2"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/debounce": "8.52.0",
-    "@instructure/emotion": "8.52.0",
-    "@instructure/ui-a11y-content": "8.52.0",
-    "@instructure/ui-buttons": "8.52.0",
-    "@instructure/ui-calendar": "8.52.0",
-    "@instructure/ui-date-input": "8.52.0",
-    "@instructure/ui-form-field": "8.52.0",
-    "@instructure/ui-i18n": "8.52.0",
-    "@instructure/ui-icons": "8.52.0",
-    "@instructure/ui-prop-types": "8.52.0",
-    "@instructure/ui-react-utils": "8.52.0",
-    "@instructure/ui-testable": "8.52.0",
-    "@instructure/ui-time-select": "8.52.0",
-    "@instructure/ui-utils": "8.52.0",
+    "@instructure/debounce": "8.52.1-snapshot-2",
+    "@instructure/emotion": "8.52.1-snapshot-2",
+    "@instructure/ui-a11y-content": "8.52.1-snapshot-2",
+    "@instructure/ui-buttons": "8.52.1-snapshot-2",
+    "@instructure/ui-calendar": "8.52.1-snapshot-2",
+    "@instructure/ui-date-input": "8.52.1-snapshot-2",
+    "@instructure/ui-form-field": "8.52.1-snapshot-2",
+    "@instructure/ui-i18n": "8.52.1-snapshot-2",
+    "@instructure/ui-icons": "8.52.1-snapshot-2",
+    "@instructure/ui-prop-types": "8.52.1-snapshot-2",
+    "@instructure/ui-react-utils": "8.52.1-snapshot-2",
+    "@instructure/ui-testable": "8.52.1-snapshot-2",
+    "@instructure/ui-time-select": "8.52.1-snapshot-2",
+    "@instructure/ui-utils": "8.52.1-snapshot-2",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/DateTimeInput/index.tsx

@@ -510,6 +510,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
     const {
       description,
       datePlaceholder,
+      timePlaceholder,
       dateRenderLabel,
       dateInputRef,
       timeRenderLabel,
@@ -576,6 +577,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
         <TimeSelect
           value={this.state.timeSelectValue}
           onChange={this.updateStateBasedOnTimeSelect}
+          placeholder={timePlaceholder}
           onBlur={this.handleBlur}
           renderLabel={timeRenderLabel}
           locale={locale}

package/src/DateTimeInput/props.ts

@@ -56,6 +56,12 @@ type DateTimeInputProps = {
    * This should be hint text, not a label replacement.
    **/
   datePlaceholder?: string
+
+  /**
+   * HTML placeholder text to display when the time input has no value.
+   * This should be hint text, not a label replacement.
+   **/
+  timePlaceholder?: string
   /**
    * The format of the date shown in the `DateInput` when a date is selected.
    * Valid formats are compatible with
@@ -270,6 +276,7 @@ const propTypes: PropValidators<PropKeys> = {
   prevMonthLabel: PropTypes.string.isRequired,
   nextMonthLabel: PropTypes.string.isRequired,
   datePlaceholder: PropTypes.string,
+  timePlaceholder: PropTypes.string,
   dateFormat: PropTypes.string,
   interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
   timeRenderLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
@@ -315,6 +322,7 @@ const allowedProps: AllowedPropKeys = [
   'prevMonthLabel',
   'nextMonthLabel',
   'datePlaceholder',
+  'timePlaceholder',
   'dateFormat',
   'interaction',
   'timeRenderLabel',