feat(input-time-zone): add offsetStyle prop

packages/calcite-components/src/components.d.ts

@@ -53,7 +53,7 @@ import { InputTextMessages } from "./components/input-text/assets/input-text/t9n
 import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
 import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
 import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
-import { TimeZoneMode } from "./components/input-time-zone/interfaces";
+import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
 import { ListDragDetail } from "./components/list/interfaces";
 import { ItemData } from "./components/list-item/interfaces";
 import { ListMessages } from "./components/list/assets/list/t9n";
@@ -144,7 +144,7 @@ export { InputTextMessages } from "./components/input-text/assets/input-text/t9n
 export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
 export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
 export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
-export { TimeZoneMode } from "./components/input-time-zone/interfaces";
+export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
 export { ListDragDetail } from "./components/list/interfaces";
 export { ItemData } from "./components/list-item/interfaces";
 export { ListMessages } from "./components/list/assets/list/t9n";
@@ -2844,6 +2844,11 @@ export namespace Components {
           * Specifies the name of the component.  Required to pass the component's `value` on form submission.
          */
         "name": string;
+        /**
+          * Specifies how the offset will be displayed, where  `"user"` uses `UTC` or `GMT` depending on the user's locale, `"gmt"` always uses `GMT`, and `"utc"` always uses `UTC`.  This only applies to the `offset` mode.
+          * @default "user"
+         */
+        "offsetStyle": OffsetStyle;
         /**
           * When `true`, displays and positions the component.
          */
@@ -10714,6 +10719,11 @@ declare namespace LocalJSX {
           * Specifies the name of the component.  Required to pass the component's `value` on form submission.
          */
         "name"?: string;
+        /**
+          * Specifies how the offset will be displayed, where  `"user"` uses `UTC` or `GMT` depending on the user's locale, `"gmt"` always uses `GMT`, and `"utc"` always uses `UTC`.  This only applies to the `offset` mode.
+          * @default "user"
+         */
+        "offsetStyle"?: OffsetStyle;
         /**
           * Fires when the component is requested to be closed and before the closing transition begins.
          */

packages/calcite-components/src/components/alert/alert.scss

@@ -124,7 +124,7 @@ $border-style: 1px solid var(--calcite-color-border-3);
   inset-block-start: -2px;
   block-size: 2px;
   border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;
-  &:after {
+  &::after {
     @apply absolute
     top-0
     block;
@@ -299,7 +299,7 @@ $alertDurations:
   }
 }
 
-.container.focused .dismiss-progress:after {
+.container.focused .dismiss-progress::after {
   animation-play-state: paused;
 }
 

packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts

@@ -493,6 +493,66 @@ describe("calcite-input-time-zone", () => {
     currComboboxItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item");
     expect(currComboboxItem).not.toBe(prevComboboxItem);
   });
+
+  describe("offsetStyle", () => {
+    const gmtTimeZoneLocale = "en-GB";
+    const utcTimeZoneLocale = "fr";
+
+    let page: E2EPage;
+
+    async function assertItemLabelMatches(page: E2EPage, offsetMarker: "GMT" | "UTC"): Promise<void> {
+      // all items are formatted equally, so we only need to check the first one
+      const firstTimeZoneItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item");
+
+      expect(await firstTimeZoneItem.getProperty("textLabel")).toContain(offsetMarker);
+    }
+
+    beforeEach(async () => {
+      page = await newE2EPage();
+    });
+
+    describe("displays UTC or GMT based on user's locale (default)", () => {
+      it("displays GMT for GMT-preferred zone", async () => {
+        await page.setContent(
+          addTimeZoneNamePolyfill(
+            html`<calcite-input-time-zone lang="${gmtTimeZoneLocale}"></calcite-input-time-zone>`,
+          ),
+        );
+
+        await assertItemLabelMatches(page, "GMT");
+      });
+
+      it("displays UTC for UTC-preferred zone", async () => {
+        await page.setContent(
+          addTimeZoneNamePolyfill(
+            html`<calcite-input-time-zone lang="${utcTimeZoneLocale}"></calcite-input-time-zone>`,
+          ),
+        );
+
+        await assertItemLabelMatches(page, "UTC");
+      });
+    });
+
+    it("supports GMT as a style", async () => {
+      await page.setContent(
+        addTimeZoneNamePolyfill(
+          html`<calcite-input-time-zone lang="${utcTimeZoneLocale}" offset-style="gmt"></calcite-input-time-zone>`,
+        ),
+      );
+
+      await assertItemLabelMatches(page, "GMT");
+    });
+
+    it("supports UTC as a style", async () => {
+      await page.setContent(
+        addTimeZoneNamePolyfill(
+          html`<calcite-input-time-zone lang="${gmtTimeZoneLocale}" offset-style="utc"></calcite-input-time-zone>`,
+        ),
+      );
+
+      await assertItemLabelMatches(page, "UTC");
+    });
+  });
 });
 
 /**
@@ -519,6 +579,8 @@ function addTimeZoneNamePolyfill(testHtml: string): string {
 
           if (timeZoneName === "shortOffset") {
             const { timeZone } = this.originalOptions;
+            const resolved = this.resolvedOptions();
+
             let offsetString;
 
             // hardcoding GMT and time zone names for this particular test suite
@@ -532,15 +594,21 @@ function addTimeZoneNamePolyfill(testHtml: string): string {
                 offsetString = offsetString.replace("-", "+");
               }
             } else {
+              const offsetMarker = resolved.locale === "en-GB" ? "GMT" : resolved.locale === "fr" ? "UTC" : "GMT";
+
               offsetString =
-                "GMT" +
+                offsetMarker +
                 (timeZone === "America/Mexico_City" || timeZone === "Pacific/Galapagos"
                   ? "-6"
                   : timeZone === "America/Phoenix"
                     ? "-7"
-                    : timeZone === "Pacific/Guam" || timeZone === "Pacific/Chuuk"
-                      ? "+10"
-                      : "+0");
+                    : timeZone === "Europe/London"
+                      ? "+1"
+                      : timeZone === "Europe/Paris"
+                        ? "+2"
+                        : timeZone === "Pacific/Guam" || timeZone === "Pacific/Chuuk"
+                          ? "+10"
+                          : "+0");
             }
 
             originalParts.push({ type: "timeZoneName", value: offsetString });
@@ -571,6 +639,8 @@ function addTimeZoneNamePolyfill(testHtml: string): string {
           return [
             "America/Mexico_City",
             "America/Phoenix",
+            "Europe/London",
+            "Europe/Paris",
             "Pacific/Galapagos",
             "Pacific/Guam",
 

packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx

@@ -53,7 +53,7 @@ import {
   getUserTimeZoneOffset,
 } from "./utils";
 import { InputTimeZoneMessages } from "./assets/input-time-zone/t9n";
-import { TimeZoneItem, TimeZoneMode } from "./interfaces";
+import { OffsetStyle, TimeZoneItem, TimeZoneMode } from "./interfaces";
 
 @Component({
   tag: "calcite-input-time-zone",
@@ -137,6 +137,19 @@ export class InputTimeZone
     this.updateTimeZoneItemsAndSelection();
   }
 
+  /**
+   * Specifies how the offset will be displayed, where
+   *
+   * `"user"` uses `UTC` or `GMT` depending on the user's locale,
+   * `"gmt"` always uses `GMT`, and
+   * `"utc"` always uses `UTC`.
+   *
+   * This only applies to the `offset` mode.
+   *
+   * @default "user"
+   */
+  @Prop({ reflect: true }) offsetStyle: OffsetStyle = "user";
+
   /** Specifies the validation message to display under the component. */
   @Prop() validationMessage: string;
 
@@ -408,6 +421,7 @@ export class InputTimeZone
       this.referenceDate instanceof Date
         ? this.referenceDate
         : new Date(this.referenceDate ?? Date.now()),
+      this.offsetStyle,
     );
   }
 

