Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(input-time-zone): display selected time zone country in region mode selection #9988

Merged
merged 6 commits into from
Aug 13, 2024
Merged

feat(input-time-zone): display selected time zone country in region mode selection #9988

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fec2c35
feat(input-time-zone): display selected time zone country in region m…
jcfranco Aug 5, 2024
59f22d1
tidy up
jcfranco Aug 7, 2024
80f0aff
add smallest possible delay between immediate start/end calls
jcfranco Aug 12, 2024
98a90fa
ensure all stories use the same delay
jcfranco Aug 12, 2024
6b1a608
update fallback start/end to emit closer to event listeners
jcfranco Aug 12, 2024
0b6852a
update dom spec tests
jcfranco Aug 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 100 additions & 0 deletions packages/calcite-components/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,93 +9,193 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind,
import { RequestedItem } from "./components/accordion/interfaces";
import { IconNameOrString } from "./components/icon/interfaces";
import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
import { ActionMessages } from "./components/action/assets/action/t9n";
import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
import { Columns } from "./components/action-group/interfaces";
import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
import { AlertDuration, Sync } from "./components/alert/interfaces";
import { NumberingSystem } from "./utils/locale";
import { AlertMessages } from "./components/alert/assets/alert/t9n";
import { HeadingLevel } from "./components/functional/Heading";
import { BlockMessages } from "./components/block/assets/block/t9n";
import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
import { ButtonMessages } from "./components/button/assets/button/t9n";
import { CardMessages } from "./components/card/assets/card/t9n";
import { ArrowType, AutoplayType } from "./components/carousel/interfaces";
import { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
import { MutableValidityState } from "./utils/form";
import { ChipMessages } from "./components/chip/assets/chip/t9n";
import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
import { Format } from "./components/color-picker/utils";
import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
import { DateLocaleData } from "./components/date-picker/utils";
import { HoverRange } from "./utils/date";
import { DialogMessages } from "./components/dialog/assets/dialog/t9n";
import { OverlayPositioning as OverlayPositioning1 } from "./components";
import { DialogPlacement } from "./components/dialog/interfaces";
import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
import { FilterMessages } from "./components/filter/assets/filter/t9n";
import { FlowItemLikeElement } from "./components/flow/interfaces";
import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
import { ColorStop, DataSeries } from "./components/graph/interfaces";
import { HandleMessages } from "./components/handle/assets/handle/t9n";
import { HandleChange, HandleNudge } from "./components/handle/interfaces";
import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
import { InputPlacement } from "./components/input/interfaces";
import { InputMessages } from "./components/input/assets/input/t9n";
import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
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 { 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";
import { SelectionAppearance } from "./components/list/resources";
import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
import { MenuMessages } from "./components/menu/assets/menu/t9n";
import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
import { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
import { ModalMessages } from "./components/modal/assets/modal/t9n";
import { NoticeMessages } from "./components/notice/assets/notice/t9n";
import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
import { PanelMessages } from "./components/panel/assets/panel/t9n";
import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
import { ICON_TYPES } from "./components/pick-list/resources";
import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
import { PopoverMessages } from "./components/popover/assets/popover/t9n";
import { RatingMessages } from "./components/rating/assets/rating/t9n";
import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
import { DisplayMode } from "./components/sheet/interfaces";
import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
import { DragDetail } from "./utils/sortableComponent";
import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
import { Element } from "@stencil/core";
import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
import { TableMessages } from "./components/table/assets/table/t9n";
import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
import { TileSelectType } from "./components/tile-select/interfaces";
import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
import { TipMessages } from "./components/tip/assets/tip/t9n";
import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
import { ListItemAndHandle } from "./components/value-list-item/interfaces";
export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
export { RequestedItem } from "./components/accordion/interfaces";
export { IconNameOrString } from "./components/icon/interfaces";
export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
export { ActionMessages } from "./components/action/assets/action/t9n";
export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
export { Columns } from "./components/action-group/interfaces";
export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
export { AlertDuration, Sync } from "./components/alert/interfaces";
export { NumberingSystem } from "./utils/locale";
export { AlertMessages } from "./components/alert/assets/alert/t9n";
export { HeadingLevel } from "./components/functional/Heading";
export { BlockMessages } from "./components/block/assets/block/t9n";
export { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
export { ButtonMessages } from "./components/button/assets/button/t9n";
export { CardMessages } from "./components/card/assets/card/t9n";
export { ArrowType, AutoplayType } from "./components/carousel/interfaces";
export { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
export { MutableValidityState } from "./utils/form";
export { ChipMessages } from "./components/chip/assets/chip/t9n";
export { ColorValue, InternalColor } from "./components/color-picker/interfaces";
export { Format } from "./components/color-picker/utils";
export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
export { DateLocaleData } from "./components/date-picker/utils";
export { HoverRange } from "./utils/date";
export { DialogMessages } from "./components/dialog/assets/dialog/t9n";
export { OverlayPositioning as OverlayPositioning1 } from "./components";
export { DialogPlacement } from "./components/dialog/interfaces";
export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
export { FilterMessages } from "./components/filter/assets/filter/t9n";
export { FlowItemLikeElement } from "./components/flow/interfaces";
export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
export { ColorStop, DataSeries } from "./components/graph/interfaces";
export { HandleMessages } from "./components/handle/assets/handle/t9n";
export { HandleChange, HandleNudge } from "./components/handle/interfaces";
export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
export { InputPlacement } from "./components/input/interfaces";
export { InputMessages } from "./components/input/assets/input/t9n";
export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
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 { 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";
export { SelectionAppearance } from "./components/list/resources";
export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
export { MenuMessages } from "./components/menu/assets/menu/t9n";
export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
export { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
export { ModalMessages } from "./components/modal/assets/modal/t9n";
export { NoticeMessages } from "./components/notice/assets/notice/t9n";
export { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
export { PanelMessages } from "./components/panel/assets/panel/t9n";
export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
export { ICON_TYPES } from "./components/pick-list/resources";
export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
export { PopoverMessages } from "./components/popover/assets/popover/t9n";
export { RatingMessages } from "./components/rating/assets/rating/t9n";
export { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
export { DisplayMode } from "./components/sheet/interfaces";
export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
export { DragDetail } from "./utils/sortableComponent";
export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
export { Element } from "@stencil/core";
export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
export { TableMessages } from "./components/table/assets/table/t9n";
export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
export { TileSelectType } from "./components/tile-select/interfaces";
export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
export { TipMessages } from "./components/tip/assets/tip/t9n";
export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
export { TreeItemSelectDetail } from "./components/tree-item/interfaces";
export { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
export { ListItemAndHandle } from "./components/value-list-item/interfaces";
export namespace Components {
interface CalciteAccordion {
Expand Down
3 changes: 2 additions & 1 deletion packages/calcite-components/src/components/combobox-item/combobox-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
@Prop({ reflect: true }) disabled = false;

@Watch("disabled")
handleDisabledChange(): void {
@Watch("textLabel")
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jcfranco should this also watch the heading property since textLabel is deprecated?

handleComboboxItemPropsChange(): void {
this.calciteInternalComboboxItemChange.emit();
}

Expand Down
1 change: 1 addition & 0 deletions ...alcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"regionPlaceholder": "Search by city, country, region or offset",
"namePlaceholder": "Search by time zone",
"timeZoneLabel": "({offset}) {cities}",
"timeZoneRegionLabel": "{city}, {country}",
"Africa/Abidjan": "Abidjan",
"Africa/Accra": "Accra",
"Africa/Addis_Ababa": "Addis Ababa",
Expand Down
1 change: 1 addition & 0 deletions ...ite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages_en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"regionPlaceholder": "Search by city, country, region or offset",
"namePlaceholder": "Search by time zone",
"timeZoneLabel": "({offset}) {cities}",
"timeZoneRegionLabel": "{city}, {country}",
"Africa/Abidjan": "Abidjan",
"Africa/Accra": "Accra",
"Africa/Addis_Ababa": "Addis Ababa",
Expand Down
2 changes: 0 additions & 2 deletions packages/calcite-components/src/components/input-time-zone/input-time-zone.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,6 @@ export const clearable = (): string => html`
<calcite-input-time-zone mode="region" clearable value=""></calcite-input-time-zone>
`;

clearable.parameters = { chromatic: { delay: 500 } };

export const timeZoneNameMode_TestOnly = (): string => html`
<calcite-input-time-zone mode="name" open></calcite-input-time-zone>
`;
Expand Down
29 changes: 27 additions & 2 deletions packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ import { CSS } from "./resources";
import {
createTimeZoneItems,
findTimeZoneItemByProp,
getMessageOrKeyFallback,
getSelectedRegionTimeZoneLabel,
getUserTimeZoneName,
getUserTimeZoneOffset,
} from "./utils";
Expand Down Expand Up @@ -341,13 +343,32 @@ export class InputTimeZone
this.comboboxEl = el;
};

/**
* Helps override the selected item's label for region mode outside of item rendering logic to avoid flickering text change
*
* @param open
* @private
*/
private overrideSelectedLabelForRegion(open: boolean): void {
if (this.mode !== "region" || !this.selectedTimeZoneItem) {
return;
}

const { label, metadata } = this.selectedTimeZoneItem;
this.comboboxEl.selectedItems[0].textLabel = open
? label
: getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages);
}

private onComboboxBeforeClose = (event: CustomEvent): void => {
event.stopPropagation();
this.overrideSelectedLabelForRegion(false);
this.calciteInputTimeZoneBeforeClose.emit();
};

private onComboboxBeforeOpen = (event: CustomEvent): void => {
event.stopPropagation();
this.overrideSelectedLabelForRegion(true);
this.calciteInputTimeZoneBeforeOpen.emit();
};

Expand Down Expand Up @@ -465,6 +486,7 @@ export class InputTimeZone

componentDidLoad(): void {
setComponentLoaded(this);
this.overrideSelectedLabelForRegion(this.open);
}

componentDidRender(): void {
Expand Down Expand Up @@ -535,15 +557,18 @@ export class InputTimeZone

private renderRegionItems(): VNode[] {
return (this.timeZoneItems as TimeZoneItemGroup[]).flatMap(({ label, items }) => (
<calcite-combobox-item-group key={label} label={this.messages[label] || label}>
<calcite-combobox-item-group
key={label}
label={getMessageOrKeyFallback(this.messages, label)}
>
{items.map((item) => {
const selected = this.selectedTimeZoneItem === item;
const { label, value } = item;

return (
<calcite-combobox-item
data-value={value}
description={this.messages[item.metadata.country] || item.metadata.country}
description={getMessageOrKeyFallback(this.messages, item.metadata.country)}
key={label}
metadata={item.metadata}
selected={selected}
Expand Down
9 changes: 9 additions & 0 deletions packages/calcite-components/src/components/input-time-zone/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,15 @@ function getTimeZoneLabel(timeZone: string, messages: InputTimeZoneMessages): st
return messages[timeZone] || getCity(timeZone);
}

export function getSelectedRegionTimeZoneLabel(city: string, country: string, messages: InputTimeZoneMessages): string {
const template = messages.timeZoneRegionLabel;
return template.replace("{city}", city).replace("{country}", getMessageOrKeyFallback(messages, country));
}

export function getMessageOrKeyFallback(messages: InputTimeZoneMessages, key: string): string {
return messages[key] || key;
}

/**
* Exported for testing purposes only
*
Expand Down
Loading
Loading