Add ability to hide the IcDateInput control in the IcDatePicker

packages/canary-docs/docs.json

@@ -2704,6 +2704,34 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "showDateInput",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "show-date-input",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "This prop should not be used anymore. If `true`, shows the date input control allowing entry of a date using the keyboard. If this is not provided then the component shows a calendar instead.."
+            }
+          ],
+          "default": "true",
+          "deprecation": "This prop should not be used anymore. If `true`, shows the date input control allowing entry of a date using the keyboard. If this is not provided then the component shows a calendar instead..",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "showDaysOutsideMonth",
           "type": "boolean",
@@ -2966,6 +2994,25 @@
           "composed": true,
           "docs": "Emitted when the value has changed.",
           "docsTags": []
+        },
+        {
+          "event": "icSelectedDateChange",
+          "detail": "{ value: Date; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{ value: Date }",
+            "resolved": "{ value: Date; }",
+            "references": {
+              "Date": {
+                "location": "global",
+                "id": "global::Date"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the selected date has changed.",
+          "docsTags": []
         }
       ],
       "listeners": [

packages/canary-react/src/component-tests/IcDatePicker/IcDatePicker.cy.tsx

@@ -527,6 +527,26 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => {
     });
   });
 
+  // Skipped test due to issue generating snapshots
+  it.skip("should render deprecated calendar-only variant", () => {
+    mount(
+      <IcDatePicker
+        label={DEFAULT_LABEL}
+        value={DEFAULT_VALUE}
+        showDateInput={false}
+      />
+    );
+
+    cy.checkHydrated(DATE_PICKER);
+
+    cy.checkA11yWithWait(undefined, SCREENSHOT_DELAY);
+
+    cy.compareSnapshot({
+      name: "calendar-only-mode",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.03),
+    });
+  });
+
   it("should hide go to today button", () => {
     mount(
       <IcDatePicker

packages/canary-react/src/stories/ic-date-picker.stories.js

@@ -21,7 +21,27 @@ const DatePickerWithIcChange = () => {
         onIcChange={dateChangedHandler}
         value={value}
       />
-      <span>{`Selected date: ${selectedDate}`}</span>
+      <span>{`Selected date: ${selectedDate || ""}`}</span>
+    </div>
+  );
+};
+
+const DatePickerWithIcSelectedDateChange = () => {
+  const [selectedDate, setSelectedDate] = useState();
+  const [value, setValue] = useState();
+  const dateChangedHandler = (event) => {
+    setValue(event.detail.value);
+    setSelectedDate(event.detail.value);
+  };
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "50px" }}>
+      <IcDatePicker
+        label="When would you like to collect your coffee?"
+        showDateInput={false}
+        onIcSelectedDateChange={dateChangedHandler}
+        value={value}
+      />
+      <span>{`Selected date: ${selectedDate || ""}`}</span>
     </div>
   );
 };