packages/calcite-components/src/components/input-time-zone/interfaces.d.ts

@@ -13,3 +13,5 @@ export interface TimeZoneItem<T extends number | string = number | string> {
   value: T;
   filterValue: string | string[];
 }
+
+export type OffsetStyle = "user" | "utc" | "gmt";

packages/calcite-components/src/components/input-time-zone/utils.ts

@@ -1,5 +1,5 @@
 import { getDateTimeFormat, SupportedLocale } from "../../utils/locale";
-import { TimeZoneItem, TimeZoneMode, TimeZoneName } from "./interfaces";
+import { OffsetStyle, TimeZoneItem, TimeZoneMode, TimeZoneName } from "./interfaces";
 import { InputTimeZoneMessages } from "./assets/input-time-zone/t9n";
 
 const hourToMinutes = 60;
@@ -66,6 +66,7 @@ export async function createTimeZoneItems(
   messages: InputTimeZoneMessages,
   mode: TimeZoneMode,
   referenceDate: Date,
+  standardTime: OffsetStyle,
 ): Promise<TimeZoneItem[]> {
   const referenceDateInMs: number = referenceDate.getTime();
   const timeZoneNames = Intl.supportedValuesOf("timeZone");
@@ -106,10 +107,20 @@ export async function createTimeZoneItems(
           .filter((index) => index >= 0 && index < group.tzs.length);
       });
 
