chore(combobox, date-picker, input-date-picker, input): fix misc typo…

…s in stories, component props (#1586)

* fix(date-picker, input-date-picker): use default English locale in component & stories

* chore(input): fix theme prop description typo for readme

* chore(combobox): fix typos in stories

src/components/calcite-combobox/calcite-combobox.stories.ts

@@ -49,7 +49,7 @@ export const Simple = (): string => html`
 `;
 
 export const Single = (): string => html`
-  <div style="width:400px;max-width:100%;background-color:white;padding:100px"">
+  <div style="width:400px;max-width:100%;background-color:white;padding:100px">
     <calcite-combobox
       label="demo combobox"
       selection-mode="${select("selection-mode", ["multi", "single"], "single")}"
@@ -63,7 +63,7 @@ export const Single = (): string => html`
       <calcite-combobox-item icon="article" value="article" text-label="Article"></calcite-combobox-item>
       <calcite-combobox-item icon="attachment" value="attachment" text-label="Attachment"></calcite-combobox-item>
       <calcite-combobox-item icon="banana" value="banana" text-label="Banana"></calcite-combobox-item>
-      <calcite-combobox-item icon="battery" value="-battery" text-label="Batterycharging"></calcite-combobox-item>
+      <calcite-combobox-item icon="battery3" value="battery" text-label="Batterycharging"></calcite-combobox-item>
       <calcite-combobox-item icon="beaker" value="beaker" text-label="Beaker"></calcite-combobox-item>
       <calcite-combobox-item icon="bell" value="bell" text-label="Bell"></calcite-combobox-item>
       <calcite-combobox-item icon="bookmark" value="bookmark" text-label="Bookmark"></calcite-combobox-item>

src/components/calcite-date-picker/calcite-date-picker.stories.ts

@@ -70,7 +70,7 @@ export const Simple = (): string => html`
       value="${text("value", "2020-12-12")}"
       min="${text("min", "2016-08-09")}"
       max="${text("max", "2023-12-18")}"
-      locale="${select("locale", locales, "en-US")}"
+      locale="${select("locale", locales, "en")}"
       intl-next-month="${text("intl-next-month", "Next month")}"
       intl-prev-month="${text("intl-prev-month", "Previous month")}"
     ></calcite-date-picker>
@@ -91,7 +91,7 @@ export const DarkMode = (): string => html`
         value="${text("value", "2020-12-12")}"
         min="${text("min", "2016-08-09")}"
         max="${text("max", "2023-12-18")}"
-        locale="${select("locale", locales, "en-US")}"
+        locale="${select("locale", locales, "en")}"
         intl-next-month="${text("intl-next-month", "Next month")}"
         intl-prev-month="${text("intl-prev-month", "Previous month")}"
         range="${boolean("range", false)}"
@@ -110,10 +110,10 @@ export const Range = (): string => html`
     <calcite-date-picker
       scale="${select("scale", ["s", "m", "l"], "m")}"
       start="${text("start", "2020-12-12")}"
-      end="${text("end", "2020-14-12")}"
+      end="${text("end", "2020-12-16")}"
       min="${text("min", "2016-08-09")}"
       max="${text("max", "2023-12-18")}"
-      locale="${select("locale", locales, "en-US")}"
+      locale="${select("locale", locales, "en")}"
       next-month-label="${text("next-month-label", "Next month")}"
       prev-month-label="${text("prev-month-label", "Previous month")}"
       range="${boolean("range", true)}"

src/components/calcite-date-picker/calcite-date-picker.tsx

@@ -83,7 +83,7 @@ export class CalciteDatePicker {
   @Prop() intlNextMonth?: string = TEXT.nextMonth;
 
   /** BCP 47 language tag for desired language and country format */
-  @Prop() locale?: string = document.documentElement.lang || "en-US";
+  @Prop() locale?: string = document.documentElement.lang || "en";
 
   /** specify the scale of the date picker */
   @Prop({ reflect: true }) scale: "s" | "m" | "l" = "m";

src/components/calcite-input-date-picker/calcite-input-date-picker.stories.ts

@@ -72,7 +72,7 @@ export const Simple = (): string => html`
         value="${text("value", "2020-12-12")}"
         min="${text("min", "2016-08-09")}"
         max="${text("max", "2023-12-18")}"
-        locale="${select("locale", locales, "en-US")}"
+        locale="${select("locale", locales, "en")}"
         intl-next-month="${text("intl-next-month", "Next month")}"
         intl-prev-month="${text("intl-prev-month", "Previous month")}"
       ></calcite-input-date-picker
@@ -90,7 +90,7 @@ export const DarkMode = (): string => html`
         value="${text("value", "2020-12-12")}"
         min="${text("min", "2016-08-09")}"
         max="${text("max", "2023-12-18")}"
-        locale="${select("locale", locales, "en-US")}"
+        locale="${select("locale", locales, "en")}"
         intl-next-month="${text("intl-next-month", "Next month")}"
         intl-prev-month="${text("intl-prev-month", "Previous month")}"
         range="${boolean("range", false)}"
@@ -109,10 +109,10 @@ export const Range = (): string => html`
     <calcite-input-date-picker
       scale="${select("scale", ["s", "m", "l"], "m")}"
       start="${text("start", "2020-12-12")}"
-      end="${text("end", "2020-14-12")}"
+      end="${text("end", "2020-12-16")}"
       min="${text("min", "2016-08-09")}"
       max="${text("max", "2023-12-18")}"
-      locale="${select("locale", locales, "en-US")}"
+      locale="${select("locale", locales, "en")}"
       next-month-label="${text("next-month-label", "Next month")}"
       prev-month-label="${text("prev-month-label", "Previous month")}"
       range="${boolean("range", true)}"

src/components/calcite-input-date-picker/calcite-input-date-picker.tsx

@@ -77,7 +77,7 @@ export class CalciteInputDatePicker {
   @Prop() intlNextMonth?: string = TEXT.nextMonth;
 
   /** BCP 47 language tag for desired language and country format */
-  @Prop() locale?: string = document.documentElement.lang || "en-US";
+  @Prop() locale?: string = document.documentElement.lang || "en";
 
   /** specify the scale of the date picker */
   @Prop({ reflect: true }) scale: "s" | "m" | "l" = "m";

src/components/calcite-input/calcite-input.tsx

@@ -118,7 +118,7 @@ export class CalciteInput {
   /** optionally add suffix  **/
   @Prop() suffixText?: string;
 
-  /** specify the alignment of dropdown, defaults to left */
+  /** specify the theme (light or dark) */
   @Prop({ reflect: true }) theme: Theme;
 
   /** specify the input type */