@@ -44,6 +64,7 @@ const defaultArgs = {
   min: "",
   openAtDate: "",
   required: false,
+  showDateInput: true,
   showDaysOutsideMonth: true,
   showPickerClearButton: true,
   showPickerTodayButton: true,
@@ -208,6 +229,21 @@ export const Value = {
   height: "540px",
 };
 
+/**
+ * The `value` prop sets the date in the input field. The value can be in any format supported by the `dateFormat` prop, in ISO 8601 date string format (yyyy-mm-dd) or as a JavaScript Date object.
+ */
+export const ValueCalendarOnlyMode = {
+  render: () => (
+    <IcDatePicker
+      label="When would you like to collect your coffee?"
+      showDateInput={false}
+      value="06/06/1944"
+    />
+  ),
+  name: "Value in calendar only Mode",
+  height: "540px",
+};
+
 /**
  * If no `value` is set, the `openAtDate` prop can be used to specify the date in view when the calendar view is opened. If not set to a value, the calendar will default to showing the current date.
  * 
@@ -360,6 +396,15 @@ export const IcChangeEvent = {
   height: "540px",
 };
 
+/**
+ * The date input can be hidden from the component by setting the deprecated `showDateInput` prop to `false`, thereby putting the component into "calendar only" mode. The `IcSelectedDateChange` event is emitted by the date picker when the selected date changes.
+ */
+export const IcSelectedDateChange = {
+  render: () => <DatePickerWithIcSelectedDateChange />,
+  name: "IcSelectedDateChange event",
+  height: "540px",
+};
+
 /**
  * Go to the <ic-link href="/?path=/story/react-components-date-picker--playground-example">separate page for the playground example</ic-link> to view the prop controls.
  */
@@ -398,6 +443,7 @@ export const PlaygroundExample = {
         min={args.min}
         openAtDate={args.openAtDate}
         required={args.required}
+        showDateInput={args.showDateInput}
         showDaysOutsideMonth={args.showDaysOutsideMonth}
         showPickerClearButton={args.showPickerClearButton}
         showPickerTodayButton={args.showPickerTodayButton}

packages/canary-web-components/src/components.d.ts

@@ -406,6 +406,10 @@ export namespace Components {
           * If `true`, the input will require a value.
          */
         "required"?: boolean;
+        /**
+          * @deprecated This prop should not be used anymore. If `true`, shows the date input control allowing entry of a date using the keyboard. If this is not provided then the component shows a calendar instead..
+         */
+        "showDateInput"?: boolean;
         /**
           * If `true`, days outside the current month will be visible in the date picker.
          */
@@ -898,6 +902,7 @@ declare global {
     };
     interface HTMLIcDatePickerElementEventMap {
         "icChange": { value: Date };
+        "icSelectedDateChange": { value: Date };
     }
     interface HTMLIcDatePickerElement extends Components.IcDatePicker, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIcDatePickerElementEventMap>(type: K, listener: (this: HTMLIcDatePickerElement, ev: IcDatePickerCustomEvent<HTMLIcDatePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1409,6 +1414,10 @@ declare namespace LocalJSX {
           * Emitted when the value has changed.
          */
         "onIcChange"?: (event: IcDatePickerCustomEvent<{ value: Date }>) => void;
+        /**
+          * Emitted when the selected date has changed.
+         */
+        "onIcSelectedDateChange"?: (event: IcDatePickerCustomEvent<{ value: Date }>) => void;
         /**
           * The date visible when the calendar opens. Used if no date is currently selected. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
          */
@@ -1417,6 +1426,10 @@ declare namespace LocalJSX {
           * If `true`, the input will require a value.
          */
         "required"?: boolean;
+        /**
+          * @deprecated This prop should not be used anymore. If `true`, shows the date input control allowing entry of a date using the keyboard. If this is not provided then the component shows a calendar instead..
+         */
+        "showDateInput"?: boolean;
         /**
           * If `true`, days outside the current month will be visible in the date picker.
          */

packages/canary-web-components/src/components/ic-date-input/readme.md

@@ -20,7 +20,7 @@
 | `helperText`           | `helper-text`            | The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.                                                                                                    | `string`                                       | `undefined`                                                                                             |
 | `hideHelperText`       | `hide-helper-text`       | If `true`, the helper text will be visually hidden, but still read out by screenreaders.                                                                                                                                                               | `boolean`                                      | `false`                                                                                                 |
 | `hideLabel`            | `hide-label`             | If `true`, the label will be visually hidden, but will still be read out by screen readers.                                                                                                                                                            | `boolean`                                      | `false`                                                                                                 |
-| `inputId`              | `input-id`               | The ID for the input.                                                                                                                                                                                                                                  | `string`                                       | ``ic-date-input-${inputIds++}``                                                                         |
+| `inputId`              | `input-id`               | The ID for the input.                                                                                                                                                                                                                                  | `string`                                       | `` `ic-date-input-${inputIds++}` ``                                                                     |
 | `invalidDateMessage`   | `invalid-date-message`   | The text to display as the validation message when an invalid date is entered.                                                                                                                                                                         | `string`                                       | `"Please enter a valid date."`                                                                          |
 | `label` _(required)_   | `label`                  | The label for the date input.                                                                                                                                                                                                                          | `string`                                       | `undefined`                                                                                             |
 | `max`                  | `max`                    | The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disableFuture` is set to `true`. | `Date \| string`                               | `""`                                                                                                    |

packages/canary-web-components/src/components/ic-date-picker/ic-date-picker.css

@@ -40,18 +40,25 @@ ic-date-input {
   flex-direction: column;
   gap: var(--ic-space-xs);
   position: absolute;
-  border: var(--ic-border-default);
-  border-radius: var(--ic-border-radius);
   align-items: center;
   background-color: var(--ic-architectural-white);
   z-index: var(--ic-z-index-date-picker);
   box-sizing: border-box;
-  box-shadow: var(--ic-elevation-overlay);
   margin-top: var(--ic-space-xxxs);
   padding: var(--ic-space-xs);
   animation: fade-in-calendar var(--ic-transition-duration-slow);
 }
 
+:host .calendar-container.show-date-input {
+  border: var(--ic-border-default);
+  border-radius: var(--ic-border-radius);
+  box-shadow: var(--ic-elevation-overlay);
+}
+
+:host .calendar-container.hide-date-input {
+  position: static;
+}
+
 :host(.small) .calendar-container {
   min-width: 17rem;
   max-width: 21.5rem;

packages/canary-web-components/src/components/ic-date-picker/ic-date-picker.stories.js

@@ -9,12 +9,14 @@ import {
   HideButtons,
   HideOutsideMonth,
   IcChangeDate,
+  IcSelectedDateChange,
   JSDates,
   MaxMin,
   MaxWidth,
   OpenAt,
   Sizes,
   Value,
+  ValueCalendarOnlyMode,
   WeekStart,
   WorkingWeek,
 } from "./story-data";
@@ -93,6 +95,15 @@ export const ValueExample = {
   height: "540px",
 };
 
+/**
+ * The `value` prop sets the date in the input field. The value can be in any format supported by the `date-format` prop, in ISO 8601 date string format (yyyy-mm-dd) or as a JavaScript Date object.
+ */
+export const ValueCalendarOnlyModeExample = {
+  render: () => ValueCalendarOnlyMode(),
+  name: "Value in calendar only mode",
+  height: "540px",
+};
+
 /**
  * If no `value` is set, the `open-at-date` prop can be used to specify the date in view when the calendar view is opened. If not set to a value, the calendar will default to showing the current date.
  * The supported formats are the same as for the `value` prop.
@@ -183,3 +194,12 @@ export const IcChangeEvent = {
   name: "IcChange event",
   height: "540px",
 };
+
+/**
+ * The date input can be hidden from the component by setting the deprecated `showDateInput` prop to `false`, thereby putting the component into "calendar only" mode. The `IcSelectedDateChange` event is emitted by the date picker when the selected date changes.
+ */
+export const IcSelectedDateChangeEvent = {
+  render: () => IcSelectedDateChange(),
+  name: "IcSelectedDateChange event",
+  height: "540px",
+};

packages/canary-web-components/src/components/ic-date-picker/story-data.ts

@@ -82,6 +82,13 @@ export const Value = (): HTMLIcDatePickerElement => {
   return datePicker;
 };
 
+export const ValueCalendarOnlyMode = (): HTMLIcDatePickerElement => {
+  const datePicker = createDatePickerElement();
+  datePicker.value = "06/06/1944";
+  datePicker.showDateInput = false;
+  return datePicker;
+};
+
 export const OpenAt = (): HTMLIcDatePickerElement => {
   const datePicker = createDatePickerElement();
   datePicker.helperText =
@@ -152,19 +159,29 @@ export const JSDates = (): HTMLIcDatePickerElement => {
   return datePicker;
 };
 
-const updateSelectedDate = (ev: CustomEvent): void => {
+const handleDateChange = (ev: CustomEvent): void => {
+  const el = document.querySelector("#selected-date");
+  let text = "Selected date: ";
+  if (ev.detail.value) {
+    text += ev.detail.value;
+  }
+  el.innerHTML = text;
+  console.log("icChange: ", ev.detail.value);
+};
+
+const handleSelectedDateChange = (ev: CustomEvent): void => {
   const el = document.querySelector("#selected-date");
   let text = "Selected date: ";
   if (ev.detail.value) {
     text += ev.detail.value;
   }
   el.innerHTML = text;
-  console.log("ic-change", ev.detail.value);
+  console.log("icSelectedDateChange: ", ev.detail.value);
 };
 
 export const IcChangeDate = (): HTMLElement => {
   const datePicker = createDatePickerElement();
-  datePicker.addEventListener("icChange", updateSelectedDate);
+  datePicker.addEventListener("icChange", handleDateChange);
   const container = document.createElement("div");
 
   const selDate = document.createElement("span");
@@ -180,3 +197,26 @@ export const IcChangeDate = (): HTMLElement => {
 
   return container;
 };
+
+export const IcSelectedDateChange = (): HTMLElement => {
+  const datePicker = createDatePickerElement();
+
+  datePicker.size = "large";
+  datePicker.showDateInput = false;
+
+  datePicker.addEventListener("icSelectedDateChange", handleSelectedDateChange);
+  const container = document.createElement("div");
+
+  const selDate = document.createElement("div");
+  selDate.innerText = "Selected date:";
+  selDate.id = "selected-date";
+
+  container.appendChild(datePicker);
+  container.appendChild(selDate);
+
+  container.style.display = "flex";
+  container.style.flexDirection = "column";
+  container.style.gap = "50px";
+
+  return container;
+};