+      const effectiveLocale =
+        standardTime === "user"
+          ? locale
+          : // we use locales that will always yield a short offset that matches `standardTime`
+            standardTime === "utc"
+            ? "fr"
+            : "en-GB";
+
       return timeZoneGroups
         .map<TimeZoneItem<number>>(({ labelTzIndices, tzs }) => {
           const groupRepTz = tzs[0];
-          const decimalOffset = timeZoneOffsetToDecimal(getTimeZoneShortOffset(groupRepTz, locale, referenceDateInMs));
+          const decimalOffset = timeZoneOffsetToDecimal(
+            getTimeZoneShortOffset(groupRepTz, effectiveLocale, referenceDateInMs),
+          );
           const value = toOffsetValue(groupRepTz, referenceDateInMs);
           const tzLabels = labelTzIndices.map((index: number) => {
             const timeZone = tzs[index];

packages/calcite-components/src/components/link/readme.md

@@ -28,16 +28,16 @@ You can programmatically focus a `calcite-link` with the `setFocus()` method:
 
 ## Properties
 
-| Property      | Attribute       | Description                                                                                                                                                                                                                                             | Type                         | Default     |
-| ------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
-| `disabled`    | `disabled`      | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                                                | `boolean`                    | `false`     |
+| Property      | Attribute       | Description                                                                                                                                                                                                                                               | Type                         | Default     |
+| ------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| `disabled`    | `disabled`      | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                                                  | `boolean`                    | `false`     |
 | `download`    | `download`      | Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download>. | `boolean \| string`          | `false`     |
-| `href`        | `href`          | Specifies the URL of the linked resource, which can be set as an absolute or relative path.                                                                                                                                                             | `string`                     | `undefined` |
-| `iconEnd`     | `icon-end`      | Specifies an icon to display at the end of the component.                                                                                                                                                                                               | `string`                     | `undefined` |
-| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).                                                                                                                                             | `"both" \| "end" \| "start"` | `undefined` |
-| `iconStart`   | `icon-start`    | Specifies an icon to display at the start of the component.                                                                                                                                                                                             | `string`                     | `undefined` |
-| `rel`         | `rel`           | Specifies the relationship to the linked document defined in `href`.                                                                                                                                                                                    | `string`                     | `undefined` |
-| `target`      | `target`        | Specifies the frame or window to open the linked document.                                                                                                                                                                                              | `string`                     | `undefined` |
+| `href`        | `href`          | Specifies the URL of the linked resource, which can be set as an absolute or relative path.                                                                                                                                                               | `string`                     | `undefined` |
+| `iconEnd`     | `icon-end`      | Specifies an icon to display at the end of the component.                                                                                                                                                                                                 | `string`                     | `undefined` |
+| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).                                                                                                                                               | `"both" \| "end" \| "start"` | `undefined` |
+| `iconStart`   | `icon-start`    | Specifies an icon to display at the start of the component.                                                                                                                                                                                               | `string`                     | `undefined` |
+| `rel`         | `rel`           | Specifies the relationship to the linked document defined in `href`.                                                                                                                                                                                      | `string`                     | `undefined` |
+| `target`      | `target`        | Specifies the frame or window to open the linked document.                                                                                                                                                                                                | `string`                     | `undefined` |
 
 ## Methods