+
Padding is fake.
Padding is fake.
Padding is fake.
Padding is fake.
+
More custom content here`; -export default { - title: "Components/Accordion", - parameters: { - notes: { - accordion: accordionReadme, - accordionItem: accordionItemReadme - }, - backgrounds: { - values: [{ name: "transparent", value: "#0000ffff" }] - } - }, - ...storyFilters() -}; - export const simple = (): string => create( "calcite-accordion", @@ -156,71 +124,36 @@ export const simple = (): string => ` ); -export const icon_NoTest = (): string => - create( - "calcite-accordion", - createAccordionAttributes(), - html` - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ iconStart: true, group: "accordion-item-1" }), - accordionItemContent - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ iconStart: true, group: "accordion-item-2" }), - accordionItemContent - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ iconStart: true, group: "accordion-item-3" }), - accordionItemContent - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ iconStart: true, group: "accordion-item-4" }).concat({ - name: "expanded", - value: true - }), - accordionItemContent - )} - ` - ); - -icon_NoTest.parameters = { - chromatic: { disableSnapshot: true } -}; - export const withActions = (): string => html`
${create(
"calcite-action",
createAttributes({ exceptions: ["icon", "class", "dir"] }).concat([
{ name: "icon", value: "banana" },
- { name: "class", value: "calcite-theme-dark" },
+ { name: "class", value: "calcite-mode-dark" },
{ name: "dir", value: "rtl" }
])
)}
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
diff --git a/src/components/action/action.tsx b/src/components/action/action.tsx
index 781e7a362e4..9e86a5f3920 100644
--- a/src/components/action/action.tsx
+++ b/src/components/action/action.tsx
@@ -1,24 +1,27 @@
import {
+ Build,
Component,
Element,
+ forceUpdate,
+ h,
Host,
Method,
Prop,
- h,
- forceUpdate,
- VNode,
- Watch,
State,
- Build
+ VNode,
+ Watch
} from "@stencil/core";
-import { Alignment, Appearance, Scale } from "../interfaces";
-import { CSS, SLOTS } from "./resources";
+import { toAriaBoolean } from "../../utils/dom";
import { guid } from "../../utils/guid";
-import { createObserver } from "../../utils/observers";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
-import { toAriaBoolean } from "../../utils/dom";
+import {
+ componentLoaded,
+ LoadableComponent,
+ setComponentLoaded,
+ setUpLoadableComponent
+} from "../../utils/loadable";
import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
-import { Messages } from "./assets/action/t9n";
+import { createObserver } from "../../utils/observers";
import {
connectMessages,
disconnectMessages,
@@ -26,12 +29,9 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
-import {
- setUpLoadableComponent,
- setComponentLoaded,
- LoadableComponent,
- componentLoaded
-} from "../../utils/loadable";
+import { Alignment, Appearance, Scale } from "../interfaces";
+import { ActionMessages } from "./assets/action/t9n";
+import { CSS, SLOTS } from "./resources";
/**
* @slot - A slot for adding a `calcite-icon`.
@@ -77,6 +77,9 @@ export class Action
/** Specifies an icon to display. */
@Prop() icon: string;
+ /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+ @Prop({ reflect: true }) iconFlipRtl = false;
+
/**
* When `true`, displays a visual indicator.
*/
@@ -112,12 +115,12 @@ export class Action
*
* @internal
*/
- @Prop({ mutable: true }) messages: Messages;
+ @Prop({ mutable: true }) messages: ActionMessages;
/**
* Use this property to override individual strings used by the component.
*/
- @Prop({ mutable: true }) messageOverrides: PartialHello there!
Get success!
@@ -231,8 +231,8 @@ describe("calcite-alert", () => {
expect(progressBarStyles).toEqual("white");
});
- describe("when theme attribute is not provided", () => {
- it("should render alert dismiss progress bar with default value tied to light theme", async () => {
+ describe("when mode attribute is not provided", () => {
+ it("should render alert dismiss progress bar with default value tied to light mode", async () => {
page = await newE2EPage({ html: alertSnippet });
await page.waitForTimeout(animationDurationInMs);
alertDismissProgressBar = await page.find("calcite-alert[open] >>> .alert-dismiss-progress");
@@ -241,10 +241,10 @@ describe("calcite-alert", () => {
});
});
- describe("when theme attribute is dark", () => {
- it("should render alert dismiss progress bar with value tied to dark theme", async () => {
+ describe("when mode attribute is dark", () => {
+ it("should render alert dismiss progress bar with value tied to dark mode", async () => {
page = await newE2EPage({
- html: `open alert
-
+
${alertContent}
diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss
index 6931251f01a..796acee088f 100644
--- a/src/components/alert/alert.scss
+++ b/src/components/alert/alert.scss
@@ -283,19 +283,19 @@
@apply flex self-stretch;
}
-$alertColors: "blue" var(--calcite-ui-info), "red" var(--calcite-ui-danger), "yellow" var(--calcite-ui-warning),
- "green" var(--calcite-ui-success);
+$alertKinds: "brand" var(--calcite-ui-brand), "info" var(--calcite-ui-info), "danger" var(--calcite-ui-danger),
+ "success" var(--calcite-ui-success), "warning" var(--calcite-ui-warning);
-@each $alertColor in $alertColors {
- $name: nth($alertColor, 1);
- $color: nth($alertColor, 2);
+@each $alertKind in $alertKinds {
+ $name: nth($alertKind, 1);
+ $kind: nth($alertKind, 2);
- :host([color="#{$name}"]) {
+ :host([kind="#{$name}"]) {
.container {
- border-block-start-color: $color;
+ border-block-start-color: $kind;
& .alert-icon {
- color: $color;
+ color: $kind;
}
}
}
@@ -323,3 +323,11 @@ $alertDurations: "fast" 6000ms, "medium" 10000ms, "slow" 14000ms;
@apply w-full opacity-100;
}
}
+
+/**
+ * Conditional styles for when Alert is slotted in Shell
+ */
+
+.container.slotted-in-shell {
+ position: absolute;
+}
diff --git a/src/components/alert/alert.stories.ts b/src/components/alert/alert.stories.ts
index 3230b97a415..810b4b0047e 100644
--- a/src/components/alert/alert.stories.ts
+++ b/src/components/alert/alert.stories.ts
@@ -1,8 +1,8 @@
import { select } from "@storybook/addon-knobs";
import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
+import { modesDarkDefault } from "../../../.storybook/utils";
import { html } from "../../../support/formatting";
+import readme from "./readme.md";
export default {
title: "Components/Alert",
@@ -23,7 +23,7 @@ auto-close-duration="${select("auto-close-duration", ["fast", "medium", "slow"],
placement="${select("placement", ["bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end"], "bottom")}"
${boolean("open", true)}
scale="${select("scale", ["s", "m", "l"], "m")}"
-color="${select("color", ["green", "red", "yellow", "blue"], "blue")}">
+kind="${select("kind", ["brand", "info", "danger", "success", "warning"], "brand")}">
${alertSnippet}
`
+ html: `${alertSnippet}
`
});
await page.waitForTimeout(animationDurationInMs);
alertDismissProgressBar = await page.find("calcite-alert[open] >>> .alert-dismiss-progress");
@@ -379,7 +379,7 @@ describe("calcite-alert", () => {
Here's a general bit of information
Some kind of contextually relevant content
@@ -46,7 +46,7 @@ export const titleMessage = (): string => html`
)}"
${boolean("open", true)}
scale="${select("scale", ["s", "m", "l"], "m")}"
- color="${select("color", ["green", "red", "yellow", "blue"], "red")}"
+ kind="${select("kind", ["brand", "info", "danger", "success", "warning"], "danger")}"
>
View layer
@@ -88,7 +88,7 @@ export const message = (): string => html`
)}"
${boolean("open", true)}
scale="${select("scale", ["s", "m", "l"], "m")}"
- color="${select("color", ["green", "red", "yellow", "blue"], "yellow")}"
+ kind="${select("kind", ["brand", "info", "danger", "success", "warning"], "warning")}"
>
View layer
@@ -124,26 +124,30 @@ export const queue_NoTest = (): string => html`
Close Alert 1
- Close Alert 2
- Close Alert 3
-
+
View layer
-
+
View layer
-
+
View layer
@@ -155,14 +159,14 @@ queue_NoTest.parameters = {
chromatic: { disableSnapshot: true }
};
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
html`
)}"
${boolean("open", true)}
scale="${select("scale", ["s", "m", "l"], "m")}"
- color="${select("color", ["green", "red", "yellow", "blue"], "red")}"
+ kind="${select("kind", ["brand", "info", "danger", "success", "warning"], "danger")}"
>
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
export const actionsEndNoQueue_TestOnly = (): string => html`
-
+
+
-
+
+
Take action
diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx
index 1f708610d67..6a566ce31d9 100644
--- a/src/components/alert/alert.tsx
+++ b/src/components/alert/alert.tsx
@@ -15,23 +15,27 @@ import {
import {
getSlotted,
setRequestedIcon,
- toAriaBoolean,
- slotChangeHasAssignedElement
+ slotChangeHasAssignedElement,
+ toAriaBoolean
} from "../../utils/dom";
-import { CSS, DURATIONS, SLOTS } from "./resources";
-import { Scale } from "../interfaces";
-import { AlertDuration, AlertPlacement, StatusColor, StatusIcons, Sync } from "./interfaces";
+import { MenuPlacement } from "../../utils/floating-ui";
import {
- OpenCloseComponent,
- connectOpenCloseComponent,
- disconnectOpenCloseComponent
-} from "../../utils/openCloseComponent";
+ componentLoaded,
+ LoadableComponent,
+ setComponentLoaded,
+ setUpLoadableComponent
+} from "../../utils/loadable";
import {
connectLocalized,
disconnectLocalized,
NumberingSystem,
numberStringFormatter
} from "../../utils/locale";
+import {
+ connectOpenCloseComponent,
+ disconnectOpenCloseComponent,
+ OpenCloseComponent
+} from "../../utils/openCloseComponent";
import {
connectMessages,
disconnectMessages,
@@ -39,13 +43,11 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
-import { Messages } from "./assets/alert/t9n";
-import {
- setUpLoadableComponent,
- setComponentLoaded,
- LoadableComponent,
- componentLoaded
-} from "../../utils/loadable";
+import { Kind, Scale } from "../interfaces";
+import { KindIcons } from "../resources";
+import { AlertMessages } from "./assets/alert/t9n";
+import { AlertDuration, Sync } from "./interfaces";
+import { CSS, DURATIONS, SLOTS } from "./resources";
/**
* Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
@@ -56,7 +58,7 @@ import {
* @slot title - A slot for adding a title to the component.
* @slot message - A slot for adding main text to the component.
* @slot link - A slot for adding a `calcite-action` to take from the component such as: "undo", "try again", "link to page", etc.
- * @slot actions-end - A slot for adding actions to the end of the component. It is recommended to use two or fewer actions.
+ * @slot actions-end - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or fewer actions.
*/
@Component({
@@ -100,8 +102,11 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
/** Specifies the duration before the component automatically closes (only use with `autoClose`). */
@Prop({ reflect: true }) autoCloseDuration: AlertDuration = this.autoClose ? "medium" : null;
- /** Specifies the color for the component (will apply to top border and icon). */
- @Prop({ reflect: true }) color: StatusColor = "blue";
+ /** Specifies the kind of the component (will apply to top border and icon). */
+ @Prop({ reflect: true }) kind: Extract<
+ "brand" | "danger" | "info" | "success" | "warning",
+ Kind
+ > = "brand";
/**
* When `true`, shows a default recommended icon. Alternatively,
@@ -109,6 +114,9 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
*/
@Prop({ reflect: true }) icon: string | boolean;
+ /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+ @Prop({ reflect: true }) iconFlipRtl = false;
+
/** Specifies an accessible name for the component. */
@Prop() label!: string;
@@ -118,7 +126,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
@Prop({ reflect: true }) numberingSystem: NumberingSystem;
/** Specifies the placement of the component */
- @Prop({ reflect: true }) placement: AlertPlacement = "bottom";
+ @Prop({ reflect: true }) placement: MenuPlacement = "bottom";
/** Specifies the size of the component. */
@Prop({ reflect: true }) scale: Scale = "m";
@@ -128,22 +136,30 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
*
* @internal
*/
- @Prop({ mutable: true }) messages: Messages;
+ @Prop({ mutable: true }) messages: AlertMessages;
/**
* Use this property to override individual strings used by the component.
*/
- @Prop({ mutable: true }) messageOverrides: Partial;
+ @Prop({ mutable: true }) messageOverrides: Partial;
@Watch("messageOverrides")
onMessagesChange(): void {
/* wired up by t9n util */
}
+ /**
+ * This internal property, managed by a containing calcite-shell, is used
+ * to inform the component if special configuration or styles are needed
+ *
+ * @internal
+ */
+ @Prop({ mutable: true }) slottedInShell: boolean;
+
@Watch("icon")
- @Watch("color")
+ @Watch("kind")
updateRequestedIcon(): void {
- this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
+ this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
}
@Watch("autoCloseDuration")
@@ -152,7 +168,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
window.clearTimeout(this.autoCloseTimeoutId);
this.autoCloseTimeoutId = window.setTimeout(
() => this.closeAlert(),
- DURATIONS[this.autoCloseDuration] - (Date.now() - this.trackTimer)
+ DURATIONS[this.autoCloseDuration]
);
}
}
@@ -176,7 +192,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
async componentWillLoad(): Promise {
setUpLoadableComponent(this);
- this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
+ this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
await setUpMessages(this);
}
@@ -190,6 +206,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
disconnectOpenCloseComponent(this);
disconnectLocalized(this);
disconnectMessages(this);
+ this.slottedInShell = false;
}
render(): VNode {
@@ -223,7 +240,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
);
- const { open, autoClose, label, placement, queued, requestedIcon } = this;
+ const { open, autoClose, label, placement, queued, requestedIcon, iconFlipRtl } = this;
const role = autoClose ? "alert" : "alertdialog";
const hidden = !open;
@@ -246,15 +263,20 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
class={{
container: true,
queued,
- [placement]: true
+ [placement]: true,
+ [CSS.slottedInShell]: this.slottedInShell
}}
- onPointerOut={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null}
- onPointerOver={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null}
+ onPointerEnter={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null}
+ onPointerLeave={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null}
ref={this.setTransitionEl}
>
{requestedIcon ? (
) : null}
Something failed
That thing you wanted to do didn't work as expected
@@ -67,7 +67,7 @@ export const messageLink = (): string => html`
)}"
${boolean("open", true)}
scale="${select("scale", ["s", "m", "l"], "m")}"
- color="${select("color", ["green", "red", "yellow", "blue"], "green")}"
+ kind="${select("kind", ["brand", "info", "danger", "success", "warning"], "success")}"
>
Successfully duplicated 2019 Sales Demographics by County layer
Network connection interruption detected
@@ -106,7 +106,7 @@ export const customIcon = (): string => html`
)}"
${boolean("open", true)}
scale="${select("scale", ["s", "m", "l"], "m")}"
- color="${select("color", ["green", "red", "yellow", "blue"], "green")}"
+ kind="${select("kind", ["brand", "info", "danger", "success", "warning"], "success")}"
>
Successfully duplicated 2019 Sales Demographics by County layer
Close or remove from queue
-Your great thing happened
Successfully duplicated 2019 Sales Demographics by County layer
Your great thing happened
Successfully duplicated 2019 Sales Demographics by County layer
That didn't work out
That thing you wanted to do didn't work
Something failed
That thing you wanted to do didn't work as expected
@@ -181,7 +185,7 @@ export const darkThemeRTL_TestOnly = (): string => html`
Hello there!
Do you really want to proceed?
Hello there, alert one!
Do you really want to proceed?
Hello there, alert two!
Do you really want to proceed?
Here's a general bit of information
Some kind of contextually relevant content
@@ -333,7 +355,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
//
//--------------------------------------------------------------------------
- /** Sets focus on the component. */
+ /** Sets focus on the component's "close" button (the first focusable item). */
@Method()
async setFocus(): Promise {
await componentLoaded(this);
@@ -362,7 +384,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
updateMessages(this, this.effectiveLocale);
}
- @State() defaultMessages: Messages;
+ @State() defaultMessages: AlertMessages;
@State() hasEndActions = false;
@@ -382,9 +404,13 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
private queueTimeout: number;
- private trackTimer: number;
+ private initialOpenTime: number;
+
+ private lastMouseOverBegin: number;
- private remainingPausedTimeout = 0;
+ private totalOpenTime = 0;
+
+ private totalHoverTime = 0;
/** the computed icon to render */
/* @internal */
@@ -410,7 +436,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
if (this.queue?.[0] === this.el) {
this.openAlert();
if (this.autoClose && !this.autoCloseTimeoutId) {
- this.trackTimer = Date.now();
+ this.initialOpenTime = Date.now();
this.autoCloseTimeoutId = window.setTimeout(
() => this.closeAlert(),
DURATIONS[this.autoCloseDuration]
@@ -459,13 +485,15 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
private handleMouseOver = (): void => {
window.clearTimeout(this.autoCloseTimeoutId);
- this.remainingPausedTimeout = DURATIONS[this.autoCloseDuration] - Date.now() - this.trackTimer;
+ this.totalOpenTime = Date.now() - this.initialOpenTime;
+ this.lastMouseOverBegin = Date.now();
};
private handleMouseLeave = (): void => {
- this.autoCloseTimeoutId = window.setTimeout(
- () => this.closeAlert(),
- this.remainingPausedTimeout
- );
+ const hoverDuration = Date.now() - this.lastMouseOverBegin;
+ const timeRemaining =
+ DURATIONS[this.autoCloseDuration] - this.totalOpenTime + this.totalHoverTime;
+ this.totalHoverTime = this.totalHoverTime ? hoverDuration + this.totalHoverTime : hoverDuration;
+ this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), timeRemaining);
};
}
diff --git a/src/components/alert/interfaces.ts b/src/components/alert/interfaces.ts
index 6f2d01f4d8a..0ffe0b27966 100644
--- a/src/components/alert/interfaces.ts
+++ b/src/components/alert/interfaces.ts
@@ -1,12 +1,4 @@
-export type StatusColor = "blue" | "green" | "red" | "yellow";
export type AlertDuration = "fast" | "medium" | "slow";
-export type AlertPlacement = "bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start";
-export enum StatusIcons {
- green = "checkCircle",
- yellow = "exclamationMarkTriangle",
- red = "exclamationMarkTriangle",
- blue = "lightbulb"
-}
export interface Sync {
queue: HTMLCalciteAlertElement[];
}
diff --git a/src/components/alert/readme.md b/src/components/alert/readme.md
index f243b1047a9..9825a6983dc 100644
--- a/src/components/alert/readme.md
+++ b/src/components/alert/readme.md
@@ -22,10 +22,11 @@ A single instance of an alert. Multiple alerts will aggregate in a queue.
| -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
| `autoClose` | `auto-close` | When `true`, the component closes automatically (recommended for passive, non-blocking alerts). | `boolean` | `false` |
| `autoCloseDuration` | `auto-close-duration` | Specifies the duration before the component automatically closes (only use with `autoClose`). | `"fast" \| "medium" \| "slow"` | `this.autoClose ? "medium" : null` |
-| `color` | `color` | Specifies the color for the component (will apply to top border and icon). | `"blue" \| "green" \| "red" \| "yellow"` | `"blue"` |
| `icon` | `icon` | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | `boolean \| string` | `undefined` |
+| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` |
+| `kind` | `kind` | Specifies the kind of the component (will apply to top border and icon). | `"brand" \| "danger" \| "info" \| "success" \| "warning"` | `"brand"` |
| `label` _(required)_ | `label` | Specifies an accessible name for the component. | `string` | `undefined` |
-| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `AlertMessages` | `undefined` |
| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined` |
| `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` |
| `placement` | `placement` | Specifies the placement of the component | `"bottom" \| "bottom-end" \| "bottom-start" \| "top" \| "top-end" \| "top-start"` | `"bottom"` |
@@ -44,7 +45,7 @@ A single instance of an alert. Multiple alerts will aggregate in a queue.
### `setFocus() => Promise`
-Sets focus on the component.
+Sets focus on the component's "close" button (the first focusable item).
#### Returns
@@ -54,7 +55,7 @@ Type: `Promise`
| Slot | Description |
| --------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `"actions-end"` | A slot for adding actions to the end of the component. It is recommended to use two or fewer actions. |
+| `"actions-end"` | A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or fewer actions. |
| `"link"` | A slot for adding a `calcite-action` to take from the component such as: "undo", "try again", "link to page", etc. |
| `"message"` | A slot for adding main text to the component. |
| `"title"` | A slot for adding a title to the component. |
diff --git a/src/components/alert/resources.ts b/src/components/alert/resources.ts
index 4c375dd2fca..2ca8f47d0cd 100644
--- a/src/components/alert/resources.ts
+++ b/src/components/alert/resources.ts
@@ -14,5 +14,6 @@ export const SLOTS = {
export const CSS = {
actionsEnd: "actions-end",
container: "container",
- close: "alert-close"
+ close: "alert-close",
+ slottedInShell: "slotted-in-shell"
};
diff --git a/src/components/avatar/avatar.stories.ts b/src/components/avatar/avatar.stories.ts
index 4aebcb94a76..4cd38b2313c 100644
--- a/src/components/avatar/avatar.stories.ts
+++ b/src/components/avatar/avatar.stories.ts
@@ -1,10 +1,10 @@
import { select, text } from "@storybook/addon-knobs";
-import { themesDarkDefault } from "../../../.storybook/utils";
+import { storyFilters } from "../../../.storybook/helpers";
import { placeholderImage } from "../../../.storybook/placeholderImage";
+import { modesDarkDefault } from "../../../.storybook/utils";
import { html } from "../../../support/formatting";
import readme from "./readme.md";
-import { storyFilters } from "../../../.storybook/helpers";
export default {
title: "Components/Avatar",
@@ -35,10 +35,10 @@ export const missingThumbnail = (): string => html`
`;
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
html`
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
index 7214d32e291..c54345497e0 100644
--- a/src/components/avatar/avatar.tsx
+++ b/src/components/avatar/avatar.tsx
@@ -1,8 +1,8 @@
import { Component, Element, h, Prop, State } from "@stencil/core";
+import { getModeName } from "../../utils/dom";
import { isValidHex } from "../color-picker/utils";
import { Scale } from "../interfaces";
import { hexToHue, stringToHex } from "./utils";
-import { getThemeName } from "../../utils/dom";
@Component({
tag: "calcite-avatar",
@@ -94,7 +94,7 @@ export class Avatar {
*/
private generateFillColor() {
const { userId, username, fullName, el } = this;
- const theme = getThemeName(el);
+ const theme = getModeName(el);
const id = userId && `#${userId.substr(userId.length - 6)}`;
const name = username || fullName || "";
const hex = id && isValidHex(id) ? id : stringToHex(name);
diff --git a/src/components/block-section/block-section.tsx b/src/components/block-section/block-section.tsx
index 0846e1b6a8d..1a49b53789f 100644
--- a/src/components/block-section/block-section.tsx
+++ b/src/components/block-section/block-section.tsx
@@ -3,20 +3,18 @@ import {
Element,
Event,
EventEmitter,
- Prop,
h,
- VNode,
Host,
- Watch,
- State
+ Prop,
+ State,
+ VNode,
+ Watch
} from "@stencil/core";
import { getElementDir, toAriaBoolean } from "../../utils/dom";
-import { CSS, ICONS } from "./resources";
-import { BlockSectionToggleDisplay } from "./interfaces";
-import { Status } from "../interfaces";
import { guid } from "../../utils/guid";
import { isActivationKey } from "../../utils/key";
+import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
import {
connectMessages,
disconnectMessages,
@@ -24,11 +22,13 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
-import { Messages } from "./assets/block-section/t9n";
-import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
+import { Status } from "../interfaces";
+import { BlockSectionMessages } from "./assets/block-section/t9n";
+import { BlockSectionToggleDisplay } from "./interfaces";
+import { CSS, ICONS } from "./resources";
/**
- * @slot - A slot for adding content to the component.
+ * @slot - A slot for adding custom content.
*/
@Component({
tag: "calcite-block-section",
@@ -72,12 +72,12 @@ export class BlockSection implements LocalizedComponent, T9nComponent {
*
* @internal
*/
- @Prop({ mutable: true }) messages: Messages;
+ @Prop({ mutable: true }) messages: BlockSectionMessages;
/**
* Use this property to override individual strings used by the component.
*/
- @Prop({ mutable: true }) messageOverrides: Partial;
+ @Prop({ mutable: true }) messageOverrides: Partial;
@Watch("messageOverrides")
onMessagesChange(): void {
@@ -101,7 +101,7 @@ export class BlockSection implements LocalizedComponent, T9nComponent {
updateMessages(this, this.effectiveLocale);
}
- @State() defaultMessages: Messages;
+ @State() defaultMessages: BlockSectionMessages;
// --------------------------------------------------------------------------
//
diff --git a/src/components/block-section/readme.md b/src/components/block-section/readme.md
index 5676ab2b4f9..48728bfefc2 100644
--- a/src/components/block-section/readme.md
+++ b/src/components/block-section/readme.md
@@ -8,7 +8,7 @@ The `calcite-block-section` component is a child element of `calcite-block`. Sec
| Property | Attribute | Description | Type | Default |
| ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
-| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `BlockSectionMessages` | `undefined` |
| `open` | `open` | When `true`, expands the component and its contents. | `boolean` | `false` |
| `status` | `status` | Displays a status-related indicator icon. | `"idle" \| "invalid" \| "valid"` | `undefined` |
| `text` | `text` | The component header text. | `string` | `undefined` |
@@ -22,9 +22,9 @@ The `calcite-block-section` component is a child element of `calcite-block`. Sec
## Slots
-| Slot | Description |
-| ---- | ------------------------------------------- |
-| | A slot for adding content to the component. |
+| Slot | Description |
+| ---- | --------------------------------- |
+| | A slot for adding custom content. |
## Dependencies
diff --git a/src/components/block/block.e2e.ts b/src/components/block/block.e2e.ts
index af56fdb0cad..779456c3fad 100644
--- a/src/components/block/block.e2e.ts
+++ b/src/components/block/block.e2e.ts
@@ -238,6 +238,38 @@ describe("calcite-block", () => {
expect(collapsibleIcon).toBeNull();
});
});
+ it("should allow the CSS custom property to be overridden when applied to :root", async () => {
+ const overrideStyle = "0px";
+ const page = await newE2EPage();
+ await page.setContent(
+ `
+
+ `
+ );
+ const content = await page.find(`calcite-block >>> .${CSS.content}`);
+ const contentStyles = await content.getComputedStyle();
+ const contentPadding = await contentStyles.getPropertyValue("padding");
+ expect(contentPadding).toEqual(overrideStyle);
+ });
+
+ it("should allow the CSS custom property to be overridden when applied to element", async () => {
+ const overrideStyle = "0px";
+ const page = await newE2EPage();
+ await page.setContent(
+ `
+ `
+ );
+ const content = await page.find(`calcite-block >>> .${CSS.content}`);
+ const contentStyles = await content.getComputedStyle();
+ const contentPadding = await contentStyles.getPropertyValue("padding");
+ expect(contentPadding).toEqual(overrideStyle);
+ });
it("supports translation", () => t9n("calcite-block"));
});
diff --git a/src/components/block/block.scss b/src/components/block/block.scss
index 115edb07e65..b7499af1950 100644
--- a/src/components/block/block.scss
+++ b/src/components/block/block.scss
@@ -1,3 +1,11 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-block-padding: Specifies the padding of the block `default` slot.
+ */
+
:host {
@extend %component-host;
@extend %component-spacing;
diff --git a/src/components/block/block.stories.ts b/src/components/block/block.stories.ts
index 7893a899019..0f14620a15d 100644
--- a/src/components/block/block.stories.ts
+++ b/src/components/block/block.stories.ts
@@ -162,13 +162,13 @@ export const paddingDisabled_TestOnly = (): string => html`
`;
-export const darkThemeRTL_TestOnly = (): string =>
+export const darkModeRTL_TestOnly = (): string =>
create(
"calcite-block",
createBlockAttributes({ exceptions: ["dir"] }).concat(
{
name: "class",
- value: "calcite-theme-dark"
+ value: "calcite-mode-dark"
},
{ name: "dir", value: "rtl" }
),
diff --git a/src/components/block/block.tsx b/src/components/block/block.tsx
index 7e7848b0b10..91bb7bd6f35 100644
--- a/src/components/block/block.tsx
+++ b/src/components/block/block.tsx
@@ -10,17 +10,15 @@ import {
VNode,
Watch
} from "@stencil/core";
-import { CSS, ICONS, SLOTS } from "./resources";
-import { getSlotted, toAriaBoolean } from "../../utils/dom";
-import { Heading, HeadingLevel } from "../functional/Heading";
-import { Status } from "../interfaces";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import { getSlotted, toAriaBoolean } from "../../utils/dom";
import { guid } from "../../utils/guid";
+import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
import {
connectMessages,
disconnectMessages,
@@ -28,14 +26,16 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
-import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
-import { Messages } from "./assets/block/t9n";
+import { Heading, HeadingLevel } from "../functional/Heading";
+import { Status } from "../interfaces";
+import { BlockMessages } from "./assets/block/t9n";
+import { CSS, ICONS, SLOTS } from "./resources";
/**
- * @slot - A slot for adding content to the component.
+ * @slot - A slot for adding custom content.
* @slot icon - A slot for adding a leading header icon with `calcite-icon`.
* @slot control - A slot for adding a single HTML input element in a header.
- * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown.
+ * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.
*/
@Component({
tag: "calcite-block",
@@ -102,12 +102,12 @@ export class Block
*
* @internal
*/
- @Prop({ mutable: true }) messages: Messages;
+ @Prop({ mutable: true }) messages: BlockMessages;
/**
* Use this property to override individual strings used by the component.
*/
- @Prop({ mutable: true }) messageOverrides: Partial;
+ @Prop({ mutable: true }) messageOverrides: Partial;
@Watch("messageOverrides")
onMessagesChange(): void {
@@ -131,7 +131,7 @@ export class Block
updateMessages(this, this.effectiveLocale);
}
- @State() defaultMessages: Messages;
+ @State() defaultMessages: BlockMessages;
// --------------------------------------------------------------------------
//
diff --git a/src/components/block/readme.md b/src/components/block/readme.md
index 1a6d6124156..07b3ffb8c2b 100644
--- a/src/components/block/readme.md
+++ b/src/components/block/readme.md
@@ -65,7 +65,7 @@ Renders a header and icon with the icon.
| `heading` _(required)_ | `heading` | The component header text. | `string` | `undefined` |
| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` |
-| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `BlockMessages` | `undefined` |
| `open` | `open` | When `true`, expands the component and its contents. | `boolean` | `false` |
| `status` | `status` | Displays a status-related indicator icon. | `"idle" \| "invalid" \| "valid"` | `undefined` |
@@ -77,12 +77,18 @@ Renders a header and icon with the icon.
## Slots
-| Slot | Description |
-| ----------------------- | ---------------------------------------------------------------------------- |
-| | A slot for adding content to the component. |
-| `"control"` | A slot for adding a single HTML input element in a header. |
-| `"header-menu-actions"` | A slot for adding an overflow menu with `calcite-action`s inside a dropdown. |
-| `"icon"` | A slot for adding a leading header icon with `calcite-icon`. |
+| Slot | Description |
+| ----------------------- | --------------------------------------------------------------------------------- |
+| | A slot for adding custom content. |
+| `"control"` | A slot for adding a single HTML input element in a header. |
+| `"header-menu-actions"` | A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu. |
+| `"icon"` | A slot for adding a leading header icon with `calcite-icon`. |
+
+## CSS Custom Properties
+
+| Name | Description |
+| ------------------------- | -------------------------------------------------- |
+| `--calcite-block-padding` | Specifies the padding of the block `default` slot. |
## Dependencies
diff --git a/src/components/button/button.e2e.ts b/src/components/button/button.e2e.ts
index 48a37bd6df2..3952540f96f 100644
--- a/src/components/button/button.e2e.ts
+++ b/src/components/button/button.e2e.ts
@@ -20,8 +20,8 @@ describe("calcite-button", () => {
defaultValue: undefined
},
{
- propertyName: "color",
- defaultValue: "blue"
+ propertyName: "kind",
+ defaultValue: "brand"
},
{
propertyName: "disabled",
@@ -99,7 +99,7 @@ describe("calcite-button", () => {
const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
expect(element).toHaveAttribute(HYDRATED_ATTR);
- expect(element).toEqualAttribute("color", "blue");
+ expect(element).toEqualAttribute("kind", "brand");
expect(element).toEqualAttribute("appearance", "solid");
expect(element).toEqualAttribute("scale", "m");
expect(element).toEqualAttribute("width", "auto");
@@ -115,7 +115,7 @@ describe("calcite-button", () => {
it("is accessible: href", async () => accessible(`Continue `));
it("is accessible: style props", async () =>
- accessible(`Continue `));
+ accessible(`Continue `));
it("is accessible: href and target", async () =>
accessible(
@@ -160,7 +160,7 @@ describe("calcite-button", () => {
const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
expect(element).toHaveAttribute(HYDRATED_ATTR);
- expect(element).toEqualAttribute("color", "blue");
+ expect(element).toEqualAttribute("kind", "brand");
expect(element).toEqualAttribute("appearance", "solid");
expect(element).toEqualAttribute("scale", "m");
expect(element).toEqualAttribute("width", "auto");
@@ -174,7 +174,7 @@ describe("calcite-button", () => {
it("renders as a button with requested props", async () => {
const page = await newE2EPage();
await page.setContent(
- `Continue `
+ `Continue `
);
const element = await page.find("calcite-button");
const elementAsButton = await page.find("calcite-button >>> button");
@@ -184,7 +184,7 @@ describe("calcite-button", () => {
const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
expect(element).toHaveAttribute(HYDRATED_ATTR);
- expect(element).toEqualAttribute("color", "red");
+ expect(element).toEqualAttribute("kind", "danger");
expect(element).toEqualAttribute("appearance", "outline");
expect(element).toEqualAttribute("scale", "l");
expect(element).toEqualAttribute("width", "half");
@@ -198,7 +198,7 @@ describe("calcite-button", () => {
it("renders as a link with requested props", async () => {
const page = await newE2EPage();
await page.setContent(
- `Continue `
+ `Continue `
);
const element = await page.find("calcite-button");
const elementAsButton = await page.find("calcite-button >>> button");
@@ -208,7 +208,7 @@ describe("calcite-button", () => {
const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
expect(element).toHaveAttribute(HYDRATED_ATTR);
- expect(element).toEqualAttribute("color", "red");
+ expect(element).toEqualAttribute("kind", "danger");
expect(element).toEqualAttribute("appearance", "outline");
expect(element).toEqualAttribute("scale", "l");
expect(element).toEqualAttribute("width", "half");
@@ -414,14 +414,14 @@ describe("calcite-button", () => {
expect(elementAsButton).not.toHaveClass(CSS.contentSlotted);
});
- describe("CSS properties for light/dark themes", () => {
+ describe("CSS properties for light/dark mode", () => {
const buttonSnippet = `
Layers
@@ -446,8 +446,8 @@ describe("calcite-button", () => {
expect(buttonStyles.active).toEqual("rgba(1, 20, 44, 0.1");
});
- describe("when theme attribute is not provided", () => {
- it("should render button pseudo classes with default values tied to light theme", async () => {
+ describe("when mode attribute is not provided", () => {
+ it("should render button pseudo classes with default values tied to light mode", async () => {
page = await newE2EPage({ html: buttonSnippet });
buttonEl = await page.find("calcite-button >>> button");
await buttonEl.focus();
@@ -462,10 +462,10 @@ describe("calcite-button", () => {
});
});
- describe("when theme attribute is dark", () => {
- it("should render button pseudo classes with value tied to dark theme", async () => {
+ describe("when mode attribute is dark", () => {
+ it("should render button pseudo classes with value tied to dark mode", async () => {
page = await newE2EPage({
- html: ` html`
["start", "end", "center", "space-between", "icon-start-space-between", "icon-end-space-between"],
"center"
)}"
- appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
- color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+ appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
+ kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
icon-start="${select("icon-start", iconNames, iconNames[0])}"
scale="${select("scale", ["s", "m", "l"], "m")}"
${boolean("round", false)}
@@ -56,9 +56,9 @@ export const withIconEnd = (): string => html`
["start", "end", "center", "space-between", "icon-start-space-between", "icon-end-space-between"],
"center"
)}"
- appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
+ appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
icon-end="${select("icon-end", iconNames, iconNames[0])}"
- color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+ kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
scale="${select("scale", ["s", "m", "l"], "m")}"
${boolean("round", false)}
href="${text("href", "")}"
@@ -79,8 +79,8 @@ export const withIconStartAndIconEnd = (): string => html`
["start", "end", "center", "space-between", "icon-start-space-between", "icon-end-space-between"],
"center"
)}"
- appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
- color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+ appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
+ kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
icon-start="${select("icon-start", iconNames, iconNames[0])}"
icon-end="${select("icon-end", iconNames, iconNames[0])}"
scale="${select("scale", ["s", "m", "l"], "m")}"
@@ -121,15 +121,15 @@ export const sideBySide_TestOnly = (): string => html`
${text("text", "Back")}
${text("text-2", "Some long string")}
@@ -137,12 +137,12 @@ export const sideBySide_TestOnly = (): string => html`
`;
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
html`
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
+
+export const outlineNeutralBorderColor_TestOnly = (): string =>
+ html`Test `;
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 92bd41e8534..e3acfb5251d 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -1,14 +1,17 @@
+import { Build, Component, Element, h, Method, Prop, State, VNode, Watch } from "@stencil/core";
import "form-request-submit-polyfill/form-request-submit-polyfill";
-import { Component, Element, h, Method, Prop, Build, State, VNode, Watch } from "@stencil/core";
-import { CSS } from "./resources";
import { closestElementCrossShadowBoundary } from "../../utils/dom";
-import { ButtonAlignment, ButtonAppearance, ButtonColor } from "./interfaces";
-import { FlipContext, Scale, Width } from "../interfaces";
-import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { createObserver } from "../../utils/observers";
+import { FormOwner, resetForm, submitForm } from "../../utils/form";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
-import { submitForm, resetForm, FormOwner } from "../../utils/form";
+import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
+import {
+ componentLoaded,
+ LoadableComponent,
+ setComponentLoaded,
+ setUpLoadableComponent
+} from "../../utils/loadable";
import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
+import { createObserver } from "../../utils/observers";
import {
connectMessages,
disconnectMessages,
@@ -16,13 +19,10 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
-import { Messages } from "./assets/button/t9n";
-import {
- setUpLoadableComponent,
- setComponentLoaded,
- LoadableComponent,
- componentLoaded
-} from "../../utils/loadable";
+import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
+import { ButtonMessages } from "./assets/button/t9n";
+import { ButtonAlignment } from "./interfaces";
+import { CSS } from "./resources";
/** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
/** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */
@@ -61,13 +61,17 @@ export class Button
@Prop({ reflect: true }) alignment: ButtonAlignment = "center";
/** Specifies the appearance style of the component. */
- @Prop({ reflect: true }) appearance: ButtonAppearance = "solid";
+ @Prop({ reflect: true }) appearance: Extract<
+ "outline" | "outline-fill" | "solid" | "transparent",
+ Appearance
+ > = "solid";
/** Accessible name for the component. */
@Prop() label: string;
- /** Specifies the color of the component. */
- @Prop({ reflect: true }) color: ButtonColor = "blue";
+ /** Specifies the kind of the component (will apply to border and background if applicable). */
+ @Prop({ reflect: true }) kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind> =
+ "brand";
/** When `true`, interaction is prevented and the component is displayed with lower opacity. */
@Prop({ reflect: true }) disabled = false;
@@ -80,7 +84,7 @@ export class Button
/** Specifies an icon to display at the end of the component. */
@Prop({ reflect: true }) iconEnd: string;
- /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+ /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
@Prop({ reflect: true }) iconFlipRtl: FlipContext;
/** Specifies an icon to display at the start of the component. */
@@ -101,13 +105,6 @@ export class Button
*/
@Prop({ reflect: true }) rel: string;
- /**
- * The form ID to associate with the component.
- *
- * @deprecated – The property is no longer needed if the component is placed inside a form.
- */
- @Prop() form: string;
-
/** When `true`, adds a round style to the component. */
@Prop({ reflect: true }) round = false;
@@ -139,12 +136,12 @@ export class Button
*
* @internal
*/
- @Prop({ mutable: true }) messages: Messages;
+ @Prop({ mutable: true }) messages: ButtonMessages;
/**
* Use this property to override individual strings used by the component.
*/
- @Prop({ mutable: true }) messageOverrides: Partial;
+ @Prop({ mutable: true }) messageOverrides: Partial;
@Watch("loading")
loadingChanged(newValue: boolean, oldValue: boolean): void {
@@ -175,10 +172,7 @@ export class Button
this.hasLoader = this.loading;
this.setupTextContentObserver();
connectLabel(this);
- this.formEl = closestElementCrossShadowBoundary(
- this.el,
- this.form ? `#${this.form}` : "form"
- );
+ this.formEl = closestElementCrossShadowBoundary(this.el, "form");
}
disconnectedCallback(): void {
@@ -315,7 +309,7 @@ export class Button
updateMessages(this, this.effectiveLocale);
}
- @State() defaultMessages: Messages;
+ @State() defaultMessages: ButtonMessages;
private updateHasContent() {
const slottedContent = this.el.textContent.trim().length > 0 || this.el.childNodes.length > 0;
diff --git a/src/components/button/interfaces.ts b/src/components/button/interfaces.ts
index 400f21643fe..10642676f27 100644
--- a/src/components/button/interfaces.ts
+++ b/src/components/button/interfaces.ts
@@ -1,5 +1,3 @@
-export type ButtonColor = "blue" | "inverse" | "neutral" | "red";
-export type ButtonAppearance = "solid" | "outline" | "clear" | "transparent" | "minimal";
export type ButtonAlignment =
| "start"
| "end"
diff --git a/src/components/button/readme.md b/src/components/button/readme.md
index 2d635783c80..3903804e0ea 100644
--- a/src/components/button/readme.md
+++ b/src/components/button/readme.md
@@ -7,7 +7,7 @@
### Basic
```html
-Go!
+Go!
```
### Focusing
@@ -34,14 +34,14 @@ Any additional attributes set on `` are passed to the internal `
```html
Back
-Map Options
-Add to favorites
+Delete Map Options
+Add to favorites
```
### With-loader-disabled
```html
-Fetching data...
+Fetching data...
Can't touch this
```
@@ -61,28 +61,27 @@ Any additional attributes set on `` are passed to the internal `
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- |
-| `alignment` | `alignment` | Specifies the alignment of the component's elements. | `"center" \| "end" \| "icon-end-space-between" \| "icon-start-space-between" \| "space-between" \| "start"` | `"center"` |
-| `appearance` | `appearance` | Specifies the appearance style of the component. | `"clear" \| "minimal" \| "outline" \| "solid" \| "transparent"` | `"solid"` |
-| `color` | `color` | Specifies the color of the component. | `"blue" \| "inverse" \| "neutral" \| "red"` | `"blue"` |
-| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
-| `form` | `form` | **[DEPRECATED]** – The property is no longer needed if the component is placed inside a form.
The form ID to associate with the component. | `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` | When `true`, the icon will be 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` | -| `label` | `label` | Accessible name for the component. | `string` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed and interaction is disabled. | `boolean` | `false` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | -| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` | -| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` | -| `round` | `round` | When `true`, adds a round style to the component. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `splitChild` | `split-child` | Specifies if the component is a child of a `calcite-split-button`. | `"primary" \| "secondary" \| boolean` | `false` | -| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` | -| `type` | `type` | Specifies the default behavior of the button. | `string` | `"button"` | -| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- | +| `alignment` | `alignment` | Specifies the alignment of the component's elements. | `"center" \| "end" \| "icon-end-space-between" \| "icon-start-space-between" \| "space-between" \| "start"` | `"center"` | +| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid" \| "transparent"` | `"solid"` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `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` | +| `kind` | `kind` | Specifies the kind of the component (will apply to border and background if applicable). | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` | +| `label` | `label` | Accessible name for the component. | `string` | `undefined` | +| `loading` | `loading` | When `true`, a busy indicator is displayed and interaction is disabled. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ButtonMessages` | `undefined` | +| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` | +| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` | +| `round` | `round` | When `true`, adds a round style to the component. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `splitChild` | `split-child` | Specifies if the component is a child of a `calcite-split-button`. | `"primary" \| "secondary" \| boolean` | `false` | +| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` | +| `type` | `type` | Specifies the default behavior of the button. | `string` | `"button"` | +| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | ## Methods diff --git a/src/components/button/usage/Basic.md b/src/components/button/usage/Basic.md index d40e7c7072f..ef029cd8c2a 100644 --- a/src/components/button/usage/Basic.md +++ b/src/components/button/usage/Basic.md @@ -1,3 +1,3 @@ ```html -Go!
+Go!
```
diff --git a/src/components/button/usage/With-icons.md b/src/components/button/usage/With-icons.md
index 3c0f7fd029e..36eeef28dbb 100644
--- a/src/components/button/usage/With-icons.md
+++ b/src/components/button/usage/With-icons.md
@@ -1,5 +1,5 @@
```html
Back
-Map Options
-Add to favorites
+Delete Map Options
+Add to favorites
```
diff --git a/src/components/button/usage/With-loader-disabled.md b/src/components/button/usage/With-loader-disabled.md
index 3cdd7ff9a03..d2fdefc81b4 100644
--- a/src/components/button/usage/With-loader-disabled.md
+++ b/src/components/button/usage/With-loader-disabled.md
@@ -1,4 +1,4 @@
```html
-Fetching data...
+Fetching data...
Can't touch this
```
diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index 41944c0c78c..b608da04a31 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -88,11 +88,11 @@
@apply min-w-full max-w-full;
}
-@include slotted("footer-leading", "*") {
+@include slotted("footer-start", "*") {
@apply text-n2-wrap self-center;
margin-inline-end: auto;
}
-@include slotted("footer-trailing", "*") {
+@include slotted("footer-end", "*") {
@apply text-n2-wrap self-center;
}
@@ -121,7 +121,7 @@
}
}
-slot[name="footer-leading"]::slotted(*),
-slot[name="footer-trailing"]::slotted(*) {
+slot[name="footer-start"]::slotted(*),
+slot[name="footer-end"]::slotted(*) {
@apply flex gap-1;
}
diff --git a/src/components/card/card.stories.ts b/src/components/card/card.stories.ts
index afc97b03bc5..c45d4299b23 100644
--- a/src/components/card/card.stories.ts
+++ b/src/components/card/card.stories.ts
@@ -6,7 +6,7 @@ import {
Attribute,
Attributes,
filterComponentAttributes,
- themesDarkDefault,
+ modesDarkDefault,
createComponentHTML as create
} from "../../../.storybook/utils";
import { storyFilters } from "../../../.storybook/helpers";
@@ -68,13 +68,13 @@ const titleHtml = html`
`;
-const footerButtonHtml = html` Go `;
+const footerButtonHtml = html` Go `;
-const footerLeadingTextHtml = html`Nov 25, 2018`;
+const footerStartTextHtml = html`Nov 25, 2018`;
const footerLinksHtml = html`
- Lead footer
- Trail footer
+ Lead footer
+ Trail footer
`;
const thumbnailHtml = html`![]()
`;
-const footerTrailingButtonsHtml = html`
-
${buttonSnippet}
`
+ html: `${buttonSnippet}
`
});
buttonEl = await page.find("calcite-button >>> button");
await buttonEl.focus();
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index a874fcd42eb..e83ebaba204 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -22,11 +22,11 @@
// button base
:host button,
:host a {
- --calcite-button-content-margin: theme("margin.2");
- --calcite-button-padding-x: 7px;
- --calcite-button-padding-y: 3px;
- padding-block: var(--calcite-button-padding-y);
- padding-inline: var(--calcite-button-padding-x);
+ --calcite-button-content-margin-internal: theme("margin.2");
+ --calcite-button-padding-x-internal: 7px;
+ --calcite-button-padding-y-internal: 3px;
+ padding-block: var(--calcite-button-padding-y-internal);
+ padding-inline: var(--calcite-button-padding-x-internal);
@apply font-inherit
relative
box-border
@@ -55,7 +55,7 @@
.content {
@apply flex;
flex-basis: auto;
- margin-inline: var(--calcite-button-content-margin);
+ margin-inline: var(--calcite-button-content-margin-internal);
}
.icon-start-empty {
@@ -72,13 +72,13 @@
:host([scale="m"]) {
button,
a {
- --calcite-button-content-margin: theme("margin.3");
+ --calcite-button-content-margin-internal: theme("margin.3");
}
}
:host([scale="l"]) {
button,
a {
- --calcite-button-content-margin: theme("margin.4");
+ --calcite-button-content-margin-internal: theme("margin.4");
}
}
@@ -144,7 +144,7 @@
a:not(.content--slotted),
button:not(.content--slotted) {
.icon--start + .icon--end {
- margin-inline-start: var(--calcite-button-content-margin);
+ margin-inline-start: var(--calcite-button-content-margin-internal);
}
}
}
@@ -215,7 +215,7 @@
button.content--slotted,
a.content--slotted {
.calcite-button--loader calcite-loader {
- margin-inline-end: var(--calcite-button-content-margin);
+ margin-inline-end: var(--calcite-button-content-margin-internal);
}
}
// hide icons when loading with no text
@@ -238,7 +238,7 @@
}
}
-:host([color="blue"]) {
+:host([kind="brand"]) {
button,
a {
@apply text-color-inverse bg-brand;
@@ -254,7 +254,7 @@
}
}
}
-:host([color="red"]) {
+:host([kind="danger"]) {
button,
a {
@apply text-color-inverse bg-danger;
@@ -270,7 +270,7 @@
}
}
}
-:host([color="neutral"]) {
+:host([kind="neutral"]) {
button,
a {
@apply text-color-1 bg-foreground-3;
@@ -286,7 +286,7 @@
}
}
}
-:host([color="inverse"]) {
+:host([kind="inverse"]) {
button,
a {
@apply text-color-inverse;
@@ -304,14 +304,14 @@
}
}
// outline
-:host([appearance="outline"]) {
+:host([appearance="outline-fill"]) {
button,
a {
@apply bg-foreground-1 border border-solid;
box-shadow: inset 0 0 0 1px transparent;
}
}
-:host([appearance="outline"][color="blue"]) {
+:host([appearance="outline-fill"][kind="brand"]) {
button,
a {
@apply border-color-brand bg-foreground-1;
@@ -336,7 +336,7 @@
}
}
}
-:host([appearance="outline"][color="red"]) {
+:host([appearance="outline-fill"][kind="danger"]) {
button,
a {
@apply border-color-danger bg-foreground-1;
@@ -361,7 +361,7 @@
}
}
}
-:host([appearance="outline"][color="neutral"]) {
+:host([appearance="outline-fill"][kind="neutral"]) {
button,
a {
@apply text-color-1 bg-foreground-1;
@@ -380,7 +380,7 @@
}
}
}
-:host([appearance="outline"][color="inverse"]) {
+:host([appearance="outline-fill"][kind="inverse"]) {
button,
a {
@apply text-color-1 bg-foreground-1;
@@ -402,17 +402,14 @@
}
}
}
-// clear is deprecated. use minimal instead
-:host([appearance="clear"]),
-:host([appearance="minimal"]) {
+:host([appearance="outline"]) {
button,
a {
@apply border border-solid bg-transparent;
box-shadow: inset 0 0 0 1px transparent;
}
}
-:host([appearance="clear"][color="blue"]),
-:host([appearance="minimal"][color="blue"]) {
+:host([appearance="outline"][kind="brand"]) {
button,
a {
@apply border-color-brand bg-transparent;
@@ -437,8 +434,7 @@
}
}
}
-:host([appearance="clear"][color="red"]),
-:host([appearance="minimal"][color="red"]) {
+:host([appearance="outline"][kind="danger"]) {
button,
a {
@apply border-color-danger bg-transparent;
@@ -463,12 +459,11 @@
}
}
}
-:host([appearance="clear"][color="neutral"]),
-:host([appearance="minimal"][color="neutral"]) {
+:host([appearance="outline"][kind="neutral"]) {
button,
a {
@apply text-color-1 bg-transparent;
- border-color: theme("backgroundColor.foreground.3");
+ border-color: theme("borderColor.color.1");
&:hover {
box-shadow: inset 0 0 0 1px var(--calcite-ui-foreground-3);
}
@@ -483,8 +478,7 @@
}
}
}
-:host([appearance="clear"][color="inverse"]),
-:host([appearance="minimal"][color="inverse"]) {
+:host([appearance="outline"][kind="inverse"]) {
button,
a {
@apply text-color-1 bg-transparent;
@@ -507,16 +501,14 @@
}
}
-:host([appearance="outline"][split-child="primary"]) button,
-:host([appearance="clear"][split-child="primary"]) button,
-:host([appearance="minimal"][split-child="primary"]) button {
+:host([appearance="outline-fill"][split-child="primary"]) button,
+:host([appearance="outline"][split-child="primary"]) button {
border-inline-end-width: 0;
border-inline-start-width: theme("borderWidth.DEFAULT");
}
-:host([appearance="outline"][split-child="secondary"]) button,
-:host([appearance="clear"][split-child="secondary"]) button,
-:host([appearance="minimal"][split-child="secondary"]) button {
+:host([appearance="outline-fill"][split-child="secondary"]) button,
+:host([appearance="outline"][split-child="secondary"]) button {
border-inline-start-width: 0;
border-inline-end-width: theme("borderWidth.DEFAULT");
}
@@ -535,7 +527,7 @@
}
}
}
-:host([appearance="transparent"][color="blue"]) {
+:host([appearance="transparent"][kind="brand"]) {
button,
a {
color: theme("colors.brand");
@@ -554,7 +546,7 @@
}
}
-:host([appearance="transparent"][color="red"]) {
+:host([appearance="transparent"][kind="danger"]) {
button,
a {
color: theme("colors.danger");
@@ -573,7 +565,7 @@
}
}
-:host([appearance="transparent"][color="neutral"]:not(.cancel-editing-button)) {
+:host([appearance="transparent"][kind="neutral"]:not(.cancel-editing-button)) {
button,
a,
calcite-loader {
@@ -581,7 +573,7 @@
}
}
-:host([appearance="transparent"][color="neutral"].cancel-editing-button) {
+:host([appearance="transparent"][kind="neutral"].cancel-editing-button) {
button {
@apply text-color-3
border-t-color-input
@@ -591,7 +583,7 @@
border-block-style: solid;
&:not(.content--slotted) {
- --calcite-button-padding-y: 0;
+ --calcite-button-padding-y-internal: 0;
}
&:hover {
@@ -600,7 +592,7 @@
}
}
-:host([appearance="transparent"][color="neutral"].enable-editing-button) {
+:host([appearance="transparent"][kind="neutral"].enable-editing-button) {
button {
@apply bg-transparent;
}
@@ -616,7 +608,7 @@
}
}
-:host([appearance="transparent"][color="inverse"]) {
+:host([appearance="transparent"][kind="inverse"]) {
button,
a,
calcite-loader {
@@ -633,100 +625,100 @@
// accommodate for transparent buttons not having borders
:host([scale="s"][appearance="transparent"]) button.content--slotted,
:host([scale="s"][appearance="transparent"]) a.content--slotted {
- --calcite-button-padding-x: theme("padding.2");
+ --calcite-button-padding-x-internal: theme("padding.2");
}
:host([scale="s"]) button,
:host([scale="s"]) a {
- --calcite-button-padding-y: 3px;
+ --calcite-button-padding-y-internal: 3px;
}
:host([scale="m"]) button.content--slotted,
:host([scale="m"]) a.content--slotted {
- --calcite-button-padding-x: 11px;
+ --calcite-button-padding-x-internal: 11px;
@apply text-n1h;
}
:host([scale="m"]) button,
:host([scale="m"]) a {
- --calcite-button-padding-y: 7px;
+ --calcite-button-padding-y-internal: 7px;
}
// accommodate for transparent buttons not having borders
:host([scale="m"][appearance="transparent"]) button.content--slotted,
:host([scale="m"][appearance="transparent"]) a.content--slotted {
- --calcite-button-padding-x: theme("padding.3");
+ --calcite-button-padding-x-internal: theme("padding.3");
}
:host([scale="l"]) button.content--slotted,
:host([scale="l"]) a.content--slotted {
- --calcite-button-padding-x: 15px;
+ --calcite-button-padding-x-internal: 15px;
@apply text-0h;
}
:host([scale="l"]) {
.button-padding {
- --calcite-button-padding-x: theme("padding.4");
- --calcite-button-padding-y: 11px;
+ --calcite-button-padding-x-internal: theme("padding.4");
+ --calcite-button-padding-y-internal: 11px;
}
//shrink the padding if an icon is present to preserve the height
.button-padding--shrunk {
- --calcite-button-padding-y: 9px;
+ --calcite-button-padding-y-internal: 9px;
}
}
// generate fab scales (scenario: 1 icon, ie., should be square)
:host([scale="s"]) button:not(.content--slotted),
:host([scale="s"]) a:not(.content--slotted) {
- --calcite-button-padding-x: theme("padding[0.5]");
- --calcite-button-padding-y: 3px;
+ --calcite-button-padding-x-internal: theme("padding[0.5]");
+ --calcite-button-padding-y-internal: 3px;
@apply text-0h w-6;
min-block-size: theme("height.6");
}
:host([scale="m"]) button:not(.content--slotted),
:host([scale="m"]) a:not(.content--slotted) {
- --calcite-button-padding-x: theme("padding[0.5]");
- --calcite-button-padding-y: 7px;
+ --calcite-button-padding-x-internal: theme("padding[0.5]");
+ --calcite-button-padding-y-internal: 7px;
@apply text-0h w-8;
min-block-size: theme("height.8");
}
:host([scale="l"]) button:not(.content--slotted),
:host([scale="l"]) a:not(.content--slotted) {
- --calcite-button-padding-x: theme("padding[0.5]");
- --calcite-button-padding-y: 9px;
+ --calcite-button-padding-x-internal: theme("padding[0.5]");
+ --calcite-button-padding-y-internal: 9px;
@apply text-0h w-11;
min-block-size: theme("height.11");
}
// accommodate for transparent buttons not having borders
:host([scale="l"][appearance="transparent"]) button:not(.content--slotted),
:host([scale="l"][appearance="transparent"]) a:not(.content--slotted) {
- --calcite-button-padding-y: theme("padding[2.5]");
+ --calcite-button-padding-y-internal: theme("padding[2.5]");
}
// generate fab scales (scenario: 2 icons, ie., should not be square)
:host([scale="s"][icon-start][icon-end]) button:not(.content--slotted),
:host([scale="s"][icon-start][icon-end]) a:not(.content--slotted) {
- --calcite-button-padding-x: 23px;
+ --calcite-button-padding-x-internal: 23px;
@apply text-0h h-6;
}
// accommodate for transparent buttons not having borders
:host([scale="s"][icon-start][icon-end][appearance="transparent"]) button:not(.content--slotted),
:host([scale="s"][icon-start][icon-end][appearance="transparent"]) a:not(.content--slotted) {
- --calcite-button-padding-x: theme("padding.6");
+ --calcite-button-padding-x-internal: theme("padding.6");
}
:host([scale="m"][icon-start][icon-end]) button:not(.content--slotted),
:host([scale="m"][icon-start][icon-end]) a:not(.content--slotted) {
- --calcite-button-padding-x: theme("padding.8");
+ --calcite-button-padding-x-internal: theme("padding.8");
@apply text-0h h-8;
}
// accommodate for transparent buttons not having borders
:host([scale="m"][icon-start][icon-end][appearance="transparent"]) button:not(.content--slotted),
:host([scale="m"][icon-start][icon-end][appearance="transparent"]) a:not(.content--slotted) {
- --calcite-button-padding-x: 33px;
+ --calcite-button-padding-x-internal: 33px;
}
:host([scale="l"][icon-start][icon-end]) button:not(.content--slotted),
:host([scale="l"][icon-start][icon-end]) a:not(.content--slotted) {
- --calcite-button-padding-x: 43px;
+ --calcite-button-padding-x-internal: 43px;
@apply text-0h h-11;
// add space between when only 2 icons
.icon--start + .icon--end {
@@ -736,5 +728,5 @@
// accommodate for transparent buttons not having borders
:host([scale="l"][icon-start][icon-end][appearance="transparent"]) button:not(.content--slotted),
:host([scale="l"][icon-start][icon-end][appearance="transparent"]) a:not(.content--slotted) {
- --calcite-button-padding-x: theme("padding.11");
+ --calcite-button-padding-x-internal: theme("padding.11");
}
diff --git a/src/components/button/button.stories.ts b/src/components/button/button.stories.ts
index 92e55ea3cc1..4753837c84f 100644
--- a/src/components/button/button.stories.ts
+++ b/src/components/button/button.stories.ts
@@ -1,6 +1,6 @@
import { text, select } from "@storybook/addon-knobs";
import { iconNames, boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
+import { modesDarkDefault } from "../../../.storybook/utils";
import { html } from "../../../support/formatting";
import readme from "./readme.md";
@@ -14,8 +14,8 @@ export default {
export const simple = (): string => html`
The form ID to associate with the component. | `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` | When `true`, the icon will be 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` | -| `label` | `label` | Accessible name for the component. | `string` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed and interaction is disabled. | `boolean` | `false` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | -| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` | -| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` | -| `round` | `round` | When `true`, adds a round style to the component. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `splitChild` | `split-child` | Specifies if the component is a child of a `calcite-split-button`. | `"primary" \| "secondary" \| boolean` | `false` | -| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` | -| `type` | `type` | Specifies the default behavior of the button. | `string` | `"button"` | -| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- | +| `alignment` | `alignment` | Specifies the alignment of the component's elements. | `"center" \| "end" \| "icon-end-space-between" \| "icon-start-space-between" \| "space-between" \| "start"` | `"center"` | +| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid" \| "transparent"` | `"solid"` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `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` | +| `kind` | `kind` | Specifies the kind of the component (will apply to border and background if applicable). | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` | +| `label` | `label` | Accessible name for the component. | `string` | `undefined` | +| `loading` | `loading` | When `true`, a busy indicator is displayed and interaction is disabled. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ButtonMessages` | `undefined` | +| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` | +| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` | +| `round` | `round` | When `true`, adds a round style to the component. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `splitChild` | `split-child` | Specifies if the component is a child of a `calcite-split-button`. | `"primary" \| "secondary" \| boolean` | `false` | +| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` | +| `type` | `type` | Specifies the default behavior of the button. | `string` | `"button"` | +| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | ## Methods diff --git a/src/components/button/usage/Basic.md b/src/components/button/usage/Basic.md index d40e7c7072f..ef029cd8c2a 100644 --- a/src/components/button/usage/Basic.md +++ b/src/components/button/usage/Basic.md @@ -1,3 +1,3 @@ ```html -
-
+const footerEndButtonsHtml = html`
+
+
-
+
`;
@@ -115,11 +115,7 @@ export const simpleWithFooterButton = (): string => html`
export const simpleWithFooterTextButtonTooltip_NoTest = (): string => html`
- ${create(
- "calcite-card",
- createAttributes(),
- html`${titleHtml}${footerLeadingTextHtml}${footerTrailingButtonsHtml}`
- )}
+ ${create("calcite-card", createAttributes(), html`${titleHtml}${footerStartTextHtml}${footerEndButtonsHtml}`)}
${tooltipHtml}
`;
@@ -147,21 +143,21 @@ export const thumbnail = (): string => html`
View Count: 0
- html`
`;
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
;
+ @Prop({ mutable: true }) messageOverrides: Partial;
@Watch("messageOverrides")
onMessagesChange(): void {
@@ -158,7 +158,7 @@ export class Card implements ConditionalSlotComponent, LocalizedComponent, T9nCo
updateMessages(this, this.effectiveLocale);
}
- @State() defaultMessages: Messages;
+ @State() defaultMessages: CardMessages;
//--------------------------------------------------------------------------
//
@@ -223,14 +223,14 @@ export class Card implements ConditionalSlotComponent, LocalizedComponent, T9nCo
private renderFooter(): VNode {
const { el } = this;
- const leadingFooter = getSlotted(el, SLOTS.footerLeading);
- const trailingFooter = getSlotted(el, SLOTS.footerTrailing);
+ const startFooter = getSlotted(el, SLOTS.footerStart);
+ const endFooter = getSlotted(el, SLOTS.footerEnd);
- const hasFooter = leadingFooter || trailingFooter;
+ const hasFooter = startFooter || endFooter;
return hasFooter ? (
) : null;
}
diff --git a/src/components/card/readme.md b/src/components/card/readme.md
index 01481405f8d..bea5c421a51 100644
--- a/src/components/card/readme.md
+++ b/src/components/card/readme.md
@@ -22,7 +22,7 @@
| Property | Attribute | Description | Type | Default |
| ------------------- | -------------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------- | --------------- |
| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` |
-| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `CardMessages` | `undefined` |
| `selectable` | `selectable` | When `true`, the component is selectable. | `boolean` | `false` |
| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` |
| `thumbnailPosition` | `thumbnail-position` | Sets the placement of the thumbnail defined in the `thumbnail` slot. | `"block-end" \| "block-start" \| "inline-end" \| "inline-start"` | `"block-start"` |
@@ -35,14 +35,14 @@
## Slots
-| Slot | Description |
-| ------------------- | ------------------------------------------------ |
-| | A slot for adding subheader/description content. |
-| `"footer-leading"` | A slot for adding a leading footer. |
-| `"footer-trailing"` | A slot for adding a trailing footer. |
-| `"subtitle"` | A slot for adding a subtitle or short summary. |
-| `"thumbnail"` | A slot for adding a thumbnail to the component. |
-| `"title"` | A slot for adding a title. |
+| Slot | Description |
+| ---------------- | ------------------------------------------------ |
+| | A slot for adding subheader/description content. |
+| `"footer-end"` | A slot for adding a trailing footer. |
+| `"footer-start"` | A slot for adding a leading footer. |
+| `"subtitle"` | A slot for adding a subtitle or short summary. |
+| `"thumbnail"` | A slot for adding a thumbnail to the component. |
+| `"title"` | A slot for adding a title. |
## Dependencies
diff --git a/src/components/card/resources.ts b/src/components/card/resources.ts
index aa893585e07..c2e49c35880 100644
--- a/src/components/card/resources.ts
+++ b/src/components/card/resources.ts
@@ -12,6 +12,6 @@ export const SLOTS = {
thumbnail: "thumbnail",
title: "title",
subtitle: "subtitle",
- footerLeading: "footer-leading",
- footerTrailing: "footer-trailing"
+ footerStart: "footer-start",
+ footerEnd: "footer-end"
};
diff --git a/src/components/checkbox/checkbox.stories.ts b/src/components/checkbox/checkbox.stories.ts
index 1f99179471c..c96ea4bd942 100644
--- a/src/components/checkbox/checkbox.stories.ts
+++ b/src/components/checkbox/checkbox.stories.ts
@@ -1,6 +1,6 @@
import { select, text } from "@storybook/addon-knobs";
import { boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
+import { modesDarkDefault } from "../../../.storybook/utils";
import { html } from "../../../support/formatting";
import readme from "./readme.md";
@@ -32,8 +32,8 @@ export const simple = (): string => html`
export const disabled_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
+
html`
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx
index 3a9a33f1f6d..90b6b748f8e 100644
--- a/src/components/checkbox/checkbox.tsx
+++ b/src/components/checkbox/checkbox.tsx
@@ -9,20 +9,24 @@ import {
Prop,
VNode
} from "@stencil/core";
+import { toAriaBoolean } from "../../utils/dom";
+import {
+ CheckableFormComponent,
+ connectForm,
+ disconnectForm,
+ HiddenFormInputSlot
+} from "../../utils/form";
import { guid } from "../../utils/guid";
-import { Scale } from "../interfaces";
-import { CheckableFormComponent, HiddenFormInputSlot } from "../../utils/form";
-import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { connectForm, disconnectForm } from "../../utils/form";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
-import { toAriaBoolean } from "../../utils/dom";
import { isActivationKey } from "../../utils/key";
+import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
import {
- setUpLoadableComponent,
- setComponentLoaded,
+ componentLoaded,
LoadableComponent,
- componentLoaded
+ setComponentLoaded,
+ setUpLoadableComponent
} from "../../utils/loadable";
+import { Scale } from "../interfaces";
@Component({
tag: "calcite-checkbox",
diff --git a/src/components/chip/chip.e2e.ts b/src/components/chip/chip.e2e.ts
index 3bd9804f493..e3c4fbafc3f 100644
--- a/src/components/chip/chip.e2e.ts
+++ b/src/components/chip/chip.e2e.ts
@@ -1,5 +1,5 @@
import { newE2EPage } from "@stencil/core/testing";
-import { accessible, renders, slots, hidden, t9n } from "../../tests/commonTests";
+import { accessible, hidden, renders, slots, t9n } from "../../tests/commonTests";
import { CSS, SLOTS } from "./resources";
@@ -31,38 +31,30 @@ describe("calcite-chip", () => {
const element = await page.find("calcite-chip");
expect(element).toEqualAttribute("appearance", "solid");
- expect(element).toEqualAttribute("color", "grey");
+ expect(element).toEqualAttribute("kind", "neutral");
expect(element).toEqualAttribute("scale", "m");
});
it("renders requested props when valid props are provided", async () => {
const page = await newE2EPage();
- await page.setContent(`Chip content `);
+ await page.setContent(`Chip content `);
const element = await page.find("calcite-chip");
- expect(element).toEqualAttribute("appearance", "transparent");
- expect(element).toEqualAttribute("color", "blue");
+ expect(element).toEqualAttribute("appearance", "outline");
+ expect(element).toEqualAttribute("kind", "brand");
expect(element).toEqualAttribute("scale", "l");
});
- it("renders transparent chip when appearance='transparent'", async () => {
+ it("renders outline-fill chip when appearance='outline-fill'", async () => {
const page = await newE2EPage();
- await page.setContent(`Chip content `);
+ await page.setContent(`Chip content `);
const element = await page.find("calcite-chip");
- expect(element).toEqualAttribute("appearance", "transparent");
- expect(element).toEqualAttribute("color", "blue");
+ expect(element).toEqualAttribute("appearance", "outline-fill");
+ expect(element).toEqualAttribute("kind", "brand");
expect(element).toEqualAttribute("scale", "l");
});
- it("renders a close button when requested (deprecated)", async () => {
- const page = await newE2EPage();
- await page.setContent(`Chip content `);
-
- const close = await page.find("calcite-chip >>> button.close");
- expect(close).not.toBeNull();
- });
-
it("renders a close button when requested", async () => {
const page = await newE2EPage();
await page.setContent(`Chip content `);
@@ -79,13 +71,13 @@ describe("calcite-chip", () => {
expect(close).toBeNull();
});
- describe("CSS properties for light/dark themes", () => {
+ describe("CSS properties for light/dark mode", () => {
const chipSnippet = `
Layers
@@ -111,8 +103,8 @@ describe("calcite-chip", () => {
expect(chipStyles.active).toEqual("rgba(4, 10, 4, 0.31");
});
- describe("when theme attribute is not provided", () => {
- it("should render chip pseudo classes with default values tied to light theme", async () => {
+ describe("when mode attribute is not provided", () => {
+ it("should render chip pseudo classes with default values tied to mode", async () => {
page = await newE2EPage({ html: chipSnippet });
chipCloseButton = await page.find("calcite-chip >>> button");
await chipCloseButton.focus();
@@ -127,10 +119,10 @@ describe("calcite-chip", () => {
});
});
- describe("when theme attribute is dark", () => {
- it("should render button pseudo classes with value tied to dark theme", async () => {
+ describe("when mode attribute is dark", () => {
+ it("should render button pseudo classes with value tied to dark mode", async () => {
page = await newE2EPage({
- html: `
My great chip
@@ -30,8 +30,8 @@ export const withIcon = (): string => html`
My great chip html`
})
@@ -60,8 +60,8 @@ export const withAvatar = (): string => {
{
export const overriddenIconColor = (): string =>
html`Banana `;
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
My great chip
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
diff --git a/src/components/chip/chip.tsx b/src/components/chip/chip.tsx
index b13cd0dc62f..5d0e8233817 100644
--- a/src/components/chip/chip.tsx
+++ b/src/components/chip/chip.tsx
@@ -1,26 +1,31 @@
import {
+ Build,
Component,
- h,
- Prop,
+ Element,
Event,
EventEmitter,
- Element,
- VNode,
+ h,
Method,
- Watch,
- State
+ Prop,
+ State,
+ VNode,
+ Watch
} from "@stencil/core";
-import { getSlotted } from "../../utils/dom";
-import { guid } from "../../utils/guid";
-import { CSS, SLOTS, ICONS } from "./resources";
-import { ChipColor } from "./interfaces";
-import { Appearance, DeprecatedEventPayload, Scale } from "../interfaces";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
-import { Messages } from "./assets/chip/t9n";
+import { slotChangeHasAssignedElement } from "../../utils/dom";
+import { guid } from "../../utils/guid";
+import {
+ componentLoaded,
+ LoadableComponent,
+ setComponentLoaded,
+ setUpLoadableComponent
+} from "../../utils/loadable";
+import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
+import { createObserver } from "../../utils/observers";
import {
connectMessages,
disconnectMessages,
@@ -28,13 +33,9 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
-import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
-import {
- setUpLoadableComponent,
- setComponentLoaded,
- LoadableComponent,
- componentLoaded
-} from "../../utils/loadable";
+import { Appearance, Kind, Scale } from "../interfaces";
+import { ChipMessages } from "./assets/chip/t9n";
+import { CSS, ICONS, SLOTS } from "./resources";
/**
* @slot - A slot for adding text.
@@ -56,10 +57,11 @@ export class Chip
//--------------------------------------------------------------------------
/** Specifies the appearance style of the component. */
- @Prop({ reflect: true }) appearance: Extract<"solid" | "transparent", Appearance> = "solid";
+ @Prop({ reflect: true }) appearance: Extract<"outline" | "outline-fill" | "solid", Appearance> =
+ "solid";
- /** Specifies the color for the component. */
- @Prop({ reflect: true }) color: ChipColor = "grey";
+ /** Specifies the kind of the component (will apply to border and background if applicable). */
+ @Prop({ reflect: true }) kind: Extract<"brand" | "inverse" | "neutral", Kind> = "neutral";
/** When `true`, a close button is added to the component. */
@Prop({ reflect: true, mutable: true }) closable = false;
@@ -82,14 +84,14 @@ export class Chip
/**
* Use this property to override individual strings used by the component.
*/
- @Prop({ mutable: true }) messageOverrides: Partial;
+ @Prop({ mutable: true }) messageOverrides: Partial;
/**
* Made into a prop for testing purposes only
*
* @internal
*/
- @Prop({ mutable: true }) messages: Messages;
+ @Prop({ mutable: true }) messages: ChipMessages;
@Watch("messageOverrides")
onMessagesChange(): void {
@@ -104,7 +106,7 @@ export class Chip
@Element() el: HTMLCalciteChipElement;
- @State() defaultMessages: Messages;
+ @State() defaultMessages: ChipMessages;
@State() effectiveLocale: string;
@@ -123,6 +125,7 @@ export class Chip
connectConditionalSlotComponent(this);
connectLocalized(this);
connectMessages(this);
+ this.setupTextContentObserver();
}
componentDidLoad(): void {
@@ -137,7 +140,10 @@ export class Chip
async componentWillLoad(): Promise {
setUpLoadableComponent(this);
- await setUpMessages(this);
+ if (Build.isBrowser) {
+ await setUpMessages(this);
+ this.updateHasContent();
+ }
}
//--------------------------------------------------------------------------
//
@@ -145,7 +151,7 @@ export class Chip
//
//--------------------------------------------------------------------------
- /** Sets focus on the component. */
+ /** When `closable` is `true`, sets focus on the component's "close" button (the first focusable item). */
@Method()
async setFocus(): Promise {
await componentLoaded(this);
@@ -161,10 +167,8 @@ export class Chip
/**
* Fires when the close button is clicked.
- *
- * **Note:**: The `el` event payload props is deprecated, please use the event's `target`/`currentTarget` instead.
*/
- @Event({ cancelable: false }) calciteChipClose: EventEmitter;
+ @Event({ cancelable: false }) calciteChipClose: EventEmitter;
// --------------------------------------------------------------------------
//
@@ -174,14 +178,44 @@ export class Chip
closeClickHandler = (event: MouseEvent): void => {
event.preventDefault();
- this.calciteChipClose.emit(this.el);
+ this.calciteChipClose.emit();
this.closed = true;
};
+ private updateHasContent() {
+ const slottedContent = this.el.textContent.trim().length > 0 || this.el.childNodes.length > 0;
+ this.hasContent =
+ this.el.childNodes.length > 0 && this.el.childNodes[0]?.nodeName === "#text"
+ ? this.el.textContent?.trim().length > 0
+ : slottedContent;
+ }
+
+ private setupTextContentObserver() {
+ this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
+ }
+
+ private handleSlotImageChange = (event: Event): void => {
+ this.hasImage = slotChangeHasAssignedElement(event);
+ };
+
+ //--------------------------------------------------------------------------
+ //
+ // Private State/Props
+ //
+ //--------------------------------------------------------------------------
+
+ /** watches for changing text content */
+ private mutationObserver = createObserver("mutation", () => this.updateHasContent());
+
private closeButton: HTMLButtonElement;
private guid: string = guid();
+ /** determine if there is slotted content for styling purposes */
+ @State() private hasContent = false;
+
+ /** determine if there is slotted image for styling purposes */
+ @State() private hasImage = false;
//--------------------------------------------------------------------------
//
// Render Methods
@@ -189,19 +223,21 @@ export class Chip
//--------------------------------------------------------------------------
renderChipImage(): VNode {
- const { el } = this;
- const hasChipImage = getSlotted(el, SLOTS.image);
-
- return hasChipImage ? (
+ return (
+
@@ -204,8 +200,8 @@ export const thumbnailRounded = (): string => html`
View Count: 0
- ${thumbnailHtml}${titleHtml}${footerLeadingTextHtml}${footerTrailingButtonsHtml}
+ ${thumbnailHtml}${titleHtml}${footerStartTextHtml}${footerEndButtonsHtml}
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index d6cfa010ef6..98303b74cdf 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -9,14 +9,12 @@ import {
VNode,
Watch
} from "@stencil/core";
-import { getSlotted, toAriaBoolean } from "../../utils/dom";
-import { CSS, SLOTS } from "./resources";
-import { LogicalFlowPosition } from "../interfaces";
import {
+ ConditionalSlotComponent,
connectConditionalSlotComponent,
- disconnectConditionalSlotComponent,
- ConditionalSlotComponent
+ disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
+import { getSlotted, toAriaBoolean } from "../../utils/dom";
import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
import {
connectMessages,
@@ -25,7 +23,9 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
-import { Messages } from "./assets/card/t9n";
+import { LogicalFlowPosition } from "../interfaces";
+import { CardMessages } from "./assets/card/t9n";
+import { CSS, SLOTS } from "./resources";
/**
* Cards do not include a grid or bounding container
@@ -37,8 +37,8 @@ import { Messages } from "./assets/card/t9n";
* @slot thumbnail - A slot for adding a thumbnail to the component.
* @slot title - A slot for adding a title.
* @slot subtitle - A slot for adding a subtitle or short summary.
- * @slot footer-leading - A slot for adding a leading footer.
- * @slot footer-trailing - A slot for adding a trailing footer.
+ * @slot footer-start - A slot for adding a leading footer.
+ * @slot footer-end - A slot for adding a trailing footer.
*/
@Component({
@@ -79,12 +79,12 @@ export class Card implements ConditionalSlotComponent, LocalizedComponent, T9nCo
*
* @internal
*/
- @Prop({ mutable: true }) messages: Messages;
+ @Prop({ mutable: true }) messages: CardMessages;
/**
* Use this property to override individual strings used by the component.
*/
- @Prop({ mutable: true }) messageOverrides: Partial${chipSnippet}
`
+ html: `${chipSnippet}
`
});
chipCloseButton = await page.find("calcite-chip >>> button");
await chipCloseButton.focus();
@@ -170,7 +162,7 @@ describe("calcite-chip", () => {
it("should not render chip when closed set to true", async () => {
const page = await newE2EPage();
- await page.setContent(`${chipSnippet}
`);
+ await page.setContent(`${chipSnippet}
`);
const chipEl = await page.find(`calcite-chip`);
chipEl.setAttribute("closed", true);
diff --git a/src/components/chip/chip.scss b/src/components/chip/chip.scss
index acf5766ad18..0246143f120 100644
--- a/src/components/chip/chip.scss
+++ b/src/components/chip/chip.scss
@@ -6,15 +6,16 @@
--calcite-chip-spacing-unit-s: theme("spacing.1");
.image-container {
@apply h-5 w-5;
+ padding-inline-start: theme("spacing[0.5]");
}
}
:host([scale="m"]) {
@apply text-n1 h-8;
--calcite-chip-spacing-unit-l: theme("spacing.3");
- --calcite-chip-spacing-unit-s: 6px;
+ --calcite-chip-spacing-unit-s: calc(theme("spacing.3") / 2);
.image-container {
@apply h-6 w-6;
- padding-inline-start: theme("padding.1");
+ padding-inline-start: theme("spacing.1");
}
}
@@ -24,7 +25,7 @@
--calcite-chip-spacing-unit-s: theme("spacing.2");
.image-container {
@apply h-8 w-8;
- padding-inline-start: theme("spacing.1");
+ padding-inline-start: theme("spacing.2");
}
}
@@ -47,45 +48,97 @@
.title {
@apply truncate;
+ padding-block: 0;
}
-:host span {
- padding-block: 0;
+.content--slotted .title {
padding-inline: var(--calcite-chip-spacing-unit-l);
}
-:host([closable]) span {
+:host([closable][icon]) .container:not(.content--slotted) .title {
+ padding-inline: 0 var(--calcite-chip-spacing-unit-s);
+}
+
+:host(:not([closable])) .container:not(.content--slotted) .chip-icon {
+ margin-inline: auto;
+}
+
+.container:not(.image--slotted) .image-container {
+ display: none;
+}
+
+:host([scale="s"][closable]) .container:not(.content--slotted) .image-container {
+ margin-inline-end: theme("spacing[0.5]");
+}
+
+:host([scale="m"][closable]) .container:not(.content--slotted) .image-container {
+ margin-inline-end: theme("spacing.1");
+}
+
+:host([scale="l"][closable]) .container:not(.content--slotted) .image-container {
+ margin-inline-end: theme("spacing.2");
+}
+
+:host([scale="s"]:not([closable])) .container:not(.content--slotted) {
+ @apply w-6 h-6;
+ & .image-container {
+ padding-inline: theme("spacing[0.5]");
+ }
+}
+
+:host([scale="m"]:not([closable])) .container:not(.content--slotted) {
+ @apply w-8 h-8;
+ & .image-container {
+ padding-inline: theme("spacing.1");
+ }
+}
+
+:host([scale="l"]:not([closable])) .container:not(.content--slotted) {
+ @apply w-11 h-11;
+ & .image-container {
+ padding-inline: calc(theme("spacing.3") / 2);
+ }
+}
+
+:host([closable]) .content--slotted .title {
padding-inline: var(--calcite-chip-spacing-unit-l) var(--calcite-chip-spacing-unit-s);
}
-:host([icon]:not([closable])) span {
- padding-block: 0;
- padding-inline: var(--calcite-chip-spacing-unit-l);
+:host([scale="s"]) button {
+ inline-size: theme("spacing.4");
+ block-size: theme("spacing.4");
+ margin-inline-end: theme("spacing[0.5]");
+}
+
+:host([scale="m"]) button {
+ inline-size: theme("spacing.6");
+ block-size: theme("spacing.6");
+ margin-inline-end: theme("spacing.1");
}
-:host button {
+:host([scale="l"]) button {
+ inline-size: theme("spacing.8");
+ block-size: theme("spacing.8");
+ margin-inline-end: theme("spacing.2");
+}
+
+button {
@apply focus-base
transition-default
text-color-1
m-0
- inline-flex
- max-h-full
- min-h-full
cursor-pointer
items-center
- self-stretch
border-none
bg-transparent;
-webkit-appearance: none;
- border-start-start-radius: 0;
- border-start-end-radius: 50px;
- border-end-end-radius: 50px;
- border-end-start-radius: 0;
- padding-block: 0;
+ display: flex;
+ border-radius: 50%;
padding-inline: var(--calcite-chip-spacing-unit-s);
color: inherit;
+ align-content: center;
+ justify-content: center;
- // close button focus styles
--calcite-chip-transparent-hover: var(--calcite-button-transparent-hover);
--calcite-chip-transparent-press: var(--calcite-button-transparent-press);
&:hover {
@@ -102,10 +155,10 @@
//slotted image
.image-container {
- @apply rounded-half inline-flex overflow-hidden;
+ @apply inline-flex overflow-hidden;
}
-:host slot[name="image"]::slotted(*) {
+slot[name="image"]::slotted(*) {
@apply rounded-half flex h-full w-full overflow-hidden;
}
@@ -118,38 +171,9 @@
ease-in-out;
margin-inline-end: 0;
margin-inline-start: var(--calcite-chip-spacing-unit-l);
- border-start-start-radius: 0;
- border-start-end-radius: 50px;
- border-end-end-radius: 50px;
- border-end-start-radius: 0;
}
-// solid
-:host([color="blue"]) {
- border-color: transparent;
- background-color: var(--calcite-ui-info);
- color: var(--calcite-ui-text-inverse);
-}
-
-:host([color="red"]) {
- border-color: transparent;
- background-color: var(--calcite-ui-danger);
- color: var(--calcite-ui-text-inverse);
-}
-
-:host([color="yellow"]) {
- border-color: transparent;
- background-color: var(--calcite-ui-warning);
- color: $blk-220;
-}
-
-:host([color="green"]) {
- border-color: transparent;
- background-color: var(--calcite-ui-success);
- color: $blk-220;
-}
-
-:host([color="grey"]) {
+:host([kind="neutral"]) {
border-color: transparent;
background-color: var(--calcite-ui-foreground-2);
color: var(--calcite-ui-text-1);
@@ -163,52 +187,76 @@
}
}
-:host([appearance="clear"]),
-:host([appearance="transparent"]) {
- @apply text-color-1 bg-transparent;
-}
+:host([kind="inverse"]) {
+ border-color: transparent;
+ background-color: var(--calcite-ui-inverse);
+ @apply text-color-inverse;
-// clear is deprecated. use transparent instead.
-:host([color="blue"][appearance="clear"]),
-:host([color="blue"][appearance="transparent"]) {
- border-color: var(--calcite-ui-info);
- .chip-icon {
- color: var(--calcite-ui-icon-color, var(--calcite-ui-info));
+ button,
+ .close-icon {
+ @apply text-color-inverse;
}
-}
-:host([color="red"][appearance="clear"]),
-:host([color="red"][appearance="transparent"]) {
- border-color: var(--calcite-ui-danger);
.chip-icon {
- color: var(--calcite-ui-icon-color, var(--calcite-ui-danger));
+ color: var(--calcite-ui-icon-color, var(--calcite-ui-text-inverse));
}
}
-:host([color="yellow"][appearance="clear"]),
-:host([color="yellow"][appearance="transparent"]) {
- border-color: var(--calcite-ui-warning);
- .chip-icon {
- color: var(--calcite-ui-icon-color, var(--calcite-ui-warning));
+:host([kind="brand"]) {
+ border-color: transparent;
+ background-color: var(--calcite-ui-brand);
+ color: var(--calcite-ui-text-inverse);
+ button,
+ .close-icon {
+ @apply text-color-inverse;
}
-}
-:host([color="green"][appearance="clear"]),
-:host([color="green"][appearance="transparent"]) {
- border-color: var(--calcite-ui-success);
.chip-icon {
- color: var(--calcite-ui-icon-color, var(--calcite-ui-success));
+ color: var(--calcite-ui-icon-color, var(--calcite-ui-text-inverse));
}
}
-:host([color="grey"][appearance="clear"]),
-:host([color="grey"][appearance="transparent"]) {
- border-color: var(--calcite-ui-border-1);
+:host([appearance="outline-fill"]),
+:host([appearance="outline"]) {
+ @apply text-color-1 bg-foreground-1;
+ button,
+ .close-icon {
+ @apply text-color-3;
+ }
.chip-icon {
color: var(--calcite-ui-icon-color, var(--calcite-ui-text-3));
}
}
+:host([appearance="outline-fill"]) {
+ @apply bg-foreground-1;
+}
+
+:host([appearance="outline"]) {
+ @apply bg-transparent;
+}
+
+:host([kind="neutral"][appearance="outline-fill"]),
+:host([kind="neutral"][appearance="outline"]) {
+ border-color: var(--calcite-ui-border-1);
+}
+
+:host([kind="inverse"][appearance="outline-fill"]),
+:host([kind="inverse"][appearance="outline"]) {
+ border-color: var(--calcite-ui-border-inverse);
+}
+
+:host([kind="brand"][appearance="outline-fill"]),
+:host([kind="brand"][appearance="outline"]) {
+ border-color: var(--calcite-ui-brand);
+}
+
+:host([kind="brand"][appearance="solid"]),
+:host([kind="inverse"][appearance="solid"]) {
+ button {
+ outline-color: var(--calcite-ui-text-inverse);
+ }
+}
:host([closed]) {
display: none;
}
diff --git a/src/components/chip/chip.stories.ts b/src/components/chip/chip.stories.ts
index 39ff4f7157f..5fd3d8e67c7 100644
--- a/src/components/chip/chip.stories.ts
+++ b/src/components/chip/chip.stories.ts
@@ -1,9 +1,9 @@
import { select } from "@storybook/addon-knobs";
-import { iconNames, boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
+import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
import { placeholderImage } from "../../../.storybook/placeholderImage";
-import readme from "./readme.md";
+import { modesDarkDefault } from "../../../.storybook/utils";
import { html } from "../../../support/formatting";
+import readme from "./readme.md";
export default {
title: "Components/Chip",
@@ -17,8 +17,8 @@ export const simple = (): string => html`
-
- ) : null;
+ );
}
render(): VNode {
const iconEl = (
-
+
{this.renderChipImage()}
{this.icon ? iconEl : null}
diff --git a/src/components/chip/interfaces.ts b/src/components/chip/interfaces.ts
deleted file mode 100644
index d5cddc32c8e..00000000000
--- a/src/components/chip/interfaces.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type ChipColor = "blue" | "red" | "yellow" | "green" | "grey";
diff --git a/src/components/chip/readme.md b/src/components/chip/readme.md
index 37279ea5c84..16db6823357 100644
--- a/src/components/chip/readme.md
+++ b/src/components/chip/readme.md
@@ -7,34 +7,34 @@
### Basic
```html
-Global
+Global
```
## Properties
-| Property | Attribute | Description | Type | Default |
-| -------------------- | ------------------- | -------------------------------------------------------------------------------------------- | -------------------------------------------------- | ----------- |
-| `appearance` | `appearance` | Specifies the appearance style of the component. | `"solid" \| "transparent"` | `"solid"` |
-| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` |
-| `closed` | `closed` | When `true`, hides the component. | `boolean` | `false` |
-| `color` | `color` | Specifies the color for the component. | `"blue" \| "green" \| "grey" \| "red" \| "yellow"` | `"grey"` |
-| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` |
-| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` |
-| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` |
-| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
-| `value` _(required)_ | `value` | The component's value. | `any` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| -------------------- | ------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- |
+| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid"` | `"solid"` |
+| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` |
+| `closed` | `closed` | When `true`, hides the component. | `boolean` | `false` |
+| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` |
+| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` |
+| `kind` | `kind` | Specifies the kind of the component (will apply to border and background if applicable). | `"brand" \| "inverse" \| "neutral"` | `"neutral"` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ChipMessages` | `undefined` |
+| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
+| `value` _(required)_ | `value` | The component's value. | `any` | `undefined` |
## Events
-| Event | Description | Type |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `calciteChipClose` | Fires when the close button is clicked. **Note:**: The `el` event payload props is deprecated, please use the event's `target`/`currentTarget` instead. | `CustomEvent` |
+| Event | Description | Type |
+| ------------------ | --------------------------------------- | ------------------- |
+| `calciteChipClose` | Fires when the close button is clicked. | `CustomEvent` |
## Methods
### `setFocus() => Promise`
-Sets focus on the component.
+When `closable` is `true`, sets focus on the component's "close" button (the first focusable item).
#### Returns
diff --git a/src/components/chip/resources.ts b/src/components/chip/resources.ts
index 023abd41eff..d6d3deefa7f 100644
--- a/src/components/chip/resources.ts
+++ b/src/components/chip/resources.ts
@@ -3,7 +3,10 @@ export const CSS = {
close: "close",
imageContainer: "image-container",
chipIcon: "chip-icon",
- closeIcon: "close-icon"
+ closeIcon: "close-icon",
+ contentSlotted: "content--slotted",
+ container: "container",
+ imageSlotted: "image--slotted"
};
export const SLOTS = {
diff --git a/src/components/chip/usage/Basic.md b/src/components/chip/usage/Basic.md
index be81eb1d324..2a53007def0 100644
--- a/src/components/chip/usage/Basic.md
+++ b/src/components/chip/usage/Basic.md
@@ -1,3 +1,3 @@
```html
-Global
+Global
```
diff --git a/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts b/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts
index efd98ed9f8e..27f7fe7957a 100644
--- a/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts
+++ b/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts
@@ -1,8 +1,8 @@
import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, reflects, renders, hidden } from "../../tests/commonTests";
-import { CSS } from "./resources";
-import { TEXT } from "../color-picker/resources";
+import { accessible, defaults, focusable, hidden, reflects, renders } from "../../tests/commonTests";
import { selectText } from "../../tests/utils";
+import { isValidHex, normalizeHex } from "../color-picker/utils";
+import { CSS } from "./resources";
describe("calcite-color-picker-hex-input", () => {
it("renders", () => renders("calcite-color-picker-hex-input", { display: "block" }));
@@ -21,18 +21,6 @@ describe("calcite-color-picker-hex-input", () => {
propertyName: "allowEmpty",
defaultValue: false
},
- {
- propertyName: "alphaEnabled",
- defaultValue: false
- },
- {
- propertyName: "intlHex",
- defaultValue: TEXT.hex
- },
- {
- propertyName: "intlNoColor",
- defaultValue: TEXT.noColor
- },
{
propertyName: "value",
defaultValue: "#000000"
@@ -50,8 +38,9 @@ describe("calcite-color-picker-hex-input", () => {
it("can be focused", async () => focusable("calcite-color-picker-hex-input"));
it("supports no color", async () => {
- const page = await newE2EPage();
- await page.setContent(" => await input.click({ clickCount: 3 });
@@ -256,51 +190,19 @@ describe("calcite-color-picker-hex-input", () => {
expect(await input.getProperty("value")).toBe("#bbbbbb");
});
- it("prevents entering chars if invalid hexa chars or it exceeds max hexa length", async () => {
- const page = await newE2EPage();
- await page.setContent(
- " {
const normalizedInputHex = normalizeHex(hexInputChars);
- const resetHex = allowAlpha ? "#face0fff" : "#efface";
if (normalizedInputHex === resetHex) {
throw new Error(`input hex (${hexInputChars}) cannot be the same as reset value (${resetHex})`);
}
- expectedValue =
- expectedValue === null ||
- (!allowAlpha
- ? isValidHex(normalizedInputHex)
- : isValidHex(normalizedInputHex, true) || canConvertToHexa(normalizedInputHex))
- ? expectedValue
- : resetHex;
+ expectedValue = expectedValue === null || isValidHex(normalizedInputHex) ? expectedValue : resetHex;
await typeHexValue(resetHex, "Enter");
expect(await input.getProperty("value")).toBe(resetHex);
@@ -323,235 +225,136 @@ describe("calcite-color-picker-hex-input", () => {
}
async function clearText(): Promise {
- await selectText(input);
+ await input.callMethod("setFocus");
+
+ await page.$eval("calcite-color-picker-hex-input", (el: HTMLCalciteColorPickerHexInputElement): void => {
+ const input = el.shadowRoot?.querySelector("calcite-input").shadowRoot?.querySelector("input");
+
+ if (!input) {
+ return;
+ }
+
+ const inputType = input.type;
+ input.type = "text";
+ input.setSelectionRange(input.value.length, input.value.length);
+ input.type = inputType;
+ });
+
+ await page.keyboard.press("Backspace");
+ await page.keyboard.press("Backspace");
+ await page.keyboard.press("Backspace");
+ await page.keyboard.press("Backspace");
+ await page.keyboard.press("Backspace");
await page.keyboard.press("Backspace");
}
+ const startingHex = "#b33f33";
+
+ let page: E2EPage;
+ let input: E2EElement;
+
+ beforeEach(async () => {
+ page = await newE2EPage({
+ html: ` {
it("reflects", async () =>
reflects("calcite-color-picker", [
- {
- propertyName: "appearance",
- value: "minimal"
- },
{
propertyName: "scale",
value: "m"
@@ -78,102 +74,6 @@ describe("calcite-color-picker", () => {
propertyName: "format",
defaultValue: "auto"
},
- {
- propertyName: "hexDisabled",
- defaultValue: false
- },
- {
- propertyName: "hideChannels",
- defaultValue: false
- },
- {
- propertyName: "hideHex",
- defaultValue: false
- },
- {
- propertyName: "hideSaved",
- defaultValue: false
- },
- {
- propertyName: "intlB",
- defaultValue: TEXT.b
- },
- {
- propertyName: "intlBlue",
- defaultValue: TEXT.blue
- },
- {
- propertyName: "intlDeleteColor",
- defaultValue: TEXT["deleteColor"]
- },
- {
- propertyName: "intlG",
- defaultValue: TEXT.g
- },
- {
- propertyName: "intlGreen",
- defaultValue: TEXT.green
- },
- {
- propertyName: "intlH",
- defaultValue: TEXT.h
- },
- {
- propertyName: "intlHsv",
- defaultValue: TEXT["hsv"]
- },
- {
- propertyName: "intlHex",
- defaultValue: TEXT.hex
- },
- {
- propertyName: "intlHue",
- defaultValue: TEXT.hue
- },
- {
- propertyName: "intlNoColor",
- defaultValue: TEXT.noColor
- },
- {
- propertyName: "intlR",
- defaultValue: TEXT.r
- },
- {
- propertyName: "intlRed",
- defaultValue: TEXT.red
- },
- {
- propertyName: "intlRgb",
- defaultValue: TEXT.rgb
- },
- {
- propertyName: "intlS",
- defaultValue: TEXT.s
- },
- {
- propertyName: "intlSaturation",
- defaultValue: TEXT.saturation
- },
- {
- propertyName: "intlSaveColor",
- defaultValue: TEXT.saveColor
- },
- {
- propertyName: "intlSaved",
- defaultValue: TEXT.saved
- },
- {
- propertyName: "intlV",
- defaultValue: TEXT.v
- },
- {
- propertyName: "intlValue",
- defaultValue: TEXT.value
- },
- {
- propertyName: "savedDisabled",
- defaultValue: false
- },
{
propertyName: "scale",
defaultValue: "m"
@@ -202,7 +102,7 @@ describe("calcite-color-picker", () => {
}
});
- it.skip("emits event when value changes via user interaction and not programmatically", async () => {
+ it("emits event when value changes via user interaction and not programmatically", async () => {
const page = await newE2EPage();
await page.setContent(" => {
await channelInputOrHexInput.callMethod("setFocus");
await selectText(channelInputOrHexInput);
- await channelInputOrHexInput.type(value);
+ value === "" ? await page.keyboard.press("Delete") : await channelInputOrHexInput.type(value);
await page.keyboard.press("Enter");
await page.waitForChanges();
};
@@ -494,7 +394,6 @@ describe("calcite-color-picker", () => {
const picker = await page.find("calcite-color-picker");
const supportedStringFormats = [
- allSupportedFormatToSampleValue.hex,
allSupportedFormatToSampleValue.hexa,
allSupportedFormatToSampleValue["rgb-css"],
allSupportedFormatToSampleValue["rgba-css"],
@@ -1029,27 +928,6 @@ describe("calcite-color-picker", () => {
});
it("allows nudging values", async () => {
- const assertChannelValueNudge = async (page: E2EPage, calciteInput: E2EElement): Promise => {
- await calciteInput.callMethod("setFocus");
- const currentValue = await calciteInput.getProperty("value");
-
- await page.keyboard.press("ArrowUp");
- expect(await calciteInput.getProperty("value")).toBe(`${Number(currentValue) + 1}`);
-
- await page.keyboard.press("ArrowDown");
- expect(await calciteInput.getProperty("value")).toBe(currentValue);
-
- await page.keyboard.down("Shift");
- await page.keyboard.press("ArrowUp");
- await page.keyboard.up("Shift");
- expect(await calciteInput.getProperty("value")).toBe(`${Number(currentValue) + 10}`);
-
- await page.keyboard.down("Shift");
- await page.keyboard.press("ArrowDown");
- await page.keyboard.up("Shift");
- expect(await calciteInput.getProperty("value")).toBe(currentValue);
- };
-
const page = await newE2EPage();
await page.setContent(" => {
- await calciteInput.callMethod("setFocus");
- await clearAndEnterHexOrChannelValue(page, calciteInput, "");
+ await rgbModeButton.click();
- // using page.waitForChanges as keyboard nudges occur in the next frame
+ // R Input
+ await rInput.callMethod("setFocus");
+ await selectText(rInput);
+ await page.keyboard.press("Delete");
+ await page.keyboard.press("Enter");
+ await page.waitForChanges();
- await page.keyboard.press("ArrowUp");
- await page.waitForChanges();
- expect(await calciteInput.getProperty("value")).toBe(consistentRgbHsvChannelValue);
+ expect(await rInput.getProperty("value")).toBe("");
+ expect(await element.getProperty("value")).toBeNull();
- await clearAndEnterHexOrChannelValue(page, calciteInput, "");
+ await rInput.callMethod("setFocus");
+ await page.keyboard.press("ArrowUp");
+ await page.waitForChanges();
- await page.keyboard.press("ArrowDown");
- await page.waitForChanges();
- expect(await calciteInput.getProperty("value")).toBe(consistentRgbHsvChannelValue);
+ expect(await rInput.getProperty("value")).not.toBe("");
+ expect(await element.getProperty("value")).toBe(initialValue);
- await clearAndEnterHexOrChannelValue(page, calciteInput, "");
+ // G Input
+ await gInput.callMethod("setFocus");
+ await selectText(gInput);
+ await page.keyboard.press("Delete");
+ await page.keyboard.press("Enter");
+ await page.waitForChanges();
- await page.keyboard.down("Shift");
- await page.keyboard.press("ArrowUp");
- await page.keyboard.up("Shift");
- await page.waitForChanges();
- expect(await calciteInput.getProperty("value")).toBe(consistentRgbHsvChannelValue);
+ expect(await gInput.getProperty("value")).toBe("");
+ expect(await element.getProperty("value")).toBeNull();
- await clearAndEnterHexOrChannelValue(page, calciteInput, "");
+ await gInput.callMethod("setFocus");
+ await page.keyboard.press("ArrowDown");
+ await page.waitForChanges();
- await page.keyboard.down("Shift");
- await page.keyboard.press("ArrowDown");
- await page.keyboard.up("Shift");
- await page.waitForChanges();
- expect(await calciteInput.getProperty("value")).toBe(consistentRgbHsvChannelValue);
- };
+ expect(await gInput.getProperty("value")).not.toBe("");
+ expect(await element.getProperty("value")).toBe(initialValue);
- const page = await newE2EPage();
- await page.setContent(`
- ): Promise => {
const hexInput = await page.find(`calcite-color-picker >>> calcite-color-picker-hex-input`);
-
await clearAndEnterHexOrChannelValue(page, hexInput, "abca");
-
- await assertColorUpdate(await picker.getProperty("value"));
+ const pickerValue = await picker.getProperty("value");
+ expect(pickerValue).toBe(hex);
+ expect(pickerValue).toMatch(/^#[a-f0-9]{6}$/);
const [rgbModeButton, hsvModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
const [rInput, gInput, bInput, hInput, sInput, vInput] = await page.findAll(
@@ -1259,7 +1300,9 @@ describe("calcite-color-picker", () => {
await clearAndEnterHexOrChannelValue(page, gInput, "64");
await clearAndEnterHexOrChannelValue(page, bInput, "32");
- await assertColorUpdate(await picker.getProperty("value"));
+ const rgbValue = await picker.getProperty("value");
+ expect(rgbValue).toBe("#804020");
+ expect(rgbValue).toMatch(/^#[a-f0-9]{6}$/);
await hsvModeButton.click();
@@ -1267,189 +1310,555 @@ describe("calcite-color-picker", () => {
await clearAndEnterHexOrChannelValue(page, sInput, "90");
await clearAndEnterHexOrChannelValue(page, vInput, "45");
- await assertColorUpdate(await picker.getProperty("value"));
- };
-
- it("supports hex", async () => {
- const hex = supportedFormatToSampleValue.hex;
- picker.setProperty("value", hex);
- await page.waitForChanges();
-
- await updateColorWithAllInputs(page, async (value: ColorValue) => {
- expect(value).not.toBe(hex);
- expect(value).toMatch(/^#[a-f0-9]{6}$/);
- });
+ const hsvValue = await picker.getProperty("value");
+ expect(hsvValue).toBe("#0b7373");
+ expect(hsvValue).toMatch(/^#[a-f0-9]{6}$/);
expect(() => assertUnsupportedValueMessage(hex, "auto")).toThrow();
});
it("supports hexa", async () => {
+ const page = await newE2EPage();
+ await page.setContent(" => {
await calciteInputOrSlider.callMethod("setFocus");
const currentValue = await calciteInputOrSlider.getProperty("value");
@@ -1589,10 +2003,10 @@ describe("calcite-color-picker", () => {
await assertChannelValueNudge(page, vInput);
const opacitySlider = await page.find(`calcite-color-picker >>> .${CSS.opacitySlider}`);
- const opacityInput = await page.find(`calcite-color-picker >>> .${CSS.opacityInput}`);
+ // const opacityInput = await page.find(`calcite-color-picker >>> .${CSS.opacityInput}`);
await assertChannelValueNudge(page, opacitySlider);
- await assertChannelValueNudge(page, opacityInput);
+ // await assertChannelValueNudge(page, opacityInput);
});
});
@@ -1625,8 +2039,9 @@ describe("calcite-color-picker", () => {
const opacitySlider = await page.find(`calcite-color-picker >>> .${CSS.opacitySlider}`);
const opacityInput = await page.find(`calcite-color-picker >>> .${CSS.opacityInput}`);
- expect(await opacitySlider.getProperty("value")).toBe(100); // cannot unset slider value
- expect(await opacityInput.getProperty("value")).toBe("");
+ // cannot unset opacity
+ expect(await opacitySlider.getProperty("value")).toBe(100);
+ expect(await opacityInput.getProperty("value")).toBe("100");
});
describe("clearing color via supporting inputs", () => {
@@ -1690,7 +2105,8 @@ describe("calcite-color-picker", () => {
expect(await picker.getProperty("value")).toBeNull();
});
- it("clears color via opacity input", async () => {
+ // TODO: opacity input causing trouble yet again
+ it.skip("clears color via opacity input", async () => {
const page = await newE2EPage();
await page.setContent(
"
- ): Promise => {
- async function clearValue(): Promise {
- customValueClearingFn
- ? await customValueClearingFn()
- : await clearAndEnterHexOrChannelValue(page, calciteInputOrSlider, "");
- }
-
- const initialInputValue = await calciteInputOrSlider.getProperty("value");
+ it.skip("restores previous color value when a nudge key is pressed", async () => {
+ const page = await newE2EPage();
+ await page.setContent(` => {
- // we clear reusing the opacity input since we can't do it with the slider
- await clearAndEnterHexOrChannelValue(page, opacityInput, "");
+ expect(await color.getProperty("value")).toEqual(supportedAlphaFormatToSampleValue.rgba);
});
});
-
- it("changes the value to the specified format after being empty", async () => {
- const page = await newE2EPage();
- await page.setContent(
- " {
- const sectionVisibility: Record = {
- hex: true,
- channels: true,
- saved: true
- };
-
- hiddenSections.forEach((section) => (sectionVisibility[section] = false));
+ it("allows setting no-color", async () => {
+ const page = await newE2EPage();
+ await page.setContent(` = {
- hex,
- channels,
- saved
- };
-
- sections.forEach((section) => {
- const node = sectionNodes[section];
- const visible = sectionVisibility[section];
-
- expect(node)[visible ? "toBeDefined" : "toBeNull"]();
- });
- }
+ expect(await color.getProperty("value")).not.toBe(null);
+ expect(await color.getProperty("color")).not.toBe(null);
- await assertHiddenSection(["hex", "channels", "saved"]);
- await assertHiddenSection(["hex", "channels"]);
- await assertHiddenSection(["hex", "saved"]);
- await assertHiddenSection(["hex"]);
- await assertHiddenSection(["channels", "saved"]);
- await assertHiddenSection(["saved"]);
- await assertHiddenSection(["channels"]);
- await assertHiddenSection([]);
- });
+ color.setProperty("value", null);
+ await page.waitForChanges();
- describe("scope keyboard interaction", () => {
- it("allows editing color field via keyboard", async () => {
- const page = await newE2EPage();
- await page.setContent(`
-
+
= "solid";
/**
* Internal prop for advanced use-cases.
@@ -167,168 +163,6 @@ export class ColorPicker
/** When true, hides the hex input */
@Prop() hexDisabled = false;
- /**
- * When `true`, hides the Hex input.
- *
- * @deprecated use `hexDisabled` instead
- */
- @Prop({ reflect: true }) hideHex = false;
-
- /**
- * When `true`, hides the RGB/HSV channel inputs.
- *
- * @deprecated use `channelsDisabled` instead
- */
- @Prop({ reflect: true }) hideChannels = false;
-
- /**
- * When `true`, hides the saved colors section.
- *
- * @deprecated use `savedDisabled` instead
- */
- @Prop({ reflect: true }) hideSaved = false;
-
- /**
- * Accessible name for the RGB section's blue channel.
- *
- * @default "B"
- */
- @Prop() intlB = TEXT.b;
-
- /**
- * Accessible name for the RGB section's blue channel description.
- *
- * @default "Blue"
- */
- @Prop() intlBlue = TEXT.blue;
-
- /**
- * Accessible name for the delete color button.
- *
- * @default "Delete color"
- */
- @Prop() intlDeleteColor = TEXT.deleteColor;
-
- /**
- * Accessible name for the RGB section's green channel.
- *
- * @default "G"
- */
- @Prop() intlG = TEXT.g;
-
- /**
- * Accessible name for the RGB section's green channel description.
- *
- * @default "Green"
- */
- @Prop() intlGreen = TEXT.green;
-
- /**
- * Accessible name for the HSV section's hue channel.
- *
- * @default "H"
- */
- @Prop() intlH = TEXT.h;
-
- /**
- * Accessible name for the HSV mode.
- *
- * @default "HSV"
- */
- @Prop() intlHsv = TEXT.hsv;
-
- /**
- * Accessible name for the Hex input.
- *
- * @default "Hex"
- */
- @Prop() intlHex = TEXT.hex;
-
- /**
- * Accessible name for the HSV section's hue channel description.
- *
- * @default "Hue"
- */
- @Prop() intlHue = TEXT.hue;
-
- /**
- * Accessible name for the Hex input when there is no color selected.
- *
- * @default "No color"
- */
- @Prop() intlNoColor = TEXT.noColor;
-
- /**
- * Label used for the opacity description.
- *
- * @default "Opacity"
- */
- @Prop() intlOpacity = TEXT.opacity;
-
- /**
- * Label used for the red channel
- * Accessible name for the RGB section's red channel.
- *
- * @default "R"
- */
- @Prop() intlR = TEXT.r;
-
- /**
- * Accessible name for the RGB section's red channel description.
- *
- * @default "Red"
- */
- @Prop() intlRed = TEXT.red;
-
- /**
- * Accessible name for the RGB mode.
- *
- * @default "RGB"
- */
- @Prop() intlRgb = TEXT.rgb;
-
- /**
- * Accessible name for the HSV section's saturation channel.
- *
- * @default "S"
- */
- @Prop() intlS = TEXT.s;
-
- /**
- * Accessible name for the HSV section's saturation channel description.
- *
- * @default "Saturation"
- */
- @Prop() intlSaturation = TEXT.saturation;
-
- /**
- * Accessible name for the save color button.
- *
- * @default "Save color"
- */
- @Prop() intlSaveColor = TEXT.saveColor;
-
- /**
- * Accessible name for the saved colors section.
- *
- * @default "Saved"
- */
- @Prop() intlSaved = TEXT.saved;
-
- /**
- * Accessible name for the HSV section's value channel.
- *
- * @default "V"
- */
- @Prop() intlV = TEXT.v;
-
- /**
- * Accessible name for the HSV section's value channel description.
- *
- * @default "Value"
- */
- @Prop() intlValue = TEXT.value;
-
/** When true, hides the saved colors section */
@Prop({ reflect: true }) savedDisabled = false;
@@ -347,7 +181,7 @@ export class ColorPicker
/**
* Use this property to override individual strings used by the component.
*/
- @Prop({ mutable: true }) messageOverrides: Partial;
+ @Prop({ mutable: true }) messageOverrides: Partial;
@Watch("messageOverrides")
onMessagesChange(): void {
@@ -450,7 +284,7 @@ export class ColorPicker
private sliderThumbState: "idle" | "hover" | "drag" = "idle";
- @State() defaultMessages: Messages;
+ @State() defaultMessages: ColorPickerMessages;
@State() colorFieldAndSliderInteractive = false;
@@ -472,7 +306,7 @@ export class ColorPicker
*
* @internal
*/
- @Prop({ mutable: true }) messages: Messages;
+ @Prop({ mutable: true }) messages: ColorPickerMessages;
@State() savedColors: string[] = [];
@@ -576,7 +410,6 @@ export class ColorPicker
private handleChannelInput = (event: CustomEvent): void => {
const input = event.currentTarget as HTMLCalciteInputElement;
- const internalInput = event.detail.nativeEvent.target as HTMLInputElement;
const channelIndex = Number(input.getAttribute("data-channel-index"));
const limit =
@@ -596,7 +429,10 @@ export class ColorPicker
}
input.value = inputValue;
- internalInput.value = inputValue;
+
+ // TODO: refactor calcite-input so we don't need to sync the internals
+ // https://github.com/Esri/calcite-components/issues/6100
+ input.internalSyncChildElValue();
};
// using @Listen as a workaround for VDOM listener not firing
@@ -910,12 +746,11 @@ export class ColorPicker
//
//--------------------------------------------------------------------------
- /** Sets focus on the component. */
+ /** Sets focus on the component's first focusable element. */
@Method()
async setFocus(): Promise {
await componentLoaded(this);
-
- return focusElement(this.colorFieldScopeNode);
+ this.el.focus();
}
//--------------------------------------------------------------------------
@@ -980,23 +815,7 @@ export class ColorPicker
//--------------------------------------------------------------------------
render(): VNode {
- const {
- alphaEnabled,
- allowEmpty,
- channelsDisabled,
- color,
- intlDeleteColor,
- hexDisabled,
- hideHex,
- hideChannels,
- hideSaved,
- intlHex,
- intlSaved,
- intlSaveColor,
- savedColors,
- savedDisabled,
- scale
- } = this;
+ const { alphaEnabled, allowEmpty, color, savedColors, scale } = this;
const selectedColorInHex = color ? hexify(color, alphaEnabled) : null;
const hexInputScale = scale === "l" ? "m" : "s";
const {
@@ -1015,9 +834,6 @@ export class ColorPicker
const hueLeft = hueScopeLeft ?? (colorFieldWidth * DEFAULT_COLOR.hue()) / HSV_LIMITS.h;
const noColor = color === null;
const vertical = scopeOrientation === "vertical";
- const noHex = hexDisabled || hideHex;
- const noChannels = channelsDisabled || hideChannels;
- const noSaved = savedDisabled || hideSaved;
return (
)}
- {noSaved ? null : (
+ {this.savedDisabled ? null : (
- Yes
- No
-
+
+ Yes
+ No
+
@@ -1089,10 +896,10 @@
- Yes
- No
-
+
+ Yes
+ No
+
diff --git a/src/demos/action.html b/src/demos/action.html
index bd7d1257907..4812be70c82 100644
--- a/src/demos/action.html
+++ b/src/demos/action.html
@@ -168,18 +168,18 @@
@@ -1034,7 +850,7 @@ export class ColorPicker
ref={this.initColorFieldAndSlider}
/>
- {noHex && noChannels ? null : (
+ {this.hexDisabled && this.channelsDisabled ? null : (
- {noHex ? null : (
+ {this.hexDisabled ? null : (
-
+
{this.renderChannelsTabTitle("rgb")}
{this.renderChannelsTabTitle("hsv")}
@@ -1104,20 +921,21 @@ export class ColorPicker
)}
- {alphaEnabled ? this.renderOpacitySection() : null}
+ {this.alphaEnabled ? this.renderOpacitySection() : null}
+
- {intlHex}
+ {this.messages.hex}
)}
- {noChannels ? null : (
+ {this.channelsDisabled ? null : (
-
+
- {intlOpacity}
+ {this.messages.opacity}
diff --git a/src/components/color-picker/interfaces.ts b/src/components/color-picker/interfaces.ts
index 473271f96e9..cc9a6f3f48d 100644
--- a/src/components/color-picker/interfaces.ts
+++ b/src/components/color-picker/interfaces.ts
@@ -1,7 +1,5 @@
import type Color from "color";
-export type ColorAppearance = "default" | "minimal" | "solid";
-
export type ColorMode = "rgb" | "hsv";
// need to do this otherwise, stencil build doesn't pick up the type import
diff --git a/src/components/color-picker/readme.md b/src/components/color-picker/readme.md
index 695f1d9fa40..f6729bbece5 100644
--- a/src/components/color-picker/readme.md
+++ b/src/components/color-picker/readme.md
@@ -7,15 +7,7 @@
### Basic
```html
-`
-Sets focus on the component.
+Sets focus on the component's first focusable element.
#### Returns
diff --git a/src/components/color-picker/resources.ts b/src/components/color-picker/resources.ts
index ad5f19d3d0e..a4a80867044 100644
--- a/src/components/color-picker/resources.ts
+++ b/src/components/color-picker/resources.ts
@@ -46,29 +46,6 @@ export const HSV_LIMITS = {
v: 100
};
-export const TEXT = {
- b: "B",
- blue: "Blue",
- deleteColor: "Delete color",
- g: "G",
- green: "Green",
- h: "H",
- hsv: "HSV",
- hex: "Hex",
- hue: "Hue",
- noColor: "No color",
- opacity: "Opacity",
- r: "R",
- red: "Red",
- rgb: "RGB",
- s: "S",
- saturation: "Saturation",
- saveColor: "Save color",
- saved: "Saved",
- v: "V",
- value: "Value"
-};
-
export const DIMENSIONS = {
s: {
slider: {
diff --git a/src/components/color-picker/usage/Basic.md b/src/components/color-picker/usage/Basic.md
index 4084c7d701a..055e256ecfb 100644
--- a/src/components/color-picker/usage/Basic.md
+++ b/src/components/color-picker/usage/Basic.md
@@ -1,3 +1,3 @@
```html
-;
+ @Event({ cancelable: false }) calciteComboboxItemChange: EventEmitter;
// --------------------------------------------------------------------------
//
- // Public Methods
+ // Private Methods
//
// --------------------------------------------------------------------------
- /**
- * Used to toggle the selection state. By default this won't trigger an event.
- * The first argument allows the value to be coerced, rather than swapping values.
- *
- * @param coerce
- */
- @Method()
- async toggleSelected(coerce?: boolean): Promise {
+ toggleSelected(coerce?: boolean): Promise {
if (this.disabled) {
return;
}
this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
}
- // --------------------------------------------------------------------------
- //
- // Private Methods
- //
- // --------------------------------------------------------------------------
-
itemClickHandler = (event: MouseEvent): void => {
event.preventDefault();
this.toggleSelected();
@@ -157,7 +146,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
// --------------------------------------------------------------------------
renderIcon(isSingle: boolean): VNode {
- const { icon, disabled, selected } = this;
+ const { icon, disabled, selected, iconFlipRtl } = this;
const level = `${CSS.icon}--indent`;
const defaultIcon = isSingle ? "dot" : "check";
const iconPath = disabled ? "circle-disallowed" : defaultIcon;
@@ -178,8 +167,9 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
[CSS.iconActive]: icon && selected,
[level]: true
}}
+ flipRtl={iconFlipRtl}
icon={icon || iconPath}
- scale="s"
+ scale={this.scale === "l" ? "m" : "s"}
/>
);
}
@@ -197,7 +187,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
}
render(): VNode {
- const isSingleSelect = getElementProp(this.el, "selection-mode", "multi") === "single";
+ const isSingleSelect = getElementProp(this.el, "selection-mode", "multiple") === "single";
const classes = {
[CSS.label]: true,
[CSS.selected]: this.selected,
diff --git a/src/components/combobox-item/readme.md b/src/components/combobox-item/readme.md
index a8b2f1e14ce..11cf119eb06 100644
--- a/src/components/combobox-item/readme.md
+++ b/src/components/combobox-item/readme.md
@@ -4,34 +4,24 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------------ | ----------------- | ---------------------------------------------------------------------------------------- | --------- | ----------- |
-| `active` | `active` | When `true`, the component is active. | `boolean` | `false` |
-| `ancestors` | -- | Specifies the parent and grandparent items, which are set on `calcite-combobox`. | `any[]` | `undefined` |
-| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
-| `filterDisabled` | `filter-disabled` | When `true`, omits the component from the `calcite-combobox` filtered search results. | `boolean` | `undefined` |
-| `guid` | `guid` | The `id` attribute of the component. When omitted, a globally unique identifier is used. | `string` | `guid()` |
-| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` |
-| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` |
-| `textLabel` _(required)_ | `text-label` | The component's text. | `string` | `undefined` |
-| `value` _(required)_ | `value` | The component's value. | `any` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------------------ | ----------------- | -------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `active` | `active` | When `true`, the component is active. | `boolean` | `false` |
+| `ancestors` | -- | Specifies the parent and grandparent items, which are set on `calcite-combobox`. | `any[]` | `undefined` |
+| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
+| `filterDisabled` | `filter-disabled` | When `true`, omits the component from the `calcite-combobox` filtered search results. | `boolean` | `undefined` |
+| `guid` | `guid` | The `id` attribute of the component. When omitted, a globally unique identifier is used. | `string` | `guid()` |
+| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` |
+| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` |
+| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` |
+| `textLabel` _(required)_ | `text-label` | The component's text. | `string` | `undefined` |
+| `value` _(required)_ | `value` | The component's value. | `any` | `undefined` |
## Events
-| Event | Description | Type |
-| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `calciteComboboxItemChange` | Emits whenever the component is selected or unselected. **Note:**: The event's payload is deprecated, please use the event's `target`/`currentTarget` instead | `CustomEvent` |
-
-## Methods
-
-### `toggleSelected(coerce?: boolean) => Promise`
-
-Used to toggle the selection state. By default this won't trigger an event.
-The first argument allows the value to be coerced, rather than swapping values.
-
-#### Returns
-
-Type: `Promise`
+| Event | Description | Type |
+| --------------------------- | ------------------------------------------------------- | ------------------- |
+| `calciteComboboxItemChange` | Emits whenever the component is selected or unselected. | `CustomEvent` |
## Slots
diff --git a/src/components/combobox/combobox.e2e.ts b/src/components/combobox/combobox.e2e.ts
index 0fd26bb1111..a68b03c87af 100644
--- a/src/components/combobox/combobox.e2e.ts
+++ b/src/components/combobox/combobox.e2e.ts
@@ -586,6 +586,20 @@ describe("calcite-combobox", () => {
expect(floatingUI).toBeNull();
});
+ it("should not throw when typing custom value and pressing ArrowDown", async () => {
+ const combobox = await page.find("calcite-combobox");
+ combobox.setProperty("allowCustomValues", true);
+ await page.waitForChanges();
+ const inputEl = await page.find(`#myCombobox >>> input`);
+ await inputEl.focus();
+ await page.waitForChanges();
+ expect(await page.evaluate(() => document.activeElement.id)).toBe("myCombobox");
+ await page.keyboard.type("asdf");
+ await page.waitForChanges();
+ await page.keyboard.press("ArrowDown");
+ await page.waitForChanges();
+ });
+
it(`ArrowDown opens the item group for combobox in focus and jumps to the first item`, async () => {
const inputEl = await page.find(`#myCombobox >>> input`);
await inputEl.focus();
@@ -1275,7 +1289,8 @@ describe("calcite-combobox", () => {
`);
const item = await page.find("calcite-combobox-item");
- await item.callMethod("toggleSelected");
+ item.setProperty("selected", true);
+ await page.waitForChanges();
const focusedId = await page.evaluate(() => {
const el = document.activeElement;
return el.id;
diff --git a/src/components/combobox/combobox.stories.ts b/src/components/combobox/combobox.stories.ts
index 626b411fea6..9aff6e5adcd 100644
--- a/src/components/combobox/combobox.stories.ts
+++ b/src/components/combobox/combobox.stories.ts
@@ -1,6 +1,6 @@
import { select, number, text } from "@storybook/addon-knobs";
import { boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
+import { modesDarkDefault } from "../../../.storybook/utils";
import readme1 from "./readme.md";
import readme2 from "../combobox-item/readme.md";
import { html } from "../../../support/formatting";
@@ -19,7 +19,7 @@ export const simple = (): string => html`
label="demo combobox"
placeholder="${text("placeholder", "placeholder")}"
label="${text("label (for screen readers)", "demo")}"
- selection-mode="${select("selection-mode", ["multi", "single", "ancestors", "multiple"], "multiple")}"
+ selection-mode="${select("selection-mode", ["multiple", "single", "ancestors"], "multiple")}"
scale="${select("scale", ["s", "m", "l"], "m")}"
${boolean("disabled", false)}
${boolean("allow-custom-values", false)}
@@ -51,7 +51,7 @@ export const single = (): string => html`
html`
label="demo combobox"
placeholder="${text("placeholder", "placeholder")}"
label="${text("label (for screen readers)", "demo")}"
- selection-mode="${select("selection-mode", ["multi", "single", "ancestors", "multiple"], "multiple")}"
+ selection-mode="${select("selection-mode", ["multiple", "single", "ancestors"], "multiple")}"
scale="${select("scale", ["s", "m", "l"], "m")}"
${boolean("disabled", false)}
${boolean("allow-custom-values", false)}
@@ -107,7 +107,7 @@ export const nestedItems = (): string => html`
html`
max-items="${number("max-items", 6)}"
placeholder="${text("placeholder", "placeholder")}"
label="${text("label (for screen readers)", "demo")}"
- selection-mode="${select("selection-mode", ["multi", "single", "ancestors"], "multi")}"
+ selection-mode="${select("selection-mode", ["multiple", "single", "ancestors"], "multiple")}"
scale="${select("scale", ["s", "m", "l"], "m")}"
${boolean("disabled", false)}
${boolean("allow-custom-values", false)}
@@ -253,12 +253,12 @@ flipPositioning_TestOnly.parameters = {
layout: "fullscreen"
};
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
html`
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
export const singleLongLabel_TestOnly = (): string => html`
@@ -414,3 +414,18 @@ export const optionListMinWidthMatchesInputWhenOverlayPositioningIsFixed_TestOnl
`;
+
+export const mediumIconForLargeComoboboxItem_TestOnly = (): string => html`
+
+
+`;
diff --git a/src/components/combobox/combobox.tsx b/src/components/combobox/combobox.tsx
index 2962bdab696..850de98bfa9 100644
--- a/src/components/combobox/combobox.tsx
+++ b/src/components/combobox/combobox.tsx
@@ -1,39 +1,34 @@
import {
Component,
+ Element,
+ Event,
+ EventEmitter,
h,
+ Host,
+ Listen,
+ Method,
Prop,
State,
- Listen,
- Event,
- EventEmitter,
- Element,
VNode,
- Method,
- Watch,
- Host
+ Watch
} from "@stencil/core";
-import { filter } from "../../utils/filter";
import { debounce } from "lodash-es";
+import { filter } from "../../utils/filter";
+import { isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
import {
- FloatingCSS,
- OverlayPositioning,
- FloatingUIComponent,
connectFloatingUI,
+ defaultMenuPlacement,
disconnectFloatingUI,
- LogicalPlacement,
EffectivePlacement,
- defaultMenuPlacement,
filterComputedPlacements,
+ FloatingCSS,
+ FloatingUIComponent,
+ LogicalPlacement,
+ OverlayPositioning,
reposition,
updateAfterClose
} from "../../utils/floating-ui";
-import { guid } from "../../utils/guid";
-import { Scale } from "../interfaces";
-import { ComboboxSelectionMode, ComboboxChildElement } from "./interfaces";
-import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup } from "./resources";
-import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
-import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
import {
afterConnectDefaultValueSet,
connectForm,
@@ -42,13 +37,21 @@ import {
HiddenFormInputSlot,
submitForm
} from "../../utils/form";
-import { createObserver } from "../../utils/observers";
+import { guid } from "../../utils/guid";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
-import { isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
+import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
+import {
+ componentLoaded,
+ LoadableComponent,
+ setComponentLoaded,
+ setUpLoadableComponent
+} from "../../utils/loadable";
+import { connectLocalized, disconnectLocalized } from "../../utils/locale";
+import { createObserver } from "../../utils/observers";
import {
- OpenCloseComponent,
connectOpenCloseComponent,
- disconnectOpenCloseComponent
+ disconnectOpenCloseComponent,
+ OpenCloseComponent
} from "../../utils/openCloseComponent";
import {
connectMessages,
@@ -57,14 +60,11 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
-import { connectLocalized, disconnectLocalized } from "../../utils/locale";
-import { Messages } from "./assets/combobox/t9n";
-import {
- setUpLoadableComponent,
- setComponentLoaded,
- LoadableComponent,
- componentLoaded
-} from "../../utils/loadable";
+import { Scale, SelectionMode } from "../interfaces";
+import { ComboboxMessages } from "./assets/combobox/t9n";
+import { ComboboxChildElement } from "./interfaces";
+import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup } from "./resources";
+import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
interface ItemData {
label: string;
@@ -148,6 +148,9 @@ export class Combobox
/** Specifies the placeholder icon for the input. */
@Prop({ reflect: true }) placeholderIcon: string;
+ /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+ @Prop({ reflect: true }) placeholderIconFlipRtl = false;
+
/** Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar. */
@Prop({ reflect: true }) maxItems = 0;
@@ -190,7 +193,10 @@ export class Combobox
* - single: only one selection)
* - ancestors: like multiple, but show ancestors of selected items as selected, only deepest children shown in chips
*/
- @Prop({ reflect: true }) selectionMode: ComboboxSelectionMode = "multi";
+ @Prop({ reflect: true }) selectionMode: Extract<
+ "single" | "ancestors" | "multiple",
+ SelectionMode
+ > = "multiple";
/** Specifies the size of the component. */
@Prop({ reflect: true }) scale: Scale = "m";
@@ -223,12 +229,12 @@ export class Combobox
*
* @internal
*/
- @Prop({ mutable: true }) messages: Messages;
+ @Prop({ mutable: true }) messages: ComboboxMessages;
/**
* Use this property to override individual strings used by the component.
*/
- @Prop({ mutable: true }) messageOverrides: Partial;
+ @Prop({ mutable: true }) messageOverrides: Partial;
@Watch("messageOverrides")
onMessagesChange(): void {
@@ -459,7 +465,7 @@ export class Combobox
updateMessages(this, this.effectiveLocale);
}
- @State() defaultMessages: Messages;
+ @State() defaultMessages: ComboboxMessages;
textInput: HTMLInputElement = null;
@@ -745,6 +751,10 @@ export class Combobox
}
private calculateSingleItemHeight(item: ComboboxChildElement): number {
+ if (!item) {
+ return;
+ }
+
let height = item.offsetHeight;
// if item has children items, don't count their height twice
const children = Array.from(item.querySelectorAll(ComboboxChildSelector));
@@ -1000,6 +1010,11 @@ export class Combobox
private scrollToActiveItem = (): void => {
const activeItem = this.filteredItems[this.activeItemIndex];
+
+ if (!activeItem) {
+ return;
+ }
+
const height = this.calculateSingleItemHeight(activeItem);
const { offsetHeight, scrollTop } = this.listContainerEl;
if (offsetHeight + scrollTop < activeItem.offsetTop + height) {
@@ -1066,6 +1081,7 @@ export class Combobox
class={chipClasses}
closable
icon={item.icon}
+ iconFlipRtl={item.iconFlipRtl}
id={item.guid ? `${chipUidPrefix}${item.guid}` : null}
key={item.textLabel}
messageOverrides={{ dismissLabel: messages.removeTag }}
@@ -1169,7 +1185,7 @@ export class Combobox
}
renderIconStart(): VNode {
- const { selectedItems, placeholderIcon, selectionMode } = this;
+ const { selectedItems, placeholderIcon, selectionMode, placeholderIconFlipRtl } = this;
const selectedItem = selectedItems[0];
const selectedIcon = selectedItem?.icon;
const singleSelectionMode = selectionMode === "single";
@@ -1184,6 +1200,7 @@ export class Combobox
+
+
+
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
diff --git a/src/components/notice/notice.tsx b/src/components/notice/notice.tsx
index e6ca678a38d..5dfc627488b 100644
--- a/src/components/notice/notice.tsx
+++ b/src/components/notice/notice.tsx
@@ -10,15 +10,18 @@ import {
VNode,
Watch
} from "@stencil/core";
-import { CSS, SLOTS } from "./resources";
-import { Scale, Width } from "../interfaces";
-import { StatusColor, StatusIcons } from "../alert/interfaces";
-import { getSlotted, setRequestedIcon } from "../../utils/dom";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
+import { getSlotted, setRequestedIcon } from "../../utils/dom";
+import {
+ componentLoaded,
+ LoadableComponent,
+ setComponentLoaded,
+ setUpLoadableComponent
+} from "../../utils/loadable";
import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
import {
connectMessages,
@@ -27,26 +30,23 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
-import { Messages } from "./assets/notice/t9n";
-import {
- setUpLoadableComponent,
- setComponentLoaded,
- LoadableComponent,
- componentLoaded
-} from "../../utils/loadable";
+import { Kind, Scale, Width } from "../interfaces";
+import { KindIcons } from "../resources";
+import { NoticeMessages } from "./assets/notice/t9n";
+import { CSS, SLOTS } from "./resources";
/**
* Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
* notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.
- * They are optionally dismissible - useful for keeping track of whether or not a user has dismissed the notice. You can also choose not
+ * They are optionally closable - useful for keeping track of whether or not a user has closed the notice. You can also choose not
* to display a notice on page load and set the "active" attribute as needed to contextually provide inline messaging to users.
*/
/**
* @slot title - A slot for adding the title.
* @slot message - A slot for adding the message.
- * @slot link - A slot for adding actions to take, such as: undo, try again, link to page, etc.
- * @slot actions-end - A slot for adding actions to the end of the component. It is recommended to use two or less actions.
+ * @slot link - A slot for adding a `calcite-action` to take, such as: "undo", "try again", "link to page", etc.
+ * @slot actions-end - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or less actions.
*/
@Component({
@@ -72,61 +72,25 @@ export class Notice
//
//---------------------------------------------------------------------------
- /**
- * When `true`, the component is active.
- *
- * @deprecated Use `open` instead.
- */
- @Prop({ reflect: true, mutable: true }) active = false;
-
- @Watch("active")
- activeHandler(value: boolean): void {
- this.open = value;
- }
-
/** When `true`, the component is visible. */
@Prop({ reflect: true, mutable: true }) open = false;
- @Watch("open")
- openHandler(value: boolean): void {
- this.active = value;
- }
-
- /** The color for the component's top border and icon. */
- @Prop({ reflect: true }) color: StatusColor = "blue";
-
- /**
- * When `true`, a close button is added to the component.
- *
- * @deprecated use `closable` instead.
- */
- @Prop({ reflect: true }) dismissible = false;
-
- @Watch("dismissible")
- handleDismissible(value: boolean): void {
- this.closable = value;
- }
+ /** Specifies the kind of the component (will apply to top border and icon). */
+ @Prop({ reflect: true }) kind: Extract<
+ "brand" | "danger" | "info" | "success" | "warning",
+ Kind
+ > = "brand";
/** When `true`, a close button is added to the component. */
@Prop({ reflect: true }) closable = false;
- @Watch("closable")
- handleClosable(value: boolean): void {
- this.dismissible = value;
- }
-
/**
* When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
*/
@Prop({ reflect: true }) icon: string | boolean;
- /**
- * Accessible name for the close button.
- *
- * @default "Close"
- * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
- */
- @Prop({ reflect: false }) intlClose: string;
+ /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+ @Prop({ reflect: true }) iconFlipRtl = false;
/** Specifies the size of the component. */
@Prop({ reflect: true }) scale: Scale = "m";
@@ -139,23 +103,22 @@ export class Notice
*
* @internal
*/
- @Prop({ mutable: true }) messages: Messages;
+ @Prop({ mutable: true }) messages: NoticeMessages;
/**
* Use this property to override individual strings used by the component.
*/
- @Prop({ mutable: true }) messageOverrides: Partial;
+ @Prop({ mutable: true }) messageOverrides: Partial;
- @Watch("intlClose")
@Watch("messageOverrides")
onMessagesChange(): void {
/* wired up by t9n util */
}
@Watch("icon")
- @Watch("color")
+ @Watch("kind")
updateRequestedIcon(): void {
- this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
+ this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
}
//--------------------------------------------------------------------------
@@ -168,19 +131,6 @@ export class Notice
connectConditionalSlotComponent(this);
connectLocalized(this);
connectMessages(this);
-
- const isOpen = this.active || this.open;
-
- if (isOpen) {
- this.activeHandler(isOpen);
- this.openHandler(isOpen);
- }
- if (this.dismissible) {
- this.handleDismissible(this.dismissible);
- }
- if (this.closable) {
- this.handleClosable(this.closable);
- }
}
disconnectedCallback(): void {
@@ -191,7 +141,7 @@ export class Notice
async componentWillLoad(): Promise {
setUpLoadableComponent(this);
- this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
+ this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
await setUpMessages(this);
}
@@ -218,7 +168,11 @@ export class Notice
-
- Yes
- No
-
+
+ Yes
+ No
+
@@ -1029,10 +836,10 @@
- Yes
- No
-
+
+ Yes
+ No
+
@@ -1059,10 +866,10 @@
diff --git a/src/components/date-picker-month-header/date-picker-month-header.e2e.ts b/src/components/date-picker-month-header/date-picker-month-header.e2e.ts
index 8267f386b9e..e01b2bca74f 100644
--- a/src/components/date-picker-month-header/date-picker-month-header.e2e.ts
+++ b/src/components/date-picker-month-header/date-picker-month-header.e2e.ts
@@ -1,6 +1,6 @@
import { newE2EPage } from "@stencil/core/testing";
-import { renders } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
+import { renders } from "../../tests/commonTests";
describe("calcite-date-picker-month-header", () => {
it("renders", async () => renders("calcite-date-picker-month-header", { display: "block" }));
@@ -67,7 +67,7 @@ describe("calcite-date-picker-month-header", () => {
expect(await next.isVisible()).toBe(true);
});
- it("passes down the default intlYear prop to nested .year input to set it as aria-label", async () => {
+ it("should set the input aria-label to year", async () => {
const page = await newE2EPage();
await page.setContent(html`;
+ @Event({ cancelable: false }) calciteInternalDatePickerSelect: EventEmitter;
//--------------------------------------------------------------------------
//
@@ -291,7 +293,7 @@ export class DatePickerMonthHeader {
*/
private handleArrowClick = (event: MouseEvent | KeyboardEvent, date: Date): void => {
event.preventDefault();
- this.calciteDatePickerSelect.emit(date);
+ this.calciteInternalDatePickerSelect.emit(date);
};
private getInRangeDate({
@@ -338,7 +340,7 @@ export class DatePickerMonthHeader {
// if you've supplied a year and it's in range, update active date
if (inRangeDate) {
- this.calciteDatePickerSelect.emit(inRangeDate);
+ this.calciteInternalDatePickerSelect.emit(inRangeDate);
}
if (commit) {
diff --git a/src/components/date-picker-month-header/readme.md b/src/components/date-picker-month-header/readme.md
index 78204ee9b6f..5d3bd3b75d9 100644
--- a/src/components/date-picker-month-header/readme.md
+++ b/src/components/date-picker-month-header/readme.md
@@ -14,12 +14,6 @@
| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `undefined` |
| `selectedDate` | -- | Already selected date. | `Date` | `undefined` |
-## Events
-
-| Event | Description | Type |
-| ------------------------- | ---------------------- | ------------------- |
-| `calciteDatePickerSelect` | Changes to active date | `CustomEvent` |
-
## Dependencies
### Used by
diff --git a/src/components/date-picker-month/date-picker-month.tsx b/src/components/date-picker-month/date-picker-month.tsx
index e49047782c1..0e566e73425 100644
--- a/src/components/date-picker-month/date-picker-month.tsx
+++ b/src/components/date-picker-month/date-picker-month.tsx
@@ -1,15 +1,15 @@
import {
Component,
Element,
- Prop,
- Host,
Event,
EventEmitter,
h,
+ Host,
Listen,
+ Prop,
VNode
} from "@stencil/core";
-import { inRange, sameDate, dateFromRange, HoverRange } from "../../utils/date";
+import { dateFromRange, HoverRange, inRange, sameDate } from "../../utils/date";
import { DateLocaleData } from "../date-picker/utils";
import { Scale } from "../interfaces";
@@ -72,8 +72,10 @@ export class DatePickerMonth {
/**
* Event emitted when user selects the date.
+ *
+ * @internal
*/
- @Event({ cancelable: false }) calciteDatePickerSelect: EventEmitter;
+ @Event({ cancelable: false }) calciteInternalDatePickerSelect: EventEmitter;
/**
* Event emitted when user hovers the date.
@@ -84,8 +86,10 @@ export class DatePickerMonth {
/**
* Active date for the user keyboard access.
+ *
+ * @internal
*/
- @Event({ cancelable: false }) calciteDatePickerActiveDateChange: EventEmitter;
+ @Event({ cancelable: false }) calciteInternalDatePickerActiveDateChange: EventEmitter;
/**
* @internal
@@ -241,7 +245,9 @@ export class DatePickerMonth {
private addMonths(step: number) {
const nextDate = new Date(this.activeDate);
nextDate.setMonth(this.activeDate.getMonth() + step);
- this.calciteDatePickerActiveDateChange.emit(dateFromRange(nextDate, this.min, this.max));
+ this.calciteInternalDatePickerActiveDateChange.emit(
+ dateFromRange(nextDate, this.min, this.max)
+ );
this.activeFocus = true;
}
@@ -253,7 +259,9 @@ export class DatePickerMonth {
private addDays(step = 0) {
const nextDate = new Date(this.activeDate);
nextDate.setDate(this.activeDate.getDate() + step);
- this.calciteDatePickerActiveDateChange.emit(dateFromRange(nextDate, this.min, this.max));
+ this.calciteInternalDatePickerActiveDateChange.emit(
+ dateFromRange(nextDate, this.min, this.max)
+ );
this.activeFocus = true;
}
@@ -376,7 +384,7 @@ export class DatePickerMonth {
daySelect = (event: CustomEvent): void => {
const target = event.target as HTMLCalciteDatePickerDayElement;
- this.calciteDatePickerSelect.emit(target.value);
+ this.calciteInternalDatePickerSelect.emit(target.value);
};
/**
diff --git a/src/components/date-picker-month/readme.md b/src/components/date-picker-month/readme.md
index c3c5edaa4b4..ced7eedb08f 100644
--- a/src/components/date-picker-month/readme.md
+++ b/src/components/date-picker-month/readme.md
@@ -15,13 +15,6 @@
| `selectedDate` | -- | Already selected date. | `Date` | `undefined` |
| `startDate` | -- | Start date currently active. | `Date` | `undefined` |
-## Events
-
-| Event | Description | Type |
-| ----------------------------------- | ----------------------------------------- | ------------------- |
-| `calciteDatePickerActiveDateChange` | Active date for the user keyboard access. | `CustomEvent` |
-| `calciteDatePickerSelect` | Event emitted when user selects the date. | `CustomEvent` |
-
## Dependencies
### Used by
diff --git a/src/components/date-picker/assets/date-picker/nls/ar.json b/src/components/date-picker/assets/date-picker/nls/ar.json
index eca97ba601f..75b920d849d 100644
--- a/src/components/date-picker/assets/date-picker/nls/ar.json
+++ b/src/components/date-picker/assets/date-picker/nls/ar.json
@@ -2,7 +2,7 @@
"default-calendar": "gregorian",
"separator": "/",
"unitOrder": "DD/MM/YYYY",
- "weekStart": 7,
+ "weekStart": 6,
"placeholder": "DD/MM/YYYY",
"days": {
"abbreviated": ["الأحد", "الاثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت"],
diff --git a/src/components/date-picker/date-picker.e2e.ts b/src/components/date-picker/date-picker.e2e.ts
index cec9fbe9634..10473c3044d 100644
--- a/src/components/date-picker/date-picker.e2e.ts
+++ b/src/components/date-picker/date-picker.e2e.ts
@@ -1,7 +1,9 @@
import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { renders, defaults, hidden, t9n } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
+import { defaults, hidden, renders, t9n } from "../../tests/commonTests";
import { skipAnimations } from "../../tests/utils";
+import { dateFromISO } from "../../utils/date";
+import { formatTimePart } from "../../utils/time";
describe("calcite-date-picker", () => {
it("renders", async () => renders("calcite-date-picker", { display: "inline-block" }));
@@ -96,6 +98,32 @@ describe("calcite-date-picker", () => {
expect(changedEvent).toHaveReceivedEventTimes(2);
});
+ it("Emits change event and updates value property when start and end dates are selected", async () => {
+ const page = await newE2EPage();
+ await page.setContent(" {
+ await page.$eval(
+ "calcite-date-picker",
+ (datePicker: HTMLCalciteDatePickerElement, id: string, method: "mouse" | "keyboard") => {
+ const day = datePicker.shadowRoot
+ .querySelector("calcite-date-picker-month")
+ .shadowRoot.getElementById(id);
+
+ if (method === "mouse") {
+ day.click();
+ } else {
+ day.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
+ }
+ },
+ id,
+ method
+ );
+ await page.waitForChanges();
+ }
+
async function selectFirstAvailableDay(page: E2EPage, method: "mouse" | "keyboard"): Promise {
await page.$eval(
"calcite-date-picker",
diff --git a/src/components/date-picker/date-picker.scss b/src/components/date-picker/date-picker.scss
index d4552c15582..835e4a54972 100644
--- a/src/components/date-picker/date-picker.scss
+++ b/src/components/date-picker/date-picker.scss
@@ -1,5 +1,5 @@
:host {
- @apply border-color-2
+ @apply border-color-1
bg-foreground-1
relative
inline-block
diff --git a/src/components/date-picker/date-picker.stories.ts b/src/components/date-picker/date-picker.stories.ts
index 0095963ff6e..c81431648ef 100644
--- a/src/components/date-picker/date-picker.stories.ts
+++ b/src/components/date-picker/date-picker.stories.ts
@@ -1,17 +1,17 @@
-import { select, text, boolean } from "@storybook/addon-knobs";
+import { boolean, select, text } from "@storybook/addon-knobs";
+import { storyFilters } from "../../../.storybook/helpers";
+import { ATTRIBUTES } from "../../../.storybook/resources";
import {
Attribute,
- filterComponentAttributes,
Attributes,
createComponentHTML as create,
- themesDarkDefault
+ filterComponentAttributes,
+ modesDarkDefault
} from "../../../.storybook/utils";
-import readme from "./readme.md";
import { html } from "../../../support/formatting";
import { locales } from "../../utils/locale";
-import { storyFilters } from "../../../.storybook/helpers";
-import { ATTRIBUTES } from "../../../.storybook/resources";
+import readme from "./readme.md";
const { scale } = ATTRIBUTES;
export default {
@@ -121,30 +121,24 @@ export const range = (): string =>
)}
`;
-export const rangeRTL_TestOnly = (): string =>
- html`
- ${create(
- "calcite-date-picker",
- createAttributes({ exceptions: ["min", "range", "dir"] }).concat([
- { name: "dir", value: "rtl" },
- { name: "min", value: "2016-08-09" },
- { name: "range", value: "true" }
- ])
- )}
-
`;
+export const rangeRTL_TestOnly = (): string => html`
+
+
+`;
-export const darkThemeRTL_TestOnly = (): string =>
+export const darkModeRTL_TestOnly = (): string =>
html`
${create(
"calcite-date-picker",
createAttributes({ exceptions: ["class", "dir"] }).concat([
{ name: "dir", value: "rtl" },
- { name: "class", value: "calcite-theme-dark" }
+ { name: "class", value: "calcite-mode-dark" }
])
)}
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
export const bgLang_TestOnly = (): string =>
html`
@@ -225,6 +219,10 @@ export const arabLangNumberingSystem_TestOnly = (): string =>
)}
`;
+arabLangNumberingSystem_TestOnly.parameters = {
+ chromatic: { diffThreshold: 1 }
+};
+
export const thaiLangNumberingSystem_TestOnly = (): string =>
html`
${create(
diff --git a/src/components/date-picker/date-picker.tsx b/src/components/date-picker/date-picker.tsx
index a1d74ab88da..98d556e913c 100644
--- a/src/components/date-picker/date-picker.tsx
+++ b/src/components/date-picker/date-picker.tsx
@@ -1,27 +1,31 @@
import {
+ Build,
Component,
- h,
- Prop,
- Event,
Element,
+ Event,
+ EventEmitter,
+ h,
Host,
+ Prop,
State,
- EventEmitter,
- Watch,
VNode,
- Build
+ Watch
} from "@stencil/core";
-import { getLocaleData, DateLocaleData, getValueAsDateRange } from "./utils";
import {
- dateFromRange,
dateFromISO,
+ dateFromRange,
dateToISO,
getDaysDiff,
HoverRange,
setEndOfDay
} from "../../utils/date";
-import { HeadingLevel } from "../functional/Heading";
-import { Messages } from "./assets/date-picker/t9n";
+import {
+ connectLocalized,
+ disconnectLocalized,
+ LocalizedComponent,
+ NumberingSystem,
+ numberStringFormatter
+} from "../../utils/locale";
import {
connectMessages,
disconnectMessages,
@@ -29,20 +33,18 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
+import { HeadingLevel } from "../functional/Heading";
+import { DatePickerMessages } from "./assets/date-picker/t9n";
import { HEADING_LEVEL } from "./resources";
-import {
- connectLocalized,
- disconnectLocalized,
- LocalizedComponent,
- NumberingSystem,
- numberStringFormatter
-} from "../../utils/locale";
+import { DateLocaleData, getLocaleData, getValueAsDateRange } from "./utils";
@Component({
assetsDirs: ["assets"],
tag: "calcite-date-picker",
styleUrl: "date-picker.scss",
- shadow: true
+ shadow: {
+ delegatesFocus: true
+ }
})
export class DatePicker implements LocalizedComponent, T9nComponent {
//--------------------------------------------------------------------------
@@ -87,41 +89,24 @@ export class DatePicker implements LocalizedComponent, T9nComponent {
@Prop({ mutable: true }) valueAsDate: Date | Date[];
@Watch("valueAsDate")
- handleValueAsDate(date: Date | Date[]): void {
- if (!Array.isArray(date) && date && date !== this.activeDate) {
- this.activeDate = date;
+ valueAsDateWatcher(newValueAsDate: Date | Date[]): void {
+ if (this.range && Array.isArray(newValueAsDate)) {
+ const { activeStartDate, activeEndDate } = this;
+ const newActiveStartDate = newValueAsDate[0];
+ const newActiveEndDate = newValueAsDate[1];
+ this.activeStartDate = activeStartDate !== newActiveStartDate && newActiveStartDate;
+ this.activeEndDate = activeEndDate !== newActiveEndDate && newActiveEndDate;
+ } else if (newValueAsDate && newValueAsDate !== this.activeDate) {
+ this.activeDate = newValueAsDate as Date;
}
}
- /**
- * Specifies the selected start date as a full date object.
- *
- * @deprecated use `valueAsDate` instead.
- */
- @Prop({ mutable: true }) startAsDate: Date;
-
- /**
- * Specifies the selected end date as a full date object.
- *
- * @deprecated use `valueAsDate` instead.
- */
- @Prop({ mutable: true }) endAsDate: Date;
-
/** Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
@Prop({ mutable: true }) minAsDate: Date;
/** Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
@Prop({ mutable: true }) maxAsDate: Date;
- @Watch("startAsDate")
- @Watch("endAsDate")
- handleRangeChange(): void {
- const { startAsDate: startDate, endAsDate: endDate } = this;
-
- this.activeEndDate = endDate;
- this.activeStartDate = startDate;
- }
-
/** Specifies the earliest allowed date (`"yyyy-mm-dd"`). */
@Prop({ mutable: true, reflect: true }) min: string;
@@ -160,14 +145,14 @@ export class DatePicker implements LocalizedComponent, T9nComponent {
/**
* Use this property to override individual strings used by the component.
*/
- @Prop({ mutable: true }) messageOverrides: Partial;
+ @Prop({ mutable: true }) messageOverrides: Partial;
/**
* Made into a prop for testing purposes only
*
* @internal
*/
- @Prop({ mutable: true }) messages: Messages;
+ @Prop({ mutable: true }) messages: DatePickerMessages;
@Watch("messageOverrides")
onMessagesChange(): void {
@@ -186,8 +171,6 @@ export class DatePicker implements LocalizedComponent, T9nComponent {
/**
* Emits when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`.
- *
- * @see [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/date-picker/interfaces.ts#L1)
*/
@Event({ cancelable: false }) calciteDatePickerRangeChange: EventEmitter;
@@ -201,6 +184,10 @@ export class DatePicker implements LocalizedComponent, T9nComponent {
*/
@State() activeEndDate: Date;
+ @State() startAsDate: Date;
+
+ @State() endAsDate: Date;
+
// --------------------------------------------------------------------------
//
// Lifecycle
@@ -293,7 +280,7 @@ export class DatePicker implements LocalizedComponent, T9nComponent {
updateMessages(this, this.effectiveLocale);
}
- @State() defaultMessages: Messages;
+ @State() defaultMessages: DatePickerMessages;
@State() private localeData: DateLocaleData;
@@ -366,20 +353,25 @@ export class DatePicker implements LocalizedComponent, T9nComponent {
};
monthHoverChange = (event: CustomEvent): void => {
- if (!this.startAsDate) {
+ if (!this.range) {
this.hoverRange = undefined;
return;
}
+
+ const { valueAsDate } = this;
+ const start = Array.isArray(valueAsDate) && valueAsDate[0];
+ const end = Array.isArray(valueAsDate) && valueAsDate[1];
+
const date = new Date(event.detail);
this.hoverRange = {
focused: this.activeRange || "start",
- start: this.startAsDate,
- end: this.endAsDate
+ start,
+ end
};
if (!this.proximitySelectionDisabled) {
- if (this.endAsDate) {
- const startDiff = getDaysDiff(date, this.startAsDate);
- const endDiff = getDaysDiff(date, this.endAsDate);
+ if (end) {
+ const startDiff = getDaysDiff(date, start);
+ const endDiff = getDaysDiff(date, end);
if (endDiff > 0) {
this.hoverRange.end = date;
this.hoverRange.focused = "end";
@@ -394,11 +386,11 @@ export class DatePicker implements LocalizedComponent, T9nComponent {
this.hoverRange.focused = "end";
}
} else {
- if (date < this.startAsDate) {
+ if (date < start) {
this.hoverRange = {
focused: "start",
start: date,
- end: this.startAsDate
+ end: start
};
} else {
this.hoverRange.end = date;
@@ -406,12 +398,12 @@ export class DatePicker implements LocalizedComponent, T9nComponent {
}
}
} else {
- if (!this.endAsDate) {
- if (date < this.startAsDate) {
+ if (!end) {
+ if (date < start) {
this.hoverRange = {
focused: "start",
start: date,
- end: this.startAsDate
+ end: start
};
} else {
this.hoverRange.end = date;
@@ -455,7 +447,7 @@ export class DatePicker implements LocalizedComponent, T9nComponent {
max={maxDate}
messages={this.messages}
min={minDate}
- onCalciteDatePickerSelect={this.monthHeaderSelectChange}
+ onCalciteInternalDatePickerSelect={this.monthHeaderSelectChange}
scale={this.scale}
selectedDate={this.activeRange === "end" ? endDate : date || new Date()}
/>,
@@ -466,10 +458,10 @@ export class DatePicker implements LocalizedComponent, T9nComponent {
localeData={this.localeData}
max={maxDate}
min={minDate}
- onCalciteDatePickerActiveDateChange={this.monthActiveDateChange}
- onCalciteDatePickerSelect={this.monthDateChange}
+ onCalciteInternalDatePickerActiveDateChange={this.monthActiveDateChange}
onCalciteInternalDatePickerHover={this.monthHoverChange}
onCalciteInternalDatePickerMouseOut={this.monthMouseOutChange}
+ onCalciteInternalDatePickerSelect={this.monthDateChange}
scale={this.scale}
selectedDate={this.activeRange === "end" ? endDate : date}
startDate={this.range ? date : undefined}
@@ -478,60 +470,60 @@ export class DatePicker implements LocalizedComponent, T9nComponent {
);
}
- /**
- * Update date instance of start if valid
- *
- * @param startDate
- * @param emit
- */
- private setStartAsDate(startDate: Date, emit?: boolean): void {
- this.startAsDate = startDate;
- this.mostRecentRangeValue = this.startAsDate;
- if (emit) {
- this.calciteDatePickerRangeChange.emit();
- }
- }
-
- /**
- * Update date instance of end if valid
- *
- * @param endDate
- * @param emit
- */
- private setEndAsDate(endDate: Date, emit?: boolean): void {
- this.endAsDate = endDate ? setEndOfDay(endDate) : endDate;
- this.mostRecentRangeValue = this.endAsDate;
- if (emit) {
- this.calciteDatePickerRangeChange.emit();
- }
- }
-
/**
* Reset active date and close
*/
reset = (): void => {
+ const { valueAsDate } = this;
if (
- !Array.isArray(this.valueAsDate) &&
- this.valueAsDate &&
- this.valueAsDate?.getTime() !== this.activeDate?.getTime()
+ !Array.isArray(valueAsDate) &&
+ valueAsDate &&
+ valueAsDate?.getTime() !== this.activeDate?.getTime()
) {
- this.activeDate = new Date(this.valueAsDate);
+ this.activeDate = new Date(valueAsDate);
}
- if (this.startAsDate && this.startAsDate?.getTime() !== this.activeStartDate?.getTime()) {
- this.activeStartDate = new Date(this.startAsDate);
- }
- if (this.endAsDate && this.endAsDate?.getTime() !== this.activeEndDate?.getTime()) {
- this.activeEndDate = new Date(this.endAsDate);
+ if (Array.isArray(valueAsDate)) {
+ if (
+ valueAsDate[0] &&
+ valueAsDate[0]?.getTime() !==
+ (this.activeStartDate instanceof Date && this.activeStartDate?.getTime())
+ ) {
+ this.activeStartDate = new Date(valueAsDate[0]);
+ }
+ if (
+ valueAsDate[1] &&
+ valueAsDate[1]?.getTime() !==
+ (this.activeStartDate instanceof Date && this.activeEndDate?.getTime())
+ ) {
+ this.activeEndDate = new Date(valueAsDate[1]);
+ }
}
};
+ private getEndDate(): Date {
+ return (Array.isArray(this.valueAsDate) && this.valueAsDate[1]) || undefined;
+ }
+
private setEndDate(date: Date): void {
- this.setEndAsDate(date, true);
+ const startDate = this.getStartDate();
+ const newEndDate = date ? setEndOfDay(date) : date;
+ this.value = [dateToISO(startDate), dateToISO(date)];
+ this.valueAsDate = [startDate, date];
+ this.mostRecentRangeValue = newEndDate;
+ this.calciteDatePickerRangeChange.emit();
this.activeEndDate = date || null;
}
+ private getStartDate(): Date {
+ return Array.isArray(this.valueAsDate) && this.valueAsDate[0];
+ }
+
private setStartDate(date: Date): void {
- this.setStartAsDate(date, true);
+ const endDate = this.getEndDate();
+ this.value = [dateToISO(date), dateToISO(endDate)];
+ this.valueAsDate = [date, endDate];
+ this.mostRecentRangeValue = date;
+ this.calciteDatePickerRangeChange.emit();
this.activeStartDate = date || null;
}
@@ -556,16 +548,19 @@ export class DatePicker implements LocalizedComponent, T9nComponent {
return;
}
- if (!this.startAsDate || (!this.endAsDate && date < this.startAsDate)) {
- if (this.startAsDate) {
- this.setEndDate(new Date(this.startAsDate));
+ const start = this.getStartDate();
+ const end = this.getEndDate();
+
+ if (!start || (!end && date < start)) {
+ if (start) {
+ this.setEndDate(new Date(start));
}
if (this.activeRange == "end") {
this.setEndDate(date);
} else {
this.setStartDate(date);
}
- } else if (!this.endAsDate) {
+ } else if (!end) {
this.setEndDate(date);
} else {
if (!this.proximitySelectionDisabled) {
@@ -576,8 +571,8 @@ export class DatePicker implements LocalizedComponent, T9nComponent {
this.setStartDate(date);
}
} else {
- const startDiff = getDaysDiff(date, this.startAsDate);
- const endDiff = getDaysDiff(date, this.endAsDate);
+ const startDiff = getDaysDiff(date, start);
+ const endDiff = getDaysDiff(date, end);
if (endDiff === 0 || startDiff < 0) {
this.setStartDate(date);
} else if (startDiff === 0 || endDiff < 0) {
@@ -590,7 +585,6 @@ export class DatePicker implements LocalizedComponent, T9nComponent {
}
} else {
this.setStartDate(date);
- this.endAsDate = this.activeEndDate = undefined;
}
}
this.calciteDatePickerChange.emit();
diff --git a/src/components/date-picker/interfaces.d.ts b/src/components/date-picker/interfaces.d.ts
deleted file mode 100644
index 2b3c1d29c8c..00000000000
--- a/src/components/date-picker/interfaces.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// @deprecated remove this file before 1.0
-export interface DateRangeChange {
- startDate: Date;
- endDate: Date;
-}
diff --git a/src/components/date-picker/readme.md b/src/components/date-picker/readme.md
index 3a64dab920f..2d9a4fefd58 100644
--- a/src/components/date-picker/readme.md
+++ b/src/components/date-picker/readme.md
@@ -28,18 +28,16 @@ You can also add range property to activate date range mode. In this mode, you w
| ---------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `activeDate` | -- | Specifies the component's active date. | `Date` | `undefined` |
| `activeRange` | `active-range` | When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. | `"end" \| "start"` | `undefined` |
-| `endAsDate` | -- | **[DEPRECATED]** use `valueAsDate` instead.
Specifies the selected end date as a full date object. | `Date` | `undefined` | | `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | | `max` | `max` | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `string` | `undefined` | | `maxAsDate` | -- | Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). | `Date` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `DatePickerMessages` | `undefined` | | `min` | `min` | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `string` | `undefined` | | `minAsDate` | -- | Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). | `Date` | `undefined` | | `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined` | | `proximitySelectionDisabled` | `proximity-selection-disabled` | When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. | `boolean` | `false` | | `range` | `range` | When `true`, activates the component's range mode to allow a start and end date. | `boolean` | `false` | | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `startAsDate` | -- | **[DEPRECATED]** use `valueAsDate` instead.
Specifies the selected start date as a full date object. | `Date` | `undefined` | | `value` | `value` | Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). | `string \| string[]` | `undefined` | | `valueAsDate` | -- | Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). | `Date \| Date[]` | `undefined` | diff --git a/src/components/date-picker/utils.ts b/src/components/date-picker/utils.ts index 210055c6c9e..4c902a450d4 100644 --- a/src/components/date-picker/utils.ts +++ b/src/components/date-picker/utils.ts @@ -1,6 +1,6 @@ import { getAssetPath } from "@stencil/core"; -import { getSupportedLocale } from "../../utils/locale"; import { dateFromISO } from "../../utils/date"; +import { getSupportedLocale } from "../../utils/locale"; /** * Translation resource data structure diff --git a/src/components/dropdown-group/dropdown-group.tsx b/src/components/dropdown-group/dropdown-group.tsx index 8ec96c32a68..d3d5f5fdebe 100644 --- a/src/components/dropdown-group/dropdown-group.tsx +++ b/src/components/dropdown-group/dropdown-group.tsx @@ -10,17 +10,18 @@ import { VNode } from "@stencil/core"; import { getElementProp } from "../../utils/dom"; -import { RequestedItem, SelectionMode } from "./interfaces"; -import { Scale } from "../interfaces"; +import { Scale, SelectionMode } from "../interfaces"; +import { RequestedItem } from "./interfaces"; import { CSS } from "./resources"; - /** * @slot - A slot for adding `calcite-dropdown-item`s. */ @Component({ tag: "calcite-dropdown-group", styleUrl: "dropdown-group.scss", - shadow: true + shadow: { + delegatesFocus: true + } }) export class DropdownGroup { //-------------------------------------------------------------------------- @@ -41,11 +42,12 @@ export class DropdownGroup { /** * Specifies the component's selection mode, where - * `"multi"` allows any number of (or no) selected `calcite-dropdown-item`s, + * `"multiple"` allows any number of (or no) selected `calcite-dropdown-item`s, * `"single"` allows and requires one selected `calcite-dropdown-item`, and * `"none"` does not allow selection on `calcite-dropdown-item`s. */ - @Prop({ reflect: true }) selectionMode: SelectionMode = "single"; + @Prop({ reflect: true }) selectionMode: Extract<"single" | "none" | "multiple", SelectionMode> = + "single"; /** * Specifies the size of the component. diff --git a/src/components/dropdown-group/interfaces.ts b/src/components/dropdown-group/interfaces.ts index bcbd53af9a2..996cfb75083 100644 --- a/src/components/dropdown-group/interfaces.ts +++ b/src/components/dropdown-group/interfaces.ts @@ -1,4 +1,3 @@ -export type SelectionMode = "multi" | "single" | "none" | "multiple"; export interface RequestedItem { requestedDropdownItem: HTMLCalciteDropdownItemElement; requestedDropdownGroup: HTMLCalciteDropdownGroupElement; diff --git a/src/components/dropdown-group/readme.md b/src/components/dropdown-group/readme.md index 0e471813925..9464283d9ee 100644 --- a/src/components/dropdown-group/readme.md +++ b/src/components/dropdown-group/readme.md @@ -4,11 +4,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------- | -| `groupTitle` | `group-title` | Specifies and displays a group title. | `string` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `undefined` | -| `selectionMode` | `selection-mode` | Specifies the component's selection mode, where `"multi"` allows any number of (or no) selected `calcite-dropdown-item`s, `"single"` allows and requires one selected `calcite-dropdown-item`, and `"none"` does not allow selection on `calcite-dropdown-item`s. | `"multi" \| "multiple" \| "none" \| "single"` | `"single"` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------- | +| `groupTitle` | `group-title` | Specifies and displays a group title. | `string` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `undefined` | +| `selectionMode` | `selection-mode` | Specifies the component's selection mode, where `"multiple"` allows any number of (or no) selected `calcite-dropdown-item`s, `"single"` allows and requires one selected `calcite-dropdown-item`, and `"none"` does not allow selection on `calcite-dropdown-item`s. | `"multiple" \| "none" \| "single"` | `"single"` | ## Slots diff --git a/src/components/dropdown-item/dropdown-item.scss b/src/components/dropdown-item/dropdown-item.scss index d86f5afd981..f4d2902df4b 100644 --- a/src/components/dropdown-item/dropdown-item.scss +++ b/src/components/dropdown-item/dropdown-item.scss @@ -11,7 +11,7 @@ } .container--l { - @apply text-0h py-3; + @apply text-0h py-2.5; padding-inline-end: theme("padding.4"); padding-inline-start: theme("padding.10"); } @@ -63,7 +63,7 @@ } .dropdown-item-content { - @apply flex-auto; + @apply flex-auto py-0.5; padding-inline-end: theme("margin.auto"); padding-inline-start: theme("margin.1"); } diff --git a/src/components/dropdown-item/dropdown-item.tsx b/src/components/dropdown-item/dropdown-item.tsx index 527b058aa5d..6ba35b1fd7f 100644 --- a/src/components/dropdown-item/dropdown-item.tsx +++ b/src/components/dropdown-item/dropdown-item.tsx @@ -12,15 +12,14 @@ import { } from "@stencil/core"; import { getElementProp, toAriaBoolean } from "../../utils/dom"; import { ItemKeyboardEvent } from "../dropdown/interfaces"; - -import { FlipContext } from "../interfaces"; +import { RequestedItem } from "../dropdown-group/interfaces"; +import { FlipContext, Scale, SelectionMode } from "../interfaces"; import { CSS } from "./resources"; -import { RequestedItem, SelectionMode } from "../dropdown-group/interfaces"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; /** @@ -49,7 +48,7 @@ export class DropdownItem implements LoadableComponent { /** When `true`, the component is selected. */ @Prop({ reflect: true, mutable: true }) selected = false; - /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ + /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ @@ -128,26 +127,26 @@ export class DropdownItem implements LoadableComponent { } render(): VNode { - const scale = getElementProp(this.el, "scale", "m"); + const scale = getElementProp(this.el, "scale", this.scale); const iconStartEl = (Open Dropdown
Relevance
@@ -51,7 +51,7 @@ export const simpleAutoWidth = (): string => html`
>
Open Dropdown
Relevance
@@ -75,7 +75,7 @@ export const simpleFullWidth = (): string => html`
>
Open Dropdown
Relevance
@@ -98,7 +98,7 @@ export const withIcons = (): string => html`
>
Open Dropdown
List
@@ -106,7 +106,7 @@ export const withIcons = (): string => html`
Table
List
@@ -114,7 +114,7 @@ export const withIcons = (): string => html`
Table
List
@@ -183,7 +183,7 @@ export const itemsAsLinks = (): string => html`
`;
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
- ) : null;
+ if (!this.fullscreen && (this.cssWidth || this.cssHeight)) {
+ return (
+
+ );
+ }
}
//--------------------------------------------------------------------------
@@ -303,9 +321,13 @@ export class Modal
modalContent: HTMLDivElement;
- private mutationObserver: MutationObserver = createObserver("mutation", () =>
- this.updateFooterVisibility()
- );
+ private mutationObserver: MutationObserver = createObserver("mutation", () => {
+ this.updateFooterVisibility();
+ });
+
+ private cssVarObserver: MutationObserver = createObserver("mutation", () => {
+ this.updateSizeCssVars();
+ });
titleId: string;
@@ -321,6 +343,10 @@ export class Modal
contentId: string;
+ @State() cssWidth: string | number;
+
+ @State() cssHeight: string | number;
+
@State() hasFooter = true;
/**
@@ -337,7 +363,7 @@ export class Modal
updateMessages(this, this.effectiveLocale);
}
- @State() defaultMessages: Messages;
+ @State() defaultMessages: ModalMessages;
//--------------------------------------------------------------------------
//
@@ -377,24 +403,21 @@ export class Modal
//--------------------------------------------------------------------------
/**
- * Sets focus on the component.
+ * Sets focus on the component's "close" button (the first focusable item).
*
- * By default, tries to focus on focusable content. If there is none, it will focus on the close button.
- * To focus on the close button, use the `close-button` focus ID.
- *
- * @param focusId
*/
@Method()
- async setFocus(focusId?: "close-button"): Promise {
+ async setFocus(): Promise {
await componentLoaded(this);
+ focusFirstTabbable(this.focusTrapEl);
+ }
- const { closeButtonEl } = this;
-
- if (closeButtonEl && focusId === "close-button") {
- return focusElement(closeButtonEl);
- }
-
- focusFirstTabbable(this);
+ /**
+ * Updates the element(s) that are used within the focus-trap of the component.
+ */
+ @Method()
+ async updateFocusTrapElements(): Promise {
+ updateFocusTrapElements(this);
}
/**
@@ -477,7 +500,9 @@ export class Modal
this.titleId = ensureId(titleEl);
this.contentId = ensureId(contentEl);
- document.documentElement.classList.add(CSS.overflowHidden);
+ if (!this.slottedInShell) {
+ document.documentElement.classList.add(CSS.overflowHidden);
+ }
}
handleOutsideClose = (): void => {
@@ -504,4 +529,9 @@ export class Modal
private updateFooterVisibility = (): void => {
this.hasFooter = !!getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);
};
+
+ private updateSizeCssVars = (): void => {
+ this.cssWidth = getComputedStyle(this.el).getPropertyValue("--calcite-modal-width");
+ this.cssHeight = getComputedStyle(this.el).getPropertyValue("--calcite-modal-height");
+ };
}
diff --git a/src/components/modal/readme.md b/src/components/modal/readme.md
index 8fa96e417b9..c383319d350 100644
--- a/src/components/modal/readme.md
+++ b/src/components/modal/readme.md
@@ -19,7 +19,7 @@ Customize the modal by passing your content into multiple named slots: `header`
+
Back
Cancel
@@ -55,22 +55,20 @@ modal.beforeClose = beforeClose;
## Properties
-| Property | Attribute | Description | Type | Default |
-| ---------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------- |
-| `backgroundColor` | `background-color` | Sets the background color of the component's content. | `"grey" \| "white"` | `"white"` |
-| `beforeClose` | -- | Passes a function to run before the component closes. | `(el: HTMLElement) => Promise` | `() => Promise.resolve()` |
-| `closeButtonDisabled` | `close-button-disabled` | When `true`, disables the component's close button. | `boolean` | `false` |
-| `color` | `color` | Adds a color bar to the top of component for visual impact. Use color to add importance to destructive or workflow dialogs. | `"blue" \| "red"` | `undefined` |
-| `docked` | `docked` | When `true`, prevents the component from expanding to the entire screen on mobile devices. | `boolean` | `undefined` |
-| `escapeDisabled` | `escape-disabled` | When `true`, disables the default close on escape behavior. | `boolean` | `false` |
-| `focusTrapDisabled` | `focus-trap-disabled` | When `true`, prevents focus trapping. | `boolean` | `false` |
-| `fullscreen` | `fullscreen` | Sets the component to always be fullscreen (overrides `width`). | `boolean` | `undefined` |
-| `intlClose` | `intl-close` | **[DEPRECATED]** – translations are now built-in, if you need to override a string, please use `messageOverrides`.
Accessible name for the component's close button. | `string` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | -| `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` | -| `outsideCloseDisabled` | `outside-close-disabled` | When `true`, disables the closing of the component when clicked outside. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `width` | `width` | Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels). | `"l" \| "m" \| "s" \| number` | `"m"` | +| Property | Attribute | Description | Type | Default | +| ---------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------------------------- | +| `beforeClose` | -- | Passes a function to run before the component closes. | `(el: HTMLElement) => Promise` | `() => Promise.resolve()` |
+| `closeButtonDisabled` | `close-button-disabled` | When `true`, disables the component's close button. | `boolean` | `false` |
+| `docked` | `docked` | When `true`, prevents the component from expanding to the entire screen on mobile devices. | `boolean` | `undefined` |
+| `escapeDisabled` | `escape-disabled` | When `true`, disables the default close on escape behavior. | `boolean` | `false` |
+| `focusTrapDisabled` | `focus-trap-disabled` | When `true`, prevents focus trapping. | `boolean` | `false` |
+| `fullscreen` | `fullscreen` | Sets the component to always be fullscreen (overrides `width` and `--calcite-modal-width` / `--calcite-modal-height`). | `boolean` | `undefined` |
+| `kind` | `kind` | Specifies the kind of the component (will apply to top border). | `"brand" \| "danger" \| "info" \| "success" \| "warning"` | `undefined` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ModalMessages` | `undefined` |
+| `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` |
+| `outsideCloseDisabled` | `outside-close-disabled` | When `true`, disables the closing of the component when clicked outside. | `boolean` | `false` |
+| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
+| `width` | `width` | Specifies the width of the component. | `"l" \| "m" \| "s"` | `"m"` |
## Events
@@ -91,12 +89,17 @@ Sets the scroll top of the component's content.
Type: `Promise`
-### `setFocus(focusId?: "close-button") => Promise`
+### `setFocus() => Promise`
-Sets focus on the component.
+Sets focus on the component's "close" button (the first focusable item).
-By default, tries to focus on focusable content. If there is none, it will focus on the close button.
-To focus on the close button, use the `close-button` focus ID.
+#### Returns
+
+Type: `Promise`
+
+### `updateFocusTrapElements() => Promise`
+
+Updates the element(s) that are used within the focus-trap of the component.
#### Returns
@@ -114,10 +117,13 @@ Type: `Promise`
## CSS Custom Properties
-| Name | Description |
-| ---------------------------- | -------------------------------------------------- |
-| `--calcite-modal-padding` | Specifies the padding of the modal. |
-| `--calcite-scrim-background` | The component's semi-transparent background color. |
+| Name | Description |
+| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `--calcite-modal-content-background` | Specifies the background color of content placed in the `content` slot. |
+| `--calcite-modal-content-padding` | Specifies the padding of the modal `content` slot. |
+| `--calcite-modal-height` | Specifies a height of the modal, using `px`, `em`, `rem`, `vh`, or `%`. Will never exceed the height of the viewport. Will not apply if `fullscreen` if set. |
+| `--calcite-modal-scrim-background` | Specifies the background color of the modal scrim. |
+| `--calcite-modal-width` | Specifies a width of the modal, using `px`, `em`, `rem`, `vw`, or `%`. Will never exceed the width of the viewport. Will not apply if `fullscreen` if set. |
## Dependencies
diff --git a/src/components/modal/resources.ts b/src/components/modal/resources.ts
index 25b9abb9993..706c8d9a279 100644
--- a/src/components/modal/resources.ts
+++ b/src/components/modal/resources.ts
@@ -10,6 +10,10 @@ export const CSS = {
secondary: "secondary",
primary: "primary",
overflowHidden: "overflow-hidden",
+ container: "container",
+ content: "content",
+ contentNoFooter: "content--no-footer",
+ slottedInShell: "slotted-in-shell",
// these classes help apply the animation in phases to only set transform on open/close
// this helps avoid a positioning issue for any floating-ui-owning children
diff --git a/src/components/modal/usage/Basic.md b/src/components/modal/usage/Basic.md
index d456f766195..7764a3228eb 100644
--- a/src/components/modal/usage/Basic.md
+++ b/src/components/modal/usage/Basic.md
@@ -4,7 +4,7 @@ Customize the modal by passing your content into multiple named slots: `header`
+
Back
Cancel
diff --git a/src/components/notice/notice.e2e.ts b/src/components/notice/notice.e2e.ts
index b67ad869883..aef6d42975e 100644
--- a/src/components/notice/notice.e2e.ts
+++ b/src/components/notice/notice.e2e.ts
@@ -17,8 +17,6 @@ describe("calcite-notice", () => {
it("is accessible with icon", async () => accessible(`${noticeContent} `));
it("is accessible with close button", async () =>
accessible(`${noticeContent} `));
- it("is accessible with icon and close button (deprecated)", async () =>
- accessible(`${noticeContent} `));
it("is accessible with icon and close button", async () =>
accessible(`${noticeContent} `));
@@ -35,7 +33,7 @@ describe("calcite-notice", () => {
const element = await page.find("calcite-notice");
const close = await page.find(`calcite-notice >>> .${CSS.close}`);
const icon = await page.find(`calcite-notice >>> .${CSS.icon}`);
- expect(element).toEqualAttribute("color", "blue");
+ expect(element).toEqualAttribute("kind", "brand");
expect(close).toBeNull();
expect(icon).toBeNull();
});
@@ -43,7 +41,7 @@ describe("calcite-notice", () => {
it("renders requested props when valid props are provided", async () => {
const page = await newE2EPage();
await page.setContent(`
-
+
${noticeContent}
`);
@@ -51,24 +49,11 @@ describe("calcite-notice", () => {
const close = await page.find(`calcite-notice >>> .${CSS.close}`);
const icon = await page.find(`calcite-notice >>> .${CSS.icon}`);
- expect(element).toEqualAttribute("color", "yellow");
+ expect(element).toEqualAttribute("kind", "warning");
expect(close).not.toBeNull();
expect(icon).toBeNull();
});
- it("renders an icon and close button when requested (deprecated)", async () => {
- const page = await newE2EPage();
- await page.setContent(`
-
- ${noticeContent}
- `);
-
- const close = await page.find(`calcite-notice >>> .${CSS.close}`);
- const icon = await page.find(`calcite-notice >>> .${CSS.icon}`);
- expect(close).not.toBeNull();
- expect(icon).not.toBeNull();
- });
-
it("renders an icon and close button when requested", async () => {
const page = await newE2EPage();
await page.setContent(`
@@ -82,25 +67,6 @@ describe("calcite-notice", () => {
expect(icon).not.toBeNull();
});
- it("successfully closes a dismissible notice (deprecated)", async () => {
- const page = await newE2EPage();
- await page.setContent(`
-
- ${noticeContent}
-
- `);
-
- const notice1 = await page.find("#notice-1 >>> .container");
- const noticeclose1 = await page.find(`#notice-1 >>> .${CSS.close}`);
- const animationDurationInMs = 400;
-
- expect(await notice1.isVisible()).toBe(true);
-
- await noticeclose1.click();
- await page.waitForTimeout(animationDurationInMs);
- expect(await notice1.isVisible()).not.toBe(true);
- });
-
it("successfully closes a closable notice", async () => {
const page = await newE2EPage();
await page.setContent(`
@@ -120,35 +86,6 @@ describe("calcite-notice", () => {
expect(await notice1.isVisible()).not.toBe(true);
});
- describe("focusable (deprecated)", () => {
- it("with link and dismissible => focuses on link", () =>
- focusable(html` ${noticeContent} `, {
- focusTargetSelector: `calcite-link`
- }));
-
- it("when dismissible => focuses on close button", () =>
- focusable(
- html`
- `,
- {
- shadowFocusTargetSelector: `.${CSS.close}`
- }
- ));
-
- it("without link nor dismissible => does not focus", () =>
- focusable(
- html`
- `,
- {
- focusTargetSelector: "body"
- }
- ));
- });
-
describe("focusable", () => {
it("with link and closable => focuses on link", () =>
focusable(html` ${noticeContent} `, {
diff --git a/src/components/notice/notice.scss b/src/components/notice/notice.scss
index 425591e2436..b18760c3164 100644
--- a/src/components/notice/notice.scss
+++ b/src/components/notice/notice.scss
@@ -163,17 +163,17 @@
@apply flex self-stretch;
}
-$noticeColors: "blue" var(--calcite-ui-brand), "red" var(--calcite-ui-danger), "yellow" var(--calcite-ui-warning),
- "green" var(--calcite-ui-success);
+$noticeKinds: "brand" var(--calcite-ui-brand), "info" var(--calcite-ui-info), "danger" var(--calcite-ui-danger),
+ "success" var(--calcite-ui-success), "warning" var(--calcite-ui-warning);
-@each $noticeColor in $noticeColors {
- $name: nth($noticeColor, 1);
- $color: nth($noticeColor, 2);
+@each $noticeKind in $noticeKinds {
+ $name: nth($noticeKind, 1);
+ $kind: nth($noticeKind, 2);
- :host([color="#{$name}"]) .container {
- border-color: $color;
+ :host([kind="#{$name}"]) .container {
+ border-color: $kind;
& .notice-icon {
- color: $color;
+ color: $kind;
}
}
}
diff --git a/src/components/notice/notice.stories.ts b/src/components/notice/notice.stories.ts
index f646e733747..c392d54d87d 100644
--- a/src/components/notice/notice.stories.ts
+++ b/src/components/notice/notice.stories.ts
@@ -1,6 +1,6 @@
import { select } from "@storybook/addon-knobs";
import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
+import { modesDarkDefault } from "../../../.storybook/utils";
import readme from "./readme.md";
import { html } from "../../../support/formatting";
@@ -20,7 +20,7 @@ export const simple = (): string => html`
${boolean("closable", true)}
scale="${select("scale", ["s", "m", "l"], "m")}"
width="${select("width", ["auto", "half", "full"], "auto")}"
- color="${select("color", ["green", "red", "yellow", "blue"], "blue")}"
+ kind="${select("kind", ["brand", "danger", "info", "success", "warning"], "brand")}"
icon="${select("icon", iconNames, iconNames[0])}"
>
`;
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
Specifies the selected end date as a full date object. | `Date` | `undefined` | | `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | | `max` | `max` | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `string` | `undefined` | | `maxAsDate` | -- | Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). | `Date` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `DatePickerMessages` | `undefined` | | `min` | `min` | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `string` | `undefined` | | `minAsDate` | -- | Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). | `Date` | `undefined` | | `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined` | | `proximitySelectionDisabled` | `proximity-selection-disabled` | When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. | `boolean` | `false` | | `range` | `range` | When `true`, activates the component's range mode to allow a start and end date. | `boolean` | `false` | | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `startAsDate` | -- | **[DEPRECATED]** use `valueAsDate` instead.
Specifies the selected start date as a full date object. | `Date` | `undefined` | | `value` | `value` | Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). | `string \| string[]` | `undefined` | | `valueAsDate` | -- | Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). | `Date \| Date[]` | `undefined` | diff --git a/src/components/date-picker/utils.ts b/src/components/date-picker/utils.ts index 210055c6c9e..4c902a450d4 100644 --- a/src/components/date-picker/utils.ts +++ b/src/components/date-picker/utils.ts @@ -1,6 +1,6 @@ import { getAssetPath } from "@stencil/core"; -import { getSupportedLocale } from "../../utils/locale"; import { dateFromISO } from "../../utils/date"; +import { getSupportedLocale } from "../../utils/locale"; /** * Translation resource data structure diff --git a/src/components/dropdown-group/dropdown-group.tsx b/src/components/dropdown-group/dropdown-group.tsx index 8ec96c32a68..d3d5f5fdebe 100644 --- a/src/components/dropdown-group/dropdown-group.tsx +++ b/src/components/dropdown-group/dropdown-group.tsx @@ -10,17 +10,18 @@ import { VNode } from "@stencil/core"; import { getElementProp } from "../../utils/dom"; -import { RequestedItem, SelectionMode } from "./interfaces"; -import { Scale } from "../interfaces"; +import { Scale, SelectionMode } from "../interfaces"; +import { RequestedItem } from "./interfaces"; import { CSS } from "./resources"; - /** * @slot - A slot for adding `calcite-dropdown-item`s. */ @Component({ tag: "calcite-dropdown-group", styleUrl: "dropdown-group.scss", - shadow: true + shadow: { + delegatesFocus: true + } }) export class DropdownGroup { //-------------------------------------------------------------------------- @@ -41,11 +42,12 @@ export class DropdownGroup { /** * Specifies the component's selection mode, where - * `"multi"` allows any number of (or no) selected `calcite-dropdown-item`s, + * `"multiple"` allows any number of (or no) selected `calcite-dropdown-item`s, * `"single"` allows and requires one selected `calcite-dropdown-item`, and * `"none"` does not allow selection on `calcite-dropdown-item`s. */ - @Prop({ reflect: true }) selectionMode: SelectionMode = "single"; + @Prop({ reflect: true }) selectionMode: Extract<"single" | "none" | "multiple", SelectionMode> = + "single"; /** * Specifies the size of the component. diff --git a/src/components/dropdown-group/interfaces.ts b/src/components/dropdown-group/interfaces.ts index bcbd53af9a2..996cfb75083 100644 --- a/src/components/dropdown-group/interfaces.ts +++ b/src/components/dropdown-group/interfaces.ts @@ -1,4 +1,3 @@ -export type SelectionMode = "multi" | "single" | "none" | "multiple"; export interface RequestedItem { requestedDropdownItem: HTMLCalciteDropdownItemElement; requestedDropdownGroup: HTMLCalciteDropdownGroupElement; diff --git a/src/components/dropdown-group/readme.md b/src/components/dropdown-group/readme.md index 0e471813925..9464283d9ee 100644 --- a/src/components/dropdown-group/readme.md +++ b/src/components/dropdown-group/readme.md @@ -4,11 +4,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------- | -| `groupTitle` | `group-title` | Specifies and displays a group title. | `string` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `undefined` | -| `selectionMode` | `selection-mode` | Specifies the component's selection mode, where `"multi"` allows any number of (or no) selected `calcite-dropdown-item`s, `"single"` allows and requires one selected `calcite-dropdown-item`, and `"none"` does not allow selection on `calcite-dropdown-item`s. | `"multi" \| "multiple" \| "none" \| "single"` | `"single"` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------- | +| `groupTitle` | `group-title` | Specifies and displays a group title. | `string` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `undefined` | +| `selectionMode` | `selection-mode` | Specifies the component's selection mode, where `"multiple"` allows any number of (or no) selected `calcite-dropdown-item`s, `"single"` allows and requires one selected `calcite-dropdown-item`, and `"none"` does not allow selection on `calcite-dropdown-item`s. | `"multiple" \| "none" \| "single"` | `"single"` | ## Slots diff --git a/src/components/dropdown-item/dropdown-item.scss b/src/components/dropdown-item/dropdown-item.scss index d86f5afd981..f4d2902df4b 100644 --- a/src/components/dropdown-item/dropdown-item.scss +++ b/src/components/dropdown-item/dropdown-item.scss @@ -11,7 +11,7 @@ } .container--l { - @apply text-0h py-3; + @apply text-0h py-2.5; padding-inline-end: theme("padding.4"); padding-inline-start: theme("padding.10"); } @@ -63,7 +63,7 @@ } .dropdown-item-content { - @apply flex-auto; + @apply flex-auto py-0.5; padding-inline-end: theme("margin.auto"); padding-inline-start: theme("margin.1"); } diff --git a/src/components/dropdown-item/dropdown-item.tsx b/src/components/dropdown-item/dropdown-item.tsx index 527b058aa5d..6ba35b1fd7f 100644 --- a/src/components/dropdown-item/dropdown-item.tsx +++ b/src/components/dropdown-item/dropdown-item.tsx @@ -12,15 +12,14 @@ import { } from "@stencil/core"; import { getElementProp, toAriaBoolean } from "../../utils/dom"; import { ItemKeyboardEvent } from "../dropdown/interfaces"; - -import { FlipContext } from "../interfaces"; +import { RequestedItem } from "../dropdown-group/interfaces"; +import { FlipContext, Scale, SelectionMode } from "../interfaces"; import { CSS } from "./resources"; -import { RequestedItem, SelectionMode } from "../dropdown-group/interfaces"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; /** @@ -49,7 +48,7 @@ export class DropdownItem implements LoadableComponent { /** When `true`, the component is selected. */ @Prop({ reflect: true, mutable: true }) selected = false; - /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ + /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ @@ -128,26 +127,26 @@ export class DropdownItem implements LoadableComponent { } render(): VNode { - const scale = getElementProp(this.el, "scale", "m"); + const scale = getElementProp(this.el, "scale", this.scale); const iconStartEl = (
Title of the modal
The actual content of the modal
- Accessible name for the component's close button. | `string` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | -| `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` | -| `outsideCloseDisabled` | `outside-close-disabled` | When `true`, disables the closing of the component when clicked outside. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `width` | `width` | Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels). | `"l" \| "m" \| "s" \| number` | `"m"` | +| Property | Attribute | Description | Type | Default | +| ---------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------------------------- | +| `beforeClose` | -- | Passes a function to run before the component closes. | `(el: HTMLElement) => Promise
Title of the modal
The actual content of the modal
- Title Text
- Message Text
- Title Text
- Message Text
- Your settings area has changed
@@ -44,7 +44,7 @@ export const customIcon = (): string => html`
${boolean("closable", true)}
scale="${select("scale", ["s", "m", "l"], "m")}"
width="${select("width", ["auto", "half", "full"], "auto")}"
- color="${select("color", ["green", "red", "yellow", "blue"], "blue")}"
+ kind="${select("kind", ["brand", "danger", "info", "success", "warning"], "brand")}"
>
Your settings area has changed
Look around and let us know what you think
@@ -61,7 +61,7 @@ export const withAction = (): string => html`
${boolean("closable", false)}
scale="${select("scale", ["s", "m", "l"], "m")}"
width="${select("width", ["auto", "half", "full"], "auto")}"
- color="${select("color", ["green", "red", "yellow", "blue"], "red")}"
+ kind="${select("kind", ["brand", "danger", "info", "success", "warning"], "danger")}"
>
Notice with action
This shows a notice with a custom action
@@ -75,17 +75,17 @@ export const withAction = (): string => html`
This is a destructive action
Be sure you know what you are doin, folks.
@@ -93,4 +93,4 @@ export const darkThemeRTL_TestOnly = (): string => html`
{this.requestedIcon ? (
-
- Yes
- No
-
+
+ Yes
+ No
+
@@ -994,10 +801,10 @@
-
) : null}
@@ -254,7 +208,7 @@ export class Notice
//
//--------------------------------------------------------------------------
- /** Sets focus on the component. */
+ /** Sets focus on the component's first focusable element. */
@Method()
async setFocus(): Promise {
await componentLoaded(this);
@@ -300,5 +254,5 @@ export class Notice
updateMessages(this, this.effectiveLocale);
}
- @State() defaultMessages: Messages;
+ @State() defaultMessages: NoticeMessages;
}
diff --git a/src/components/notice/readme.md b/src/components/notice/readme.md
index da487a76e4d..43e35ab6863 100644
--- a/src/components/notice/readme.md
+++ b/src/components/notice/readme.md
@@ -7,7 +7,7 @@
### Basic
```html
-
+
View details
@@ -25,18 +25,16 @@ You can programmatically focus the close button of a `dismissible` `calcite-noti
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------- |
-| `active` | `active` | **[DEPRECATED]** Use `open` instead.
When `true`, the component is active. | `boolean` | `false` | -| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | -| `color` | `color` | The color for the component's top border and icon. | `"blue" \| "green" \| "red" \| "yellow"` | `"blue"` | -| `dismissible` | `dismissible` | **[DEPRECATED]** use `closable` instead.
When `true`, a close button is added to the component. | `boolean` | `false` | -| `icon` | `icon` | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | `boolean \| string` | `undefined` | -| `intlClose` | `intl-close` | **[DEPRECATED]** – translations are now built-in, if you need to override a string, please use `messageOverrides`.
Accessible name for the close button. | `string` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | -| `open` | `open` | When `true`, the component is visible. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ----------- | +| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | +| `icon` | `icon` | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | `boolean \| string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `kind` | `kind` | Specifies the kind of the component (will apply to top border and icon). | `"brand" \| "danger" \| "info" \| "success" \| "warning"` | `"brand"` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `NoticeMessages` | `undefined` | +| `open` | `open` | When `true`, the component is visible. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | ## Events @@ -49,7 +47,7 @@ You can programmatically focus the close button of a `dismissible` `calcite-noti ### `setFocus() => Promise`
-Sets focus on the component.
+Sets focus on the component's first focusable element.
#### Returns
@@ -57,12 +55,12 @@ Type: `Promise`
## Slots
-| Slot | Description |
-| --------------- | ---------------------------------------------------------------------------------------------------- |
-| `"actions-end"` | A slot for adding actions to the end of the component. It is recommended to use two or less actions. |
-| `"link"` | A slot for adding actions to take, such as: undo, try again, link to page, etc. |
-| `"message"` | A slot for adding the message. |
-| `"title"` | A slot for adding the title. |
+| Slot | Description |
+| --------------- | -------------------------------------------------------------------------------------------------------------- |
+| `"actions-end"` | A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or less actions. |
+| `"link"` | A slot for adding a `calcite-action` to take, such as: "undo", "try again", "link to page", etc. |
+| `"message"` | A slot for adding the message. |
+| `"title"` | A slot for adding the title. |
## CSS Custom Properties
diff --git a/src/components/notice/usage/Basic.md b/src/components/notice/usage/Basic.md
index 46da42ddc17..d629c1821ae 100644
--- a/src/components/notice/usage/Basic.md
+++ b/src/components/notice/usage/Basic.md
@@ -1,5 +1,5 @@
```html
-
+
View details
diff --git a/src/components/option-group/option-group.tsx b/src/components/option-group/option-group.tsx
index 73143440714..6eb031d36fb 100644
--- a/src/components/option-group/option-group.tsx
+++ b/src/components/option-group/option-group.tsx
@@ -1,4 +1,4 @@
-import { Component, h, Prop, VNode, Watch, Event, EventEmitter, Fragment } from "@stencil/core";
+import { Component, Event, EventEmitter, Fragment, h, Prop, VNode, Watch } from "@stencil/core";
/**
* @slot - A slot for adding `calcite-option`s.
diff --git a/src/components/option/option.tsx b/src/components/option/option.tsx
index bdafce03e4f..babd4824d4d 100644
--- a/src/components/option/option.tsx
+++ b/src/components/option/option.tsx
@@ -1,4 +1,4 @@
-import { Component, h, Prop, VNode, Element, EventEmitter, Event, Watch } from "@stencil/core";
+import { Component, Element, Event, EventEmitter, h, Prop, VNode, Watch } from "@stencil/core";
import { createObserver } from "../../utils/observers";
@Component({
diff --git a/src/components/pagination/pagination.scss b/src/components/pagination/pagination.scss
index 44f72027e69..470b76c09d6 100644
--- a/src/components/pagination/pagination.scss
+++ b/src/components/pagination/pagination.scss
@@ -1,14 +1,5 @@
-/**
- * CSS Custom Properties
- *
- * These properties can be overridden using the component's tag as selector.
- *
- * @prop --calcite-pagination-spacing: The amount of padding around each pagination item.
- */
-
-// explicit px values until we add a spacing unit and new font scale to base
:host([scale="s"]) {
- --calcite-pagination-spacing: theme("spacing.1") theme("spacing.2");
+ --calcite-pagination-spacing-internal: theme("spacing.1") theme("spacing.2");
& .previous,
& .next,
& .page {
@@ -21,7 +12,7 @@
}
:host([scale="m"]) {
- --calcite-pagination-spacing: theme("spacing.2") theme("spacing.3");
+ --calcite-pagination-spacing-internal: theme("spacing.2") theme("spacing.3");
& .previous,
& .next,
& .page {
@@ -34,7 +25,7 @@
}
:host([scale="l"]) {
- --calcite-pagination-spacing: theme("spacing.3") theme("spacing.4");
+ --calcite-pagination-spacing-internal: theme("spacing.3") theme("spacing.4");
& .previous,
& .next,
& .page {
@@ -106,7 +97,7 @@
}
.page,
.ellipsis {
- padding: var(--calcite-pagination-spacing);
+ padding: var(--calcite-pagination-spacing-internal);
}
.ellipsis {
@apply text-color-3 flex items-end;
diff --git a/src/components/pagination/pagination.stories.ts b/src/components/pagination/pagination.stories.ts
index 8ac4edcce2f..7e09d6ac074 100644
--- a/src/components/pagination/pagination.stories.ts
+++ b/src/components/pagination/pagination.stories.ts
@@ -1,6 +1,6 @@
import { number, select } from "@storybook/addon-knobs";
import { locales } from "../../utils/locale";
-import { themesDarkDefault } from "../../../.storybook/utils";
+import { modesDarkDefault } from "../../../.storybook/utils";
import readme from "./readme.md";
import { html } from "../../../support/formatting";
import { storyFilters } from "../../../.storybook/helpers";
@@ -27,8 +27,8 @@ export const simple = (): string => html`
`;
-export const darkThemeFrenchLocale_TestOnly = (): string => html` html` html`
`;
-darkThemeFrenchLocale_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeFrenchLocale_TestOnly.parameters = { modes: modesDarkDefault };
export const arabicNumberingSystemAndRTL_TestOnly = (): string => html` html`
`;
+
+arabicNumberingSystemAndRTL_TestOnly.parameters = {
+ chromatic: { diffThreshold: 1 }
+};
diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
index 713f8cb201a..2d343ef5260 100644
--- a/src/components/pagination/pagination.tsx
+++ b/src/components/pagination/pagination.tsx
@@ -3,24 +3,21 @@ import {
Element,
Event,
EventEmitter,
+ Fragment,
h,
- Prop,
Method,
- VNode,
- Fragment,
+ Prop,
State,
+ VNode,
Watch
} from "@stencil/core";
-import { Scale } from "../interfaces";
import {
connectLocalized,
disconnectLocalized,
LocalizedComponent,
- numberStringFormatter,
- NumberingSystem
+ NumberingSystem,
+ numberStringFormatter
} from "../../utils/locale";
-import { CSS } from "./resources";
-import { Messages } from "./assets/pagination/t9n";
import {
connectMessages,
disconnectMessages,
@@ -28,6 +25,9 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
+import { Scale } from "../interfaces";
+import { PaginationMessages } from "./assets/pagination/t9n";
+import { CSS } from "./resources";
const maxPagesDisplayed = 5;
export interface PaginationDetail {
@@ -39,7 +39,9 @@ export interface PaginationDetail {
@Component({
tag: "calcite-pagination",
styleUrl: "pagination.scss",
- shadow: true,
+ shadow: {
+ delegatesFocus: true
+ },
assetsDirs: ["assets"]
})
export class Pagination implements LocalizedComponent, LocalizedComponent, T9nComponent {
@@ -57,29 +59,13 @@ export class Pagination implements LocalizedComponent, LocalizedComponent, T9nCo
/**
* Use this property to override individual strings used by the component.
*/
- @Prop({ mutable: true }) messageOverrides: Partial;
+ @Prop({ mutable: true }) messageOverrides: Partial;
- @Watch("textLabelNext")
- @Watch("textLabelPrevious")
@Watch("messageOverrides")
onMessagesChange(): void {
/* wired up by t9n util */
}
- getExtraMessageOverrides(): Partial {
- const extraOverrides: Partial = {};
-
- if (this.textLabelNext) {
- extraOverrides.next = this.textLabelNext;
- }
-
- if (this.textLabelPrevious) {
- extraOverrides.previous = this.textLabelPrevious;
- }
-
- return extraOverrides;
- }
-
/** Specifies the number of items per page. */
@Prop({ reflect: true }) num = 20;
@@ -94,20 +80,6 @@ export class Pagination implements LocalizedComponent, LocalizedComponent, T9nCo
/** Specifies the total number of items. */
@Prop({ reflect: true }) total = 0;
- /**
- * Accessible name for the component's next button.
- *
- * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
- */
- @Prop() textLabelNext: string;
-
- /**
- * Accessible name for the component's previous button.
- *
- * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
- */
- @Prop() textLabelPrevious: string;
-
/** Specifies the size of the component. */
@Prop({ reflect: true }) scale: Scale = "m";
@@ -124,7 +96,7 @@ export class Pagination implements LocalizedComponent, LocalizedComponent, T9nCo
//
//--------------------------------------------------------------------------
- @State() defaultMessages: Messages;
+ @State() defaultMessages: PaginationMessages;
@State() effectiveLocale = "";
@@ -147,7 +119,7 @@ export class Pagination implements LocalizedComponent, LocalizedComponent, T9nCo
*
* @internal
*/
- @Prop({ mutable: true }) messages: Messages;
+ @Prop({ mutable: true }) messages: PaginationMessages;
//--------------------------------------------------------------------------
//
diff --git a/src/components/pagination/readme.md b/src/components/pagination/readme.md
index 86d1fc37efe..83e039df786 100644
--- a/src/components/pagination/readme.md
+++ b/src/components/pagination/readme.md
@@ -27,23 +27,21 @@ For example, after querying the search API, you'll get back a response similar t
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `groupSeparator` | `group-separator` | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean` | `false` |
-| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` |
-| `num` | `num` | Specifies the number of items per page. | `number` | `20` |
-| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined` |
-| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
-| `start` | `start` | Specifies the starting item number. | `number` | `1` |
-| `textLabelNext` | `text-label-next` | **[DEPRECATED]** – translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's next button. | `string` | `undefined` | -| `textLabelPrevious` | `text-label-previous` | **[DEPRECATED]** – translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's previous button. | `string` | `undefined` | -| `total` | `total` | Specifies the total number of items. | `number` | `0` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `groupSeparator` | `group-separator` | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `PaginationMessages` | `undefined` | +| `num` | `num` | Specifies the number of items per page. | `number` | `20` | +| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `start` | `start` | Specifies the starting item number. | `number` | `1` | +| `total` | `total` | Specifies the total number of items. | `number` | `0` | ## Events -| Event | Description | Type | -| ------------------------- | ------------------------------------- | ------------------------------- | -| `calcitePaginationChange` | Emits when the selected page changes. | `CustomEvent` |
+| Event | Description | Type |
+| ------------------------- | ------------------------------------- | ------------------- |
+| `calcitePaginationChange` | Emits when the selected page changes. | `CustomEvent` |
## Methods
@@ -63,12 +61,6 @@ Go to the previous page of results.
Type: `Promise`
-## CSS Custom Properties
-
-| Name | Description |
-| ------------------------------ | -------------------------------------------------- |
-| `--calcite-pagination-spacing` | The amount of padding around each pagination item. |
-
## Dependencies
### Depends on
diff --git a/src/components/panel/panel.e2e.ts b/src/components/panel/panel.e2e.ts
index 0175ce19d1b..08e3494d827 100644
--- a/src/components/panel/panel.e2e.ts
+++ b/src/components/panel/panel.e2e.ts
@@ -1,6 +1,6 @@
import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, disabled, focusable, hidden, renders, slots, t9n } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
+import { accessible, defaults, disabled, focusable, hidden, renders, slots, t9n } from "../../tests/commonTests";
import { CSS, SLOTS } from "./resources";
const panelTemplate = (scrollable = false) => html`
-
- Yes
- No
-
+
+ Yes
+ No
+
@@ -971,10 +778,10 @@ Something failed
That thing you wanted to do didn't work as expected
When `true`, the component is active. | `boolean` | `false` | -| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | -| `color` | `color` | The color for the component's top border and icon. | `"blue" \| "green" \| "red" \| "yellow"` | `"blue"` | -| `dismissible` | `dismissible` | **[DEPRECATED]** use `closable` instead.
When `true`, a close button is added to the component. | `boolean` | `false` | -| `icon` | `icon` | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | `boolean \| string` | `undefined` | -| `intlClose` | `intl-close` | **[DEPRECATED]** – translations are now built-in, if you need to override a string, please use `messageOverrides`.
Accessible name for the close button. | `string` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | -| `open` | `open` | When `true`, the component is visible. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ----------- | +| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | +| `icon` | `icon` | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | `boolean \| string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `kind` | `kind` | Specifies the kind of the component (will apply to top border and icon). | `"brand" \| "danger" \| "info" \| "success" \| "warning"` | `"brand"` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `NoticeMessages` | `undefined` | +| `open` | `open` | When `true`, the component is visible. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | ## Events @@ -49,7 +47,7 @@ You can programmatically focus the close button of a `dismissible` `calcite-noti ### `setFocus() => Promise
Something failed
That thing you wanted to do didn't work as expected
Accessible name for the component's next button. | `string` | `undefined` | -| `textLabelPrevious` | `text-label-previous` | **[DEPRECATED]** – translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's previous button. | `string` | `undefined` | -| `total` | `total` | Specifies the total number of items. | `number` | `0` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `groupSeparator` | `group-separator` | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `PaginationMessages` | `undefined` | +| `num` | `num` | Specifies the number of items per page. | `number` | `20` | +| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `start` | `start` | Specifies the starting item number. | `number` | `1` | +| `total` | `total` | Specifies the total number of items. | `number` | `0` | ## Events -| Event | Description | Type | -| ------------------------- | ------------------------------------- | ------------------------------- | -| `calcitePaginationChange` | Emits when the selected page changes. | `CustomEvent
@@ -213,47 +213,6 @@ describe("calcite-panel", () => {
expect(await footer.isVisible()).toBe(false);
});
- it("should update width based on the multipier CSS variable", async () => {
- const multipier = 2;
-
- const page = await newE2EPage();
- await page.setViewport({ width: 1600, height: 1200 });
-
- await page.setContent(`
-
- test
-
- `);
-
- await page.waitForChanges();
-
- const content = await page.find(`calcite-panel >>> .${CSS.container}`);
- const style = await content.getComputedStyle("width");
- const widthDefault = parseFloat(style["width"]);
-
- const page2 = await newE2EPage();
- await page2.setViewport({ width: 1600, height: 1200 });
-
- await page2.setContent(`
-
-
- test multiplied
-
- `);
-
- await page2.waitForChanges();
-
- const content2 = await page2.find(`calcite-panel >>> .${CSS.container}`);
- const style2 = await content2.getComputedStyle("width");
- const width2 = parseFloat(style2["width"]);
-
- expect(width2).toEqual(widthDefault * multipier);
- });
-
it("should set tabIndex of -1 on a non-scrollable panel", async () => {
const page = await newE2EPage();
diff --git a/src/components/panel/panel.scss b/src/components/panel/panel.scss
index 610470e0cc7..55276ee0418 100644
--- a/src/components/panel/panel.scss
+++ b/src/components/panel/panel.scss
@@ -1,22 +1,8 @@
-/**
- * CSS Custom Properties
- *
- * These properties can be overridden using the component's tag as selector.
- *
- * @prop --calcite-panel-max-height: The maximum height of the component.
- * @prop --calcite-panel-max-width: The maximum width of the component.
- * @prop --calcite-panel-min-width: The minimum width of the component.
- */
-
:host {
@extend %component-host;
- @apply relative flex w-full flex-auto overflow-hidden;
+ @apply relative flex w-full h-full flex-auto overflow-hidden;
--calcite-min-header-height: calc(var(--calcite-icon-size) * 3);
- --calcite-panel-max-height: unset;
- --calcite-panel-width: 100%;
- --calcite-panel-min-width: unset;
- --calcite-panel-max-width: unset;
}
@include disabled();
@@ -26,43 +12,9 @@
.container {
@apply bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0;
- max-block-size: var(--calcite-panel-max-height);
- inline-size: var(--calcite-panel-width);
- max-inline-size: var(--calcite-panel-max-width);
- min-inline-size: var(--calcite-panel-min-width);
transition: max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing);
}
-:host([height-scale="s"]) {
- --calcite-panel-max-height: 40vh;
-}
-
-:host([height-scale="m"]) {
- --calcite-panel-max-height: 60vh;
-}
-
-:host([height-scale="l"]) {
- --calcite-panel-max-height: 80vh;
-}
-
-:host([width-scale="s"]) {
- --calcite-panel-width: calc(var(--calcite-panel-width-multiplier) * 12vw);
- --calcite-panel-max-width: calc(var(--calcite-panel-width-multiplier) * 300px);
- --calcite-panel-min-width: calc(var(--calcite-panel-width-multiplier) * 150px);
-}
-
-:host([width-scale="m"]) {
- --calcite-panel-width: calc(var(--calcite-panel-width-multiplier) * 20vw);
- --calcite-panel-max-width: calc(var(--calcite-panel-width-multiplier) * 420px);
- --calcite-panel-min-width: calc(var(--calcite-panel-width-multiplier) * 240px);
-}
-
-:host([width-scale="l"]) {
- --calcite-panel-width: calc(var(--calcite-panel-width-multiplier) * 45vw);
- --calcite-panel-max-width: calc(var(--calcite-panel-width-multiplier) * 680px);
- --calcite-panel-min-width: calc(var(--calcite-panel-width-multiplier) * 340px);
-}
-
.container[hidden] {
@apply hidden;
}
diff --git a/src/components/panel/panel.stories.ts b/src/components/panel/panel.stories.ts
index a18a8160ff5..7e5108dcfad 100644
--- a/src/components/panel/panel.stories.ts
+++ b/src/components/panel/panel.stories.ts
@@ -1,16 +1,16 @@
import { boolean, select, text } from "@storybook/addon-knobs";
+import { storyFilters } from "../../../.storybook/helpers";
+import { ATTRIBUTES } from "../../../.storybook/resources";
import {
+ Attribute,
Attributes,
createComponentHTML as create,
- Attribute,
filterComponentAttributes,
- themesDarkDefault
+ modesDarkDefault
} from "../../../.storybook/utils";
-import { ATTRIBUTES } from "../../../.storybook/resources";
+import { html } from "../../../support/formatting";
import readme from "./readme.md";
import { SLOTS } from "./resources";
-import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
export default {
title: "Components/Panel",
@@ -98,7 +98,7 @@ const contentHTML = html`
`;
const footerHTML = html`
- Naw.
+ Naw.
Yeah!
`;
@@ -145,7 +145,7 @@ export const disabledWithStyledSlot_TestOnly = (): string => html`
`;
-export const darkThemeRTL_TestOnly = (): string =>
+export const darkModeRTL_TestOnly = (): string =>
create(
"calcite-panel",
createAttributes({ exceptions: ["dir", "class"] }).concat([
@@ -155,10 +155,10 @@ export const darkThemeRTL_TestOnly = (): string =>
},
{
name: "class",
- value: "calcite-theme-dark"
+ value: "calcite-mode-dark"
}
]),
panelContent
);
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx
index 30377260d66..4a9d9d016d3 100644
--- a/src/components/panel/panel.tsx
+++ b/src/components/panel/panel.tsx
@@ -3,27 +3,26 @@ import {
Element,
Event,
EventEmitter,
+ Fragment,
+ h,
Method,
Prop,
- h,
- VNode,
- Fragment,
State,
+ VNode,
Watch
} from "@stencil/core";
-import { CSS, ICONS, SLOTS } from "./resources";
-import { toAriaBoolean } from "../../utils/dom";
-import { Scale } from "../interfaces";
-import { HeadingLevel, Heading } from "../functional/Heading";
-import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
+import { focusFirstTabbable, toAriaBoolean } from "../../utils/dom";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
-import { createObserver } from "../../utils/observers";
import {
- setUpLoadableComponent,
- setComponentLoaded,
+ componentLoaded,
LoadableComponent,
- componentLoaded
+ setComponentLoaded,
+ setUpLoadableComponent
} from "../../utils/loadable";
+import { createObserver } from "../../utils/observers";
+import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
+import { Heading, HeadingLevel } from "../functional/Heading";
+import { CSS, ICONS, SLOTS } from "./resources";
import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
import {
@@ -33,7 +32,7 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
-import { Messages } from "./assets/panel/t9n";
+import { PanelMessages } from "./assets/panel/t9n";
/**
* @slot - A slot for adding custom content.
@@ -76,35 +75,11 @@ export class Panel
*/
@Prop({ reflect: true }) headingLevel: HeadingLevel;
- /**
- * Specifies the maximum height of the component.
- */
- @Prop({ reflect: true }) heightScale: Scale;
-
- /**
- * Specifies the width of the component.
- */
- @Prop({ reflect: true }) widthScale: Scale;
-
/**
* When `true`, a busy indicator is displayed.
*/
@Prop({ reflect: true }) loading = false;
- /**
- * Accessible name for the component's close button. The close button will only be shown when `closeable` is `true`.
- *
- * @deprecated use `calcite-flow-item` instead.
- */
- @Prop() intlClose: string;
-
- /**
- * Accessible name for the component's actions menu.
- *
- * @deprecated use `calcite-flow-item` instead.
- */
- @Prop() intlOptions: string;
-
/**
* The component header text.
*/
@@ -121,17 +96,15 @@ export class Panel
/**
* Use this property to override individual strings used by the component.
*/
- @Prop({ mutable: true }) messageOverrides: Partial;
+ @Prop({ mutable: true }) messageOverrides: Partial;
/**
* Made into a prop for testing purposes only
*
* @internal
*/
- @Prop({ mutable: true }) messages: Messages;
+ @Prop({ mutable: true }) messages: PanelMessages;
- @Watch("intlClose")
- @Watch("intlOptions")
@Watch("messageOverrides")
onMessagesChange(): void {
/* wired up by t9n util */
@@ -199,7 +172,7 @@ export class Panel
@State() hasFab = false;
- @State() defaultMessages: Messages;
+ @State() defaultMessages: PanelMessages;
@State() effectiveLocale = "";
@@ -335,37 +308,12 @@ export class Panel
// --------------------------------------------------------------------------
/**
- * Sets focus on the component.
- *
- * @param focusId
+ * Sets focus on the component's first focusable element.
*/
@Method()
- async setFocus(focusId?: "back-button" | "dismiss-button"): Promise {
+ async setFocus(): Promise {
await componentLoaded(this);
-
- const { backButtonEl, closeButtonEl, containerEl } = this;
-
- if (focusId === "back-button") {
- backButtonEl?.setFocus();
- return;
- }
-
- if (focusId === "dismiss-button") {
- closeButtonEl?.setFocus();
- return;
- }
-
- if (backButtonEl) {
- backButtonEl.setFocus();
- return;
- }
-
- if (closeButtonEl) {
- closeButtonEl.setFocus();
- return;
- }
-
- containerEl?.focus();
+ focusFirstTabbable(this.containerEl);
}
/**
diff --git a/src/components/panel/readme.md b/src/components/panel/readme.md
index 159bdc0d9d4..056a095addb 100644
--- a/src/components/panel/readme.md
+++ b/src/components/panel/readme.md
@@ -67,21 +67,17 @@ Renders a panel with a header and a footer.
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
-| `closable` | `closable` | When `true`, displays a close button in the trailing side of the header. | `boolean` | `false` |
-| `closed` | `closed` | When `true`, the component will be hidden. | `boolean` | `false` |
-| `description` | `description` | A description for the component. | `string` | `undefined` |
-| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
-| `heading` | `heading` | The component header text. | `string` | `undefined` |
-| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
-| `heightScale` | `height-scale` | Specifies the maximum height of the component. | `"l" \| "m" \| "s"` | `undefined` |
-| `intlClose` | `intl-close` | **[DEPRECATED]** use `calcite-flow-item` instead.
Accessible name for the component's close button. The close button will only be shown when `closeable` is `true`. | `string` | `undefined` | -| `intlOptions` | `intl-options` | **[DEPRECATED]** use `calcite-flow-item` instead.
Accessible name for the component's actions menu. | `string` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `menuOpen` | `menu-open` | When `true`, the action menu items in the `header-menu-actions` slot are open. | `boolean` | `false` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | -| `widthScale` | `width-scale` | Specifies the width of the component. | `"l" \| "m" \| "s"` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ---------------------------------------------------------------------------------------- | ---------------------------- | ----------- | +| `closable` | `closable` | When `true`, displays a close button in the trailing side of the header. | `boolean` | `false` | +| `closed` | `closed` | When `true`, the component will be hidden. | `boolean` | `false` | +| `description` | `description` | A description for the component. | `string` | `undefined` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `heading` | `heading` | The component header text. | `string` | `undefined` | +| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | +| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | +| `menuOpen` | `menu-open` | When `true`, the action menu items in the `header-menu-actions` slot are open. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `PanelMessages` | `undefined` | ## Events @@ -100,9 +96,9 @@ Scrolls the component's content to a specified set of coordinates. Type: `Promise`
-### `setFocus(focusId?: "back-button" | "dismiss-button") => Promise`
+### `setFocus() => Promise`
-Sets focus on the component.
+Sets focus on the component's first focusable element.
#### Returns
@@ -121,14 +117,6 @@ Type: `Promise`
| `"header-content"` | A slot for adding custom content to the header. |
| `"header-menu-actions"` | A slot for adding an overflow menu with actions inside a `calcite-dropdown`. |
-## CSS Custom Properties
-
-| Name | Description |
-| ---------------------------- | ------------------------------------ |
-| `--calcite-panel-max-height` | The maximum height of the component. |
-| `--calcite-panel-max-width` | The maximum width of the component. |
-| `--calcite-panel-min-width` | The minimum width of the component. |
-
## Dependencies
### Used by
diff --git a/src/components/pick-list-group/pick-list-group.tsx b/src/components/pick-list-group/pick-list-group.tsx
index 72baaad8022..bd90559ca34 100644
--- a/src/components/pick-list-group/pick-list-group.tsx
+++ b/src/components/pick-list-group/pick-list-group.tsx
@@ -1,16 +1,18 @@
-import { Component, Element, Prop, h, VNode, Fragment } from "@stencil/core";
-import { CSS, SLOTS } from "./resources";
-import { getSlotted } from "../../utils/dom";
-import { HeadingLevel, Heading, constrainHeadingLevel } from "../functional/Heading";
+import { Component, Element, Fragment, h, Prop, VNode } from "@stencil/core";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
+import { getSlotted } from "../../utils/dom";
+import { constrainHeadingLevel, Heading, HeadingLevel } from "../functional/Heading";
+import { CSS, SLOTS } from "./resources";
/**
* @slot - A slot for adding `calcite-pick-list-item` elements.
*/
+
+/** @deprecated Use the `list` component instead. */
@Component({
tag: "calcite-pick-list-group",
styleUrl: "pick-list-group.scss",
diff --git a/src/components/pick-list-group/readme.md b/src/components/pick-list-group/readme.md
index b6f239b6bbf..567ceb896f5 100644
--- a/src/components/pick-list-group/readme.md
+++ b/src/components/pick-list-group/readme.md
@@ -4,6 +4,8 @@
+> **[DEPRECATED]** Use the `list` component instead.
+
## Properties
| Property | Attribute | Description | Type | Default |
@@ -11,12 +13,6 @@
| `groupTitle` | `group-title` | Specifies the title for all nested `calcite-pick-list-item`s. | `string` | `undefined` |
| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
-## Slots
-
-| Slot | Description |
-| ---- | ---------------------------------------------------- |
-| | A slot for adding `calcite-pick-list-item` elements. |
-
---
_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/src/components/pick-list-item/pick-list-item.e2e.ts b/src/components/pick-list-item/pick-list-item.e2e.ts
index a3af8f8d366..9fad80ce522 100644
--- a/src/components/pick-list-item/pick-list-item.e2e.ts
+++ b/src/components/pick-list-item/pick-list-item.e2e.ts
@@ -139,10 +139,10 @@ describe("calcite-pick-list-item", () => {
await page.setContent(
html`
-
+
-
+
diff --git a/src/components/pick-list-item/pick-list-item.tsx b/src/components/pick-list-item/pick-list-item.tsx
index 17d256100cf..f1a9629942b 100644
--- a/src/components/pick-list-item/pick-list-item.tsx
+++ b/src/components/pick-list-item/pick-list-item.tsx
@@ -11,15 +11,19 @@ import {
VNode,
Watch
} from "@stencil/core";
-import { CSS, ICONS, SLOTS } from "./resources";
-import { ICON_TYPES } from "../pick-list/resources";
-import { getSlotted, toAriaBoolean } from "../../utils/dom";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
+import { getSlotted, toAriaBoolean } from "../../utils/dom";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+ componentLoaded,
+ LoadableComponent,
+ setComponentLoaded,
+ setUpLoadableComponent
+} from "../../utils/loadable";
import { connectLocalized, disconnectLocalized } from "../../utils/locale";
import {
connectMessages,
@@ -28,18 +32,16 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
-import { Messages } from "./assets/pick-list-item/t9n";
-import {
- setUpLoadableComponent,
- setComponentLoaded,
- LoadableComponent,
- componentLoaded
-} from "../../utils/loadable";
+import { ICON_TYPES } from "../pick-list/resources";
+import { PickListItemMessages } from "./assets/pick-list-item/t9n";
+import { CSS, ICONS, SLOTS } from "./resources";
/**
* @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component.
* @slot actions-start - A slot for adding `calcite-action`s or content to the start side of the component.
*/
+
+/** @deprecated Use the `list` component instead. */
@Component({
tag: "calcite-pick-list-item",
styleUrl: "pick-list-item.scss",
@@ -87,6 +89,9 @@ export class PickListItem
*/
@Prop({ reflect: true }) icon: ICON_TYPES | null = null;
+ /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+ @Prop({ reflect: true }) iconFlipRtl = false;
+
/**
* Label and accessible name for the component. Appears next to the icon.
*/
@@ -100,16 +105,15 @@ export class PickListItem
/**
* Use this property to override individual strings used by the component.
*/
- @Prop({ mutable: true }) messageOverrides: Partial;
+ @Prop({ mutable: true }) messageOverrides: Partial;
/**
* Made into a prop for testing purposes only
*
* @internal
*/
- @Prop({ mutable: true }) messages: Messages;
+ @Prop({ mutable: true }) messages: PickListItemMessages;
- @Watch("intlRemove")
@Watch("defaultMessages")
@Watch("messageOverrides")
onMessagesChange(): void {
@@ -148,13 +152,6 @@ export class PickListItem
this.shiftPressed = false;
}
- /**
- * When `removable` is `true`, the accessible name for the component's remove button.
- *
- * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
- */
- @Prop({ reflect: true }) intlRemove: string;
-
/**
* The component's value.
*/
@@ -177,7 +174,7 @@ export class PickListItem
shiftPressed: boolean;
- @State() defaultMessages: Messages;
+ @State() defaultMessages: PickListItemMessages;
@State() effectiveLocale = "";
@@ -316,7 +313,7 @@ export class PickListItem
// --------------------------------------------------------------------------
renderIcon(): VNode {
- const { icon } = this;
+ const { icon, iconFlipRtl } = this;
if (!icon) {
return null;
@@ -330,7 +327,9 @@ export class PickListItem
}}
onClick={this.pickListClickHandler}
>
- {icon === ICON_TYPES.square ?
When `removable` is `true`, the accessible name for the component's remove button. | `string` | `undefined` | -| `label` _(required)_ | `label` | Label and accessible name for the component. Appears next to the icon. | `string` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | -| `metadata` | -- | Provides additional metadata to the component. Primary use is for a filter on the parent list. | `{ [x: string]: unknown; }` | `undefined` | -| `removable` | `removable` | When `true`, displays a remove action that removes the item from the list. | `boolean` | `false` | -| `selected` | `selected` | When `true`, selects an item. Toggles when an item is checked/unchecked. | `boolean` | `false` | -| `value` _(required)_ | `value` | The component's value. | `any` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------- | +| `description` | `description` | A description for the component that displays below the label text. | `string` | `undefined` | +| `deselectDisabled` | `deselect-disabled` | When `false`, the component cannot be deselected by user interaction. | `boolean` | `false` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `icon` | `icon` | Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`. | `ICON_TYPES.circle \| ICON_TYPES.grip \| ICON_TYPES.square` | `null` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `label` _(required)_ | `label` | Label and accessible name for the component. Appears next to the icon. | `string` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `PickListItemMessages` | `undefined` | +| `metadata` | -- | Provides additional metadata to the component. Primary use is for a filter on the parent list. | `{ [x: string]: unknown; }` | `undefined` | +| `removable` | `removable` | When `true`, displays a remove action that removes the item from the list. | `boolean` | `false` | +| `selected` | `selected` | When `true`, selects an item. Toggles when an item is checked/unchecked. | `boolean` | `false` | +| `value` _(required)_ | `value` | The component's value. | `any` | `undefined` | ## Events @@ -46,13 +48,6 @@ The first argument allows the value to be coerced, rather than swapping values. Type: `Promise`
-## Slots
-
-| Slot | Description |
-| ----------------- | ---------------------------------------------------------------------------------- |
-| `"actions-end"` | A slot for adding `calcite-action`s or content to the end side of the component. |
-| `"actions-start"` | A slot for adding `calcite-action`s or content to the start side of the component. |
-
## Dependencies
### Used by
diff --git a/src/components/pick-list/pick-list.e2e.ts b/src/components/pick-list/pick-list.e2e.ts
index 629cb46cb57..e93cabdfac0 100644
--- a/src/components/pick-list/pick-list.e2e.ts
+++ b/src/components/pick-list/pick-list.e2e.ts
@@ -1,17 +1,17 @@
import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
+import { html } from "../../../support/formatting";
+import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
+import { CSS as PICK_LIST_GROUP_CSS } from "../pick-list-group/resources";
import { ICON_TYPES } from "./resources";
-import { accessible, hidden, renders, defaults } from "../../tests/commonTests";
import {
- selectionAndDeselection,
+ disabling,
filterBehavior,
- loadingState,
- keyboardNavigation,
- itemRemoval,
focusing,
- disabling
+ itemRemoval,
+ keyboardNavigation,
+ loadingState,
+ selectionAndDeselection
} from "./shared-list-tests";
-import { html } from "../../../support/formatting";
-import { CSS as PICK_LIST_GROUP_CSS } from "../pick-list-group/resources";
describe("calcite-pick-list", () => {
it("has property defaults", async () =>
diff --git a/src/components/pick-list/pick-list.stories.ts b/src/components/pick-list/pick-list.stories.ts
index 8e8de27583e..19acf408937 100644
--- a/src/components/pick-list/pick-list.stories.ts
+++ b/src/components/pick-list/pick-list.stories.ts
@@ -1,16 +1,16 @@
import { boolean, text } from "@storybook/addon-knobs";
+import { storyFilters } from "../../../.storybook/helpers";
import {
Attribute,
- filterComponentAttributes,
Attributes,
createComponentHTML as create,
- themesDarkDefault
+ filterComponentAttributes,
+ modesDarkDefault
} from "../../../.storybook/utils";
-import readme from "./readme.md";
-import itemReadme from "../pick-list-item/readme.md";
-import groupReadme from "../pick-list-group/readme.md";
import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
+import groupReadme from "../pick-list-group/readme.md";
+import itemReadme from "../pick-list-item/readme.md";
+import readme from "./readme.md";
export default {
title: "Components/Pick List",
@@ -73,7 +73,7 @@ const action = html`
slot="actions-end"
label="click-me"
onClick="console.log('clicked');"
- appearance="clear"
+ appearance="outline"
scale="s"
icon="information"
>
@@ -94,7 +94,7 @@ export const simple = (): string =>
`
);
-export const darkThemeRTL_TestOnly = (): string =>
+export const darkModeRTL_TestOnly = (): string =>
create(
"calcite-pick-list",
createAttributes({ exceptions: ["dir", "class"] }).concat([
@@ -104,7 +104,7 @@ export const darkThemeRTL_TestOnly = (): string =>
},
{
name: "class",
- value: "calcite-theme-dark"
+ value: "calcite-mode-dark"
}
]),
html`
@@ -118,7 +118,7 @@ export const darkThemeRTL_TestOnly = (): string =>
`
);
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
export const grouped = (): string =>
create(
diff --git a/src/components/pick-list/pick-list.tsx b/src/components/pick-list/pick-list.tsx
index 3eb896113ff..5aac45b23d5 100644
--- a/src/components/pick-list/pick-list.tsx
+++ b/src/components/pick-list/pick-list.tsx
@@ -3,51 +3,53 @@ import {
Element,
Event,
EventEmitter,
+ h,
Listen,
Method,
Prop,
State,
- h,
VNode
} from "@stencil/core";
+import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+ componentLoaded,
+ LoadableComponent,
+ setComponentLoaded,
+ setUpLoadableComponent
+} from "../../utils/loadable";
+import { createObserver } from "../../utils/observers";
+import { HeadingLevel } from "../functional/Heading";
import { ICON_TYPES } from "./resources";
import {
- ListFocusId,
- calciteListItemChangeHandler,
calciteInternalListItemValueChangeHandler,
+ calciteListFocusOutHandler,
+ calciteListItemChangeHandler,
cleanUpObserver,
- deselectSiblingItems,
deselectRemovedItems,
+ deselectSiblingItems,
getItemData,
handleFilter,
handleFilterEvent,
handleInitialFilter,
- calciteListFocusOutHandler,
initialize,
initializeObserver,
+ ItemData,
+ keyDownHandler,
+ ListFocusId,
mutationObserverCallback,
+ removeItem,
selectSiblings,
- setUpItems,
- keyDownHandler,
setFocus,
- ItemData,
- removeItem
+ setUpItems
} from "./shared-list-logic";
import List from "./shared-list-render";
-import { HeadingLevel } from "../functional/Heading";
-import { createObserver } from "../../utils/observers";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
-import {
- setUpLoadableComponent,
- setComponentLoaded,
- LoadableComponent,
- componentLoaded
-} from "../../utils/loadable";
/**
* @slot - A slot for adding `calcite-pick-list-item` or `calcite-pick-list-group` elements. Items are displayed as a vertical list.
* @slot menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting.
*/
+
+/** @deprecated Use the `list` component instead. */
@Component({
tag: "calcite-pick-list",
styleUrl: "pick-list.scss",
@@ -69,14 +71,14 @@ export class PickList<
@Prop({ reflect: true }) disabled = false;
/**
- * **read-only** The currently filtered items
+ * The currently filtered items.
*
* @readonly
*/
@Prop({ mutable: true }) filteredItems: HTMLCalcitePickListItemElement[] = [];
/**
- * **read-only** The currently filtered items
+ * The currently filtered data.
*
* @readonly
*/
@@ -268,7 +270,7 @@ export class PickList<
}
/**
- * Sets focus on the component.
+ * Sets focus on the component's first focusable element.
*
* @param focusId
*/
diff --git a/src/components/pick-list/readme.md b/src/components/pick-list/readme.md
index 4aca2c43bfa..5ef862fe476 100644
--- a/src/components/pick-list/readme.md
+++ b/src/components/pick-list/readme.md
@@ -4,6 +4,8 @@
+> **[DEPRECATED]** Use the `list` component instead.
+
## Usage
### Basic
@@ -75,8 +77,8 @@ Renders groups of pick list items that are visually separated.
| `filterEnabled` | `filter-enabled` | When `true`, an input appears at the top of the list that can be used by end users to filter items in the list. | `boolean` | `false` |
| `filterPlaceholder` | `filter-placeholder` | Placeholder text for the filter input field. | `string` | `undefined` |
| `filterText` | `filter-text` | Text for the filter input field. | `string` | `undefined` |
-| `filteredData` | -- | **read-only** The currently filtered items | `{ label: string; description: string; metadata: Record; value: string; }[]` | `[]` |
-| `filteredItems` | -- | **read-only** The currently filtered items | `HTMLCalcitePickListItemElement[]` | `[]` |
+| `filteredData` | -- | The currently filtered data. | `{ label: string; description: string; metadata: Record; value: string; }[]` | `[]` |
+| `filteredItems` | -- | The currently filtered items. | `HTMLCalcitePickListItemElement[]` | `[]` |
| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` |
| `multiple` | `multiple` | Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-pick-list-item`s at a time. When `false`, only a single `calcite-pick-list-item` can be selected at a time, and a new selection will deselect previous selections. | `boolean` | `false` |
@@ -101,19 +103,12 @@ Type: `Promise>`
### `setFocus(focusId?: ListFocusId) => Promise`
-Sets focus on the component.
+Sets focus on the component's first focusable element.
#### Returns
Type: `Promise`
-## Slots
-
-| Slot | Description |
-| ---------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| | A slot for adding `calcite-pick-list-item` or `calcite-pick-list-group` elements. Items are displayed as a vertical list. |
-| `"menu-actions"` | A slot for adding a button and menu combination for performing actions, such as sorting. |
-
## Dependencies
### Depends on
diff --git a/src/components/pick-list/shared-list-logic.ts b/src/components/pick-list/shared-list-logic.ts
index 470f9d4fbd2..601822d6233 100644
--- a/src/components/pick-list/shared-list-logic.ts
+++ b/src/components/pick-list/shared-list-logic.ts
@@ -1,9 +1,9 @@
-import { PickList } from "./pick-list";
-import { ValueList } from "../value-list/value-list";
import { debounce } from "lodash-es";
-import { focusElement, getSlotted } from "../../utils/dom";
import { getRoundRobinIndex } from "../../utils/array";
+import { focusElement, getSlotted } from "../../utils/dom";
import { SLOTS } from "../pick-list-group/resources";
+import { ValueList } from "../value-list/value-list";
+import { PickList } from "./pick-list";
type Lists = PickList | ValueList;
type ListItemElement = T extends PickList ? HTMLCalcitePickListItemElement : HTMLCalciteValueListItemElement;
diff --git a/src/components/pick-list/shared-list-tests.ts b/src/components/pick-list/shared-list-tests.ts
index 0204913b484..2d0608c7fe7 100644
--- a/src/components/pick-list/shared-list-tests.ts
+++ b/src/components/pick-list/shared-list-tests.ts
@@ -1,8 +1,8 @@
import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
-import { disabled, focusable } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
-import { CSS as PICK_LIST_ITEM_CSS } from "../pick-list-item/resources";
+import { disabled, focusable } from "../../tests/commonTests";
import { selectText } from "../../tests/utils";
+import { CSS as PICK_LIST_ITEM_CSS } from "../pick-list-item/resources";
type ListType = "pick" | "value";
type ListElement = HTMLCalcitePickListElement | HTMLCalciteValueListElement;
diff --git a/src/components/popover/PopoverManager.ts b/src/components/popover/PopoverManager.ts
index f04419ea436..f611eceb0e1 100644
--- a/src/components/popover/PopoverManager.ts
+++ b/src/components/popover/PopoverManager.ts
@@ -58,18 +58,18 @@ export default class PopoverManager {
const togglePopover = this.queryPopover(composedPath);
if (togglePopover && !togglePopover.triggerDisabled) {
- togglePopover.toggle();
+ togglePopover.open = !togglePopover.open;
}
Array.from(this.registeredElements.values())
.filter(
(popover) => popover !== togglePopover && popover.autoClose && popover.open && !composedPath.includes(popover)
)
- .forEach((popover) => popover.toggle(false));
+ .forEach((popover) => (popover.open = false));
};
private closeAllPopovers(): void {
- Array.from(this.registeredElements.values()).forEach((popover) => popover.toggle(false));
+ Array.from(this.registeredElements.values()).forEach((popover) => (popover.open = false));
}
private keyHandler = (event: KeyboardEvent): void => {
diff --git a/src/components/popover/popover.e2e.ts b/src/components/popover/popover.e2e.ts
index f584b073826..920e7334c3c 100644
--- a/src/components/popover/popover.e2e.ts
+++ b/src/components/popover/popover.e2e.ts
@@ -720,19 +720,17 @@ describe("calcite-popover", () => {
const createPopoverHTML = (contentHTML?: string, attrs?: string) =>
`${contentHTML} `;
- const closeButtonFocusId = "close-button";
-
const contentButtonClass = "my-button";
- const contentHTML = ``;
+ const contentHTML = "Hello World!";
+ const buttonContentHTML = ``;
it("should focus content by default", async () =>
- focusable(createPopoverHTML(contentHTML), {
+ focusable(createPopoverHTML(buttonContentHTML), {
focusTargetSelector: `.${contentButtonClass}`
}));
it("should focus close button", async () =>
focusable(createPopoverHTML(contentHTML, "closable"), {
- focusId: closeButtonFocusId,
shadowFocusTargetSelector: `.${CSS.closeButton}`
}));
});
diff --git a/src/components/popover/popover.stories.ts b/src/components/popover/popover.stories.ts
index cd97be15ac4..0a13c85015d 100644
--- a/src/components/popover/popover.stories.ts
+++ b/src/components/popover/popover.stories.ts
@@ -4,7 +4,7 @@ import { boolean, storyFilters } from "../../../.storybook/helpers";
import { placements } from "../../utils/floating-ui";
import readme from "./readme.md";
import { defaultPopoverPlacement } from "../popover/resources";
-import { themesDarkDefault } from "../../../.storybook/utils";
+import { modesDarkDefault } from "../../../.storybook/utils";
const contentHTML = `
=> {
+ return await page.evaluate((): string => {
+ return document.querySelector("calcite-radio-button-group")?.selectedItem?.value || "";
+ });
+ };
+
const group = await page.find("calcite-radio-button-group");
const firstRadio = await page.find('calcite-radio-button[value="one"]');
const secondRadio = await page.find('calcite-radio-button[value="two"]');
@@ -429,14 +435,14 @@ describe("calcite-radio-button-group", () => {
await firstRadio.click();
expect(changeEvent).toHaveReceivedEventTimes(1);
- expect(changeEvent).toHaveReceivedEventDetail("one");
+ expect(await getSelectedItemValue()).toBe("one");
await secondRadio.click();
expect(changeEvent).toHaveReceivedEventTimes(2);
- expect(changeEvent).toHaveReceivedEventDetail("two");
+ expect(await getSelectedItemValue()).toBe("two");
await thirdRadio.click();
expect(changeEvent).toHaveReceivedEventTimes(3);
- expect(changeEvent).toHaveReceivedEventDetail("three");
+ expect(await getSelectedItemValue()).toBe("three");
});
});
diff --git a/src/components/radio-button-group/radio-button-group.stories.ts b/src/components/radio-button-group/radio-button-group.stories.ts
index 126b76efe90..89639b58aee 100644
--- a/src/components/radio-button-group/radio-button-group.stories.ts
+++ b/src/components/radio-button-group/radio-button-group.stories.ts
@@ -1,6 +1,6 @@
import { select } from "@storybook/addon-knobs";
import { boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
+import { modesDarkDefault } from "../../../.storybook/utils";
import readme from "./readme.md";
import { html } from "../../../support/formatting";
@@ -39,9 +39,9 @@ export const simple = (): string => html`
`;
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
html`
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
diff --git a/src/components/radio-button-group/radio-button-group.tsx b/src/components/radio-button-group/radio-button-group.tsx
index 7aee065eee2..0bac67fa7bd 100644
--- a/src/components/radio-button-group/radio-button-group.tsx
+++ b/src/components/radio-button-group/radio-button-group.tsx
@@ -1,14 +1,14 @@
import {
Component,
- Host,
- h,
Element,
- Prop,
- Watch,
- VNode,
Event,
EventEmitter,
- Listen
+ h,
+ Host,
+ Listen,
+ Prop,
+ VNode,
+ Watch
} from "@stencil/core";
import { createObserver } from "../../utils/observers";
import { Layout, Scale } from "../interfaces";
@@ -19,7 +19,9 @@ import { Layout, Scale } from "../interfaces";
@Component({
tag: "calcite-radio-button-group",
styleUrl: "radio-button-group.scss",
- shadow: true
+ shadow: {
+ delegatesFocus: true
+ }
})
export class RadioButtonGroup {
//--------------------------------------------------------------------------
@@ -66,6 +68,13 @@ export class RadioButtonGroup {
/** When `true`, the component must have a value in order for the form to submit. */
@Prop({ reflect: true }) required = false;
+ /**
+ * Specifies the component's selected item.
+ *
+ * @readonly
+ */
+ @Prop({ mutable: true }) selectedItem: HTMLCalciteRadioButtonElement = null;
+
/** Specifies the size of the component. */
@Prop({ reflect: true }) scale: Scale = "m";
@@ -105,6 +114,7 @@ export class RadioButtonGroup {
private passPropsToRadioButtons = (): void => {
const radioButtons = this.el.querySelectorAll("calcite-radio-button");
+ this.selectedItem = Array.from(radioButtons).find((radioButton) => radioButton.checked) || null;
if (radioButtons.length > 0) {
radioButtons.forEach((radioButton) => {
radioButton.disabled = this.disabled || radioButton.disabled;
@@ -125,7 +135,7 @@ export class RadioButtonGroup {
/**
* Fires when the component has changed.
*/
- @Event({ cancelable: false }) calciteRadioButtonGroupChange: EventEmitter;
+ @Event({ cancelable: false }) calciteRadioButtonGroupChange: EventEmitter;
//--------------------------------------------------------------------------
//
@@ -135,7 +145,8 @@ export class RadioButtonGroup {
@Listen("calciteRadioButtonChange")
radioButtonChangeHandler(event: CustomEvent): void {
- this.calciteRadioButtonGroupChange.emit((event.target as HTMLCalciteRadioButtonElement).value);
+ this.selectedItem = event.target as HTMLCalciteRadioButtonElement;
+ this.calciteRadioButtonGroupChange.emit();
}
// --------------------------------------------------------------------------
diff --git a/src/components/radio-button-group/readme.md b/src/components/radio-button-group/readme.md
index 21d77f08f78..aa3357c712c 100644
--- a/src/components/radio-button-group/readme.md
+++ b/src/components/radio-button-group/readme.md
@@ -75,20 +75,21 @@ Renders all radio button inputs disabled, first one checked
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------- | ---------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------- | -------------- |
-| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
-| `hidden` | `hidden` | When `true`, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable. | `boolean` | `false` |
-| `layout` | `layout` | Defines the layout of the component. | `"grid" \| "horizontal" \| "vertical"` | `"horizontal"` |
-| `name` _(required)_ | `name` | Specifies the name of the component on form submission. Must be unique to other component instances. | `string` | `undefined` |
-| `required` | `required` | When `true`, the component must have a value in order for the form to submit. | `boolean` | `false` |
-| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
+| Property | Attribute | Description | Type | Default |
+| ------------------- | --------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------- | -------------- |
+| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
+| `hidden` | `hidden` | When `true`, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable. | `boolean` | `false` |
+| `layout` | `layout` | Defines the layout of the component. | `"grid" \| "horizontal" \| "vertical"` | `"horizontal"` |
+| `name` _(required)_ | `name` | Specifies the name of the component on form submission. Must be unique to other component instances. | `string` | `undefined` |
+| `required` | `required` | When `true`, the component must have a value in order for the form to submit. | `boolean` | `false` |
+| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
+| `selectedItem` | `selected-item` | Specifies the component's selected item. | `HTMLCalciteRadioButtonElement` | `null` |
## Events
-| Event | Description | Type |
-| ------------------------------- | ------------------------------------- | ------------------ |
-| `calciteRadioButtonGroupChange` | Fires when the component has changed. | `CustomEvent` |
+| Event | Description | Type |
+| ------------------------------- | ------------------------------------- | ------------------- |
+| `calciteRadioButtonGroupChange` | Fires when the component has changed. | `CustomEvent` |
## Slots
diff --git a/src/components/radio-button/radio-button.stories.ts b/src/components/radio-button/radio-button.stories.ts
index b6882bbc76c..cf8c578fb29 100644
--- a/src/components/radio-button/radio-button.stories.ts
+++ b/src/components/radio-button/radio-button.stories.ts
@@ -1,8 +1,8 @@
import { select, text } from "@storybook/addon-knobs";
import { boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
+import { modesDarkDefault } from "../../../.storybook/utils";
import { html } from "../../../support/formatting";
+import readme from "./readme.md";
export default {
title: "Components/Controls/Radio/Radio Button",
@@ -27,8 +27,8 @@ export const simple = (): string => html`
`;
-export const darkThemeRTL_TestOnly = (): string => html`
-
+export const darkModeRTL_TestOnly = (): string => html`
+
html`
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
export const disabled_TestOnly = (): string => html`
- `,
- { focusTargetSelector: "calcite-radio-group-item" }
- ));
-
- it("can be disabled", () =>
- disabled(
- html`
- `,
- { focusTarget: "child" }
- ));
-
- it("sets value from selected item", async () => {
- const page = await newE2EPage();
- await page.setContent(html`
-
- one
- two
- three
-
- `);
-
- const element = await page.find("calcite-radio-group");
- const value = await element.getProperty("value");
-
- expect(value).toBe("1");
- });
-
- it("does not require an item to be checked", async () => {
- const page = await newE2EPage();
- await page.setContent(
- `
- `
- );
- const element = await page.find("calcite-radio-group");
-
- const selected = await element.getProperty("selectedItem");
- expect(selected).not.toBeDefined();
- });
-
- it("when multiple items are checked, last one wins", async () => {
- const page = await newE2EPage();
- await page.setContent(
- `
- one
- two
- three
- `
- );
- const element = await page.find("calcite-radio-group");
-
- const selected = await element.getProperty("selectedItem");
- expect(selected).toBeDefined();
-
- const selectedItems = await element.findAll("calcite-radio-group-item[checked]");
- expect(selectedItems).toHaveLength(1);
-
- const selectedValue = await selectedItems[0].getProperty("value");
- expect(selectedValue).toBe("3");
- });
-
- it("allows items to be selected", async () => {
- async function getSelectedItemValue(page: E2EPage): Promise {
- return page.$eval(
- "calcite-radio-group",
- (radioGroup: HTMLCalciteRadioGroupElement) => radioGroup.selectedItem.value
- );
- }
-
- const page = await newE2EPage();
- await page.setContent(
- `
- one
- two
- three
- `
- );
- const element = await page.find("calcite-radio-group");
- const eventSpy = await element.spyOnEvent("calciteRadioGroupChange");
- expect(eventSpy).not.toHaveReceivedEvent();
- const [first, second, third] = await page.findAll("calcite-radio-group-item");
-
- await first.click();
- expect(eventSpy).toHaveReceivedEventTimes(1);
- expect(eventSpy).toHaveReceivedEventDetail("1");
- expect(await getSelectedItemValue(page)).toBe("1");
-
- // does not emit from programmatic changes
- third.setProperty("checked", true);
- await page.waitForChanges();
- expect(eventSpy).toHaveReceivedEventTimes(1);
- expect(await getSelectedItemValue(page)).toBe("3");
-
- await second.click();
- expect(eventSpy).toHaveReceivedEventTimes(2);
- expect(eventSpy).toHaveReceivedEventDetail("2");
- expect(await getSelectedItemValue(page)).toBe("2");
- });
-
- it("does not emit extraneous events (edge case from #3210)", async () => {
- const page = await newE2EPage();
- await page.setContent(
- `
- one
- two
- `
- );
-
- const timesCalled = await page.evaluate(async () => {
- let calls = 0;
-
- const radioGroup = document.querySelector("calcite-radio-group");
-
- const waitForFrame = async () => await new Promise((resolve) => requestAnimationFrame(() => resolve()));
-
- document.addEventListener("calciteRadioGroupChange", () => calls++);
-
- let [first, second] = Array.from(document.querySelectorAll("calcite-radio-group-item"));
-
- first.checked = true;
- await waitForFrame();
-
- second.click();
- await waitForFrame();
-
- radioGroup.remove();
- await waitForFrame();
-
- document.body.innerHTML = `
-
- one
- two
-
- `;
-
- [first, second] = Array.from(document.querySelectorAll("calcite-radio-group-item"));
-
- second.checked = true;
- await waitForFrame();
-
- first.click();
- await waitForFrame();
-
- return calls;
- });
-
- expect(timesCalled).toBe(2);
- });
-
- describe("keyboard navigation", () => {
- it("selects item with left and arrow keys", async () => {
- const page = await newE2EPage();
- await page.setContent(
- `
- one
- two
- three
- `
- );
- const element = await page.find("calcite-radio-group");
- const spy = await element.spyOnEvent("calciteRadioGroupChange");
-
- const firstElement = await element.find("calcite-radio-group-item[checked]");
- await firstElement.click();
- await element.press("ArrowRight");
- await page.waitForChanges();
-
- let selected = await element.find("calcite-radio-group-item[checked]");
- let value = await selected.getProperty("value");
- expect(value).toBe("2");
-
- await element.press("ArrowRight");
- selected = await element.find("calcite-radio-group-item[checked]");
- value = await selected.getProperty("value");
- expect(value).toBe("3");
-
- await element.press("ArrowRight");
- selected = await element.find("calcite-radio-group-item[checked]");
- value = await selected.getProperty("value");
- expect(value).toBe("1");
-
- await element.press("ArrowLeft");
- selected = await element.find("calcite-radio-group-item[checked]");
- value = await selected.getProperty("value");
- expect(value).toBe("3");
-
- await element.press("ArrowLeft");
- selected = await element.find("calcite-radio-group-item[checked]");
- value = await selected.getProperty("value");
- expect(value).toBe("2");
-
- await element.press("ArrowLeft");
- selected = await element.find("calcite-radio-group-item[checked]");
- value = await selected.getProperty("value");
- expect(value).toBe("1");
-
- expect(spy).toHaveReceivedEventTimes(6);
- });
-
- it("selects item with up and down keys", async () => {
- const page = await newE2EPage();
- await page.setContent(
- `
- one
- two
- three
- `
- );
- const element = await page.find("calcite-radio-group");
- const spy = await element.spyOnEvent("calciteRadioGroupChange");
-
- const firstElement = await element.find("calcite-radio-group-item[checked]");
- await firstElement.click();
- await element.press("ArrowDown");
- let selected = await element.find("calcite-radio-group-item[checked]");
- let value = await selected.getProperty("value");
- expect(value).toBe("2");
-
- await element.press("ArrowDown");
- selected = await element.find("calcite-radio-group-item[checked]");
- value = await selected.getProperty("value");
- expect(value).toBe("3");
-
- await element.press("ArrowDown");
- selected = await element.find("calcite-radio-group-item[checked]");
- value = await selected.getProperty("value");
- expect(value).toBe("1");
-
- await element.press("ArrowUp");
- selected = await element.find("calcite-radio-group-item[checked]");
- value = await selected.getProperty("value");
- expect(value).toBe("3");
-
- await element.press("ArrowUp");
- selected = await element.find("calcite-radio-group-item[checked]");
- value = await selected.getProperty("value");
- expect(value).toBe("2");
-
- await element.press("ArrowUp");
- selected = await element.find("calcite-radio-group-item[checked]");
- value = await selected.getProperty("value");
- expect(value).toBe("1");
-
- expect(spy).toHaveReceivedEventTimes(6);
- });
- });
-
- describe("WAI-ARIA Roles, States, and Properties", () => {
- it(`has a role of 'radiogroup'`, async () => {
- const page = await newE2EPage();
- await page.setContent("
- one
- two
- three
-
- `,
- {
- focusTargetSelector: "#child-1"
- }
- ));
-
- it("focuses the selected item", async () =>
- focusable(
- html`
-
- one
- two
- three
-
- `,
- {
- focusTargetSelector: "#child-3"
- }
- ));
- });
-
- describe("is form-associated", () => {
- const formAssociatedOptions = { testValue: "2" };
-
- it("unselected value", () =>
- formAssociated(
- html`
-
- one
- two
- three
-
- `,
- formAssociatedOptions
- ));
-
- it("selected-value", () =>
- formAssociated(
- html`
-
- one
- two
- three
-
- `,
- formAssociatedOptions
- ));
- });
-});
diff --git a/src/components/radio-group/radio-group.stories.ts b/src/components/radio-group/radio-group.stories.ts
deleted file mode 100644
index 42192495d63..00000000000
--- a/src/components/radio-group/radio-group.stories.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import { select } from "@storybook/addon-knobs";
-import { boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme1 from "./readme.md";
-import readme2 from "../radio-group-item/readme.md";
-import { html } from "../../../support/formatting";
-
-export default {
- title: "Components/Controls/Radio/Radio Group",
- parameters: {
- notes: [readme1, readme2]
- },
- ...storyFilters()
-};
-
-export const simple = (): string => html`
-
- React
- Ember
- Angular
- Vue
-
-`;
-
-export const fullWidthWithIcons = (): string => html`
-
- React
- Ember
- Angular
- Vue
-
-`;
-
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
-
-export const disabled_TestOnly = (): string => html`
- React
- Ember
- Angular
- Vue
- `;
-
-export const WithIconStartAndEnd = (): string => html`
- Car
- Plane
- Bicycle
- Nothing
- `;
diff --git a/src/components/radio-group/readme.md b/src/components/radio-group/readme.md
deleted file mode 100644
index a65cfa23c61..00000000000
--- a/src/components/radio-group/readme.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# calcite-radio-group
-
-
-
-## Usage
-
-### Basic
-
-```html
-
- Apple
- Mango
- Tomato
- Banana
-
-```
-
-## Properties
-
-| Property | Attribute | Description | Type | Default |
-| -------------- | --------------- | ---------------------------------------------------------------------------------------- | -------------------------------------- | -------------- |
-| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "solid"` | `"solid"` |
-| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
-| `layout` | `layout` | Defines the layout of the component. | `"grid" \| "horizontal" \| "vertical"` | `"horizontal"` |
-| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` |
-| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
-| `selectedItem` | `selected-item` | The component's selected item `HTMLElement`. | `HTMLCalciteRadioGroupItemElement` | `undefined` |
-| `value` | `value` | The component's `selectedItem` value. | `string` | `null` |
-| `width` | `width` | Specifies the width of the component. | `"auto" \| "full"` | `"auto"` |
-
-## Events
-
-| Event | Description | Type |
-| ------------------------- | -------------------------------------------------------------------------------- | --------------------- |
-| `calciteRadioGroupChange` | Fires when the selected option changes, where the event detail is the new value. | `CustomEvent` |
-
-## Methods
-
-### `setFocus() => Promise`
-
-Sets focus on the component.
-
-#### Returns
-
-Type: `Promise`
-
-## Slots
-
-| Slot | Description |
-| ---- | ---------------------------------------------- |
-| | A slot for adding `calcite-radio-group-item`s. |
-
----
-
-_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/src/components/radio-group/usage/Basic.md b/src/components/radio-group/usage/Basic.md
deleted file mode 100644
index 9a270795d6a..00000000000
--- a/src/components/radio-group/usage/Basic.md
+++ /dev/null
@@ -1,8 +0,0 @@
-```html
-
- Apple
- Mango
- Tomato
- Banana
-
-```
diff --git a/src/components/rating/function/star.tsx b/src/components/rating/function/star.tsx
new file mode 100644
index 00000000000..928aa56f8e8
--- /dev/null
+++ b/src/components/rating/function/star.tsx
@@ -0,0 +1,13 @@
+import { FunctionalComponent, h } from "@stencil/core";
+
+import { StarIconProps } from "../interfaces";
+
+export const StarIcon: FunctionalComponent = ({ full, scale, partial }) => (
+ html`
>
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
export const disabled_TestOnly = (): string => html`;
+ @Prop({ mutable: true }) messageOverrides: Partial;
+
+ @Watch("messageOverrides")
+ onMessagesChange(): void {
+ /* wired up by t9n util */
+ }
+
+ /** Specifies the name of the component on form submission. */
+ @Prop({ reflect: true }) name: string;
+
+ /** When `true`, the component's value can be read, but cannot be modified. */
+ @Prop({ reflect: true }) readOnly = false;
/**
* When `true`, the component must have a value in order for the form to submit.
@@ -106,11 +101,58 @@ export class Rating
*/
@Prop({ reflect: true }) required = false;
- @Watch("messageOverrides")
- onMessagesChange(): void {
- /* wired up by t9n util */
+ /** Specifies the size of the component. */
+ @Prop({ reflect: true }) scale: Scale = "m";
+
+ /** When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. */
+ @Prop({ reflect: true }) showChip = false;
+
+ /** The component's value. */
+ @Prop({ reflect: true, mutable: true }) value = 0;
+
+ @Watch("value")
+ handleValueUpdate(newValue: number): void {
+ this.hoverValue = newValue;
+ this.focusValue = newValue;
+ if (this.emit) {
+ this.calciteRatingChange.emit();
+ }
+
+ this.emit = false;
}
+ //--------------------------------------------------------------------------
+ //
+ // Events
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Fires when the component's value changes.
+ */
+ @Event({ cancelable: false }) calciteRatingChange: EventEmitter;
+
+ //--------------------------------------------------------------------------
+ //
+ // Static
+ //
+ //--------------------------------------------------------------------------
+
+ @State() effectiveLocale = "";
+
+ @Watch("effectiveLocale")
+ effectiveLocaleChange(): void {
+ updateMessages(this, this.effectiveLocale);
+ }
+
+ @State() defaultMessages: RatingMessages;
+
+ @State() hoverValue: number;
+
+ @State() focusValue: number;
+
+ @State() hasFocus: boolean;
+
//--------------------------------------------------------------------------
//
// Lifecycle
@@ -127,6 +169,45 @@ export class Rating
async componentWillLoad(): Promise {
await setUpMessages(this);
setUpLoadableComponent(this);
+ this.inputRefs = Array(this.max);
+ }
+
+ componentWillRender(): void {
+ this.starsMap = Array.from({ length: this.max }, (_, i) => {
+ const value = i + 1;
+ const average =
+ !this.focusValue &&
+ !this.hoverValue &&
+ this.average &&
+ !this.value &&
+ value <= this.average;
+ const checked = value === this.value;
+ const focused = this.isKeyboardInteraction && this.hasFocus && this.focusValue === value;
+ const fraction = this.average && this.average + 1 - value;
+ const hovered = value <= this.hoverValue;
+ const id = `${this.guid}-${value}`;
+ const partial =
+ !this.focusValue &&
+ !this.hoverValue &&
+ !this.value &&
+ !hovered &&
+ fraction > 0 &&
+ fraction < 1;
+ const selected = this.value >= value;
+
+ return {
+ average,
+ checked,
+ focused,
+ fraction,
+ hovered,
+ id,
+ idx: i,
+ partial,
+ selected,
+ value
+ };
+ });
}
componentDidLoad(): void {
@@ -144,111 +225,87 @@ export class Rating
updateHostInteraction(this);
}
- //--------------------------------------------------------------------------
- //
- // Events
- //
- //--------------------------------------------------------------------------
-
- /**
- * Fires when the component's value changes.
- */
- @Event({ cancelable: false }) calciteRatingChange: EventEmitter;
-
- //--------------------------------------------------------------------------
- //
- // Event Listeners
- //
- //--------------------------------------------------------------------------
-
- @Listen("blur")
- blurHandler(): void {
- this.hasFocus = false;
- }
-
- // --------------------------------------------------------------------------
- //
- // Render Methods
- //
- // --------------------------------------------------------------------------
-
- renderStars(): VNode[] {
- return [1, 2, 3, 4, 5].map((i) => {
- const selected = this.value >= i;
- const average = this.average && !this.value && i <= this.average;
- const hovered = i <= this.hoverValue;
- const fraction = this.average && this.average + 1 - i;
- const partial = !this.value && !hovered && fraction > 0 && fraction < 1;
- const focused = this.hasFocus && this.focusValue === i;
- return (
-
-
- this.updateValue(i)}
- onClick={(event) =>
- // click is fired from the component's label, so we treat this as an internal event
- event.stopPropagation()
- }
- onFocus={() => this.onFocusChange(i)}
- onKeyDown={this.onKeyboardPressed}
- ref={(el) =>
- (i === 1 || i === this.value) && (this.inputFocusRef = el as HTMLInputElement)
- }
- type="radio"
- value={i}
- />
-
- );
- });
- }
-
render() {
- const { disabled, messages, showChip, scale, count, average } = this;
-
return (
-
-
- {(count || average) && showChip ? (
-
- {!!average && {average.toString()}}
- {!!count && ({count?.toString()})}
-
- ) : null}
-
+
+
+
+
);
}
@@ -262,27 +319,101 @@ export class Rating
this.setFocus();
}
- private updateValue(value: number) {
- this.value = value;
- this.calciteRatingChange.emit();
- }
+ private handleRatingPointerOver = () => {
+ this.isKeyboardInteraction = false;
+ };
- private onKeyboardPressed = (event: KeyboardEvent): void => {
- if (!this.required && isActivationKey(event.key)) {
- event.preventDefault();
- this.updateValue(0);
- }
+ private handleRatingPointerOut = () => {
+ this.isKeyboardInteraction = true;
+ this.hoverValue = null;
+ this.focusValue = null;
+ this.hasFocus = false;
};
- private onFocusChange = (selectedRatingValue: number): void => {
+ private handleRatingFocusIn = (): void => {
+ const selectedInput = this.value > 0 ? this.value - 1 : 0;
+ const focusInput = this.inputRefs[selectedInput];
+ const focusValue = Number(focusInput.value);
+
+ focusInput.select();
+ this.focusValue = focusValue;
+ this.hoverValue = focusValue;
this.hasFocus = true;
- if (!this.required && this.focusValue === selectedRatingValue) {
- this.updateValue(0);
+ };
+
+ private handleRatingFocusLeave = (): void => {
+ this.focusValue = null;
+ this.hoverValue = null;
+ this.hasFocus = false;
+ };
+
+ private handleHostKeyDown = () => {
+ this.isKeyboardInteraction = true;
+ };
+
+ private handleInputKeyDown = (event: KeyboardEvent) => {
+ const target = event.currentTarget as HTMLInputElement;
+ const inputVal = Number(target.value);
+ const key = event.key;
+ const numberKey = key == " " ? undefined : Number(key);
+
+ this.emit = true;
+ if (isNaN(numberKey)) {
+ switch (key) {
+ case "Enter":
+ case " ":
+ this.value = !this.required && this.value === inputVal ? 0 : inputVal;
+ break;
+ case "ArrowLeft":
+ this.value = inputVal - 1;
+ break;
+ case "ArrowRight":
+ this.value = inputVal + 1;
+ break;
+ case "Tab":
+ if (this.hasFocus) {
+ this.hasFocus = false;
+ this.focusValue = null;
+ this.hoverValue = null;
+ }
+ default:
+ break;
+ }
} else {
- this.focusValue = selectedRatingValue;
+ if (!this.required && numberKey >= 0 && numberKey <= this.max) {
+ this.value = numberKey;
+ } else if (this.required && numberKey > 0 && numberKey <= this.max) {
+ this.value = numberKey;
+ }
}
};
+ private handleInputChange = (event: InputEvent) => {
+ if (this.isKeyboardInteraction === true) {
+ const inputVal = Number(event.target["value"]);
+ this.focusValue = inputVal;
+ this.hoverValue = inputVal;
+ this.value = inputVal;
+ }
+ };
+
+ private handleLabelPointerOver = (event: PointerEvent) => {
+ const target = event.currentTarget as HTMLLabelElement;
+ const newPointerValue = Number(target.firstChild["value"] || 0);
+ this.hoverValue = newPointerValue;
+ this.focusValue = null;
+ };
+
+ private handleLabelPointerDown = (event: PointerEvent) => {
+ const target = event.currentTarget as HTMLLabelElement;
+ const inputVal = Number(target.firstChild["value"] || 0);
+
+ this.focusValue = null;
+ this.hoverValue = null;
+ this.emit = true;
+ this.value = !this.required && this.value === inputVal ? 0 : inputVal;
+ };
+
//--------------------------------------------------------------------------
//
// Public Methods
@@ -309,22 +440,17 @@ export class Rating
defaultValue: Rating["value"];
- @State() effectiveLocale = "";
+ private emit = false;
- @Watch("effectiveLocale")
- effectiveLocaleChange(): void {
- updateMessages(this, this.effectiveLocale);
- }
+ private guid = `calcite-ratings-${guid()}`;
- @State() defaultMessages: Messages;
+ private inputRefs: HTMLInputElement[];
- @State() hoverValue: number;
-
- @State() focusValue: number;
+ private inputFocusRef: HTMLInputElement;
- @State() hasFocus: boolean;
+ private isKeyboardInteraction = true;
- private guid = `calcite-ratings-${guid()}`;
+ private max = 5;
- private inputFocusRef: HTMLInputElement;
+ private starsMap: Star[];
}
diff --git a/src/components/rating/readme.md b/src/components/rating/readme.md
index 7f81fd30264..add1b5b9ea6 100644
--- a/src/components/rating/readme.md
+++ b/src/components/rating/readme.md
@@ -7,38 +7,28 @@
### Basic
```html
-
Accessible name for the component. | `string` | `undefined` | -| `intlStars` | `intl-stars` | **[DEPRECATED]** – translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for each star. The `${num}` in the string will be replaced by the number. | `string` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | -| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` | -| `readOnly` | `read-only` | When `true`, the component's value can be read, but cannot be modified. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `showChip` | `show-chip` | When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. | `boolean` | `false` | -| `value` | `value` | The component's value. | `number` | `0` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------ | ------------------- | ----------- | +| `average` | `average` | Specifies a cumulative average from previous ratings to display. | `number` | `undefined` | +| `count` | `count` | Specifies the number of previous ratings to display. | `number` | `undefined` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `RatingMessages` | `undefined` | +| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` | +| `readOnly` | `read-only` | When `true`, the component's value can be read, but cannot be modified. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `showChip` | `show-chip` | When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. | `boolean` | `false` | +| `value` | `value` | The component's value. | `number` | `0` | ## Events -| Event | Description | Type | -| --------------------- | ----------------------------------------- | --------------------------------- | -| `calciteRatingChange` | Fires when the component's value changes. | `CustomEvent<{ value: number; }>` | +| Event | Description | Type | +| --------------------- | ----------------------------------------- | ------------------- | +| `calciteRatingChange` | Fires when the component's value changes. | `CustomEvent` |
## Methods
@@ -60,15 +50,15 @@ Type: `Promise`
### Depends on
-- [calcite-icon](../icon)
- [calcite-chip](../chip)
+- [calcite-icon](../icon)
### Graph
```mermaid
graph TD;
- calcite-rating --> calcite-icon
calcite-rating --> calcite-chip
+ calcite-rating --> calcite-icon
calcite-chip --> calcite-icon
style calcite-rating fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/rating/usage/Basic.md b/src/components/rating/usage/Basic.md
index 265c05b4950..1720dccde09 100644
--- a/src/components/rating/usage/Basic.md
+++ b/src/components/rating/usage/Basic.md
@@ -1,11 +1,3 @@
```html
-
Accessible name when the component is loading. | `string` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------------------------------------------------------------------- | --------------- | ----------- | +| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ScrimMessages` | `undefined` | ## Slots @@ -48,6 +47,12 @@ | ---- | ---------------------------------------------------------------- | | | A slot for adding custom content, primarily loading information. | +## CSS Custom Properties + +| Name | Description | +| ---------------------------- | -------------------------------------------- | +| `--calcite-scrim-background` | Specifies the background color of the scrim. | + ## Dependencies ### Used by diff --git a/src/components/scrim/scrim.e2e.ts b/src/components/scrim/scrim.e2e.ts index da8ae687583..4006b7d8b19 100644 --- a/src/components/scrim/scrim.e2e.ts +++ b/src/components/scrim/scrim.e2e.ts @@ -58,7 +58,7 @@ describe("calcite-scrim", () => { expect(clickSpy).toHaveReceivedEventTimes(0); }); - it("does allow clickss inside default node", async () => { + it("does allow clicks inside default node", async () => { const page = await newE2EPage(); await page.setContent(` @@ -96,7 +96,7 @@ describe("calcite-scrim", () => { expect(contentNode).not.toBeNull(); }); - describe("CSS properties for light/dark themes", () => { + describe("CSS properties for light/dark modes", () => { const scrimSnippet = `
@@ -120,8 +120,8 @@ describe("calcite-scrim", () => {
expect(scrimBgStyle).toEqual("green");
});
- describe("when theme attribute is not provided", () => {
- it("should render scrim background with default value tied to light theme", async () => {
+ describe("when mode attribute is not provided", () => {
+ it("should render scrim background with default value tied to mode", async () => {
page = await newE2EPage({ html: scrimSnippet });
scrim = await page.find("calcite-scrim >>> .scrim");
scrimStyles = await scrim.getComputedStyle();
@@ -130,10 +130,10 @@ describe("calcite-scrim", () => {
});
});
- describe("when theme attribute is dark", () => {
- it("should render scrim background with value tied to dark theme", async () => {
+ describe("when mode attribute is dark", () => {
+ it("should render scrim background with value tied to dark mode", async () => {
page = await newE2EPage({
- html: `
`;
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
-
- Yes
- No
-
+
+ Yes
+ No
+
@@ -948,10 +755,10 @@ Accessible name for the component's close button. The close button will only be shown when `closeable` is `true`. | `string` | `undefined` | -| `intlOptions` | `intl-options` | **[DEPRECATED]** use `calcite-flow-item` instead.
Accessible name for the component's actions menu. | `string` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `menuOpen` | `menu-open` | When `true`, the action menu items in the `header-menu-actions` slot are open. | `boolean` | `false` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | -| `widthScale` | `width-scale` | Specifies the width of the component. | `"l" \| "m" \| "s"` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ---------------------------------------------------------------------------------------- | ---------------------------- | ----------- | +| `closable` | `closable` | When `true`, displays a close button in the trailing side of the header. | `boolean` | `false` | +| `closed` | `closed` | When `true`, the component will be hidden. | `boolean` | `false` | +| `description` | `description` | A description for the component. | `string` | `undefined` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `heading` | `heading` | The component header text. | `string` | `undefined` | +| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | +| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | +| `menuOpen` | `menu-open` | When `true`, the action menu items in the `header-menu-actions` slot are open. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `PanelMessages` | `undefined` | ## Events @@ -100,9 +96,9 @@ Scrolls the component's content to a specified set of coordinates. Type: `Promise
When `removable` is `true`, the accessible name for the component's remove button. | `string` | `undefined` | -| `label` _(required)_ | `label` | Label and accessible name for the component. Appears next to the icon. | `string` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | -| `metadata` | -- | Provides additional metadata to the component. Primary use is for a filter on the parent list. | `{ [x: string]: unknown; }` | `undefined` | -| `removable` | `removable` | When `true`, displays a remove action that removes the item from the list. | `boolean` | `false` | -| `selected` | `selected` | When `true`, selects an item. Toggles when an item is checked/unchecked. | `boolean` | `false` | -| `value` _(required)_ | `value` | The component's value. | `any` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------- | +| `description` | `description` | A description for the component that displays below the label text. | `string` | `undefined` | +| `deselectDisabled` | `deselect-disabled` | When `false`, the component cannot be deselected by user interaction. | `boolean` | `false` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `icon` | `icon` | Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`. | `ICON_TYPES.circle \| ICON_TYPES.grip \| ICON_TYPES.square` | `null` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `label` _(required)_ | `label` | Label and accessible name for the component. Appears next to the icon. | `string` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `PickListItemMessages` | `undefined` | +| `metadata` | -- | Provides additional metadata to the component. Primary use is for a filter on the parent list. | `{ [x: string]: unknown; }` | `undefined` | +| `removable` | `removable` | When `true`, displays a remove action that removes the item from the list. | `boolean` | `false` | +| `selected` | `selected` | When `true`, selects an item. Toggles when an item is checked/unchecked. | `boolean` | `false` | +| `value` _(required)_ | `value` | The component's value. | `any` | `undefined` | ## Events @@ -46,13 +48,6 @@ The first argument allows the value to be coerced, rather than swapping values. Type: `Promise
@@ -47,7 +47,7 @@ export const simple = (): string => html`
`;
-export const darkThemeRTL_TestOnly = (): string => html`
-
- My great radio group
-
- Car
- Plane
- Bicycle
-
-
-
-`;
-
-export const darkThemeRTL_TestOnly = (): string => html`
- Accessible name for the component. | `string` | `undefined` | -| `intlStars` | `intl-stars` | **[DEPRECATED]** – translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for each star. The `${num}` in the string will be replaced by the number. | `string` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | -| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` | -| `readOnly` | `read-only` | When `true`, the component's value can be read, but cannot be modified. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `showChip` | `show-chip` | When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. | `boolean` | `false` | -| `value` | `value` | The component's value. | `number` | `0` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------ | ------------------- | ----------- | +| `average` | `average` | Specifies a cumulative average from previous ratings to display. | `number` | `undefined` | +| `count` | `count` | Specifies the number of previous ratings to display. | `number` | `undefined` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `RatingMessages` | `undefined` | +| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` | +| `readOnly` | `read-only` | When `true`, the component's value can be read, but cannot be modified. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `showChip` | `show-chip` | When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. | `boolean` | `false` | +| `value` | `value` | The component's value. | `number` | `0` | ## Events -| Event | Description | Type | -| --------------------- | ----------------------------------------- | --------------------------------- | -| `calciteRatingChange` | Fires when the component's value changes. | `CustomEvent<{ value: number; }>` | +| Event | Description | Type | +| --------------------- | ----------------------------------------- | ------------------- | +| `calciteRatingChange` | Fires when the component's value changes. | `CustomEvent
Accessible name when the component is loading. | `string` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------------------------------------------------------------------- | --------------- | ----------- | +| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ScrimMessages` | `undefined` | ## Slots @@ -48,6 +47,12 @@ | ---- | ---------------------------------------------------------------- | | | A slot for adding custom content, primarily loading information. | +## CSS Custom Properties + +| Name | Description | +| ---------------------------- | -------------------------------------------- | +| `--calcite-scrim-background` | Specifies the background color of the scrim. | + ## Dependencies ### Used by diff --git a/src/components/scrim/scrim.e2e.ts b/src/components/scrim/scrim.e2e.ts index da8ae687583..4006b7d8b19 100644 --- a/src/components/scrim/scrim.e2e.ts +++ b/src/components/scrim/scrim.e2e.ts @@ -58,7 +58,7 @@ describe("calcite-scrim", () => { expect(clickSpy).toHaveReceivedEventTimes(0); }); - it("does allow clickss inside default node", async () => { + it("does allow clicks inside default node", async () => { const page = await newE2EPage(); await page.setContent(` @@ -96,7 +96,7 @@ describe("calcite-scrim", () => { expect(contentNode).not.toBeNull(); }); - describe("CSS properties for light/dark themes", () => { + describe("CSS properties for light/dark modes", () => { const scrimSnippet = `
${scrimSnippet}
`
+ html: `${scrimSnippet}
`
});
scrim = await page.find("calcite-scrim >>> .scrim");
scrimStyles = await scrim.getComputedStyle();
@@ -142,7 +142,7 @@ describe("calcite-scrim", () => {
});
});
- it("should allow the CSS custom property to be overridden", async () => {
+ it("should allow the CSS custom property to be overridden when applied to :root", async () => {
const overrideStyle = "rgb(128, 0, 128)";
page = await newE2EPage({
html: `
@@ -159,5 +159,23 @@ describe("calcite-scrim", () => {
scrimBgStyle = await scrimStyles.getPropertyValue("background-color");
expect(scrimBgStyle).toEqual(overrideStyle);
});
+
+ it("should allow the CSS custom property to be overridden when applied to element", async () => {
+ const overrideStyle = "rgb(128, 0, 128)";
+ page = await newE2EPage({
+ html: `
+
+ ${scrimSnippet}
+ `
+ });
+ scrim = await page.find("calcite-scrim >>> .scrim");
+ scrimStyles = await scrim.getComputedStyle();
+ scrimBgStyle = await scrimStyles.getPropertyValue("background-color");
+ expect(scrimBgStyle).toEqual(overrideStyle);
+ });
});
});
diff --git a/src/components/scrim/scrim.scss b/src/components/scrim/scrim.scss
index 7c89b8f049a..af93a2d764a 100644
--- a/src/components/scrim/scrim.scss
+++ b/src/components/scrim/scrim.scss
@@ -1,3 +1,11 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-scrim-background: Specifies the background color of the scrim.
+ */
+
:host {
@apply absolute
inset-0
@@ -28,7 +36,7 @@
justify-center
overflow-hidden;
animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
- background-color: var(--calcite-scrim-background);
+ background-color: var(--calcite-scrim-background, var(--calcite-scrim-background-internal));
}
.content {
diff --git a/src/components/scrim/scrim.stories.ts b/src/components/scrim/scrim.stories.ts
index 84724a15b76..e9a4ebd161a 100644
--- a/src/components/scrim/scrim.stories.ts
+++ b/src/components/scrim/scrim.stories.ts
@@ -1,7 +1,7 @@
import { boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
+import { modesDarkDefault } from "../../../.storybook/utils";
import { html } from "../../../support/formatting";
+import readme from "./readme.md";
export default {
title: "Components/Scrim",
@@ -41,9 +41,9 @@ export const simple = (): string => html`
- ;
+ @Prop({ mutable: true }) messageOverrides: Partial;
@Watch("messageOverrides")
onMessagesChange(): void {
@@ -64,7 +62,7 @@ export class Scrim implements LocalizedComponent, T9nComponent {
//
// --------------------------------------------------------------------------
- @State() defaultMessages: Messages;
+ @State() defaultMessages: ScrimMessages;
@State() effectiveLocale = "";
diff --git a/src/components/radio-group-item/readme.md b/src/components/segmented-control-item/readme.md
similarity index 88%
rename from src/components/radio-group-item/readme.md
rename to src/components/segmented-control-item/readme.md
index be82e0bc51c..17e9599c1e2 100644
--- a/src/components/radio-group-item/readme.md
+++ b/src/components/segmented-control-item/readme.md
@@ -1,4 +1,4 @@
-# calcite-radio-group-item
+# calcite-segmented-control-item
@@ -22,8 +22,8 @@
```mermaid
graph TD;
- calcite-radio-group-item --> calcite-icon
- style calcite-radio-group-item fill:#f9f,stroke:#333,stroke-width:4px
+ calcite-segmented-control-item --> calcite-icon
+ style calcite-segmented-control-item fill:#f9f,stroke:#333,stroke-width:4px
```
---
diff --git a/src/components/radio-group-item/resources.ts b/src/components/segmented-control-item/resources.ts
similarity index 53%
rename from src/components/radio-group-item/resources.ts
rename to src/components/segmented-control-item/resources.ts
index 655f59f1b6c..c2f55d99acd 100644
--- a/src/components/radio-group-item/resources.ts
+++ b/src/components/segmented-control-item/resources.ts
@@ -3,5 +3,5 @@ export const SLOTS = {
};
export const CSS = {
- radioGroupItemIcon: "radio-group-item-icon"
+ segmentedControlItemIcon: "segmented-control-item-icon"
};
diff --git a/src/components/radio-group-item/radio-group-item.e2e.ts b/src/components/segmented-control-item/segmented-control-item.e2e.ts
similarity index 56%
rename from src/components/radio-group-item/radio-group-item.e2e.ts
rename to src/components/segmented-control-item/segmented-control-item.e2e.ts
index ab33a432bea..87db8636569 100644
--- a/src/components/radio-group-item/radio-group-item.e2e.ts
+++ b/src/components/segmented-control-item/segmented-control-item.e2e.ts
@@ -1,15 +1,15 @@
import { newE2EPage } from "@stencil/core/testing";
import { renders, hidden } from "../../tests/commonTests";
-describe("calcite-radio-group-item", () => {
- it("renders", () => renders("calcite-radio-group-item", { display: "flex" }));
+describe("calcite-segmented-control-item", () => {
+ it("renders", () => renders("calcite-segmented-control-item", { display: "flex" }));
- it("honors hidden attribute", async () => hidden("calcite-radio-group-item"));
+ it("honors hidden attribute", async () => hidden("calcite-segmented-control-item"));
it("is un-checked by default", async () => {
const page = await newE2EPage();
- await page.setContent("test-label ");
- const element = await page.find("calcite-radio-group-item");
+ await page.setContent(
+ "test-label "
+ );
+ const element = await page.find("calcite-segmented-control-item");
expect(element).toEqualText("test-label");
@@ -31,33 +33,35 @@ describe("calcite-radio-group-item", () => {
it("uses value as fallback label", async () => {
const page = await newE2EPage();
- await page.setContent("Content`);
- const icon = await page.find("calcite-radio-group-item >>> .radio-group-item-icon");
+ Content`);
+ const icon = await page.find("calcite-segmented-control-item >>> .segmented-control-item-icon");
expect(icon).not.toBe(null);
});
it("does not render icon if not requested", async () => {
const page = await newE2EPage();
await page.setContent(`
- Content`);
- const icon = await page.find("calcite-radio-group-item >>> .radio-group-item-icon");
+ Content`);
+ const icon = await page.find("calcite-segmented-control-item >>> .segmented-control-item-icon");
expect(icon).toBe(null);
});
describe("WAI-ARIA Roles, States, and Properties", () => {
it(`has a role of 'radio'`, async () => {
const page = await newE2EPage();
- await page.setContent("
{this.iconStart ? iconStartEl : null}
@@ -116,5 +120,5 @@ export class RadioGroupItem {
* @internal
*/
@Event({ cancelable: false })
- calciteInternalRadioGroupItemChange: EventEmitter;
+ calciteInternalSegmentedControlItemChange: EventEmitter;
}
diff --git a/src/components/segmented-control/readme.md b/src/components/segmented-control/readme.md
new file mode 100644
index 00000000000..e78eb28b80e
--- /dev/null
+++ b/src/components/segmented-control/readme.md
@@ -0,0 +1,55 @@
+# calcite-segmented-control
+
+
+
+## Usage
+
+### Basic
+
+```html
+
+ Apple
+ Mango
+ Tomato
+ Banana
+
+```
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| -------------- | --------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------- |
+| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid"` | `"solid"` |
+| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
+| `layout` | `layout` | Defines the layout of the component. | `"grid" \| "horizontal" \| "vertical"` | `"horizontal"` |
+| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` |
+| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
+| `selectedItem` | `selected-item` | The component's selected item `HTMLElement`. | `HTMLCalciteSegmentedControlItemElement` | `undefined` |
+| `value` | `value` | The component's `selectedItem` value. | `string` | `null` |
+| `width` | `width` | Specifies the width of the component. | `"auto" \| "full"` | `"auto"` |
+
+## Events
+
+| Event | Description | Type |
+| ------------------------------- | -------------------------------------------------------------------------------- | ------------------- |
+| `calciteSegmentedControlChange` | Fires when the selected option changes, where the event detail is the new value. | `CustomEvent` |
+
+## Methods
+
+### `setFocus() => Promise`
+
+Sets focus on the component.
+
+#### Returns
+
+Type: `Promise`
+
+## Slots
+
+| Slot | Description |
+| ---- | ---------------------------------------------------- |
+| | A slot for adding `calcite-segmented-control-item`s. |
+
+---
+
+_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/src/components/segmented-control/segmented-control.e2e.ts b/src/components/segmented-control/segmented-control.e2e.ts
new file mode 100644
index 00000000000..c7f5fd085bf
--- /dev/null
+++ b/src/components/segmented-control/segmented-control.e2e.ts
@@ -0,0 +1,356 @@
+import { E2EPage, newE2EPage } from "@stencil/core/testing";
+import { html } from "../../../support/formatting";
+import { disabled, focusable, formAssociated, hidden, labelable, renders } from "../../tests/commonTests";
+
+describe("calcite-segmented-control", () => {
+ it("renders", () => renders("calcite-segmented-control", { display: "flex" }));
+
+ it("honors hidden attribute", async () => hidden("calcite-segmented-control"));
+
+ it("is labelable", async () =>
+ labelable(
+ html`
+ `,
+ { focusTargetSelector: "calcite-segmented-control-item" }
+ ));
+
+ it("can be disabled", () =>
+ disabled(
+ html`
+ `,
+ { focusTarget: "child" }
+ ));
+
+ it("sets value from selected item", async () => {
+ const page = await newE2EPage();
+ await page.setContent(html`
+
+ one
+ two
+ three
+
+ `);
+
+ const element = await page.find("calcite-segmented-control");
+ const value = await element.getProperty("value");
+
+ expect(value).toBe("1");
+ });
+
+ it("does not require an item to be checked", async () => {
+ const page = await newE2EPage();
+ await page.setContent(
+ `
+ `
+ );
+ const element = await page.find("calcite-segmented-control");
+
+ const selected = await element.getProperty("selectedItem");
+ expect(selected).not.toBeDefined();
+ });
+
+ it("when multiple items are checked, last one wins", async () => {
+ const page = await newE2EPage();
+ await page.setContent(
+ `
+ one
+ two
+ three
+ `
+ );
+ const element = await page.find("calcite-segmented-control");
+
+ const selected = await element.getProperty("selectedItem");
+ expect(selected).toBeDefined();
+
+ const selectedItems = await element.findAll("calcite-segmented-control-item[checked]");
+ expect(selectedItems).toHaveLength(1);
+
+ const selectedValue = await selectedItems[0].getProperty("value");
+ expect(selectedValue).toBe("3");
+ });
+
+ it("allows items to be selected", async () => {
+ async function getSelectedItemValue(page: E2EPage): Promise {
+ return page.$eval(
+ "calcite-segmented-control",
+ (segmentedControl: HTMLCalciteSegmentedControlElement) => segmentedControl.selectedItem.value
+ );
+ }
+
+ const page = await newE2EPage();
+ await page.setContent(
+ `
+ one
+ two
+ three
+ `
+ );
+ const element = await page.find("calcite-segmented-control");
+ const eventSpy = await element.spyOnEvent("calciteSegmentedControlChange");
+ expect(eventSpy).not.toHaveReceivedEvent();
+ const [first, second, third] = await page.findAll("calcite-segmented-control-item");
+
+ await first.click();
+ expect(eventSpy).toHaveReceivedEventTimes(1);
+ expect(await getSelectedItemValue(page)).toBe("1");
+
+ // does not emit from programmatic changes
+ third.setProperty("checked", true);
+ await page.waitForChanges();
+ expect(eventSpy).toHaveReceivedEventTimes(1);
+ expect(await getSelectedItemValue(page)).toBe("3");
+
+ await second.click();
+ expect(eventSpy).toHaveReceivedEventTimes(2);
+ expect(await getSelectedItemValue(page)).toBe("2");
+ });
+
+ it("does not emit extraneous events (edge case from #3210)", async () => {
+ const page = await newE2EPage();
+ await page.setContent(
+ `
+ one
+ two
+ `
+ );
+
+ const timesCalled = await page.evaluate(async () => {
+ let calls = 0;
+
+ const segmentedControl = document.querySelector("calcite-segmented-control");
+
+ const waitForFrame = async () => await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+
+ document.addEventListener("calciteSegmentedControlChange", () => calls++);
+
+ let [first, second] = Array.from(document.querySelectorAll("calcite-segmented-control-item"));
+
+ first.checked = true;
+ await waitForFrame();
+
+ second.click();
+ await waitForFrame();
+
+ segmentedControl.remove();
+ await waitForFrame();
+
+ document.body.innerHTML = `
+
+ one
+ two
+
+ `;
+
+ [first, second] = Array.from(document.querySelectorAll("calcite-segmented-control-item"));
+
+ second.checked = true;
+ await waitForFrame();
+
+ first.click();
+ await waitForFrame();
+
+ return calls;
+ });
+
+ expect(timesCalled).toBe(2);
+ });
+
+ describe("keyboard navigation", () => {
+ it("selects item with left and arrow keys", async () => {
+ const page = await newE2EPage();
+ await page.setContent(
+ `
+ one
+ two
+ three
+ `
+ );
+ const element = await page.find("calcite-segmented-control");
+ const spy = await element.spyOnEvent("calciteSegmentedControlChange");
+
+ const firstElement = await element.find("calcite-segmented-control-item[checked]");
+ await firstElement.click();
+ await element.press("ArrowRight");
+ await page.waitForChanges();
+
+ let selected = await element.find("calcite-segmented-control-item[checked]");
+ let value = await selected.getProperty("value");
+ expect(value).toBe("2");
+
+ await element.press("ArrowRight");
+ selected = await element.find("calcite-segmented-control-item[checked]");
+ value = await selected.getProperty("value");
+ expect(value).toBe("3");
+
+ await element.press("ArrowRight");
+ selected = await element.find("calcite-segmented-control-item[checked]");
+ value = await selected.getProperty("value");
+ expect(value).toBe("1");
+
+ await element.press("ArrowLeft");
+ selected = await element.find("calcite-segmented-control-item[checked]");
+ value = await selected.getProperty("value");
+ expect(value).toBe("3");
+
+ await element.press("ArrowLeft");
+ selected = await element.find("calcite-segmented-control-item[checked]");
+ value = await selected.getProperty("value");
+ expect(value).toBe("2");
+
+ await element.press("ArrowLeft");
+ selected = await element.find("calcite-segmented-control-item[checked]");
+ value = await selected.getProperty("value");
+ expect(value).toBe("1");
+
+ expect(spy).toHaveReceivedEventTimes(6);
+ });
+
+ it("selects item with up and down keys", async () => {
+ const page = await newE2EPage();
+ await page.setContent(
+ `
+ one
+ two
+ three
+ `
+ );
+ const element = await page.find("calcite-segmented-control");
+ const spy = await element.spyOnEvent("calciteSegmentedControlChange");
+
+ const firstElement = await element.find("calcite-segmented-control-item[checked]");
+ await firstElement.click();
+ await element.press("ArrowDown");
+ let selected = await element.find("calcite-segmented-control-item[checked]");
+ let value = await selected.getProperty("value");
+ expect(value).toBe("2");
+
+ await element.press("ArrowDown");
+ selected = await element.find("calcite-segmented-control-item[checked]");
+ value = await selected.getProperty("value");
+ expect(value).toBe("3");
+
+ await element.press("ArrowDown");
+ selected = await element.find("calcite-segmented-control-item[checked]");
+ value = await selected.getProperty("value");
+ expect(value).toBe("1");
+
+ await element.press("ArrowUp");
+ selected = await element.find("calcite-segmented-control-item[checked]");
+ value = await selected.getProperty("value");
+ expect(value).toBe("3");
+
+ await element.press("ArrowUp");
+ selected = await element.find("calcite-segmented-control-item[checked]");
+ value = await selected.getProperty("value");
+ expect(value).toBe("2");
+
+ await element.press("ArrowUp");
+ selected = await element.find("calcite-segmented-control-item[checked]");
+ value = await selected.getProperty("value");
+ expect(value).toBe("1");
+
+ expect(spy).toHaveReceivedEventTimes(6);
+ });
+ });
+
+ describe("WAI-ARIA Roles, States, and Properties", () => {
+ it(`has a role of 'radiogroup'`, async () => {
+ const page = await newE2EPage();
+ await page.setContent("
+ one
+ two
+ three
+
+ `,
+ {
+ focusTargetSelector: "#child-1"
+ }
+ ));
+
+ it("focuses the selected item", async () =>
+ focusable(
+ html`
+
+ one
+ two
+ three
+
+ `,
+ {
+ focusTargetSelector: "#child-3"
+ }
+ ));
+ });
+
+ describe("is form-associated", () => {
+ const formAssociatedOptions = { testValue: "2" };
+
+ it("unselected value", () =>
+ formAssociated(
+ html`
+
+ one
+ two
+ three
+
+ `,
+ formAssociatedOptions
+ ));
+
+ it("selected-value", () =>
+ formAssociated(
+ html`
+
+ one
+ two
+ three
+
+ `,
+ formAssociatedOptions
+ ));
+ });
+});
diff --git a/src/components/radio-group/radio-group.scss b/src/components/segmented-control/segmented-control.scss
similarity index 63%
rename from src/components/radio-group/radio-group.scss
rename to src/components/segmented-control/segmented-control.scss
index 01a23e3a5b9..c9b3f39af84 100644
--- a/src/components/radio-group/radio-group.scss
+++ b/src/components/segmented-control/segmented-control.scss
@@ -5,23 +5,27 @@
outline-offset: -1px;
}
+:host([appearance="outline"]) {
+ @apply bg-transparent;
+}
+
@include disabled();
:host([layout="vertical"]) {
@apply flex-col items-start self-start;
}
-// radio group width for full
+// segmented control width for full
:host([width="full"]) {
@apply w-full;
min-inline-size: fit-content;
- ::slotted(calcite-radio-group-item) {
+ ::slotted(calcite-segmented-control-item) {
@apply flex-auto;
}
}
-:host([width="full"][layout="vertical"]) ::slotted(calcite-radio-group-item) {
+:host([width="full"][layout="vertical"]) ::slotted(calcite-segmented-control-item) {
@apply justify-start;
}
diff --git a/src/components/segmented-control/segmented-control.stories.ts b/src/components/segmented-control/segmented-control.stories.ts
new file mode 100644
index 00000000000..357bd8211eb
--- /dev/null
+++ b/src/components/segmented-control/segmented-control.stories.ts
@@ -0,0 +1,86 @@
+import { select } from "@storybook/addon-knobs";
+import { boolean, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import { html } from "../../../support/formatting";
+import readme2 from "../segmented-control-item/readme.md";
+import readme1 from "./readme.md";
+
+export default {
+ title: "Components/Controls/Radio/Segmented Control",
+ parameters: {
+ notes: [readme1, readme2]
+ },
+ ...storyFilters()
+};
+
+export const simple = (): string => html`
+
+ React
+ Ember
+ Angular
+ Vue
+
+`;
+
+export const fullWidthWithIcons = (): string => html`
+
+ React
+ Ember
+ Angular
+ Vue
+
+`;
+
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+
+export const disabled_TestOnly = (): string => html`
+ React
+ Ember
+ Angular
+ Vue
+ `;
+
+export const WithIconStartAndEnd = (): string => html`
+ Car
+ Plane
+ Bicycle
+ Nothing
+ `;
diff --git a/src/components/radio-group/radio-group.tsx b/src/components/segmented-control/segmented-control.tsx
similarity index 82%
rename from src/components/radio-group/radio-group.tsx
rename to src/components/segmented-control/segmented-control.tsx
index bcd763eed2e..d6b25c27eae 100644
--- a/src/components/radio-group/radio-group.tsx
+++ b/src/components/segmented-control/segmented-control.tsx
@@ -14,8 +14,6 @@ import {
} from "@stencil/core";
import { getElementDir } from "../../utils/dom";
-import { Layout, Scale, Width } from "../interfaces";
-import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
import {
afterConnectDefaultValueSet,
connectForm,
@@ -23,24 +21,25 @@ import {
FormComponent,
HiddenFormInputSlot
} from "../../utils/form";
-import { RadioAppearance } from "./interfaces";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
import {
- setUpLoadableComponent,
- setComponentLoaded,
+ componentLoaded,
LoadableComponent,
- componentLoaded
+ setComponentLoaded,
+ setUpLoadableComponent
} from "../../utils/loadable";
+import { Appearance, Layout, Scale, Width } from "../interfaces";
/**
- * @slot - A slot for adding `calcite-radio-group-item`s.
+ * @slot - A slot for adding `calcite-segmented-control-item`s.
*/
@Component({
- tag: "calcite-radio-group",
- styleUrl: "radio-group.scss",
+ tag: "calcite-segmented-control",
+ styleUrl: "segmented-control.scss",
shadow: true
})
-export class RadioGroup
+export class SegmentedControl
implements LabelableComponent, FormComponent, InteractiveComponent, LoadableComponent
{
//--------------------------------------------------------------------------
@@ -49,7 +48,7 @@ export class RadioGroup
//
//--------------------------------------------------------------------------
- @Element() el: HTMLCalciteRadioGroupElement;
+ @Element() el: HTMLCalciteSegmentedControlElement;
//--------------------------------------------------------------------------
//
@@ -58,7 +57,8 @@ export class RadioGroup
//--------------------------------------------------------------------------
/** Specifies the appearance style of the component. */
- @Prop({ reflect: true }) appearance: RadioAppearance = "solid";
+ @Prop({ reflect: true }) appearance: Extract<"outline" | "outline-fill" | "solid", Appearance> =
+ "solid";
/** When `true`, interaction is prevented and the component is displayed with lower opacity. */
@Prop({ reflect: true }) disabled = false;
@@ -95,10 +95,10 @@ export class RadioGroup
*
* @readonly
*/
- @Prop({ mutable: true }) selectedItem: HTMLCalciteRadioGroupItemElement;
+ @Prop({ mutable: true }) selectedItem: HTMLCalciteSegmentedControlItemElement;
@Watch("selectedItem")
- protected handleSelectedItemChange(
+ protected handleSelectedItemChange(
newItem: T,
oldItem: T
): void {
@@ -177,15 +177,15 @@ export class RadioGroup
//--------------------------------------------------------------------------
protected handleClick = (event: MouseEvent): void => {
- if ((event.target as HTMLElement).localName === "calcite-radio-group-item") {
- this.selectItem(event.target as HTMLCalciteRadioGroupItemElement, true);
+ if ((event.target as HTMLElement).localName === "calcite-segmented-control-item") {
+ this.selectItem(event.target as HTMLCalciteSegmentedControlItemElement, true);
}
};
- @Listen("calciteInternalRadioGroupItemChange")
+ @Listen("calciteInternalSegmentedControlItemChange")
protected handleSelected(event: Event): void {
event.preventDefault();
- this.selectItem(event.target as HTMLCalciteRadioGroupItemElement);
+ this.selectItem(event.target as HTMLCalciteSegmentedControlItemElement);
event.stopPropagation();
}
@@ -236,7 +236,7 @@ export class RadioGroup
return;
case " ":
event.preventDefault();
- this.selectItem(event.target as HTMLCalciteRadioGroupItemElement, true);
+ this.selectItem(event.target as HTMLCalciteSegmentedControlItemElement, true);
return;
default:
return;
@@ -250,7 +250,7 @@ export class RadioGroup
//--------------------------------------------------------------------------
/** Fires when the selected option changes, where the event detail is the new value. */
- @Event({ cancelable: false }) calciteRadioGroupChange: EventEmitter;
+ @Event({ cancelable: false }) calciteSegmentedControlChange: EventEmitter;
// --------------------------------------------------------------------------
//
@@ -276,7 +276,7 @@ export class RadioGroup
formEl: HTMLFormElement;
- defaultValue: RadioGroup["value"];
+ defaultValue: SegmentedControl["value"];
//--------------------------------------------------------------------------
//
@@ -288,17 +288,17 @@ export class RadioGroup
this.setFocus();
}
- private getItems(): NodeListOf {
- return this.el.querySelectorAll("calcite-radio-group-item");
+ private getItems(): NodeListOf {
+ return this.el.querySelectorAll("calcite-segmented-control-item");
}
- private selectItem(selected: HTMLCalciteRadioGroupItemElement, emit = false): void {
+ private selectItem(selected: HTMLCalciteSegmentedControlItemElement, emit = false): void {
if (selected === this.selectedItem) {
return;
}
const items = this.getItems();
- let match: HTMLCalciteRadioGroupItemElement = null;
+ let match: HTMLCalciteSegmentedControlItemElement = null;
items.forEach((item) => {
const matches = item.value === selected.value;
@@ -313,7 +313,7 @@ export class RadioGroup
match = item;
if (emit) {
- this.calciteRadioGroupChange.emit(match.value);
+ this.calciteSegmentedControlChange.emit();
}
}
});
diff --git a/src/components/segmented-control/usage/Basic.md b/src/components/segmented-control/usage/Basic.md
new file mode 100644
index 00000000000..5c94d43ea4f
--- /dev/null
+++ b/src/components/segmented-control/usage/Basic.md
@@ -0,0 +1,8 @@
+```html
+
+ Apple
+ Mango
+ Tomato
+ Banana
+
+```
diff --git a/src/components/select/select.stories.ts b/src/components/select/select.stories.ts
index 9fc163deb88..22d89ffc1b3 100644
--- a/src/components/select/select.stories.ts
+++ b/src/components/select/select.stories.ts
@@ -3,7 +3,7 @@ import {
filterComponentAttributes,
Attributes,
createComponentHTML as create,
- themesDarkDefault
+ modesDarkDefault
} from "../../../.storybook/utils";
import { html } from "../../../support/formatting";
import { boolean, text } from "@storybook/addon-knobs";
@@ -115,7 +115,7 @@ export const grouped = (): string =>
`
);
-export const darkThemeRTL_TestOnly = (): string =>
+export const darkModeRTL_TestOnly = (): string =>
create(
"calcite-select",
[
@@ -126,7 +126,7 @@ export const darkThemeRTL_TestOnly = (): string =>
},
{
name: "class",
- value: "calcite-theme-dark"
+ value: "calcite-mode-dark"
}
],
html`
@@ -146,7 +146,7 @@ export const darkThemeRTL_TestOnly = (): string =>
`
);
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
export const disabled_TestOnly = (): string => html`
@@ -185,7 +179,7 @@ describe("calcite-shell-panel", () => {
const style2 = await content2.getComputedStyle();
const width2 = parseFloat(style2["width"]);
- expect(width2).toEqual(widthDefault * multipier);
+ expect(`${width2}px`).toEqual(override);
});
it("calcite-panel should render at the same height as the content__body.", async () => {
@@ -386,4 +380,6 @@ describe("calcite-shell-panel", () => {
await page.waitForChanges();
expect(await page.evaluate((selector) => document.activeElement.matches(selector), "calcite-action")).toBe(true);
});
+
+ it("supports translations", () => t9n("calcite-shell-panel"));
});
diff --git a/src/components/shell-panel/shell-panel.scss b/src/components/shell-panel/shell-panel.scss
index abd29dffc59..24ad56d20fd 100755
--- a/src/components/shell-panel/shell-panel.scss
+++ b/src/components/shell-panel/shell-panel.scss
@@ -1,3 +1,15 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-shell-panel-width: The width of the component.
+ * @prop --calcite-shell-panel-max-width: The maximum width of the component.
+ * @prop --calcite-shell-panel-min-width: The minimum width of the component.
+ * @prop --calcite-shell-panel-detached-max-height: The maximum height of the component when `detached` is true.
+ *
+ */
+
:host {
@apply pointer-events-none
flex
@@ -6,6 +18,36 @@
--calcite-shell-panel-detached-max-height: unset;
}
+:host([width-scale="s"]) .content {
+ --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 12vw);
+ --calcite-shell-panel-max-width-internal: var(--calcite-shell-panel-max-width, 300px);
+ --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 150px);
+}
+
+:host([width-scale="m"]) .content {
+ --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 20vw);
+ --calcite-shell-panel-max-width-internal: var(--calcite-shell-panel-max-width, 420px);
+ --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 240px);
+}
+
+:host([width-scale="l"]) .content {
+ --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 45vw);
+ --calcite-shell-panel-max-width-internal: var(--calcite-shell-panel-max-width, 680px);
+ --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 340px);
+}
+
+:host([detached-height-scale="s"]) .content--detached {
+ --calcite-shell-panel-detached-max-height-internal: var(--calcite-shell-panel-detached-max-height, 40vh);
+}
+
+:host([detached-height-scale="m"]) .content--detached {
+ --calcite-shell-panel-detached-max-height-internal: var(--calcite-shell-panel-detached-max-height, 60vh);
+}
+
+:host([detached-height-scale="l"]) .content--detached {
+ --calcite-shell-panel-detached-max-height-internal: var(--calcite-shell-panel-detached-max-height, 80vh);
+}
+
.container {
@apply text-color-2
text-n1
@@ -80,9 +122,9 @@
self-stretch
p-0;
- inline-size: var(--calcite-shell-panel-width);
- max-inline-size: var(--calcite-shell-panel-max-width);
- min-inline-size: var(--calcite-shell-panel-min-width);
+ inline-size: var(--calcite-shell-panel-width-internal);
+ max-inline-size: var(--calcite-shell-panel-max-width-internal);
+ min-inline-size: var(--calcite-shell-panel-min-width-internal);
transition: max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing);
}
@@ -101,36 +143,6 @@
overflow-hidden;
}
-:host([width-scale="s"]) .content {
- --calcite-shell-panel-width: calc(var(--calcite-panel-width-multiplier) * 12vw);
- --calcite-shell-panel-max-width: calc(var(--calcite-panel-width-multiplier) * 300px);
- --calcite-shell-panel-min-width: calc(var(--calcite-panel-width-multiplier) * 150px);
-}
-
-:host([width-scale="m"]) .content {
- --calcite-shell-panel-width: calc(var(--calcite-panel-width-multiplier) * 20vw);
- --calcite-shell-panel-max-width: calc(var(--calcite-panel-width-multiplier) * 420px);
- --calcite-shell-panel-min-width: calc(var(--calcite-panel-width-multiplier) * 240px);
-}
-
-:host([width-scale="l"]) .content {
- --calcite-shell-panel-width: calc(var(--calcite-panel-width-multiplier) * 45vw);
- --calcite-shell-panel-max-width: calc(var(--calcite-panel-width-multiplier) * 680px);
- --calcite-shell-panel-min-width: calc(var(--calcite-panel-width-multiplier) * 340px);
-}
-
-:host([detached-height-scale="s"]) .content--detached {
- --calcite-shell-panel-detached-max-height: 40vh;
-}
-
-:host([detached-height-scale="m"]) .content--detached {
- --calcite-shell-panel-detached-max-height: 60vh;
-}
-
-:host([detached-height-scale="l"]) .content--detached {
- --calcite-shell-panel-detached-max-height: 80vh;
-}
-
.content--detached {
@apply shadow-0
mx-2
@@ -140,7 +152,7 @@
overflow-hidden
rounded;
- max-block-size: var(--calcite-shell-panel-detached-max-height);
+ max-block-size: var(--calcite-shell-panel-detached-max-height-internal);
::slotted(calcite-panel),
::slotted(calcite-flow) {
max-block-size: unset;
diff --git a/src/components/shell-panel/shell-panel.tsx b/src/components/shell-panel/shell-panel.tsx
index 5935809a920..6534458c835 100755
--- a/src/components/shell-panel/shell-panel.tsx
+++ b/src/components/shell-panel/shell-panel.tsx
@@ -1,24 +1,34 @@
-import { Component, Element, Prop, h, VNode, State, forceUpdate } from "@stencil/core";
-import { CSS, SLOTS, TEXT } from "./resources";
-import { Position, Scale } from "../interfaces";
-import { getSlotted, getElementDir, isPrimaryPointerButton } from "../../utils/dom";
-import { clamp } from "../../utils/math";
+import { Component, Element, forceUpdate, h, Prop, State, VNode, Watch } from "@stencil/core";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
+import { getElementDir, getSlotted, isPrimaryPointerButton } from "../../utils/dom";
+import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
+import { clamp } from "../../utils/math";
+import {
+ connectMessages,
+ disconnectMessages,
+ setUpMessages,
+ T9nComponent,
+ updateMessages
+} from "../../utils/t9n";
+import { Position, Scale } from "../interfaces";
+import { ShellPanelMessages } from "./assets/shell-panel/t9n";
+import { CSS, SLOTS } from "./resources";
/**
- * @slot - A slot for adding content to the component.
+ * @slot - A slot for adding custom content.
* @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
*/
@Component({
tag: "calcite-shell-panel",
styleUrl: "shell-panel.scss",
- shadow: true
+ shadow: true,
+ assetsDirs: ["assets"]
})
-export class ShellPanel implements ConditionalSlotComponent {
+export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, T9nComponent {
// --------------------------------------------------------------------------
//
// Properties
@@ -52,17 +62,26 @@ export class ShellPanel implements ConditionalSlotComponent {
@Prop({ reflect: true }) position: Position;
/**
- * Accessible name for the resize separator.
+ * When `true` and not `detached`, the component's content area is resizable.
+ */
+ @Prop({ reflect: true }) resizable = false;
+
+ /**
+ * Made into a prop for testing purposes only
*
- * @default "Resize"
+ * @internal
*/
- @Prop() intlResize = TEXT.resize;
+ @Prop({ mutable: true }) messages: ShellPanelMessages;
/**
- * When `true` and not `detached`, the component's content area is resizable.
+ * Use this property to override individual strings used by the component.
*/
- @Prop({ reflect: true }) resizable = false;
+ @Prop({ mutable: true }) messageOverrides: Partial;
+ @Watch("messageOverrides")
+ onMessagesChange(): void {
+ /* wired up by t9n util */
+ }
//--------------------------------------------------------------------------
//
// Lifecycle
@@ -71,11 +90,19 @@ export class ShellPanel implements ConditionalSlotComponent {
connectedCallback(): void {
connectConditionalSlotComponent(this);
+ connectLocalized(this);
+ connectMessages(this);
+ }
+
+ async componentWillLoad(): Promise {
+ await setUpMessages(this);
}
disconnectedCallback(): void {
disconnectConditionalSlotComponent(this);
this.disconnectSeparator();
+ disconnectLocalized(this);
+ disconnectMessages(this);
}
componentDidLoad(): void {
@@ -108,6 +135,15 @@ export class ShellPanel implements ConditionalSlotComponent {
stepMultiplier = 10;
+ @State() defaultMessages: ShellPanelMessages;
+
+ @State() effectiveLocale = "";
+
+ @Watch("effectiveLocale")
+ effectiveLocaleChange(): void {
+ updateMessages(this, this.effectiveLocale);
+ }
+
// --------------------------------------------------------------------------
//
// Render Methods
@@ -134,7 +170,6 @@ export class ShellPanel implements ConditionalSlotComponent {
contentWidth,
contentWidthMax,
contentWidthMin,
- intlResize,
resizable
} = this;
@@ -157,7 +192,7 @@ export class ShellPanel implements ConditionalSlotComponent {
const separatorNode = allowResizing ? (
-
- Yes
- No
-
+
+ Yes
+ No
+
@@ -918,10 +725,10 @@ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor @@ -71,4 +71,4 @@ export const darkThemeRTL_TestOnly = (): string => html`
+
+ My great segmented control
+
+ Car
+ Plane
+ Bicycle
+
+
+
+`;
+
+export const darkThemeRTL_TestOnly = (): string => html`
+ {
it("honors hidden attribute", async () => hidden("calcite-shell"));
- it("defaults", async () => {
- const page = await newE2EPage();
-
- await page.setContent(" ${actionBarStartContentHTML}
+ ${actionBarStartContentHTML}
`;
const actionBarEndHTML = html`
@@ -257,7 +257,7 @@ const advancedTrailingPanelHTMl = html`
- Cancel
+ Cancel
Save
@@ -291,7 +291,7 @@ const advancedTrailingPanelHTMl = html`
- Cancel
+ Cancel
Save
@@ -311,12 +311,12 @@ export const simple = (): string =>
`
);
-export const darkThemeRTL_TestOnly = (): string =>
+export const darkModeRTL_TestOnly = (): string =>
create(
"calcite-shell",
createAttributes({ exceptions: ["dir", "class"] }).concat(
{ name: "dir", value: "rtl" },
- { name: "class", value: "calcite-theme-dark" }
+ { name: "class", value: "calcite-mode-dark" }
),
html`
${headerHTML}
@@ -328,7 +328,7 @@ export const darkThemeRTL_TestOnly = (): string =>
`
);
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
export const closedPanels = (): string => html`
@@ -441,9 +441,9 @@ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Cancel
@@ -453,7 +453,7 @@ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
width="half"
alignment="center"
appearance="solid"
- color="blue"
+ kind="brand"
scale="m"
>
Save
@@ -501,9 +501,9 @@ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Cancel
@@ -513,7 +513,7 @@ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
width="half"
alignment="center"
appearance="solid"
- color="blue"
+ kind="brand"
scale="m"
>
Save
@@ -524,6 +524,84 @@ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
`;
+export const slottedModalAndAlert = (): string => html`
+
+ Modal slotted in Shell
+ Alert slotted in Shell
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Add layers
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+
export const contentBehind = (): string => html`
${headerHTML}
${leadingPanelHTML}
diff --git a/src/components/shell/shell.tsx b/src/components/shell/shell.tsx
index 450405a4684..71c0aebd4bd 100755
--- a/src/components/shell/shell.tsx
+++ b/src/components/shell/shell.tsx
@@ -1,20 +1,23 @@
-import { Component, Element, Prop, h, VNode, Fragment } from "@stencil/core";
-import { CSS, SLOTS } from "./resources";
-import { getSlotted } from "../../utils/dom";
+import { Component, Element, Fragment, h, Prop, State, VNode } from "@stencil/core";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
+import { slotChangeGetAssignedElements, slotChangeHasAssignedElement } from "../../utils/dom";
+import { CSS, SLOTS } from "./resources";
/**
- * @slot - A slot for adding content to the component. This content will appear between any leading and trailing panels added to the component, such as a map.
+ * @slot - A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map.
* @slot header - A slot for adding header content. This content will be positioned at the top of the component.
* @slot footer - A slot for adding footer content. This content will be positioned at the bottom of the component.
* @slot panel-start - A slot for adding the starting `calcite-shell-panel`.
* @slot panel-end - A slot for adding the ending `calcite-shell-panel`.
* @slot center-row - A slot for adding content to the center row.
+ * @slot modals - A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the shell.
+ * @slot alerts - A slot for adding `calcite-alert` components. When placed in this slot, the alert position will be constrained to the extent of the shell.
*/
+
@Component({
tag: "calcite-shell",
styleUrl: "shell.scss",
@@ -40,6 +43,14 @@ export class Shell implements ConditionalSlotComponent {
@Element() el: HTMLCalciteShellElement;
+ @State() hasHeader = false;
+
+ @State() hasFooter = false;
+
+ @State() hasAlerts = false;
+
+ @State() hasModals = false;
+
// --------------------------------------------------------------------------
//
// Lifecycle
@@ -54,6 +65,38 @@ export class Shell implements ConditionalSlotComponent {
disconnectConditionalSlotComponent(this);
}
+ // --------------------------------------------------------------------------
+ //
+ // Private Methods
+ //
+ // --------------------------------------------------------------------------
+
+ handleHeaderSlotChange = (event: Event): void => {
+ this.hasHeader = !!slotChangeHasAssignedElement(event);
+ };
+
+ handleFooterSlotChange = (event: Event): void => {
+ this.hasFooter = !!slotChangeHasAssignedElement(event);
+ };
+
+ handleAlertsSlotChange = (event: Event): void => {
+ this.hasAlerts = !!slotChangeHasAssignedElement(event);
+ slotChangeGetAssignedElements(event)?.map((el) => {
+ if (el.nodeName === "CALCITE-ALERT") {
+ (el as HTMLCalciteAlertElement).slottedInShell = true;
+ }
+ });
+ };
+
+ handleModalsSlotChange = (event: Event): void => {
+ this.hasModals = !!slotChangeHasAssignedElement(event);
+ slotChangeGetAssignedElements(event)?.map((el) => {
+ if (el.nodeName === "CALCITE-MODAL") {
+ (el as HTMLCalciteModalElement).slottedInShell = true;
+ }
+ });
+ };
+
// --------------------------------------------------------------------------
//
// Render Methods
@@ -61,9 +104,35 @@ export class Shell implements ConditionalSlotComponent {
// --------------------------------------------------------------------------
renderHeader(): VNode {
- const hasHeader = !!getSlotted(this.el, SLOTS.header);
+ return (
+
-
- Yes
- No
-
+
+ Yes
+ No
+
@@ -895,10 +702,10 @@ Header Example
+ Panel content
Padding is fake.
+ Padding is fake.
Flow 01 content
Padding is fake.
+ Padding is fake.
Flow 02 content
Padding is fake.
+ Padding is fake.
The borders are only applied to "known" components.
Padding is fake.
+ Padding is fake.
+
+ );
+ }
- return hasHeader ?
+
+ );
+ }
+
+ renderModals(): VNode {
+ return (
+
+
+ );
}
renderContent(): VNode[] {
@@ -94,16 +163,6 @@ export class Shell implements ConditionalSlotComponent {
return content;
}
- renderFooter(): VNode {
- const hasFooter = !!getSlotted(this.el, SLOTS.footer);
-
- return hasFooter ? (
-
- ) : null;
- }
-
renderMain(): VNode {
return (
@@ -114,12 +173,22 @@ export class Shell implements ConditionalSlotComponent {
);
}
+ renderPositionedSlots(): VNode {
+ return (
+
{this.renderHeader()}
{this.renderMain()}
{this.renderFooter()}
+ {this.renderPositionedSlots()}
);
}
diff --git a/src/components/slider/slider.e2e.ts b/src/components/slider/slider.e2e.ts
index 8387482e1ba..64ac95a6b55 100644
--- a/src/components/slider/slider.e2e.ts
+++ b/src/components/slider/slider.e2e.ts
@@ -1,7 +1,7 @@
-import { E2EPage, newE2EPage, E2EElement } from "@stencil/core/testing";
-import { defaults, disabled, formAssociated, labelable, renders, hidden } from "../../tests/commonTests";
-import { getElementXY } from "../../tests/utils";
+import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
import { html } from "../../../support/formatting";
+import { defaults, disabled, formAssociated, hidden, labelable, renders } from "../../tests/commonTests";
+import { getElementXY } from "../../tests/utils";
import { CSS } from "./resources";
describe("calcite-slider", () => {
diff --git a/src/components/slider/slider.stories.ts b/src/components/slider/slider.stories.ts
index 0cfee5bea1b..29d214f5a42 100644
--- a/src/components/slider/slider.stories.ts
+++ b/src/components/slider/slider.stories.ts
@@ -1,8 +1,8 @@
-import { text, number, array, boolean as booleanFn, select } from "@storybook/addon-knobs";
+import { array, boolean as booleanFn, number, select, text } from "@storybook/addon-knobs";
import { boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
+import { modesDarkDefault } from "../../../.storybook/utils";
import { html } from "../../../support/formatting";
+import readme from "./readme.md";
export default {
title: "Components/Controls/Slider",
@@ -55,9 +55,9 @@ export const range = (): string => html`
>
`;
-export const darkThemeMirroredRange_TestOnly = (): string => html`
+export const darkModeMirroredRange_TestOnly = (): string => html`
html`
>
`;
-darkThemeMirroredRange_TestOnly.story = {
- parameters: { themes: themesDarkDefault }
+darkModeMirroredRange_TestOnly.story = {
+ parameters: { modes: modesDarkDefault }
};
export const rangeLabeledTicks_TestOnly = (): string => html`
@@ -95,6 +95,10 @@ export const rangeLabeledTicks_TestOnly = (): string => html`
>
`;
+rangeLabeledTicks_TestOnly.parameters = {
+ chromatic: { diffThreshold: 1 }
+};
+
export const rangeLabeledTicksOverlappingAtMax_TestOnly = (): string => html`
html`
>
`;
+rangeLabeledTicksOverlappingAtMax_TestOnly.parameters = {
+ chromatic: { diffThreshold: 1 }
+};
+
export const rangeLabeledTicksOverlappingAtMin_TestOnly = (): string => html`
html`
>
`;
+rangeLabeledTicksOverlappingAtMin_TestOnly.parameters = {
+ chromatic: { diffThreshold: 1 }
+};
+
export const rangeLabeledTicksEdgePositioningAtMax_TestOnly = (): string => html`
html
>
`;
+rangeLabeledTicksEdgePositioningAtMax_TestOnly.parameters = {
+ chromatic: { diffThreshold: 1 }
+};
+
export const rangeLabeledTicksEdgePositioningAtMin_TestOnly = (): string => html`
html
>
`;
+rangeLabeledTicksEdgePositioningAtMin_TestOnly.parameters = {
+ chromatic: { diffThreshold: 1 }
+};
+
export const Histogram = (): HTMLCalciteSliderElement => {
const slider = document.createElement("calcite-slider") as HTMLCalciteSliderElement;
slider.min = number("min", -100);
@@ -216,7 +236,7 @@ export const HistogramWithColors = (): HTMLCalciteSliderElement => {
return slider;
};
-export const darkThemeHistogramRTL_TestOnly = (): HTMLCalciteSliderElement => {
+export const darkModeHistogramRTL_TestOnly = (): HTMLCalciteSliderElement => {
const slider = document.createElement("calcite-slider") as HTMLCalciteSliderElement;
slider.min = number("min", 0);
slider.minValue = number("min-value", 25);
@@ -237,11 +257,11 @@ export const darkThemeHistogramRTL_TestOnly = (): HTMLCalciteSliderElement => {
slider.snap = booleanFn("snap", false);
slider.scale = select("scale", ["s", "m", "l"], "m");
slider.style.minWidth = "60vw";
- slider.className = "calcite-theme-dark";
+ slider.className = "calcite-mode-dark";
return slider;
};
-darkThemeHistogramRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeHistogramRTL_TestOnly.parameters = { modes: modesDarkDefault };
export const disabled_TestOnly = (): string => html`;
@@ -53,7 +53,9 @@ function isRange(value: number | number[]): value is number[] {
@Component({
tag: "calcite-slider",
styleUrl: "slider.scss",
- shadow: true
+ shadow: {
+ delegatesFocus: true
+ }
})
export class Slider
implements
diff --git a/src/components/sortable-list/sortable-list.tsx b/src/components/sortable-list/sortable-list.tsx
index 964828db29f..d9af04ff0d7 100644
--- a/src/components/sortable-list/sortable-list.tsx
+++ b/src/components/sortable-list/sortable-list.tsx
@@ -1,20 +1,20 @@
-import Sortable from "sortablejs";
import {
Component,
Element,
Event,
EventEmitter,
+ h,
Listen,
Prop,
State,
- h,
VNode
} from "@stencil/core";
+import Sortable from "sortablejs";
+import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
import { createObserver } from "../../utils/observers";
+import { HandleNudge } from "../handle/interfaces";
import { Layout } from "../interfaces";
import { CSS } from "./resources";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
-import { HandleNudge } from "../handle/interfaces";
/**
* @slot - A slot for adding sortable items.
diff --git a/src/components/split-button/readme.md b/src/components/split-button/readme.md
index ae59ef6bc02..4b1fc2ad89a 100644
--- a/src/components/split-button/readme.md
+++ b/src/components/split-button/readme.md
@@ -20,22 +20,22 @@ The calcite-split-button control is one that combines a button with a dropdown m
## Properties
-| Property | Attribute | Description | Type | Default |
-| -------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------ |
-| `appearance` | `appearance` | Specifies the appearance style of the component. | `"clear" \| "minimal" \| "outline" \| "solid" \| "transparent"` | `"solid"` |
-| `color` | `color` | Specifies the color of the component. | `"blue" \| "inverse" \| "neutral" \| "red"` | `"blue"` |
-| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
-| `dropdownIconType` | `dropdown-icon-type` | Specifies the icon used for the dropdown menu. | `"caret" \| "chevron" \| "ellipsis" \| "overflow"` | `"chevron"` |
-| `dropdownLabel` | `dropdown-label` | Accessible name for the dropdown menu. | `string` | `undefined` |
-| `loading` | `loading` | When `true`, a busy indicator is displayed on the primary button. | `boolean` | `false` |
-| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` |
-| `primaryIconEnd` | `primary-icon-end` | Specifies an icon to display at the end of the primary button. | `string` | `undefined` |
-| `primaryIconFlipRtl` | `primary-icon-flip-rtl` | When `true`, the primary button icon will be flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` |
-| `primaryIconStart` | `primary-icon-start` | Specifies an icon to display at the start of the primary button. | `string` | `undefined` |
-| `primaryLabel` | `primary-label` | Accessible name for the primary button. | `string` | `undefined` |
-| `primaryText` | `primary-text` | Text displayed in the primary button. | `string` | `undefined` |
-| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
-| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` |
+| Property | Attribute | Description | Type | Default |
+| -------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------------ |
+| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid" \| "transparent"` | `"solid"` |
+| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
+| `dropdownIconType` | `dropdown-icon-type` | Specifies the icon used for the dropdown menu. | `"caret" \| "chevron" \| "ellipsis" \| "overflow"` | `"chevron"` |
+| `dropdownLabel` | `dropdown-label` | Accessible name for the dropdown menu. | `string` | `undefined` |
+| `kind` | `kind` | Specifies the kind of the component (will apply to border and background if applicable). | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` |
+| `loading` | `loading` | When `true`, a busy indicator is displayed on the primary button. | `boolean` | `false` |
+| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` |
+| `primaryIconEnd` | `primary-icon-end` | Specifies an icon to display at the end of the primary button. | `string` | `undefined` |
+| `primaryIconFlipRtl` | `primary-icon-flip-rtl` | Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` |
+| `primaryIconStart` | `primary-icon-start` | Specifies an icon to display at the start of the primary button. | `string` | `undefined` |
+| `primaryLabel` | `primary-label` | Accessible name for the primary button. | `string` | `undefined` |
+| `primaryText` | `primary-text` | Text displayed in the primary button. | `string` | `undefined` |
+| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` |
+| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` |
## Events
diff --git a/src/components/split-button/split-button.e2e.ts b/src/components/split-button/split-button.e2e.ts
index 10825114b7b..a649700f3b0 100644
--- a/src/components/split-button/split-button.e2e.ts
+++ b/src/components/split-button/split-button.e2e.ts
@@ -63,7 +63,7 @@ describe("calcite-split-button", () => {
`);
const element = await page.find("calcite-split-button");
expect(element).toEqualAttribute("scale", "m");
- expect(element).toEqualAttribute("color", "blue");
+ expect(element).toEqualAttribute("kind", "brand");
expect(element).toEqualAttribute("dropdown-icon-type", "chevron");
expect(element).toEqualAttribute("width", "auto");
});
@@ -87,7 +87,7 @@ describe("calcite-split-button", () => {
await page.setContent(`
{
const primaryButton = await page.find("calcite-split-button >>> calcite-button");
const dropdownButton = await page.find("calcite-split-button >>> calcite-dropdown calcite-button");
expect(element).toEqualAttribute("scale", "s");
- expect(element).toEqualAttribute("color", "red");
+ expect(element).toEqualAttribute("kind", "danger");
expect(element).toEqualAttribute("dropdown-icon-type", "caret");
expect(element).toHaveAttribute("loading");
expect(element).toHaveAttribute("disabled");
diff --git a/src/components/split-button/split-button.scss b/src/components/split-button/split-button.scss
index 6b4c38e560f..466a4179795 100644
--- a/src/components/split-button/split-button.scss
+++ b/src/components/split-button/split-button.scss
@@ -12,60 +12,60 @@
}
:host {
- &:host([color="blue"]) {
+ &:host([kind="brand"]) {
--calcite-split-button-background: theme("colors.brand");
--calcite-split-button-divider: theme("colors.background.foreground.1");
}
- &:host([color="red"]) {
+ &:host([kind="danger"]) {
--calcite-split-button-background: theme("colors.danger");
--calcite-split-button-divider: theme("colors.background.foreground.1");
}
- &:host([color="neutral"]) {
+ &:host([kind="neutral"]) {
--calcite-split-button-background: theme("colors.background.foreground.3");
--calcite-split-button-divider: theme("colors.color.1");
}
- &:host([color="inverse"]) {
+ &:host([kind="inverse"]) {
--calcite-split-button-background: var(--calcite-ui-inverse);
--calcite-split-button-divider: theme("colors.background.foreground.1");
}
}
:host([appearance="transparent"]) {
- &:host([color="blue"]) {
+ &:host([kind="brand"]) {
--calcite-split-button-divider: theme("colors.brand");
}
- &:host([color="red"]) {
+ &:host([kind="danger"]) {
--calcite-split-button-divider: theme("colors.danger");
}
- &:host([color="neutral"]) {
+ &:host([kind="neutral"]) {
--calcite-split-button-divider: theme("colors.color.1");
}
- &:host([color="inverse"]) {
+ &:host([kind="inverse"]) {
--calcite-split-button-divider: theme("colors.background.foreground.1");
}
}
-:host([appearance="clear"]),
+:host([appearance="outline"]),
:host([appearance="transparent"]) {
--calcite-split-button-background: transparent;
}
-:host([appearance="outline"]) {
+:host([appearance="outline-fill"]) {
--calcite-split-button-background: theme("colors.background.foreground.1");
}
-:host([appearance="clear"]),
-:host([appearance="outline"]) {
- &:host([color="blue"]) {
+:host([appearance="outline"]),
+:host([appearance="outline-fill"]) {
+ &:host([kind="brand"]) {
--calcite-split-button-divider: theme("colors.brand");
}
- &:host([color="red"]) {
+ &:host([kind="danger"]) {
--calcite-split-button-divider: theme("colors.danger");
}
- &:host([color="neutral"]) {
+ &:host([kind="neutral"]) {
--calcite-split-button-divider: theme("colors.background.foreground.3");
}
- &:host([color="inverse"]) {
+ &:host([kind="inverse"]) {
--calcite-split-button-divider: var(--calcite-ui-inverse);
}
}
@@ -92,9 +92,8 @@
background-color: var(--calcite-split-button-divider);
}
-:host([appearance="outline"]),
-:host([appearance="clear"]),
-:host([appearance="minimal"]) {
+:host([appearance="outline-fill"]),
+:host([appearance="outline"]) {
.split-button__divider-container {
border-block: 1px solid var(--calcite-split-button-divider);
}
@@ -103,21 +102,19 @@
}
}
-:host([appearance="outline"]:hover),
-:host([appearance="clear"]:hover),
-:host([appearance="minimal"]):hover {
+:host([appearance="outline-fill"]:hover),
+:host([appearance="outline"]:hover) {
.split-button__divider-container {
background-color: var(--calcite-split-button-divider);
}
}
-:host([appearance="outline"]:focus-within),
-:host([appearance="clear"]:focus-within),
-:host([appearance="minimal"]:focus-within) {
- &:host([color="blue"]) {
+:host([appearance="outline-fill"]:focus-within),
+:host([appearance="outline"]:focus-within) {
+ &:host([kind="brand"]) {
--calcite-split-button-divider: theme("colors.brand-press");
}
- &:host([color="red"]) {
+ &:host([kind="danger"]) {
--calcite-split-button-divider: theme("colors.danger-press");
}
.split-button__divider-container {
diff --git a/src/components/split-button/split-button.stories.ts b/src/components/split-button/split-button.stories.ts
index 778d66ca2ac..14eb6e1442f 100644
--- a/src/components/split-button/split-button.stories.ts
+++ b/src/components/split-button/split-button.stories.ts
@@ -1,6 +1,6 @@
import { text, select } from "@storybook/addon-knobs";
import { iconNames, boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
+import { modesDarkDefault } from "../../../.storybook/utils";
import readme from "./readme.md";
import { html } from "../../../support/formatting";
@@ -16,8 +16,8 @@ export const simple = (): string => html`
html`
export const iconEnd_TestOnly = (): string => html`
html`
export const iconStartAndIconEnd = (): string => html`
html`
`;
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
html`
primary-text="${text("primary-text", "Primary Option")}"
dropdown-label="${text("dropdown-label", "Additional Options")}"
dropdown-icon-type="${select("dropdown-icon-type", ["chevron", "caret", "ellipsis", "overflow"], "chevron")}"
- class="calcite-theme-dark"
+ class="calcite-mode-dark"
>
Option 2
@@ -108,7 +110,7 @@ export const darkThemeRTL_TestOnly = (): string => html`
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
export const disabled_TestOnly = (): string => html`
diff --git a/src/components/split-button/split-button.tsx b/src/components/split-button/split-button.tsx
index 31475e10a87..449d424f97a 100644
--- a/src/components/split-button/split-button.tsx
+++ b/src/components/split-button/split-button.tsx
@@ -1,9 +1,9 @@
import { Component, Element, Event, EventEmitter, h, Prop, VNode, Watch } from "@stencil/core";
-import { CSS } from "./resources";
-import { ButtonAppearance, ButtonColor, DropdownIconType } from "../button/interfaces";
-import { FlipContext, Scale, Width } from "../interfaces";
import { OverlayPositioning } from "../../utils/floating-ui";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import { DropdownIconType } from "../button/interfaces";
+import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
+import { CSS } from "./resources";
/**
* @slot - A slot for adding `calcite-dropdown` content.
@@ -11,16 +11,22 @@ import { InteractiveComponent, updateHostInteraction } from "../../utils/interac
@Component({
tag: "calcite-split-button",
styleUrl: "split-button.scss",
- shadow: true
+ shadow: {
+ delegatesFocus: true
+ }
})
export class SplitButton implements InteractiveComponent {
@Element() el: HTMLCalciteSplitButtonElement;
/** Specifies the appearance style of the component. */
- @Prop({ reflect: true }) appearance: ButtonAppearance = "solid";
+ @Prop({ reflect: true }) appearance: Extract<
+ "outline" | "outline-fill" | "solid" | "transparent",
+ Appearance
+ > = "solid";
- /** Specifies the color of the component. */
- @Prop({ reflect: true }) color: ButtonColor = "blue";
+ /** Specifies the kind of the component (will apply to border and background if applicable). */
+ @Prop({ reflect: true }) kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind> =
+ "brand";
/** When `true`, interaction is prevented and the component is displayed with lower opacity. */
@Prop({ reflect: true }) disabled = false;
@@ -70,7 +76,7 @@ export class SplitButton implements InteractiveComponent {
/** Specifies an icon to display at the end of the primary button. */
@Prop({ reflect: true }) primaryIconEnd: string;
- /** When `true`, the primary button icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+ /** Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
@Prop({ reflect: true }) primaryIconFlipRtl: FlipContext;
/** Specifies an icon to display at the start of the primary button. */
@@ -123,11 +129,11 @@ export class SplitButton implements InteractiveComponent {
Promise`
+Sets focus on the component.
+
#### Returns
Type: `Promise`
diff --git a/src/components/stepper-item/stepper-item.scss b/src/components/stepper-item/stepper-item.scss
index daf704b153c..aa6d6e564d5 100644
--- a/src/components/stepper-item/stepper-item.scss
+++ b/src/components/stepper-item/stepper-item.scss
@@ -135,7 +135,7 @@
@include disabled();
:host([complete]) .container {
- // todo dark theme
+ // todo dark mode
border-color: rgba($h-bb-060, 0.5);
& .stepper-item-icon {
color: theme("backgroundColor.brand");
diff --git a/src/components/stepper-item/stepper-item.tsx b/src/components/stepper-item/stepper-item.tsx
index a1f435fec23..6c5ddc5f685 100644
--- a/src/components/stepper-item/stepper-item.tsx
+++ b/src/components/stepper-item/stepper-item.tsx
@@ -93,6 +93,9 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
/** @internal */
@Prop({ mutable: true }) icon = false;
+ /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+ @Prop({ reflect: true }) iconFlipRtl = false;
+
/** When `true`, displays the step number in the component's heading. */
/** @internal */
@Prop({ mutable: true }) numbered = false;
@@ -257,6 +260,7 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
//
//--------------------------------------------------------------------------
+ /** Sets focus on the component. */
@Method()
async setFocus(): Promise {
await componentLoaded(this);
@@ -314,7 +318,9 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
? "checkCircleF"
: "circle";
- return ` |
+| Event | Description | Type |
+| -------------------------- | ----------------------------------------------------- | ------------------- |
+| `calciteStepperItemChange` | Fires when the active `calcite-stepper-item` changes. | `CustomEvent` |
## Methods
@@ -83,9 +84,9 @@ Type: `Promise`
## Slots
-| Slot | Description |
-| ---- | ------------------------------------------ |
-| | A slot for adding `calcite-stepper-item`s. |
+| Slot | Description |
+| ---- | -------------------------------------------------- |
+| | A slot for adding `calcite-stepper-item` elements. |
---
diff --git a/src/components/stepper/stepper.e2e.ts b/src/components/stepper/stepper.e2e.ts
index b8004477546..cdce6bc9b66 100644
--- a/src/components/stepper/stepper.e2e.ts
+++ b/src/components/stepper/stepper.e2e.ts
@@ -440,6 +440,12 @@ describe("calcite-stepper", () => {
const eventSpy = await element.spyOnEvent("calciteStepperItemChange");
const firstItem = await page.find("#step-1");
+ const getSelectedItemId = async (): Promise => {
+ return await page.evaluate((): string => {
+ return document.querySelector("calcite-stepper")?.selectedItem?.id || "";
+ });
+ };
+
let expectedEvents = 0;
// non user interaction
@@ -454,7 +460,7 @@ describe("calcite-stepper", () => {
await page.$eval("#step-2", itemClicker);
expect(eventSpy).toHaveReceivedEventTimes(++expectedEvents);
- expect(eventSpy.lastEvent.detail.position).toBe(1);
+ expect(await getSelectedItemId()).toBe("step-2");
if (hasContent) {
await page.$eval("#step-1", (item: HTMLCalciteStepperItemElement) =>
@@ -463,7 +469,7 @@ describe("calcite-stepper", () => {
if (layout === "vertical") {
expect(eventSpy).toHaveReceivedEventTimes(++expectedEvents);
- expect(eventSpy.lastEvent.detail.position).toBe(0);
+ expect(await getSelectedItemId()).toBe("step-1");
} else {
// no events since horizontal layout moves content outside of item selection hit area
expect(eventSpy).toHaveReceivedEventTimes(expectedEvents);
@@ -476,7 +482,7 @@ describe("calcite-stepper", () => {
await page.$eval("#step-4", itemClicker);
expect(eventSpy).toHaveReceivedEventTimes(++expectedEvents);
- expect(eventSpy.lastEvent.detail.position).toBe(3);
+ expect(await getSelectedItemId()).toBe("step-4");
await element.callMethod("prevStep");
await page.waitForChanges();
diff --git a/src/components/stepper/stepper.stories.ts b/src/components/stepper/stepper.stories.ts
index 6911c575e16..b6bf2009194 100644
--- a/src/components/stepper/stepper.stories.ts
+++ b/src/components/stepper/stepper.stories.ts
@@ -1,6 +1,6 @@
import { select, text } from "@storybook/addon-knobs";
import { boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
+import { modesDarkDefault } from "../../../.storybook/utils";
import readme1 from "./readme.md";
import readme2 from "../stepper-item/readme.md";
import { html } from "../../../support/formatting";
@@ -27,7 +27,7 @@ export const simple = (): string => html`
description="${text("description-1", "Add members without sending invitations")}"
complete
>
- html`
complete
error
>
-
-
-
html`
description="${text("description-1", "Add members without sending invitations")}"
complete
>
- html`
complete
error
>
-
-
-
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
export const overriddenWidth_TestOnly = (): string => html`
-
+
-
+
-
+
-
+
@@ -171,22 +171,22 @@ export const arabicNumberingSystem_TestOnly = (): string => html`
-
+
-
+
-
+
-
+
diff --git a/src/components/stepper/stepper.tsx b/src/components/stepper/stepper.tsx
index 3b48d5dcbaa..81db674fe4d 100644
--- a/src/components/stepper/stepper.tsx
+++ b/src/components/stepper/stepper.tsx
@@ -10,13 +10,13 @@ import {
VNode
} from "@stencil/core";
+import { focusElementInGroup } from "../../utils/dom";
+import { NumberingSystem } from "../../utils/locale";
import { Layout, Scale } from "../interfaces";
import { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from "./interfaces";
-import { focusElement } from "../../utils/dom";
-import { NumberingSystem } from "../../utils/locale";
/**
- * @slot - A slot for adding `calcite-stepper-item`s.
+ * @slot - A slot for adding `calcite-stepper-item` elements.
*/
@Component({
tag: "calcite-stepper",
@@ -52,6 +52,13 @@ export class Stepper {
*/
@Prop({ reflect: true }) numberingSystem?: NumberingSystem;
+ /**
+ * Specifies the component's selected item.
+ *
+ * @readonly
+ */
+ @Prop({ mutable: true }) selectedItem: HTMLCalciteStepperItemElement = null;
+
/** Specifies the size of the component. */
@Prop({ reflect: true }) scale: Scale = "m";
@@ -66,7 +73,7 @@ export class Stepper {
*
*/
@Event({ cancelable: false })
- calciteStepperItemChange: EventEmitter;
+ calciteStepperItemChange: EventEmitter;
/**
* Fires when the active `calcite-stepper-item` changes.
@@ -116,30 +123,21 @@ export class Stepper {
calciteInternalStepperItemKeyEvent(event: CustomEvent): void {
const item = event.detail.item;
const itemToFocus = event.target as HTMLCalciteStepperItemElement;
- const isFirstItem = this.itemIndex(itemToFocus) === 0;
- const isLastItem = this.itemIndex(itemToFocus) === this.enabledItems.length - 1;
+
switch (item.key) {
case "ArrowDown":
case "ArrowRight":
- if (isLastItem) {
- this.focusFirstItem();
- } else {
- this.focusNextItem(itemToFocus);
- }
+ focusElementInGroup(this.enabledItems, itemToFocus, "next");
break;
case "ArrowUp":
case "ArrowLeft":
- if (isFirstItem) {
- this.focusLastItem();
- } else {
- this.focusPrevItem(itemToFocus);
- }
+ focusElementInGroup(this.enabledItems, itemToFocus, "previous");
break;
case "Home":
- this.focusFirstItem();
+ focusElementInGroup(this.enabledItems, itemToFocus, "first");
break;
case "End":
- this.focusLastItem();
+ focusElementInGroup(this.enabledItems, itemToFocus, "last");
break;
}
event.stopPropagation();
@@ -160,6 +158,7 @@ export class Stepper {
if (typeof position === "number") {
this.currentPosition = position;
+ this.selectedItem = event.target as HTMLCalciteStepperItemElement;
}
this.calciteInternalStepperItemChange.emit({
@@ -168,12 +167,8 @@ export class Stepper {
}
@Listen("calciteInternalUserRequestedStepperItemSelect")
- handleUserRequestedStepperItemSelect(event: CustomEvent): void {
- const { position } = event.detail;
-
- this.calciteStepperItemChange.emit({
- position
- });
+ handleUserRequestedStepperItemSelect(): void {
+ this.calciteStepperItemChange.emit();
}
//--------------------------------------------------------------------------
@@ -291,33 +286,6 @@ export class Stepper {
});
}
- private focusFirstItem(): void {
- const firstItem = this.enabledItems[0];
- focusElement(firstItem);
- }
-
- private focusLastItem(): void {
- const lastItem = this.enabledItems[this.enabledItems.length - 1];
- focusElement(lastItem);
- }
-
- private focusNextItem(el: HTMLCalciteStepperItemElement): void {
- const index = this.itemIndex(el);
- const nextItem = this.enabledItems[index + 1] || this.enabledItems[0];
- focusElement(nextItem);
- }
-
- private focusPrevItem(el: HTMLCalciteStepperItemElement): void {
- const index = this.itemIndex(el);
- const prevItem =
- this.enabledItems[index - 1] || this.enabledItems[this.enabledItems.length - 1];
- focusElement(prevItem);
- }
-
- private itemIndex(el: HTMLCalciteStepperItemElement): number {
- return this.enabledItems.indexOf(el);
- }
-
private sortItems(): HTMLCalciteStepperItemElement[] {
const { itemMap } = this;
diff --git a/src/components/switch/readme.md b/src/components/switch/readme.md
index 1ed0c7a7a1b..a9c14b8636b 100644
--- a/src/components/switch/readme.md
+++ b/src/components/switch/readme.md
@@ -25,9 +25,9 @@
## Events
-| Event | Description | Type |
-| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
-| `calciteSwitchChange` | Fires when the `checked` value has changed. **Note:** The event payload is deprecated, use the component's `checked` property instead. | `CustomEvent` |
+| Event | Description | Type |
+| --------------------- | ------------------------------------------- | ------------------- |
+| `calciteSwitchChange` | Fires when the `checked` value has changed. | `CustomEvent` |
## Methods
diff --git a/src/components/switch/switch.e2e.ts b/src/components/switch/switch.e2e.ts
index 2a6864020ef..924cec1cb94 100644
--- a/src/components/switch/switch.e2e.ts
+++ b/src/components/switch/switch.e2e.ts
@@ -1,5 +1,5 @@
import { newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, formAssociated, HYDRATED_ATTR, labelable, hidden } from "../../tests/commonTests";
+import { accessible, disabled, formAssociated, hidden, HYDRATED_ATTR, labelable } from "../../tests/commonTests";
describe("calcite-switch", () => {
it("renders with correct default attributes", async () => {
diff --git a/src/components/switch/switch.stories.ts b/src/components/switch/switch.stories.ts
index 06d6b78b5d7..b6b8ffd813f 100644
--- a/src/components/switch/switch.stories.ts
+++ b/src/components/switch/switch.stories.ts
@@ -1,8 +1,8 @@
import { select } from "@storybook/addon-knobs";
import { boolean, storyFilters } from "../../../.storybook/helpers";
-import readme from "./readme.md";
+import { modesDarkDefault } from "../../../.storybook/utils";
import { html } from "../../../support/formatting";
-import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
export default {
title: "Components/Controls/Switch",
@@ -22,9 +22,9 @@ export const simple = (): string => html`
>
`;
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
html`
>
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
export const disabled_TestOnly = (): string => html`;
diff --git a/src/components/tab-nav/readme.md b/src/components/tab-nav/readme.md
index 4e6161fa512..7140f882603 100644
--- a/src/components/tab-nav/readme.md
+++ b/src/components/tab-nav/readme.md
@@ -20,16 +20,17 @@ When tab-nav is the only parent, tab-title can inherit its `scale` and `position
## Properties
-| Property | Attribute | Description | Type | Default |
-| ----------- | ------------ | ----------------------------------------------------------------------------- | -------- | ----------- |
-| `storageId` | `storage-id` | Specifies the name when saving selected `calcite-tab` data to `localStorage`. | `string` | `undefined` |
-| `syncId` | `sync-id` | Specifies text to update multiple components to keep in sync if one changes. | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| --------------- | ---------------- | ----------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| `selectedTitle` | `selected-title` | Specifies the component's selected tab-title. | `HTMLCalciteTabTitleElement` | `null` |
+| `storageId` | `storage-id` | Specifies the name when saving selected `calcite-tab` data to `localStorage`. | `string` | `undefined` |
+| `syncId` | `sync-id` | Specifies text to update multiple components to keep in sync if one changes. | `string` | `undefined` |
## Events
-| Event | Description | Type |
-| ------------------ | ---------------------------------------------- | ----------------------------------- |
-| `calciteTabChange` | Emits when the selected `calcite-tab` changes. | `CustomEvent` |
+| Event | Description | Type |
+| ------------------ | ---------------------------------------------- | ------------------- |
+| `calciteTabChange` | Emits when the selected `calcite-tab` changes. | `CustomEvent` |
## Slots
diff --git a/src/components/tab-nav/tab-nav.tsx b/src/components/tab-nav/tab-nav.tsx
index 093bf72165a..ea968484428 100644
--- a/src/components/tab-nav/tab-nav.tsx
+++ b/src/components/tab-nav/tab-nav.tsx
@@ -11,12 +11,16 @@ import {
VNode,
Watch
} from "@stencil/core";
-import { TabChangeEventDetail } from "../tab/interfaces";
-import { getElementDir, filterDirectChildren } from "../../utils/dom";
-import { TabID, TabLayout } from "../tabs/interfaces";
-import { TabPosition } from "../tabs/interfaces";
-import { Scale } from "../interfaces";
+import {
+ filterDirectChildren,
+ focusElementInGroup,
+ FocusElementInGroupDestination,
+ getElementDir
+} from "../../utils/dom";
import { createObserver } from "../../utils/observers";
+import { Scale } from "../interfaces";
+import { TabChangeEventDetail } from "../tab/interfaces";
+import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
/**
* @slot - A slot for adding `calcite-tab-title`s.
@@ -51,6 +55,13 @@ export class TabNav {
*/
@Prop({ reflect: true }) syncId: string;
+ /**
+ * Specifies the component's selected tab-title.
+ *
+ * @readonly
+ */
+ @Prop({ mutable: true }) selectedTitle: HTMLCalciteTabTitleElement = null;
+
/**
* @internal
*/
@@ -81,25 +92,25 @@ export class TabNav {
*/
@Prop({ mutable: true }) indicatorWidth: number;
- @Watch("selectedTab")
- async selectedTabChanged(): Promise {
+ @Watch("selectedTabId")
+ async selectedTabIdChanged(): Promise {
if (
localStorage &&
this.storageId &&
- this.selectedTab !== undefined &&
- this.selectedTab !== null
+ this.selectedTabId !== undefined &&
+ this.selectedTabId !== null
) {
- localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTab));
+ localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTabId));
}
this.calciteInternalTabChange.emit({
- tab: this.selectedTab
+ tab: this.selectedTabId
});
- this.selectedTabEl = await this.getTabTitleById(this.selectedTab);
+ this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
}
- @Watch("selectedTabEl") selectedTabElChanged(): void {
+ @Watch("selectedTitle") selectedTitleChanged(): void {
this.updateOffsetPosition();
this.updateActiveWidth();
// reset the animation time on tab selection
@@ -125,7 +136,7 @@ export class TabNav {
const storageKey = `calcite-tab-nav-${this.storageId}`;
if (localStorage && this.storageId && localStorage.getItem(storageKey)) {
const storedTab = JSON.parse(localStorage.getItem(storageKey));
- this.selectedTab = storedTab;
+ this.selectedTabId = storedTab;
}
}
@@ -137,7 +148,7 @@ export class TabNav {
this.scale = parentTabsEl?.scale;
this.bordered = parentTabsEl?.bordered;
// fix issue with active tab-title not lining up with blue indicator
- if (this.selectedTabEl) {
+ if (this.selectedTitle) {
this.updateOffsetPosition();
}
}
@@ -147,7 +158,7 @@ export class TabNav {
if (
this.tabTitles.length &&
this.tabTitles.every((title) => !title.selected) &&
- !this.selectedTab
+ !this.selectedTabId
) {
this.tabTitles[0].getTabIdentifier().then((tab) => {
this.calciteInternalTabChange.emit({
@@ -193,41 +204,27 @@ export class TabNav {
@Listen("calciteInternalTabsFocusPrevious")
focusPreviousTabHandler(event: CustomEvent): void {
- const currentIndex = this.getIndexOfTabTitle(
- event.target as HTMLCalciteTabTitleElement,
- this.enabledTabTitles
- );
-
- this.handleTabFocus(
- event,
- this.enabledTabTitles[currentIndex - 1] ||
- this.enabledTabTitles[this.enabledTabTitles.length - 1]
- );
+ this.handleTabFocus(event, event.target as HTMLCalciteTabTitleElement, "previous");
}
@Listen("calciteInternalTabsFocusNext")
focusNextTabHandler(event: CustomEvent): void {
- const currentIndex = this.getIndexOfTabTitle(
- event.target as HTMLCalciteTabTitleElement,
- this.enabledTabTitles
- );
-
- this.handleTabFocus(event, this.enabledTabTitles[currentIndex + 1] || this.enabledTabTitles[0]);
+ this.handleTabFocus(event, event.target as HTMLCalciteTabTitleElement, "next");
}
@Listen("calciteInternalTabsFocusFirst")
focusFirstTabHandler(event: CustomEvent): void {
- this.handleTabFocus(event, this.enabledTabTitles[0]);
+ this.handleTabFocus(event, event.target as HTMLCalciteTabTitleElement, "first");
}
@Listen("calciteInternalTabsFocusLast")
focusLastTabHandler(event: CustomEvent): void {
- this.handleTabFocus(event, this.enabledTabTitles[this.enabledTabTitles.length - 1]);
+ this.handleTabFocus(event, event.target as HTMLCalciteTabTitleElement, "last");
}
@Listen("calciteInternalTabsActivate")
internalActivateTabHandler(event: CustomEvent): void {
- this.selectedTab = event.detail.tab
+ this.selectedTabId = event.detail.tab
? event.detail.tab
: this.getIndexOfTabTitle(event.target as HTMLCalciteTabTitleElement);
event.stopPropagation();
@@ -249,7 +246,7 @@ export class TabNav {
@Listen("calciteInternalTabTitleRegister")
updateTabTitles(event: CustomEvent): void {
if ((event.target as HTMLCalciteTabTitleElement).selected) {
- this.selectedTab = event.detail;
+ this.selectedTabId = event.detail;
}
}
@@ -259,9 +256,9 @@ export class TabNav {
this.syncId &&
event.target !== this.el &&
(event.target as HTMLCalciteTabNavElement).syncId === this.syncId &&
- this.selectedTab !== event.detail.tab
+ this.selectedTabId !== event.detail.tab
) {
- this.selectedTab = event.detail.tab;
+ this.selectedTabId = event.detail.tab;
}
event.stopPropagation();
}
@@ -293,9 +290,7 @@ export class TabNav {
//
//--------------------------------------------------------------------------
- @State() selectedTab: TabID;
-
- @State() selectedTabEl: HTMLCalciteTabTitleElement;
+ @State() selectedTabId: TabID;
parentTabsEl: HTMLCalciteTabsElement;
@@ -320,8 +315,12 @@ export class TabNav {
//
//--------------------------------------------------------------------------
- handleTabFocus = (event: CustomEvent, tabTitle: HTMLCalciteTabTitleElement): void => {
- tabTitle?.focus();
+ handleTabFocus = (
+ event: CustomEvent,
+ el: HTMLCalciteTabTitleElement,
+ destination: FocusElementInGroupDestination
+ ): void => {
+ focusElementInGroup(this.enabledTabTitles, el, destination);
event.stopPropagation();
event.preventDefault();
@@ -336,15 +335,15 @@ export class TabNav {
updateOffsetPosition(): void {
const dir = getElementDir(this.el);
const navWidth = this.activeIndicatorContainerEl?.offsetWidth;
- const tabLeft = this.selectedTabEl?.offsetLeft;
- const tabWidth = this.selectedTabEl?.offsetWidth;
+ const tabLeft = this.selectedTitle?.offsetLeft;
+ const tabWidth = this.selectedTitle?.offsetWidth;
const offsetRight = navWidth - (tabLeft + tabWidth);
this.indicatorOffset =
dir !== "rtl" ? tabLeft - this.tabNavEl?.scrollLeft : offsetRight + this.tabNavEl?.scrollLeft;
}
updateActiveWidth(): void {
- this.indicatorWidth = this.selectedTabEl?.offsetWidth;
+ this.indicatorWidth = this.selectedTitle?.offsetWidth;
}
getIndexOfTabTitle(el: HTMLCalciteTabTitleElement, tabTitles = this.tabTitles): number {
diff --git a/src/components/tab-title/readme.md b/src/components/tab-title/readme.md
index 35976689996..679692f844c 100644
--- a/src/components/tab-title/readme.md
+++ b/src/components/tab-title/readme.md
@@ -10,16 +10,16 @@ The tab-title is the link that switches between panes in [calcite-tabs](../tabs)
| ------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` |
-| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `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` |
| `selected` | `selected` | When `true`, the component and its respective `calcite-tab` contents are selected. Only one tab can be selected within the `calcite-tabs` parent. | `boolean` | `false` |
| `tab` | `tab` | Specifies a unique name for the component. When specified, use the same value on the `calcite-tab`. | `string` | `undefined` |
## Events
-| Event | Description | Type |
-| --------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------- |
-| `calciteTabsActivate` | Fires when a `calcite-tab` is selected. Emits the `tab` property, or the index position. | `CustomEvent` |
+| Event | Description | Type |
+| --------------------- | --------------------------------------- | ------------------- |
+| `calciteTabsActivate` | Fires when a `calcite-tab` is selected. | `CustomEvent` |
## Methods
diff --git a/src/components/tab-title/resources.ts b/src/components/tab-title/resources.ts
new file mode 100644
index 00000000000..7f77684e88e
--- /dev/null
+++ b/src/components/tab-title/resources.ts
@@ -0,0 +1,8 @@
+export const CSS = {
+ container: "container",
+ containerHasText: "container--has-text",
+ iconEnd: "icon-end",
+ iconStart: "icon-start",
+ iconPresent: "icon-present",
+ titleIcon: "calcite-tab-title--icon"
+};
diff --git a/src/components/tab-title/tab-title.e2e.ts b/src/components/tab-title/tab-title.e2e.ts
index 8642cf84f9f..0fcccd1f224 100644
--- a/src/components/tab-title/tab-title.e2e.ts
+++ b/src/components/tab-title/tab-title.e2e.ts
@@ -1,8 +1,11 @@
import { newE2EPage } from "@stencil/core/testing";
import { disabled, HYDRATED_ATTR, renders, hidden } from "../../tests/commonTests";
+import { CSS } from "./resources";
describe("calcite-tab-title", () => {
const tabTitleHtml = "Text `);
const element = await page.find("calcite-tab-title");
- const iconStart = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-start");
- const iconEnd = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-end");
+ const iconStart = await page.find(iconStartHtml);
+ const iconEnd = await page.find(iconEndHtml);
expect(element).toHaveAttribute(HYDRATED_ATTR);
expect(iconStart).not.toBeNull();
expect(iconEnd).toBeNull();
@@ -25,8 +28,8 @@ describe("calcite-tab-title", () => {
const page = await newE2EPage();
await page.setContent(`Text `);
const element = await page.find("calcite-tab-title");
- const iconStart = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-start");
- const iconEnd = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-end");
+ const iconStart = await page.find(iconStartHtml);
+ const iconEnd = await page.find(iconEndHtml);
expect(element).toHaveAttribute(HYDRATED_ATTR);
expect(iconStart).toBeNull();
expect(iconEnd).not.toBeNull();
@@ -36,8 +39,8 @@ describe("calcite-tab-title", () => {
const page = await newE2EPage();
await page.setContent(`Text `);
const element = await page.find("calcite-tab-title");
- const iconStart = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-start");
- const iconEnd = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-end");
+ const iconStart = await page.find(iconStartHtml);
+ const iconEnd = await page.find(iconEndHtml);
expect(element).toHaveAttribute(HYDRATED_ATTR);
expect(iconStart).not.toBeNull();
expect(iconEnd).not.toBeNull();
diff --git a/src/components/tab-title/tab-title.scss b/src/components/tab-title/tab-title.scss
index edc4990f1d1..9c6c6b6c62b 100644
--- a/src/components/tab-title/tab-title.scss
+++ b/src/components/tab-title/tab-title.scss
@@ -59,7 +59,7 @@
:host([scale="l"]) {
margin-inline-end: 1.5rem;
.container {
- @apply text-0h py-3;
+ @apply text-0h py-2.5;
}
}
@@ -77,8 +77,7 @@
justify-center
truncate
border-b-2
- px-0
- py-2;
+ px-0;
border-block-end-style: solid;
}
@@ -169,6 +168,9 @@
.container {
@apply px-4;
}
+ .icon-present {
+ padding-block: 11px;
+ }
}
@media (forced-colors: active) {
diff --git a/src/components/tab-title/tab-title.tsx b/src/components/tab-title/tab-title.tsx
index 2e91edbf68a..b3c76dbfb47 100644
--- a/src/components/tab-title/tab-title.tsx
+++ b/src/components/tab-title/tab-title.tsx
@@ -13,13 +13,14 @@ import {
VNode,
Watch
} from "@stencil/core";
-import { TabChangeEventDetail } from "../tab/interfaces";
-import { guid } from "../../utils/guid";
import { getElementDir, getElementProp, toAriaBoolean } from "../../utils/dom";
-import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
-import { FlipContext, Scale } from "../interfaces";
-import { createObserver } from "../../utils/observers";
+import { guid } from "../../utils/guid";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import { createObserver } from "../../utils/observers";
+import { FlipContext, Scale } from "../interfaces";
+import { TabChangeEventDetail } from "../tab/interfaces";
+import { CSS } from "./resources";
+import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
/**
* @slot - A slot for adding text.
@@ -64,7 +65,7 @@ export class TabTitle implements InteractiveComponent {
/** Specifies an icon to display at the end of the component. */
@Prop({ reflect: true }) iconEnd: string;
- /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+ /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
@Prop({ reflect: true }) iconFlipRtl: FlipContext;
/** Specifies an icon to display at the start of the component. */
@@ -148,19 +149,19 @@ export class TabTitle implements InteractiveComponent {
const iconStartEl = (
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
export const contentStartRTL_TestOnly = (): string => html`
{icon && (
`;
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
-
-
-
- Yes
- No
-
+
+ Yes
+ No
+
@@ -821,10 +628,10 @@
-
- Yes
- No
-
+
+ Yes
+ No
+
@@ -844,10 +651,10 @@
-
- Yes
- No
-
+
+ Yes
+ No
+
@@ -872,10 +679,10 @@
+ {this.renderAlerts()}
+ {this.renderModals()}
+
+ );
+ }
+
render(): VNode {
return (
Step 1 Content Goes Here
Step 1 Content Goes Here
Step 2 Content Goes Here
Step 2 Content Goes Here
Step 3 Content Goes Here
Step 3 Content Goes Here
Step 4 Content Goes Here
Step 4 Content Goes Here
No Content
@@ -88,10 +88,10 @@ export const simple = (): string => html` `; -export const darkThemeRTL_TestOnly = (): string => html` +export const darkModeRTL_TestOnly = (): string => html`Step 1 Content Goes Here
Step 1 Content Goes Here
Step 2 Content Goes Here
Step 2 Content Goes Here
Step 3 Content Goes Here
Step 3 Content Goes Here
Step 4 Content Goes Here
Step 4 Content Goes Here
Step 1 Content Goes Here
Step 2 Content Goes Here
Step 3 Content Goes Here
Step 4 Content Goes Here
الخطوة الأولى للمحتوى هنا
الخطوة الثانية للمحتوى هنا
الخطوة الثالثة المحتوى يذهب هنا
الخطوة الرابعة المحتوى يذهب هنا
this.resizeObserver?.observe(el)}
>
@@ -271,7 +273,7 @@ export class TabTitle implements InteractiveComponent {
//--------------------------------------------------------------------------
/**
- * Fires when a `calcite-tab` is selected. Emits the `tab` property, or the index position.
+ * Fires when a `calcite-tab` is selected.
*/
@Event({ cancelable: false }) calciteTabsActivate: EventEmitter;
diff --git a/src/components/tab/readme.md b/src/components/tab/readme.md
index 7c3cbbc02bb..76b2afdc80a 100644
--- a/src/components/tab/readme.md
+++ b/src/components/tab/readme.md
@@ -31,9 +31,9 @@ Type: `Promise`
## Slots
-| Slot | Description |
-| ---- | ------------------------------------------- |
-| | A slot for adding content to the component. |
+| Slot | Description |
+| ---- | --------------------------------- |
+| | A slot for adding custom content. |
## Dependencies
diff --git a/src/components/tab/tab.scss b/src/components/tab/tab.scss
index 4087e80de22..fd3b3980f51 100644
--- a/src/components/tab/tab.scss
+++ b/src/components/tab/tab.scss
@@ -27,5 +27,6 @@ section,
}
:host([scale="l"]) {
- @apply text-0h py-3;
+ @apply text-0h;
+ padding-block: 13px;
}
diff --git a/src/components/tab/tab.tsx b/src/components/tab/tab.tsx
index 74bd4c41cda..9dc51a8966b 100644
--- a/src/components/tab/tab.tsx
+++ b/src/components/tab/tab.tsx
@@ -1,23 +1,23 @@
import {
Component,
- Prop,
Element,
- Listen,
- Method,
Event,
EventEmitter,
h,
- State,
Host,
+ Listen,
+ Method,
+ Prop,
+ State,
VNode
} from "@stencil/core";
-import { TabChangeEventDetail } from "./interfaces";
-import { guid } from "../../utils/guid";
import { nodeListToArray } from "../../utils/dom";
+import { guid } from "../../utils/guid";
import { Scale } from "../interfaces";
+import { TabChangeEventDetail } from "./interfaces";
/**
- * @slot - A slot for adding content to the component.
+ * @slot - A slot for adding custom content.
*/
@Component({
tag: "calcite-tab",
diff --git a/src/components/tabs/readme.md b/src/components/tabs/readme.md
index 1be91e2728a..d3a1ae6b0fd 100644
--- a/src/components/tabs/readme.md
+++ b/src/components/tabs/readme.md
@@ -48,10 +48,10 @@
## Slots
-| Slot | Description |
-| ----------- | -------------------------------------- |
-| | A slot for adding `calcite-tab`s. |
-| `"tab-nav"` | A slot for adding a `calcite-tab-nav`. |
+| Slot | Description |
+| --------------- | -------------------------------------- |
+| | A slot for adding `calcite-tab`s. |
+| `"title-group"` | A slot for adding a `calcite-tab-nav`. |
## Dependencies
diff --git a/src/components/tabs/tabs.e2e.ts b/src/components/tabs/tabs.e2e.ts
index 761047c5858..ab69589b364 100644
--- a/src/components/tabs/tabs.e2e.ts
+++ b/src/components/tabs/tabs.e2e.ts
@@ -1,6 +1,6 @@
import { newE2EPage } from "@stencil/core/testing";
-import { accessible, renders, defaults, hidden } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
+import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
describe("calcite-tabs", () => {
const tabsContent = `
diff --git a/src/components/tabs/tabs.stories.ts b/src/components/tabs/tabs.stories.ts
index 6e24145cc38..6c94558c677 100644
--- a/src/components/tabs/tabs.stories.ts
+++ b/src/components/tabs/tabs.stories.ts
@@ -1,12 +1,12 @@
-import { select, optionsKnob } from "@storybook/addon-knobs";
+import { optionsKnob, select } from "@storybook/addon-knobs";
import { iconNames, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
import { placeholderImage } from "../../../.storybook/placeholderImage";
-import readme1 from "./readme.md";
-import readme2 from "../tab/readme.md";
+import { modesDarkDefault } from "../../../.storybook/utils";
+import { html } from "../../../support/formatting";
import readme3 from "../tab-nav/readme.md";
import readme4 from "../tab-title/readme.md";
-import { html } from "../../../support/formatting";
+import readme2 from "../tab/readme.md";
+import readme1 from "./readme.md";
export default {
title: "Components/Tabs",
@@ -16,10 +16,10 @@ export default {
...storyFilters()
};
-export const simpleDarkThemeRTL_TestOnly = (): string => html`
+export const simpleDarkModeRTL_TestOnly = (): string => html`
html`
`;
-simpleDarkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+simpleDarkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
export const bordered = (): string => html`
html`
`;
-export const borderedDarkThemeRTL_TestOnly = (): string => html`
+export const borderedDarkModeRTL_TestOnly = (): string => html`
Tab 1 Title
@@ -79,7 +79,7 @@ export const borderedDarkThemeRTL_TestOnly = (): string => html`
Tab 4 Content
`;
-borderedDarkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+borderedDarkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
const selectedIcon = iconNames[0];
@@ -150,39 +150,19 @@ export const justTabNav = (): string => html`
`;
-export const disabledTabs_TestOnly = (): string => {
- const disabledLabel = "Disabled Tabs";
- const disabledValuesObj = {
- Tab1: "tab1",
- Tab2: "tab2",
- Tab3: "tab3"
- };
- const defaultValue = "tab2";
- const optionsKnobSelections = optionsKnob(
- disabledLabel,
- disabledValuesObj,
- defaultValue,
- { display: "multi-select" },
- "DISABLED-TABS"
- );
- const tab1disabled = optionsKnobSelections.includes(disabledValuesObj.Tab1);
- const tab2disabled = optionsKnobSelections.includes(disabledValuesObj.Tab2);
- const tab3disabled = optionsKnobSelections.includes(disabledValuesObj.Tab3);
-
- return `
-
-
- Tab 1 Title
- Tab 2 Title
- Tab 3 Title
-
+export const disabledTabsAndMediumIconsForLargeTabsTitle_TestOnly = (): string => html`
+
+
+ Tab 1 Title
+ Tab 2 Title
+ Tab 3 Title
+
-
- `;
-};
+
+`;
export const TabChilrenWithPercentageHeights = (): string => html`
diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
index 1e2d40a372b..379cdb02bf1 100644
--- a/src/components/tabs/tabs.tsx
+++ b/src/components/tabs/tabs.tsx
@@ -1,11 +1,11 @@
-import { Component, Prop, h, Element, Listen, State, VNode, Fragment } from "@stencil/core";
-import { TabLayout, TabPosition } from "./interfaces";
+import { Component, Element, Fragment, h, Listen, Prop, State, VNode } from "@stencil/core";
import { Scale } from "../interfaces";
+import { TabLayout, TabPosition } from "./interfaces";
import { SLOTS } from "./resources";
/**
* @slot - A slot for adding `calcite-tab`s.
- * @slot tab-nav - A slot for adding a `calcite-tab-nav`.
+ * @slot title-group - A slot for adding a `calcite-tab-nav`.
*/
@Component({
tag: "calcite-tabs",
diff --git a/src/components/textarea/assets/textarea/t9n/messages_ar.json b/src/components/textarea/assets/textarea/t9n/messages_ar.json
new file mode 100644
index 00000000000..195a0281852
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_ar.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "غير صالح",
+ "overLimit": "تم تجاوز حد الأحرف"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_bg.json b/src/components/textarea/assets/textarea/t9n/messages_bg.json
new file mode 100644
index 00000000000..f1aa728cbd9
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_bg.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Невалидно",
+ "overLimit": "Превишен лимит за символи"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_bs.json b/src/components/textarea/assets/textarea/t9n/messages_bs.json
new file mode 100644
index 00000000000..542157eb797
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_bs.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Nevažeće",
+ "overLimit": "Premašeno je ograničenje znakova"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_ca.json b/src/components/textarea/assets/textarea/t9n/messages_ca.json
new file mode 100644
index 00000000000..6085fad70ec
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_ca.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "No vàlid",
+ "overLimit": "S'ha excedit el límit de caràcters"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_cs.json b/src/components/textarea/assets/textarea/t9n/messages_cs.json
new file mode 100644
index 00000000000..3c1204324b9
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_cs.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Neplatný",
+ "overLimit": "Překročen limit počtu znaků"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_da.json b/src/components/textarea/assets/textarea/t9n/messages_da.json
new file mode 100644
index 00000000000..a7169801f09
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_da.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Ugyldig",
+ "overLimit": "Grænsen for antallet af tegn er overskredet"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_de.json b/src/components/textarea/assets/textarea/t9n/messages_de.json
new file mode 100644
index 00000000000..bf270a3715c
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_de.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Ungültig",
+ "overLimit": "Zeichenlimit wurde überschritten"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_el.json b/src/components/textarea/assets/textarea/t9n/messages_el.json
new file mode 100644
index 00000000000..dd49d0add47
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_el.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Μη έγκυρο",
+ "overLimit": "Υπέρβαση ορίου χαρακτήρων"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_es.json b/src/components/textarea/assets/textarea/t9n/messages_es.json
new file mode 100644
index 00000000000..ea99f7a8fc6
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_es.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "No válido",
+ "overLimit": "Se superó el límite de caracteres"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_et.json b/src/components/textarea/assets/textarea/t9n/messages_et.json
new file mode 100644
index 00000000000..8738eb9b8e1
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_et.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Sobimatu",
+ "overLimit": "Tähemärkide piirang on ületatud"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_fi.json b/src/components/textarea/assets/textarea/t9n/messages_fi.json
new file mode 100644
index 00000000000..09e5761a352
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_fi.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Virheellinen",
+ "overLimit": "Merkkien määrä ylitetty"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_fr.json b/src/components/textarea/assets/textarea/t9n/messages_fr.json
new file mode 100644
index 00000000000..68f896404ac
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_fr.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Non valide",
+ "overLimit": "Limite de caractères dépassée"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_he.json b/src/components/textarea/assets/textarea/t9n/messages_he.json
new file mode 100644
index 00000000000..644d1510e37
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_he.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "לא תקין",
+ "overLimit": "חריגה ממגבלת מספר התווים"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_hr.json b/src/components/textarea/assets/textarea/t9n/messages_hr.json
new file mode 100644
index 00000000000..542157eb797
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_hr.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Nevažeće",
+ "overLimit": "Premašeno je ograničenje znakova"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_hu.json b/src/components/textarea/assets/textarea/t9n/messages_hu.json
new file mode 100644
index 00000000000..01ec5735896
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_hu.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Érvénytelen",
+ "overLimit": "Karakterkorlát túllépve"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_id.json b/src/components/textarea/assets/textarea/t9n/messages_id.json
new file mode 100644
index 00000000000..9d335b15d48
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_id.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Tidak valid",
+ "overLimit": "Batas karakter terlampaui"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_it.json b/src/components/textarea/assets/textarea/t9n/messages_it.json
new file mode 100644
index 00000000000..c9b15e2427b
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_it.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Non valido",
+ "overLimit": "Limite di caratteri superato"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_ja.json b/src/components/textarea/assets/textarea/t9n/messages_ja.json
new file mode 100644
index 00000000000..fe54a9dfc15
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_ja.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "無効",
+ "overLimit": "文字制限を超えています"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_ko.json b/src/components/textarea/assets/textarea/t9n/messages_ko.json
new file mode 100644
index 00000000000..fbdf1b59301
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_ko.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "잘못됨",
+ "overLimit": "문자 제한을 초과함"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_lt.json b/src/components/textarea/assets/textarea/t9n/messages_lt.json
new file mode 100644
index 00000000000..33ee80318c2
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_lt.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Neteisingas",
+ "overLimit": "Viršytas simbolių limitas"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_lv.json b/src/components/textarea/assets/textarea/t9n/messages_lv.json
new file mode 100644
index 00000000000..4992504b0fe
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_lv.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Nederīgs",
+ "overLimit": "Pārsniegts rakstzīmju skaita ierobežojums"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_nl.json b/src/components/textarea/assets/textarea/t9n/messages_nl.json
new file mode 100644
index 00000000000..78952e2c2aa
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_nl.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Ongeldig",
+ "overLimit": "Tekenlimiet overschreden"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_no.json b/src/components/textarea/assets/textarea/t9n/messages_no.json
new file mode 100644
index 00000000000..b9729ef0481
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_no.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Ugyldig",
+ "overLimit": "Maksimumsgrensen for antall tegn er overskredet"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_pl.json b/src/components/textarea/assets/textarea/t9n/messages_pl.json
new file mode 100644
index 00000000000..d1656b4f084
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_pl.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Niepoprawny",
+ "overLimit": "Przekroczono limit liczby znaków"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_pt-BR.json b/src/components/textarea/assets/textarea/t9n/messages_pt-BR.json
new file mode 100644
index 00000000000..2a9772b88ae
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_pt-BR.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Inválido",
+ "overLimit": "Limite de caracteres excedido"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_pt-PT.json b/src/components/textarea/assets/textarea/t9n/messages_pt-PT.json
new file mode 100644
index 00000000000..f93e3aba8c0
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_pt-PT.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Inválido",
+ "overLimit": "Limite de carateres ultrapassado"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_ro.json b/src/components/textarea/assets/textarea/t9n/messages_ro.json
new file mode 100644
index 00000000000..d890ff9edc5
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_ro.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Nevalid",
+ "overLimit": "Limită de caractere depășită"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_ru.json b/src/components/textarea/assets/textarea/t9n/messages_ru.json
new file mode 100644
index 00000000000..48eae5413b6
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_ru.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Недопустимый",
+ "overLimit": "Превышен лимит символов"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_sk.json b/src/components/textarea/assets/textarea/t9n/messages_sk.json
new file mode 100644
index 00000000000..d97de5ef516
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_sk.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Neplatné",
+ "overLimit": "Bol prekročený limit počtu znakov"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_sl.json b/src/components/textarea/assets/textarea/t9n/messages_sl.json
new file mode 100644
index 00000000000..e7b9f5dfa3e
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_sl.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Neveljavno",
+ "overLimit": "Presežena je omejitev znakov"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_sr.json b/src/components/textarea/assets/textarea/t9n/messages_sr.json
new file mode 100644
index 00000000000..bedbf2b8f01
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_sr.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Nevažeće",
+ "overLimit": "Prekoračeno ograničenje znakova"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_sv.json b/src/components/textarea/assets/textarea/t9n/messages_sv.json
new file mode 100644
index 00000000000..c89a85f1825
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_sv.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Ogiltig",
+ "overLimit": "Teckengränsen överskriden"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_th.json b/src/components/textarea/assets/textarea/t9n/messages_th.json
new file mode 100644
index 00000000000..c7115a45598
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_th.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "ไม่ถูกต้อง",
+ "overLimit": "เกินขีดจำกัดอักขระ"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_tr.json b/src/components/textarea/assets/textarea/t9n/messages_tr.json
new file mode 100644
index 00000000000..e466f8991d3
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_tr.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Geçersiz",
+ "overLimit": "Karakter sınırı aşıldı"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_uk.json b/src/components/textarea/assets/textarea/t9n/messages_uk.json
new file mode 100644
index 00000000000..76d8e05b8e5
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_uk.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Неприпустимий",
+ "overLimit": "Перевищено обмеження кількості символів"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_vi.json b/src/components/textarea/assets/textarea/t9n/messages_vi.json
new file mode 100644
index 00000000000..8902eff3fa9
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_vi.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "Không hợp lệ",
+ "overLimit": "Đã vượt quá giới hạn ký tự"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_zh-CN.json b/src/components/textarea/assets/textarea/t9n/messages_zh-CN.json
new file mode 100644
index 00000000000..16e90623a43
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_zh-CN.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "无效",
+ "overLimit": "超出字符限制"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_zh-HK.json b/src/components/textarea/assets/textarea/t9n/messages_zh-HK.json
new file mode 100644
index 00000000000..acd041ed7bb
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_zh-HK.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "無效",
+ "overLimit": "已超過字元限制"
+}
diff --git a/src/components/textarea/assets/textarea/t9n/messages_zh-TW.json b/src/components/textarea/assets/textarea/t9n/messages_zh-TW.json
new file mode 100644
index 00000000000..acd041ed7bb
--- /dev/null
+++ b/src/components/textarea/assets/textarea/t9n/messages_zh-TW.json
@@ -0,0 +1,4 @@
+{
+ "invalid": "無效",
+ "overLimit": "已超過字元限制"
+}
diff --git a/src/components/tile-select-group/readme.md b/src/components/tile-select-group/readme.md
index e23d96ca5bf..5f3e4def618 100644
--- a/src/components/tile-select-group/readme.md
+++ b/src/components/tile-select-group/readme.md
@@ -11,9 +11,9 @@
## Slots
-| Slot | Description |
-| ---- | ----------------------------------------- |
-| | A slot for adding `calcite-tile-select`s. |
+| Slot | Description |
+| ---- | ------------------------------------------------- |
+| | A slot for adding `calcite-tile-select` elements. |
---
diff --git a/src/components/tile-select-group/tile-select-group.stories.ts b/src/components/tile-select-group/tile-select-group.stories.ts
index e0db832632d..e6b7f41454b 100644
--- a/src/components/tile-select-group/tile-select-group.stories.ts
+++ b/src/components/tile-select-group/tile-select-group.stories.ts
@@ -1,5 +1,5 @@
import { select, boolean } from "@storybook/addon-knobs";
-import { themesDarkDefault } from "../../../.storybook/utils";
+import { modesDarkDefault } from "../../../.storybook/utils";
import { html } from "../../../support/formatting";
import readme from "./readme.md";
import { storyFilters } from "../../../.storybook/helpers";
@@ -82,13 +82,13 @@ export const disabled_TestOnly = (): string => html`
`;
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
${tileSelectsHTML()}
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
diff --git a/src/components/tile-select-group/tile-select-group.tsx b/src/components/tile-select-group/tile-select-group.tsx
index 664b7271ae0..23d21620f40 100644
--- a/src/components/tile-select-group/tile-select-group.tsx
+++ b/src/components/tile-select-group/tile-select-group.tsx
@@ -1,9 +1,9 @@
-import { Component, h, VNode, Prop, Element } from "@stencil/core";
-import { TileSelectGroupLayout } from "./interfaces";
+import { Component, Element, h, Prop, VNode } from "@stencil/core";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import { TileSelectGroupLayout } from "./interfaces";
/**
- * @slot - A slot for adding `calcite-tile-select`s.
+ * @slot - A slot for adding `calcite-tile-select` elements.
*/
@Component({
tag: "calcite-tile-select-group",
diff --git a/src/components/tile-select/readme.md b/src/components/tile-select/readme.md
index 343c537fd6a..f7e736b902a 100644
--- a/src/components/tile-select/readme.md
+++ b/src/components/tile-select/readme.md
@@ -29,6 +29,7 @@
| `heading` | `heading` | The component header text, which displays between the icon and description. | `string` | `undefined` |
| `hidden` | `hidden` | When `true`, the component is not displayed and is not focusable or checkable. | `boolean` | `false` |
| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` |
+| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` |
| `inputAlignment` | `input-alignment` | When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. | `"end" \| "start"` | `"start"` |
| `inputEnabled` | `input-enabled` | When `true`, displays an interactive input based on the `type` property. | `boolean` | `false` |
| `name` | `name` | Specifies the name of the component on form submission. | `any` | `undefined` |
diff --git a/src/components/tile-select/tile-select.stories.ts b/src/components/tile-select/tile-select.stories.ts
index b5d6b918cef..4550a824579 100644
--- a/src/components/tile-select/tile-select.stories.ts
+++ b/src/components/tile-select/tile-select.stories.ts
@@ -121,9 +121,9 @@ export const checkbox_TestOnly = (): string =>
export const radio_TestOnly = (): string =>
html`
type="checkbox"
> `;
-export const radioDarkThemeRTL_TestOnly = (): string =>
+export const radiodarkModeRTL_TestOnly = (): string =>
html`
diff --git a/src/components/tile/readme.md b/src/components/tile/readme.md
index c195461c09f..379103189b2 100644
--- a/src/components/tile/readme.md
+++ b/src/components/tile/readme.md
@@ -17,16 +17,17 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------- | --------- | ----------- |
-| `active` | `active` | When `true`, the component is active. | `boolean` | `false` |
-| `description` | `description` | A description for the component, which displays below the heading. | `string` | `undefined` |
-| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
-| `embed` | `embed` | The component's embed mode. When `true`, renders without a border and padding for use by other components. | `boolean` | `false` |
-| `heading` | `heading` | The component header text, which displays between the icon and description. | `string` | `undefined` |
-| `hidden` | `hidden` | When `true`, the component is not displayed and is not focusable. | `boolean` | `false` |
-| `href` | `href` | When embed is `"false"`, the URL for the component. | `string` | `undefined` |
-| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------- | --------------- | ---------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `active` | `active` | When `true`, the component is active. | `boolean` | `false` |
+| `description` | `description` | A description for the component, which displays below the heading. | `string` | `undefined` |
+| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
+| `embed` | `embed` | The component's embed mode. When `true`, renders without a border and padding for use by other components. | `boolean` | `false` |
+| `heading` | `heading` | The component header text, which displays between the icon and description. | `string` | `undefined` |
+| `hidden` | `hidden` | When `true`, the component is not displayed and is not focusable. | `boolean` | `false` |
+| `href` | `href` | When embed is `"false"`, the URL for the component. | `string` | `undefined` |
+| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` |
+| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` |
## Slots
diff --git a/src/components/tile/tile.stories.ts b/src/components/tile/tile.stories.ts
index 68ba9c89fb1..c4884d58d92 100644
--- a/src/components/tile/tile.stories.ts
+++ b/src/components/tile/tile.stories.ts
@@ -1,6 +1,6 @@
import { select, text } from "@storybook/addon-knobs";
import { iconNames, boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
+import { modesDarkDefault } from "../../../.storybook/utils";
import readme from "./readme.md";
import { html } from "../../../support/formatting";
@@ -41,7 +41,7 @@ export const largeTile = (): string => html`
`;
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
Tab 4 Content
Tab 1 Content
Tab 2 Content
Tab 3 Content
Tab 1 Content
Tab 2 Content
Tab 3 Content
-
)}
diff --git a/src/components/time-picker/readme.md b/src/components/time-picker/readme.md
index a21c4c89d20..1d299d9833f 100644
--- a/src/components/time-picker/readme.md
+++ b/src/components/time-picker/readme.md
@@ -4,31 +4,19 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------ | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `intlHour` | `intl-hour` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's hour input. | `string` | `undefined` | -| `intlHourDown` | `intl-hour-down` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's hour down button. | `string` | `undefined` | -| `intlHourUp` | `intl-hour-up` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's hour up button. | `string` | `undefined` | -| `intlMeridiem` | `intl-meridiem` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's meridiem (AM/PM) input. | `string` | `undefined` | -| `intlMeridiemDown` | `intl-meridiem-down` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's meridiem (AM/PM) down button. | `string` | `undefined` | -| `intlMeridiemUp` | `intl-meridiem-up` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's meridiem (AM/PM) up button. | `string` | `undefined` | -| `intlMinute` | `intl-minute` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's minute input. | `string` | `undefined` | -| `intlMinuteDown` | `intl-minute-down` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's minute down button. | `string` | `undefined` | -| `intlMinuteUp` | `intl-minute-up` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's minute up button. | `string` | `undefined` | -| `intlSecond` | `intl-second` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's second input. | `string` | `undefined` | -| `intlSecondDown` | `intl-second-down` | Accessible name for the component's second down button. | `string` | `undefined` | -| `intlSecondUp` | `intl-second-up` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's second up button. | `string` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | -| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `step` | `step` | Specifies the granularity the `value` must adhere to (in seconds). | `number` | `60` | -| `value` | `value` | The component's value in UTC (always 24-hour format). | `string` | `null` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `TimePickerMessages` | `undefined` | +| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `step` | `step` | Specifies the granularity the `value` must adhere to (in seconds). | `number` | `60` | +| `value` | `value` | The component's value in UTC (always 24-hour format). | `string` | `null` | ## Methods -### `setFocus(target: TimePart) => Promise`
+### `setFocus() => Promise`
-Sets focus on the component.
+Sets focus on the component's first focusable element.
#### Returns
diff --git a/src/components/time-picker/time-picker.e2e.ts b/src/components/time-picker/time-picker.e2e.ts
index e25f923e0f7..aad3cee0a62 100644
--- a/src/components/time-picker/time-picker.e2e.ts
+++ b/src/components/time-picker/time-picker.e2e.ts
@@ -1,5 +1,5 @@
import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, renders, hidden, t9n } from "../../tests/commonTests";
+import { accessible, defaults, focusable, hidden, renders, t9n } from "../../tests/commonTests";
import { formatTimePart } from "../../utils/time";
import { CSS } from "./resources";
@@ -50,9 +50,14 @@ describe("calcite-time-picker", () => {
{ propertyName: "step", defaultValue: 60 }
]));
- it("should focus the first input when setFocus is called", async () =>
+ it("should focus the first focusable element when setFocus is called (ltr)", async () =>
focusable(`calcite-time-picker`, {
- shadowFocusTargetSelector: `.${CSS.hour}`
+ shadowFocusTargetSelector: `.${CSS.buttonHourUp}`
+ }));
+
+ it("should focus the first focusable element when setFocus is called (rtl)", async () =>
+ focusable(`;
+ @Prop({ mutable: true }) messageOverrides: Partial;
@Watch("messageOverrides")
onMessagesChange(): void {
@@ -174,7 +176,7 @@ export class TimePicker
@State() showSecond: boolean = this.step < 60;
- @State() defaultMessages: Messages;
+ @State() defaultMessages: TimePickerMessages;
//--------------------------------------------------------------------------
//
@@ -224,22 +226,22 @@ export class TimePicker
switch (this.activeEl) {
case this.hourEl:
if (key === "ArrowRight") {
- this.setFocus("minute");
+ this.focusPart("minute");
event.preventDefault();
}
break;
case this.minuteEl:
switch (key) {
case "ArrowLeft":
- this.setFocus("hour");
+ this.focusPart("hour");
event.preventDefault();
break;
case "ArrowRight":
if (this.step !== 60) {
- this.setFocus("second");
+ this.focusPart("second");
event.preventDefault();
} else if (this.hourCycle === "12") {
- this.setFocus("meridiem");
+ this.focusPart("meridiem");
event.preventDefault();
}
break;
@@ -248,12 +250,12 @@ export class TimePicker
case this.secondEl:
switch (key) {
case "ArrowLeft":
- this.setFocus("minute");
+ this.focusPart("minute");
event.preventDefault();
break;
case "ArrowRight":
if (this.hourCycle === "12") {
- this.setFocus("meridiem");
+ this.focusPart("meridiem");
event.preventDefault();
}
break;
@@ -263,10 +265,10 @@ export class TimePicker
switch (key) {
case "ArrowLeft":
if (this.step !== 60) {
- this.setFocus("second");
+ this.focusPart("second");
event.preventDefault();
} else {
- this.setFocus("minute");
+ this.focusPart("minute");
event.preventDefault();
}
break;
@@ -282,15 +284,13 @@ export class TimePicker
//--------------------------------------------------------------------------
/**
- * Sets focus on the component.
- *
- * @param target
+ * Sets focus on the component's first focusable element.
*/
@Method()
- async setFocus(target: TimePart): Promise {
+ async setFocus(): Promise {
await componentLoaded(this);
- this[`${target || "hour"}El`]?.focus();
+ this.el?.focus();
}
// --------------------------------------------------------------------------
@@ -299,6 +299,12 @@ export class TimePicker
//
// --------------------------------------------------------------------------
+ private async focusPart(target: TimePart): Promise {
+ await componentLoaded(this);
+
+ this[`${target || "hour"}El`]?.focus();
+ }
+
private buttonActivated(event: KeyboardEvent): boolean {
const { key } = event;
diff --git a/src/components/tip-group/tip-group.tsx b/src/components/tip-group/tip-group.tsx
index 6f3dc656b1a..4b390aeee7e 100644
--- a/src/components/tip-group/tip-group.tsx
+++ b/src/components/tip-group/tip-group.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, h, VNode } from "@stencil/core";
+import { Component, h, Prop, VNode } from "@stencil/core";
/**
* @slot - A slot for adding `calcite-tip`s.
diff --git a/src/components/tip-manager/readme.md b/src/components/tip-manager/readme.md
index 5c3d84d9310..25b8a14a799 100644
--- a/src/components/tip-manager/readme.md
+++ b/src/components/tip-manager/readme.md
@@ -56,15 +56,11 @@ Renders a tip manager using a group of tips as well as a single tip.
## Properties
-| Property | Attribute | Description | Type | Default |
-| --------------------- | ----------------------- | ------------------------------------------------------------ | ---------------------------- | ----------- |
-| `closed` | `closed` | When `true`, does not display or position the component. | `boolean` | `false` |
-| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
-| `intlClose` | `intl-close` | Accessible name for the component's close button. | `string` | `undefined` |
-| `intlDefaultTitle` | `intl-default-title` | Accessible name for the `calcite-tip-group` title. | `string` | `undefined` |
-| `intlNext` | `intl-next` | Accessible name for navigating to the next tip. | `string` | `undefined` |
-| `intlPaginationLabel` | `intl-pagination-label` | Text that accompanies the component's pagination. | `string` | `undefined` |
-| `intlPrevious` | `intl-previous` | Accessible name for navigating to the previous tip. | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------------ | ------------------- | ----------------------------------------------------------------------- | ---------------------------- | ----------- |
+| `closed` | `closed` | When `true`, does not display or position the component. | `boolean` | `false` |
+| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `TipManagerMessages` | `undefined` |
## Events
diff --git a/src/components/tip-manager/tip-manager.e2e.ts b/src/components/tip-manager/tip-manager.e2e.ts
index f08bd876df2..71c47f99c49 100644
--- a/src/components/tip-manager/tip-manager.e2e.ts
+++ b/src/components/tip-manager/tip-manager.e2e.ts
@@ -1,6 +1,6 @@
import { newE2EPage } from "@stencil/core/testing";
+import { accessible, defaults, hidden, renders, t9n } from "../../tests/commonTests";
import { CSS, TEXT } from "./resources";
-import { accessible, defaults, renders, hidden } from "../../tests/commonTests";
describe("calcite-tip-manager", () => {
it("renders", async () => renders("calcite-tip-manager", { display: "block" }));
@@ -239,4 +239,6 @@ describe("calcite-tip-manager", () => {
expect(heading.tagName).toEqual("H2");
});
+
+ it("supports translations", () => t9n("calcite-tip-manager"));
});
diff --git a/src/components/tip-manager/tip-manager.stories.ts b/src/components/tip-manager/tip-manager.stories.ts
index 2908cc470ec..6d378c28d2f 100644
--- a/src/components/tip-manager/tip-manager.stories.ts
+++ b/src/components/tip-manager/tip-manager.stories.ts
@@ -1,16 +1,15 @@
-import { boolean, text } from "@storybook/addon-knobs";
+import { boolean } from "@storybook/addon-knobs";
+import { storyFilters } from "../../../.storybook/helpers";
+import { placeholderImage } from "../../../.storybook/placeholderImage";
import {
Attribute,
- filterComponentAttributes,
Attributes,
createComponentHTML as create,
- themesDarkDefault
+ filterComponentAttributes,
+ modesDarkDefault
} from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { TEXT } from "./resources";
import { html } from "../../../support/formatting";
-import { placeholderImage } from "../../../.storybook/placeholderImage";
-import { storyFilters } from "../../../.storybook/helpers";
+import readme from "./readme.md";
export default {
title: "Components/Tips/Tip Manager",
@@ -30,47 +29,6 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
delete this.build;
return this;
}
- },
-
- {
- name: "intl-close",
- commit(): Attribute {
- this.value = text("intlClose", TEXT.close);
- delete this.build;
- return this;
- }
- },
- {
- name: "intl-default-title",
- commit(): Attribute {
- this.value = text("intlDefaultTitle", TEXT.defaultGroupTitle);
- delete this.build;
- return this;
- }
- },
- {
- name: "intl-pagination-label",
- commit(): Attribute {
- this.value = text("intlPaginationLabel", TEXT.defaultPaginationLabel);
- delete this.build;
- return this;
- }
- },
- {
- name: "intl-next",
- commit(): Attribute {
- this.value = text("intlNext", TEXT.next);
- delete this.build;
- return this;
- }
- },
- {
- name: "intl-previous",
- commit(): Attribute {
- this.value = text("intlPrevious", TEXT.previous);
- delete this.build;
- return this;
- }
}
],
exceptions
@@ -123,13 +81,43 @@ const tipContent = html`
export const simple = (): string => create("calcite-tip-manager", createAttributes(), tipContent);
-export const darkThemeRTL_TestOnly = (): string =>
+export const darkModeRTL_TestOnly = (): string =>
create(
"calcite-tip-manager",
createAttributes({ exceptions: ["dir", "class"] }).concat([
{ name: "dir", value: "rtl" },
- { name: "class", value: "calcite-theme-dark" }
+ { name: "class", value: "calcite-mode-dark" }
]),
tipContent
);
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
+
+export const hebrewLocale_TestOnly = (): string => html`
+ `;
+
+export const norwegianLocale_TestOnly = (): string =>
+ html`
+
+
+
+ `;
+
+export const bosnianLocale_TestOnly = (): string => html`
+ `;
diff --git a/src/components/tip-manager/tip-manager.tsx b/src/components/tip-manager/tip-manager.tsx
index 9bfae5f07a2..4f7201821fd 100644
--- a/src/components/tip-manager/tip-manager.tsx
+++ b/src/components/tip-manager/tip-manager.tsx
@@ -3,17 +3,25 @@ import {
Element,
Event,
EventEmitter,
+ h,
Method,
Prop,
State,
- Watch,
- h,
- VNode
+ VNode,
+ Watch
} from "@stencil/core";
-import { CSS, ICONS, TEXT } from "./resources";
import { getElementDir, toAriaBoolean } from "../../utils/dom";
-import { HeadingLevel, Heading } from "../functional/Heading";
+import { connectLocalized, disconnectLocalized } from "../../utils/locale";
import { createObserver } from "../../utils/observers";
+import {
+ connectMessages,
+ disconnectMessages,
+ setUpMessages,
+ updateMessages
+} from "../../utils/t9n";
+import { Heading, HeadingLevel } from "../functional/Heading";
+import { TipManagerMessages } from "./assets/tip-manager/t9n";
+import { CSS, ICONS } from "./resources";
/**
* @slot - A slot for adding `calcite-tip`s.
@@ -21,7 +29,8 @@ import { createObserver } from "../../utils/observers";
@Component({
tag: "calcite-tip-manager",
styleUrl: "tip-manager.scss",
- shadow: true
+ shadow: true,
+ assetsDirs: ["assets"]
})
export class TipManager {
// --------------------------------------------------------------------------
@@ -45,29 +54,21 @@ export class TipManager {
@Prop({ reflect: true }) headingLevel: HeadingLevel;
/**
- * Accessible name for the component's close button.
- */
- @Prop() intlClose: string;
-
- /**
- * Accessible name for the `calcite-tip-group` title.
+ * Made into a prop for testing purposes only
+ *
+ * @internal
*/
- @Prop() intlDefaultTitle: string;
+ @Prop({ mutable: true }) messages: TipManagerMessages;
/**
- * Accessible name for navigating to the next tip.
+ * Use this property to override individual strings used by the component.
*/
- @Prop() intlNext: string;
+ @Prop({ mutable: true }) messageOverrides: Partial;
- /**
- * Text that accompanies the component's pagination.
- */
- @Prop() intlPaginationLabel: string;
-
- /**
- * Accessible name for navigating to the previous tip.
- */
- @Prop() intlPrevious: string;
+ @Watch("messageOverrides")
+ onMessagesChange(): void {
+ /* wired up by t9n util */
+ }
// --------------------------------------------------------------------------
//
@@ -97,6 +98,16 @@ export class TipManager {
container: HTMLDivElement;
+ @State() defaultMessages: TipManagerMessages;
+
+ @State() effectiveLocale = "";
+
+ @Watch("effectiveLocale")
+ async effectiveLocaleChange(): Promise {
+ await updateMessages(this, this.effectiveLocale);
+ this.updateGroupTitle();
+ }
+
// --------------------------------------------------------------------------
//
// Lifecycle
@@ -104,12 +115,21 @@ export class TipManager {
// --------------------------------------------------------------------------
connectedCallback(): void {
+ connectLocalized(this);
+ connectMessages(this);
this.setUpTips();
this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
}
+ async componentWillLoad(): Promise {
+ await setUpMessages(this);
+ this.updateGroupTitle();
+ }
+
disconnectedCallback(): void {
this.mutationObserver?.disconnect();
+ disconnectLocalized(this);
+ disconnectMessages(this);
}
// --------------------------------------------------------------------------
@@ -162,11 +182,10 @@ export class TipManager {
this.tips = tips;
this.selectedIndex = selectedTip ? tips.indexOf(selectedTip) : 0;
- tips.forEach((tip) => {
+ tips.forEach((tip: HTMLCalciteTipElement) => {
tip.closeDisabled = true;
});
this.showSelectedTip();
- this.updateGroupTitle();
}
hideTipManager = (): void => {
@@ -183,9 +202,11 @@ export class TipManager {
}
updateGroupTitle(): void {
- const selectedTip = this.tips[this.selectedIndex];
- const tipParent = selectedTip.closest("calcite-tip-group");
- this.groupTitle = tipParent?.groupTitle || this.intlDefaultTitle || TEXT.defaultGroupTitle;
+ if (this.tips) {
+ const selectedTip = this.tips[this.selectedIndex];
+ const tipParent = selectedTip.closest("calcite-tip-group");
+ this.groupTitle = tipParent?.groupTitle || this.messages?.defaultGroupTitle;
+ }
}
previousClicked = (): void => {
@@ -233,11 +254,11 @@ export class TipManager {
renderPagination(): VNode {
const dir = getElementDir(this.el);
- const { selectedIndex, tips, total, intlNext, intlPrevious, intlPaginationLabel } = this;
+ const { selectedIndex, tips, total, messages } = this;
- const nextLabel = intlNext || TEXT.next;
- const previousLabel = intlPrevious || TEXT.previous;
- const paginationLabel = intlPaginationLabel || TEXT.defaultPaginationLabel;
+ const nextLabel = messages.next;
+ const previousLabel = messages.previous;
+ const paginationLabel = messages.defaultPaginationLabel;
return tips.length > 1 ? (
`;
@@ -42,16 +42,16 @@ export const open_TestOnly = (): string => html`
offset-skidding="${number("offset-skidding", 0)}"
${boolean("open", true)}
>
- ${contentHTML}
+ ${contentHTML}
Accessible name for the component's hour input. | `string` | `undefined` | -| `intlHourDown` | `intl-hour-down` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's hour down button. | `string` | `undefined` | -| `intlHourUp` | `intl-hour-up` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's hour up button. | `string` | `undefined` | -| `intlMeridiem` | `intl-meridiem` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's meridiem (AM/PM) input. | `string` | `undefined` | -| `intlMeridiemDown` | `intl-meridiem-down` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's meridiem (AM/PM) down button. | `string` | `undefined` | -| `intlMeridiemUp` | `intl-meridiem-up` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's meridiem (AM/PM) up button. | `string` | `undefined` | -| `intlMinute` | `intl-minute` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's minute input. | `string` | `undefined` | -| `intlMinuteDown` | `intl-minute-down` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's minute down button. | `string` | `undefined` | -| `intlMinuteUp` | `intl-minute-up` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's minute up button. | `string` | `undefined` | -| `intlSecond` | `intl-second` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's second input. | `string` | `undefined` | -| `intlSecondDown` | `intl-second-down` | Accessible name for the component's second down button. | `string` | `undefined` | -| `intlSecondUp` | `intl-second-up` | **[DEPRECATED]** - translations are now built-in, if you need to override a string, please use `messageOverrides`
Accessible name for the component's second up button. | `string` | `undefined` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | -| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `step` | `step` | Specifies the granularity the `value` must adhere to (in seconds). | `number` | `60` | -| `value` | `value` | The component's value in UTC (always 24-hour format). | `string` | `null` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `TimePickerMessages` | `undefined` | +| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `step` | `step` | Specifies the granularity the `value` must adhere to (in seconds). | `number` | `60` | +| `value` | `value` | The component's value in UTC (always 24-hour format). | `string` | `null` | ## Methods -### `setFocus(target: TimePart) => Promise
no pre-selected attribute
basic render
basic render
basic render
basic render
no pre-selected attribute
${referenceElementHTML}
html`
offset-skidding="${number("offset-skidding", 0)}"
${boolean("open", false)}
>
- ${contentHTML}
+ ${contentHTML}
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
export const rightAligned_TestOnly = (): string => html`
Hover for Tooltip
diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
index b1848267b86..d7217198200 100644
--- a/src/components/tooltip/tooltip.tsx
+++ b/src/components/tooltip/tooltip.tsx
@@ -1,36 +1,36 @@
import {
Component,
Element,
+ Event,
+ EventEmitter,
+ h,
Host,
Method,
Prop,
State,
- Watch,
- h,
VNode,
- Event,
- EventEmitter
+ Watch
} from "@stencil/core";
-import { CSS, ARIA_DESCRIBED_BY } from "./resources";
-import { guid } from "../../utils/guid";
+import { queryElementRoots, toAriaBoolean } from "../../utils/dom";
import {
- OverlayPositioning,
- FloatingUIComponent,
connectFloatingUI,
+ defaultOffsetDistance,
disconnectFloatingUI,
+ FloatingCSS,
+ FloatingUIComponent,
LogicalPlacement,
- defaultOffsetDistance,
+ OverlayPositioning,
ReferenceElement,
reposition,
- FloatingCSS,
updateAfterClose
} from "../../utils/floating-ui";
-import { queryElementRoots, toAriaBoolean } from "../../utils/dom";
+import { guid } from "../../utils/guid";
import {
- OpenCloseComponent,
connectOpenCloseComponent,
- disconnectOpenCloseComponent
+ disconnectOpenCloseComponent,
+ OpenCloseComponent
} from "../../utils/openCloseComponent";
+import { ARIA_DESCRIBED_BY, CSS } from "./resources";
import TooltipManager from "./TooltipManager";
diff --git a/src/components/tooltip/usage/Basic.md b/src/components/tooltip/usage/Basic.md
index 2a7271e59dc..665fec5083d 100644
--- a/src/components/tooltip/usage/Basic.md
+++ b/src/components/tooltip/usage/Basic.md
@@ -2,8 +2,8 @@
This is the message of the tooltip
- (this.childrenSlotWrapper = el as HTMLElement)}
+ ref={(el) => this.setTransitionEl(el)}
role={this.hasChildren ? "group" : undefined}
>
` |
+| Event | Description | Type |
+| ------------------- | ----------------------------------------------------------- | ------------------- |
+| `calciteTreeSelect` | Fires when the user selects/deselects `calcite-tree-items`. | `CustomEvent` |
## Slots
diff --git a/src/components/tree/tree.e2e.ts b/src/components/tree/tree.e2e.ts
index f0e88c991f8..70bf978a3ce 100644
--- a/src/components/tree/tree.e2e.ts
+++ b/src/components/tree/tree.e2e.ts
@@ -1,7 +1,6 @@
import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
-import { GlobalTestProps } from "../../tests/utils";
import { html } from "../../../support/formatting";
+import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
import { CSS } from "../tree-item/resources";
import SpyInstance = jest.SpyInstance;
diff --git a/src/components/tree/tree.stories.ts b/src/components/tree/tree.stories.ts
index eb7943f91e8..da5e9e2e3df 100644
--- a/src/components/tree/tree.stories.ts
+++ b/src/components/tree/tree.stories.ts
@@ -1,9 +1,9 @@
import { select } from "@storybook/addon-knobs";
import { boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import treeItemReadme from "../tree-item/readme.md";
+import { modesDarkDefault } from "../../../.storybook/utils";
import { html } from "../../../support/formatting";
+import treeItemReadme from "../tree-item/readme.md";
+import readme from "./readme.md";
const treeItems = `
@@ -44,12 +44,15 @@ const treeItems = `
export default {
title: "Components/Tree",
parameters: {
- notes: [readme, treeItemReadme]
+ notes: [readme, treeItemReadme],
+ chromatic: {
+ delay: 1000
+ }
},
...storyFilters()
};
-const selectionModes = ["single", "multi", "children", "multichildren", "ancestors", "none", "multiple"];
+const selectionModes = ["single", "children", "multichildren", "ancestors", "none", "multiple"];
export const simple = (): string => html`
html``;
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
html`
${treeItems}
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
+
+export const OverflowingSubtree = (): string =>
+ html``
-## Slots
-
-| Slot | Description |
-| ----------------- | ------------------------------------------------------------------------ |
-| `"actions-end"` | A slot for adding actions or content to the end side of the component. |
-| `"actions-start"` | A slot for adding actions or content to the start side of the component. |
-
## Dependencies
### Depends on
diff --git a/src/components/value-list-item/value-list-item.tsx b/src/components/value-list-item/value-list-item.tsx
index dbb9688edd8..18079b6891c 100644
--- a/src/components/value-list-item/value-list-item.tsx
+++ b/src/components/value-list-item/value-list-item.tsx
@@ -10,28 +10,30 @@ import {
Prop,
VNode
} from "@stencil/core";
-import { ICON_TYPES } from "../pick-list/resources";
-import { guid } from "../../utils/guid";
-import { CSS, SLOTS as PICK_LIST_SLOTS } from "../pick-list-item/resources";
-import { ICONS, SLOTS } from "./resources";
-import { getSlotted } from "../../utils/dom";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
+import { getSlotted } from "../../utils/dom";
+import { guid } from "../../utils/guid";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
import {
- setUpLoadableComponent,
- setComponentLoaded,
+ componentLoaded,
LoadableComponent,
- componentLoaded
+ setComponentLoaded,
+ setUpLoadableComponent
} from "../../utils/loadable";
+import { CSS, SLOTS as PICK_LIST_SLOTS } from "../pick-list-item/resources";
+import { ICON_TYPES } from "../pick-list/resources";
+import { ICONS, SLOTS } from "./resources";
/**
- * @slot actions-end - A slot for adding actions or content to the end side of the component.
- * @slot actions-start - A slot for adding actions or content to the start side of the component.
+ * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component.
+ * @slot actions-start - A slot for adding `calcite-action`s or content to the start side of the component.
*/
+
+/** @deprecated Use the `list` component instead. */
@Component({
tag: "calcite-value-list-item",
styleUrl: "value-list-item.scss",
@@ -78,6 +80,9 @@ export class ValueListItem
*/
@Prop({ reflect: true }) icon?: ICON_TYPES | null = null;
+ /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+ @Prop({ reflect: true }) iconFlipRtl = false;
+
/**
* Label and accessible name for the component. Appears next to the icon.
*/
@@ -232,7 +237,7 @@ export class ValueListItem
}
renderHandle(): VNode {
- const { icon } = this;
+ const { icon, iconFlipRtl } = this;
if (icon === ICON_TYPES.grip) {
return (
- ; value: string; }[]` | `[]` |
-| `filteredItems` | -- | **read-only** The currently filtered items | `HTMLCalciteValueListItemElement[]` | `[]` |
-| `group` | `group` | The component's group identifier. To drag elements from one list into another, both lists must have the same group value. | `string` | `undefined` |
-| `intlDragHandleActive` | `intl-drag-handle-active` | **[DEPRECATED]** – translations are now built-in, if you need to override a string, please use `messageOverrides`
When "drag-enabled" is true and active, specifies accessible context to the component. Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`. | `string` | `undefined` | -| `intlDragHandleChange` | `intl-drag-handle-change` | **[DEPRECATED]** – translations are now built-in, if you need to override a string, please use `messageOverrides`
When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s new position. Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`. | `string` | `undefined` | -| `intlDragHandleCommit` | `intl-drag-handle-commit` | **[DEPRECATED]** – translations are now built-in, if you need to override a string, please use `messageOverrides`
When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s current position after commit. Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`. | `string` | `undefined` | -| `intlDragHandleIdle` | `intl-drag-handle-idle` | **[DEPRECATED]** – translations are now built-in, if you need to override a string, please use `messageOverrides`
When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s initial position. Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`. | `string` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | -| `multiple` | `multiple` | Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-value-list-item`s at a time. When `false`, only a single `calcite-value-list-item` can be selected at a time, and a new selection will deselect previous selections. | `boolean` | `false` | -| `selectionFollowsFocus` | `selection-follows-focus` | When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ----------------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ----------- | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `dragEnabled` | `drag-enabled` | When `true`, `calcite-value-list-item`s are sortable via a draggable button. | `boolean` | `false` | +| `filterEnabled` | `filter-enabled` | When `true`, an input appears at the top of the component that can be used by end users to filter list items. | `boolean` | `false` | +| `filterPlaceholder` | `filter-placeholder` | Placeholder text for the filter's input field. | `string` | `undefined` | +| `filterText` | `filter-text` | Text for the filter input field. | `string` | `undefined` | +| `filteredData` | -- | The currently filtered data. | `{ label: string; description: string; metadata: Record; value: string; }[]` | `[]` |
+| `filteredItems` | -- | The currently filtered items. | `HTMLCalciteValueListItemElement[]` | `[]` |
+| `group` | `group` | The component's group identifier. To drag elements from one list into another, both lists must have the same group value. | `string` | `undefined` |
+| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ValueListMessages` | `undefined` |
+| `multiple` | `multiple` | Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-value-list-item`s at a time. When `false`, only a single `calcite-value-list-item` can be selected at a time, and a new selection will deselect previous selections. | `boolean` | `false` |
+| `selectionFollowsFocus` | `selection-follows-focus` | When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard. | `boolean` | `false` |
## Events
@@ -83,19 +81,12 @@ Type: `Promise>`
### `setFocus(focusId?: ListFocusId) => Promise`
-Sets focus on the component.
+Sets focus on the component's first focusable element.
#### Returns
Type: `Promise`
-## Slots
-
-| Slot | Description |
-| ---------------- | -------------------------------------------------------------------------------------------------- |
-| | A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list. |
-| `"menu-actions"` | A slot for adding a button and menu combination for performing actions, such as sorting. |
-
## Dependencies
### Depends on
diff --git a/src/components/value-list/value-list.e2e.ts b/src/components/value-list/value-list.e2e.ts
index edc8c43adac..e7f6e9606bc 100644
--- a/src/components/value-list/value-list.e2e.ts
+++ b/src/components/value-list/value-list.e2e.ts
@@ -1,17 +1,17 @@
import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { CSS, ICON_TYPES } from "./resources";
+import { html } from "../../../support/formatting";
import { accessible, hidden, renders, t9n } from "../../tests/commonTests";
+import { dragAndDrop } from "../../tests/utils";
import {
- selectionAndDeselection,
+ disabling,
filterBehavior,
- loadingState,
- keyboardNavigation,
- itemRemoval,
focusing,
- disabling
+ itemRemoval,
+ keyboardNavigation,
+ loadingState,
+ selectionAndDeselection
} from "../pick-list/shared-list-tests";
-import { dragAndDrop } from "../../tests/utils";
-import { html } from "../../../support/formatting";
+import { CSS, ICON_TYPES } from "./resources";
describe("calcite-value-list", () => {
it("renders", () => renders("calcite-value-list", { display: "flex" }));
diff --git a/src/components/value-list/value-list.stories.ts b/src/components/value-list/value-list.stories.ts
index 7268874a063..cadd039084f 100644
--- a/src/components/value-list/value-list.stories.ts
+++ b/src/components/value-list/value-list.stories.ts
@@ -1,15 +1,15 @@
import { boolean } from "@storybook/addon-knobs";
+import { storyFilters } from "../../../.storybook/helpers";
import {
Attribute,
- filterComponentAttributes,
Attributes,
createComponentHTML as create,
- themesDarkDefault
+ filterComponentAttributes,
+ modesDarkDefault
} from "../../../.storybook/utils";
-import readme from "./readme.md";
-import itemReadme from "../value-list-item/readme.md";
import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
+import itemReadme from "../value-list-item/readme.md";
+import readme from "./readme.md";
export default {
title: "Components/Value List",
@@ -80,7 +80,7 @@ const action = html`
slot="actions-end"
label="click-me"
onClick="console.log('clicked');"
- appearance="clear"
+ appearance="outline"
scale="s"
icon="ellipsis"
>
@@ -121,12 +121,12 @@ export const disabled_TestOnly = (): string => html`
`;
-export const darkThemeRTL_TestOnly = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
${create(
"calcite-value-list",
createAttributes({ exceptions: ["dir", "class"] }).concat([
{ name: "dir", value: "rtl" },
- { name: "class", value: "calcite-theme-dark" }
+ { name: "class", value: "calcite-mode-dark" }
]),
html`
@@ -145,4 +145,4 @@ export const darkThemeRTL_TestOnly = (): string => html`
`
)}
`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
diff --git a/src/components/value-list/value-list.tsx b/src/components/value-list/value-list.tsx
index c6ad7234431..b8cda713b69 100644
--- a/src/components/value-list/value-list.tsx
+++ b/src/components/value-list/value-list.tsx
@@ -1,4 +1,3 @@
-import Sortable from "sortablejs";
import {
Component,
Element,
@@ -12,15 +11,30 @@ import {
VNode,
Watch
} from "@stencil/core";
-import { CSS, ICON_TYPES } from "./resources";
+import Sortable from "sortablejs";
+import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
import {
- ListFocusId,
+ componentLoaded,
+ LoadableComponent,
+ setComponentLoaded,
+ setUpLoadableComponent
+} from "../../utils/loadable";
+import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
+import { createObserver } from "../../utils/observers";
+import {
+ connectMessages,
+ disconnectMessages,
+ setUpMessages,
+ T9nComponent,
+ updateMessages
+} from "../../utils/t9n";
+import {
+ calciteInternalListItemValueChangeHandler,
calciteListFocusOutHandler,
calciteListItemChangeHandler,
- calciteInternalListItemValueChangeHandler,
cleanUpObserver,
- deselectSiblingItems,
deselectRemovedItems,
+ deselectSiblingItems,
getItemData,
handleFilter,
handleFilterEvent,
@@ -29,37 +43,25 @@ import {
initializeObserver,
ItemData,
keyDownHandler,
+ ListFocusId,
+ moveItemIndex,
mutationObserverCallback,
removeItem,
selectSiblings,
setFocus,
- setUpItems,
- moveItemIndex
+ setUpItems
} from "../pick-list/shared-list-logic";
import List from "../pick-list/shared-list-render";
-import { createObserver } from "../../utils/observers";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import { ValueListMessages } from "./assets/value-list/t9n";
+import { CSS, ICON_TYPES } from "./resources";
import { getHandleAndItemElement, getScreenReaderText } from "./utils";
-import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
-import {
- connectMessages,
- disconnectMessages,
- setUpMessages,
- T9nComponent,
- updateMessages
-} from "../../utils/t9n";
-import { Messages } from "./assets/value-list/t9n";
-import {
- setUpLoadableComponent,
- setComponentLoaded,
- LoadableComponent,
- componentLoaded
-} from "../../utils/loadable";
/**
* @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list.
* @slot menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting.
*/
+
+/** @deprecated Use the `list` component instead. */
@Component({
tag: "calcite-value-list",
styleUrl: "value-list.scss",
@@ -87,14 +89,14 @@ export class ValueList<
@Prop({ reflect: true }) dragEnabled = false;
/**
- * **read-only** The currently filtered items
+ * The currently filtered items.
*
* @readonly
*/
@Prop({ mutable: true }) filteredItems: HTMLCalciteValueListItemElement[] = [];
/**
- * **read-only** The currently filtered items
+ * The currently filtered data.
*
* @readonly
*/
@@ -143,7 +145,7 @@ export class ValueList<
/**
* Use this property to override individual strings used by the component.
*/
- @Prop({ mutable: true }) messageOverrides: Partial;
+ @Prop({ mutable: true }) messageOverrides: Partial;
@Watch("messageOverrides")
onMessagesChange(): void {
@@ -155,7 +157,7 @@ export class ValueList<
*
* @internal
*/
- @Prop({ mutable: true }) messages: Messages;
+ @Prop({ mutable: true }) messages: ValueListMessages;
// --------------------------------------------------------------------------
//
@@ -165,7 +167,7 @@ export class ValueList<
@State() dataForFilter: ItemData = [];
- @State() defaultMessages: Messages;
+ @State() defaultMessages: ValueListMessages;
@State() effectiveLocale = "";
@@ -412,7 +414,7 @@ export class ValueList<
}
/**
- * Sets focus on the component.
+ * Sets focus on the component's first focusable element.
*
* @param focusId
*/
diff --git a/src/demos/_assets/demo-dom-swapper.ts b/src/demos/_assets/demo-dom-swapper.ts
index 17ba43c8356..467fa092ee5 100644
--- a/src/demos/_assets/demo-dom-swapper.ts
+++ b/src/demos/_assets/demo-dom-swapper.ts
@@ -36,14 +36,15 @@ class DomSwapper extends HTMLElement {
* @param context
*/
moveTo(context: DomContext): void {
- if (context === "light") {
+ if (context === "light" && this.shadowRoot?.children) {
this.append(...Array.from(this.shadowRoot.children).filter((node) => node !== this._slot));
this._context = "light";
} else {
if (!this._headStyles) {
this._headStyles = this.recreateDemoStyle();
}
- this.shadowRoot.append(...this._headStyles, ...this.shadowRoot.querySelector("slot").assignedNodes());
+ const slot = this.shadowRoot?.querySelector("slot");
+ slot && this.shadowRoot?.append(...this._headStyles, ...slot.assignedNodes());
this._context = "shadow";
}
}
diff --git a/src/demos/_assets/demo-form.ts b/src/demos/_assets/demo-form.ts
index 8569b94a639..ce16d1b2f17 100644
--- a/src/demos/_assets/demo-form.ts
+++ b/src/demos/_assets/demo-form.ts
@@ -11,7 +11,9 @@ class DemoForm extends HTMLElement {
onFormSubmit(event) {
event.preventDefault();
- new FormData(event.target);
+ if (event.target) {
+ new FormData(event.target);
+ }
}
onFormData(event) {
diff --git a/src/demos/_assets/demo-spacer.ts b/src/demos/_assets/demo-spacer.ts
index ffb979f843c..0af60867e59 100644
--- a/src/demos/_assets/demo-spacer.ts
+++ b/src/demos/_assets/demo-spacer.ts
@@ -2,7 +2,8 @@ class DemoSpacer extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
- this.shadowRoot.innerHTML = `
+ if (this.shadowRoot) {
+ this.shadowRoot.innerHTML = `
-
): void => {
+const toggleDom = ({ currentTarget }): void => {
const mover = document.querySelector("demo-dom-swapper");
- const switchEl = event.currentTarget as HTMLCalciteSwitchElement;
- if (switchEl.checked) {
+ if (!mover) {
+ return;
+ }
+ if (currentTarget.checked) {
mover.moveTo("shadow");
} else {
mover.moveTo("light");
@@ -18,10 +20,13 @@ const toggleDom = (event: CustomEvent): void => {
const loadDemoToggles = () => {
document.querySelectorAll("h1:not(#demo-heading)").forEach((h1) => h1.remove());
- document.getElementById("demo-heading").textContent = document.title;
- document.getElementById("toggle-dir").addEventListener("calciteSwitchChange", toggleDir);
- document.getElementById("toggle-theme").addEventListener("calciteSwitchChange", toggleTheme);
- document.getElementById("toggle-dom").addEventListener("calciteSwitchChange", toggleDom);
+ const demoHeading = document.getElementById("demo-heading");
+ if (demoHeading) {
+ demoHeading.textContent = document.title;
+ }
+ document.getElementById("toggle-dir")?.addEventListener("calciteSwitchChange", toggleDir);
+ document.getElementById("toggle-mode")?.addEventListener("calciteSwitchChange", toggleMode);
+ document.getElementById("toggle-dom")?.addEventListener("calciteSwitchChange", toggleDom);
};
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", loadDemoToggles) : loadDemoToggles();
diff --git a/src/demos/_assets/head.ts b/src/demos/_assets/head.ts
index d258e6d39e7..a07fde3d386 100644
--- a/src/demos/_assets/head.ts
+++ b/src/demos/_assets/head.ts
@@ -21,7 +21,7 @@
}
];
- const parseTemplate = (text: string): HTMLTemplateElement => {
+ const parseTemplate = (text: string): HTMLTemplateElement | null => {
const parser = new DOMParser();
const doc = parser.parseFromString(text, "text/html");
return doc.head.querySelector("template");
@@ -32,8 +32,10 @@
const response = await window.fetch(`${root}${ASSETS_PATH}/demo-template.html`);
const text = await response.text();
const template = parseTemplate(text);
- const firstChild = document.body.firstChild;
- firstChild && document.body.insertBefore(template.content, firstChild);
+ if (template) {
+ const firstChild = document.body.firstChild;
+ firstChild && document.body.insertBefore(template.content, firstChild);
+ }
};
if (window.location.pathname.includes("/demos/") && !urlParams.has(DISABLE_HEADER_URL_PARAM)) {
diff --git a/src/demos/accordion.html b/src/demos/accordion.html
index e5ca821c901..e93bea73511 100644
--- a/src/demos/accordion.html
+++ b/src/demos/accordion.html
@@ -586,199 +586,6 @@
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
+ ``` diff --git a/src/components/tree-item/readme.md b/src/components/tree-item/readme.md index 49f3023311e..884987d836a 100644 --- a/src/components/tree-item/readme.md +++ b/src/components/tree-item/readme.md @@ -16,7 +16,7 @@ | Slot | Description | | ------------ | ------------------------------------------------- | -| | A slot for adding the component's content. | +| | A slot for adding text. | | `"children"` | A slot for adding nested `calcite-tree` elements. | ## Dependencies diff --git a/src/components/tree-item/tree-item.scss b/src/components/tree-item/tree-item.scss index f03511dbbb8..bc7ed3f4463 100644 --- a/src/components/tree-item/tree-item.scss +++ b/src/components/tree-item/tree-item.scss @@ -112,7 +112,7 @@ transform-origin: top; // keep the top of the element in the same place. this is optional. :host([expanded]) > & { - transform: scaleY(1); + @apply overflow-visible; opacity: 1; block-size: auto; } diff --git a/src/components/tree-item/tree-item.tsx b/src/components/tree-item/tree-item.tsx index 67eed18f828..682bbe186e2 100644 --- a/src/components/tree-item/tree-item.tsx +++ b/src/components/tree-item/tree-item.tsx @@ -1,37 +1,36 @@ import { Component, Element, - Prop, - Host, Event, EventEmitter, - Listen, - Watch, h, - VNode + Host, + Listen, + Prop, + VNode, + Watch } from "@stencil/core"; -import { TreeItemSelectDetail } from "./interfaces"; -import { TreeSelectionMode } from "../tree/interfaces"; -import { - nodeListToArray, - getElementDir, - filterDirectChildren, - getSlotted, - toAriaBoolean -} from "../../utils/dom"; - -import { Scale } from "../interfaces"; -import { CSS, SLOTS, ICONS } from "./resources"; -import { CSS_UTILITY } from "../../utils/resources"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { + filterDirectChildren, + getElementDir, + getSlotted, + nodeListToArray, + toAriaBoolean +} from "../../utils/dom"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent"; +import { CSS_UTILITY } from "../../utils/resources"; +import { Scale, SelectionMode } from "../interfaces"; +import { TreeItemSelectDetail } from "./interfaces"; +import { CSS, ICONS, SLOTS } from "./resources"; /** - * @slot - A slot for adding the component's content. + * @slot - A slot for adding text. * @slot children - A slot for adding nested `calcite-tree` elements. */ @Component({ @@ -39,7 +38,9 @@ import { InteractiveComponent, updateHostInteraction } from "../../utils/interac styleUrl: "tree-item.scss", shadow: true }) -export class TreeItem implements ConditionalSlotComponent, InteractiveComponent { +export class TreeItem + implements ConditionalSlotComponent, InteractiveComponent, OpenCloseComponent +{ //-------------------------------------------------------------------------- // // Element @@ -68,6 +69,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent @Watch("expanded") expandedHandler(newValue: boolean): void { this.updateParentIsExpanded(this.el, newValue); + onToggleOpenCloseComponent(this, true); } /** @@ -105,14 +107,49 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent /** * @internal */ - @Prop({ mutable: true, reflect: true }) selectionMode: TreeSelectionMode; + @Prop({ mutable: true, reflect: true }) selectionMode: SelectionMode; @Watch("selectionMode") getselectionMode(): void { this.isSelectionMultiLike = - this.selectionMode === "multiple" || - this.selectionMode === "multi" || - this.selectionMode === "multichildren"; + this.selectionMode === "multiple" || this.selectionMode === "multichildren"; + } + + openTransitionProp = "opacity"; + + transitionProp = "expanded"; + + /** + * Specifies element that the transition is allowed to emit on. + */ + transitionEl: HTMLDivElement; + + /** + * Defines method for `beforeOpen` event handler. + */ + onBeforeOpen(): void { + this.transitionEl.style.transform = "scaleY(1)"; + } + + /** + * Defines method for `open` event handler: + */ + onOpen(): void { + this.transitionEl.style.transform = "none"; + } + + /** + * Defines method for `beforeClose` event handler: + */ + onBeforeClose(): void { + // pattern needs to be defined on how we emit events for components without `open` prop. + } + + /** + * Defines method for `close` event handler: + */ + onClose(): void { + this.transitionEl.style.transform = "scaleY(0)"; } //-------------------------------------------------------------------------- @@ -159,6 +196,12 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent } } + componentWillLoad(): void { + if (this.expanded) { + onToggleOpenCloseComponent(this, true); + } + } + componentDidLoad(): void { this.updateAncestorTree(); } @@ -179,9 +222,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent const rtl = getElementDir(this.el) === "rtl"; const showBulletPoint = this.selectionMode === "single" || this.selectionMode === "children"; const showCheckmark = - this.selectionMode === "multi" || - this.selectionMode === "multiple" || - this.selectionMode === "multichildren"; + this.selectionMode === "multiple" || this.selectionMode === "multichildren"; const showBlank = this.selectionMode === "none" && !this.hasChildren; const chevron = this.hasChildren ? (
+
+
+ Layer 2
+
+
+ Layer 2.1
+
+
+ Remove
+
+
+
+
+
+
+ Layer 3
+
+
+
+ `;
diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index 8ba172b800f..9a415e6779c 100644
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -10,9 +10,8 @@ import {
VNode
} from "@stencil/core";
import { focusElement, getRootNode, nodeListToArray } from "../../utils/dom";
+import { Scale, SelectionMode } from "../interfaces";
import { TreeItemSelectDetail } from "../tree-item/interfaces";
-import { TreeSelectionMode } from "./interfaces";
-import { Scale } from "../interfaces";
import { getEnabledSiblingItem } from "./utils";
/**
@@ -53,9 +52,8 @@ export class Tree {
* Customize how the component's selection works.
*
* @default "single"
- * @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)
*/
- @Prop({ mutable: true, reflect: true }) selectionMode: TreeSelectionMode = "single";
+ @Prop({ mutable: true, reflect: true }) selectionMode: SelectionMode = "single";
/**
* Specifies the component's selected items.
@@ -85,9 +83,7 @@ export class Tree {
this.child
? undefined
: (
- this.selectionMode === "multi" ||
- this.selectionMode === "multiple" ||
- this.selectionMode === "multichildren"
+ this.selectionMode === "multiple" || this.selectionMode === "multichildren"
).toString()
}
role={!this.child ? "tree" : undefined}
@@ -165,18 +161,14 @@ export class Tree {
const shouldModifyToCurrentSelection =
!isNoneSelectionMode &&
event.detail.modifyCurrentSelection &&
- (this.selectionMode === "multi" ||
- this.selectionMode === "multiple" ||
- this.selectionMode === "multichildren");
+ (this.selectionMode === "multiple" || this.selectionMode === "multichildren");
const shouldSelectChildren =
this.selectionMode === "multichildren" || this.selectionMode === "children";
const shouldClearCurrentSelection =
!shouldModifyToCurrentSelection &&
- (((this.selectionMode === "single" ||
- this.selectionMode === "multi" ||
- this.selectionMode === "multiple") &&
+ (((this.selectionMode === "single" || this.selectionMode === "multiple") &&
childItems.length <= 0) ||
this.selectionMode === "children" ||
this.selectionMode === "multichildren");
diff --git a/src/components/value-list-item/readme.md b/src/components/value-list-item/readme.md
index 5ebcc33dce4..d73409c5519 100644
--- a/src/components/value-list-item/readme.md
+++ b/src/components/value-list-item/readme.md
@@ -4,6 +4,8 @@
+> **[DEPRECATED]** Use the `list` component instead.
+
## Properties
| Property | Attribute | Description | Type | Default |
@@ -11,6 +13,7 @@
| `description` | `description` | A description for the component that displays below the label text. | `string` | `undefined` |
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
| `icon` | `icon` | Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null. | `ICON_TYPES.circle \| ICON_TYPES.grip \| ICON_TYPES.square` | `null` |
+| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` |
| `label` _(required)_ | `label` | Label and accessible name for the component. Appears next to the icon. | `string` | `undefined` |
| `metadata` | -- | Provides additional metadata to the component. Primary use is for a filter on the parent list. | `{ [x: string]: unknown; }` | `undefined` |
| `nonInteractive` | `non-interactive` | When `true`, prevents the content of the component from user interaction. | `boolean` | `false` |
@@ -43,13 +46,6 @@ The first argument allows the value to be coerced, rather than swapping values.
Type: `PromiseWhen "drag-enabled" is true and active, specifies accessible context to the component. Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`. | `string` | `undefined` | -| `intlDragHandleChange` | `intl-drag-handle-change` | **[DEPRECATED]** – translations are now built-in, if you need to override a string, please use `messageOverrides`
When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s new position. Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`. | `string` | `undefined` | -| `intlDragHandleCommit` | `intl-drag-handle-commit` | **[DEPRECATED]** – translations are now built-in, if you need to override a string, please use `messageOverrides`
When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s current position after commit. Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`. | `string` | `undefined` | -| `intlDragHandleIdle` | `intl-drag-handle-idle` | **[DEPRECATED]** – translations are now built-in, if you need to override a string, please use `messageOverrides`
When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s initial position. Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`. | `string` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages` | `undefined` | -| `multiple` | `multiple` | Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-value-list-item`s at a time. When `false`, only a single `calcite-value-list-item` can be selected at a time, and a new selection will deselect previous selections. | `boolean` | `false` | -| `selectionFollowsFocus` | `selection-follows-focus` | When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ----------------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ----------- | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `dragEnabled` | `drag-enabled` | When `true`, `calcite-value-list-item`s are sortable via a draggable button. | `boolean` | `false` | +| `filterEnabled` | `filter-enabled` | When `true`, an input appears at the top of the component that can be used by end users to filter list items. | `boolean` | `false` | +| `filterPlaceholder` | `filter-placeholder` | Placeholder text for the filter's input field. | `string` | `undefined` | +| `filterText` | `filter-text` | Text for the filter input field. | `string` | `undefined` | +| `filteredData` | -- | The currently filtered data. | `{ label: string; description: string; metadata: Record
- Home
@@ -16,7 +16,7 @@
Accordion
-
-
-
- minimal
-
-
-
-
-
-
-
-
-
-
-
-
-
- Yes
- No
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Yes
- No
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Yes
- No
-
-
-
-
-
-
-
minimal icon-position: start
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Child 1
-
-
- Child 2
-
-
- Grandchild 1
-
-
- Grandchild 2
-
- Great-Grandchild 1
- Great-Grandchild 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Child 1
-
-
- Child 2
-
-
- Grandchild 1
-
-
- Grandchild 2
-
- Great-Grandchild 1
- Great-Grandchild 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Child 1
-
-
- Child 2
-
-
- Grandchild 1
-
-
- Grandchild 2
-
- Great-Grandchild 1
- Great-Grandchild 2
-
-
-
-
-
-
-
-
- transparent
@@ -798,10 +605,10 @@ Accordion
>Accordion
>Accordion
>Accordion
>Accordion
>Accordion
>Accordion
>Accordion
>Accordion
>Accordion
icon-start="drone-fixed-wing" icon-end="drone-fixed-wing" > -Accordion
icon-start="drone-fixed-wing" icon-end="drone-fixed-wing" > -Accordion
icon-start="drone-fixed-wing" icon-end="drone-fixed-wing" > -
-
clear
+ Transparent
-
+
-
+
-
+
",
+ "",
"Take action ",
@@ -106,13 +108,13 @@
-
- Something failed
",
"" + id + " That thing you wanted to do didn't work as expected
",
"Alert
Small
-
Info
+
+
+
Alert
Alert
Alert
Alert
+
+
Alert
@@ -183,8 +234,8 @@
@@ -194,8 +245,8 @@
@@ -210,7 +261,7 @@
Alert
@@ -232,8 +283,8 @@
@@ -243,8 +294,8 @@
@@ -259,7 +310,7 @@
Alert
@@ -281,8 +332,8 @@
@@ -292,8 +343,8 @@
@@ -312,16 +363,65 @@
+
+
Default
@@ -329,10 +429,10 @@
autoclose
@@ -340,10 +440,10 @@
Default, icon
@@ -351,10 +451,10 @@
Default, icon, link
@@ -367,7 +467,7 @@
Alert
@@ -389,8 +489,8 @@
@@ -400,8 +500,8 @@
@@ -416,7 +516,7 @@
Alert
@@ -438,8 +538,8 @@
@@ -449,8 +549,8 @@
@@ -465,7 +565,7 @@
Alert
@@ -487,8 +587,8 @@
@@ -498,8 +598,8 @@
@@ -518,16 +618,65 @@
+
+
Default
@@ -535,10 +684,10 @@
autoclose
@@ -546,10 +695,10 @@
Default, icon
@@ -557,10 +706,10 @@
Default, icon, link
@@ -573,7 +722,7 @@
Alert
@@ -595,8 +744,8 @@
@@ -606,8 +755,8 @@
@@ -622,7 +771,7 @@
Alert
@@ -644,8 +793,8 @@
@@ -655,8 +804,8 @@
@@ -671,7 +820,7 @@
Alert
@@ -693,8 +842,8 @@
@@ -704,8 +853,8 @@
@@ -725,7 +874,7 @@
Alert
-
- bottom-start
+
+ bottom-start
-
- bottom (default)
+ bottom (default)
-
+
bottom-end
-
-
+
+
top-start
-
- top
-
+
+
+ top
+
+
top-end
-
-
+
+
Reset
diff --git a/src/demos/avatar.html b/src/demos/avatar.html
index 55294a5540b..46951dc8c24 100644
--- a/src/demos/avatar.html
+++ b/src/demos/avatar.html
@@ -150,102 +150,102 @@
@@ -318,30 +319,30 @@
@@ -419,30 +420,30 @@
@@ -512,26 +513,26 @@
-
+
@@ -539,17 +540,17 @@
@@ -573,13 +574,13 @@
@@ -588,10 +589,10 @@
@@ -711,10 +730,10 @@
@@ -833,10 +870,10 @@
@@ -955,10 +992,10 @@
@@ -1010,15 +1047,15 @@
@@ -1139,7 +1176,7 @@
appearance="outline"
icon-start="arrow-left"
icon-end="arrow-right"
- color="neutral"
+ kind="neutral"
scale="s"
>
Button
@@ -1150,7 +1187,7 @@
appearance="outline"
icon-start="arrow-left"
icon-end="arrow-right"
- color="neutral"
+ kind="neutral"
scale="m"
>
Button
@@ -1161,7 +1198,7 @@
appearance="outline"
icon-start="arrow-left"
icon-end="arrow-right"
- color="neutral"
+ kind="neutral"
scale="l"
>
Button
@@ -1172,26 +1209,26 @@
@@ -1202,7 +1239,7 @@
appearance="outline"
icon-start="arrow-left"
icon-end="arrow-right"
- color="neutral"
+ kind="neutral"
scale="s"
round
>
@@ -1214,7 +1251,7 @@
appearance="outline"
icon-start="arrow-left"
icon-end="arrow-right"
- color="neutral"
+ kind="neutral"
scale="m"
round
>
@@ -1226,7 +1263,7 @@
appearance="outline"
icon-start="arrow-left"
icon-end="arrow-right"
- color="neutral"
+ kind="neutral"
scale="l"
round
>
@@ -1238,37 +1275,37 @@
@@ -1279,7 +1316,7 @@
appearance="outline"
icon-start="arrow-left"
icon-end="arrow-right"
- color="inverse"
+ kind="inverse"
scale="s"
>
Button
@@ -1290,7 +1327,7 @@
appearance="outline"
icon-start="arrow-left"
icon-end="arrow-right"
- color="inverse"
+ kind="inverse"
scale="m"
>
Button
@@ -1301,7 +1338,7 @@
appearance="outline"
icon-start="arrow-left"
icon-end="arrow-right"
- color="inverse"
+ kind="inverse"
scale="l"
>
Button
@@ -1312,26 +1349,26 @@
@@ -1342,7 +1379,7 @@
appearance="outline"
icon-start="arrow-left"
icon-end="arrow-right"
- color="inverse"
+ kind="inverse"
scale="s"
round
>
@@ -1354,7 +1391,7 @@
appearance="outline"
icon-start="arrow-left"
icon-end="arrow-right"
- color="inverse"
+ kind="inverse"
scale="m"
round
>
@@ -1366,7 +1403,7 @@
appearance="outline"
icon-start="arrow-left"
icon-end="arrow-right"
- color="inverse"
+ kind="inverse"
scale="l"
round
>
@@ -1378,54 +1415,54 @@
@@ -1464,7 +1501,7 @@
appearance="outline"
icon-start="arrow-left"
icon-end="arrow-right"
- color="red"
+ kind="danger"
scale="s"
round
>
@@ -1476,7 +1513,7 @@
appearance="outline"
icon-start="arrow-left"
icon-end="arrow-right"
- color="red"
+ kind="danger"
scale="m"
round
>
@@ -1488,7 +1525,7 @@
appearance="outline"
icon-start="arrow-left"
icon-end="arrow-right"
- color="red"
+ kind="danger"
scale="l"
round
>
@@ -1500,13 +1537,13 @@
@@ -1628,13 +1665,13 @@
@@ -1645,7 +1682,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="neutral"
+ kind="neutral"
scale="s"
>
Button
@@ -1656,7 +1693,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="neutral"
+ kind="neutral"
scale="m"
>
Button
@@ -1667,7 +1704,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="neutral"
+ kind="neutral"
scale="l"
>
Button
@@ -1678,26 +1715,26 @@
@@ -1708,7 +1745,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="neutral"
+ kind="neutral"
scale="s"
round
>
@@ -1720,7 +1757,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="neutral"
+ kind="neutral"
scale="m"
round
>
@@ -1732,7 +1769,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="neutral"
+ kind="neutral"
scale="l"
round
>
@@ -1744,16 +1781,13 @@
@@ -1771,13 +1805,13 @@
@@ -1788,7 +1822,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="inverse"
+ kind="inverse"
scale="s"
>
Button
@@ -1799,7 +1833,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="inverse"
+ kind="inverse"
scale="m"
>
Button
@@ -1810,7 +1844,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="inverse"
+ kind="inverse"
scale="l"
>
Button
@@ -1821,26 +1855,26 @@
@@ -1851,7 +1885,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="inverse"
+ kind="inverse"
scale="s"
round
>
@@ -1863,7 +1897,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="inverse"
+ kind="inverse"
scale="m"
round
>
@@ -1875,7 +1909,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="inverse"
+ kind="inverse"
scale="l"
round
>
@@ -1887,16 +1921,13 @@
@@ -1914,13 +1945,13 @@
@@ -1931,7 +1962,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="red"
+ kind="danger"
scale="s"
>
Button
@@ -1942,7 +1973,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="red"
+ kind="danger"
scale="m"
>
Button
@@ -1953,7 +1984,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="red"
+ kind="danger"
scale="l"
>
Button
@@ -1964,26 +1995,26 @@
@@ -1994,7 +2025,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="red"
+ kind="danger"
scale="s"
round
>
@@ -2006,7 +2037,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="red"
+ kind="danger"
scale="m"
round
>
@@ -2018,7 +2049,7 @@
appearance="transparent"
icon-start="arrow-left"
icon-end="arrow-right"
- color="red"
+ kind="danger"
scale="l"
round
>
@@ -2030,13 +2061,13 @@
@@ -2046,8 +2077,8 @@
Change scale:
-
- s
- m
- l
-
+
+ s
+ m
+ l
+
Change appearance:
-
- solid
- clear
- outline
- transparent
-
+
+ solid
+ outline
+ outline-fill
+ transparent
+
- Change color:
-
- blue
- neutral
- inverse
- red
-
+ Change kind:
+
+ brand
+ neutral
+ inverse
+ danger
+
-
-
-
-
-
- + .themed-children calcite-chip:nth-of-type(7) { + --calcite-ui-brand: teal; + --calcite-ui-text-1: teal; + --calcite-ui-border-1: teal; + --calcite-ui-foreground-1: rgba(0, 128, 128, 0.15); + } - -
+
- - - +
Brand
+
+
Info
+
+
+
+ Default
+
+
+
+
+
+ autoclose
+
+
+
+
+
+ Default, icon
+
+
+
+
+
+ Default, icon, link
+
+
+ Success
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Medium
+
+
Brand
+
+
+
+ Default
+
+
+
+
+
+ autoclose
+
+
+
+
+
+ Default, icon
+
+
+
+
+
+ Default, icon, link
+
+
+ Info
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Large
+
+
Brand
+
+
+
+ Default
+
+
+
+
+
+ autoclose
+
+
+
+
+
+ Default, icon
+
+
+
+
+
+ Default, icon, link
+
+
+ Info
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Alert
Alert placement
-Avatar
ID Color test (dark)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Clear Brand
+Outline Brand
Default
-
-
-
With icons
-
-
-
Icon only
-
-
-
Rounded
-
-
-
Rounded with icons
Rounded icon only
-
-
-
-
-
+
Clear Neutral
+Outline Neutral
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
Clear Inverse
+Outline Inverse
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
Clear Danger
+Outline Danger
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
Outline Brand
+Outline-fill Brand
-
-
+
Outline Neutral
+Outline-fill Neutral
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
Outline Inverse
+Outline-fill Inverse
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
Outline Danger
+Outline-fill Danger
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Loader
@@ -2059,54 +2090,54 @@Chip
- - -
-
-
-
- Small
- Medium
- Large
-
-
-
-
- Basic
-
-
- Apple
-
-
-
- Apple
-
-
-
- Apple
-
-
-
-
-
- Slotted image
-
-
-
- 
- Siamese Cat
-
-
-
-
-
-
- Siamese Cat
-
-
-
-
-
-
- Siamese Cat
-
-
-
-
-
-
- Slotted avatar
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ .themed-children calcite-chip:nth-of-type(2) {
+ --calcite-ui-brand: var(--calcite-ui-success);
+ --calcite-ui-text-1: var(--calcite-ui-success);
+ --calcite-ui-border-1: var(--calcite-ui-success);
+ --calcite-ui-foreground-1: rgba(0, 128, 0, 0.15);
+ }
-
- Icon attribute
+ .chip-group {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ gap: 16px;
+ }
-
- Check circle
-
+ /* theming override examples */
-
- Drone
-
+ .themed-children calcite-chip:first-of-type {
+ --calcite-ui-brand: var(--calcite-ui-danger);
+ --calcite-ui-text-1: var(--calcite-ui-danger);
+ --calcite-ui-border-1: var(--calcite-ui-danger);
+ --calcite-ui-foreground-1: rgba(255, 0, 0, 0.15);
+ }
-
- Ship
-
-
-
+ .themed-children calcite-chip:nth-of-type(6) {
+ --calcite-ui-brand: pink;
+ --calcite-ui-text-1: pink;
+ --calcite-ui-border-1: pink;
+ --calcite-ui-foreground-1: rgba(255, 192, 203, 0.15);
+ }
- Icon attribute closable
+ .themed-children calcite-chip:nth-of-type(3) {
+ --calcite-ui-brand: var(--calcite-ui-info);
+ --calcite-ui-text-1: var(--calcite-ui-info);
+ --calcite-ui-border-1: var(--calcite-ui-info);
+ --calcite-ui-foreground-1: rgba(0, 0, 255, 0.15);
+ }
-
- Check circle
-
+ .themed-children calcite-chip:nth-of-type(4) {
+ --calcite-ui-brand: orange;
+ --calcite-ui-text-1: orange;
+ --calcite-ui-border-1: orange;
+ --calcite-ui-foreground-1: rgba(255, 165, 0, 0.15);
+ }
-
- Drone
-
+ .themed-children calcite-chip:nth-of-type(5) {
+ --calcite-ui-brand: purple;
+ --calcite-ui-text-1: purple;
+ --calcite-ui-border-1: purple;
+ --calcite-ui-foreground-1: rgba(128, 0, 128, 0.15);
+ }
-
- Ship
-
- - + .themed-children calcite-chip:nth-of-type(7) { + --calcite-ui-brand: teal; + --calcite-ui-text-1: teal; + --calcite-ui-border-1: teal; + --calcite-ui-foreground-1: rgba(0, 128, 128, 0.15); + } - -
-
+
+ Solid Grey (default)
+ .themed-children-card calcite-chip:first-of-type {
+ --calcite-ui-foreground-2: rgb(222 239 220);
+ --calcite-ui-text-1: var(--calcite-ui-success);
+ --calcite-ui-icon-color: var(--calcite-ui-success);
+ }
-
- Grey (default)
-
+ .themed-children-card calcite-chip:nth-of-type(2) {
+ --calcite-ui-foreground-2: rgb(221 238 249);
+ --calcite-ui-text-1: var(--calcite-ui-info);
+ --calcite-ui-icon-color: var(--calcite-ui-info);
+ }
-
- Grey (default)
-
+ .themed-children-card calcite-chip:nth-of-type(3) {
+ --calcite-ui-foreground-2: rgb(221 238 249);
+ --calcite-ui-text-1: var(--calcite-ui-info);
+ --calcite-ui-icon-color: var(--calcite-ui-info);
+ }
+
+
+
-
- Grey (default)
-
- Chip
- +
-
-
+
Yellow
-
-
- Yellow
-
-
-
- Yellow
-
-
-
- Yellow
-
+
+ Solid (default)
+ Outline
+ Outline-fill
-
-
+
Green
+ Basic
- Green
+
+ Apple
+ Apple
+ Apple
+
- Green
+
+ Apple
+ Apple
+ Apple
+
- Green
+
+ Apple
+ Apple
+ Apple
+
-
-
+
Blue
+ Basic
- Blue
+
+ Apple
+ Apple
+ Apple
+
- Blue
+
+ Apple
+ Apple
+ Apple
+
- Blue
+
+ Apple
+ Apple
+ Apple
+
-
- Red
-
-
- Red
-
-
-
- Red
-
+ Slotted image
- Red
+
+
+
+
+ 
+ Siamese Cat
+
+
+
+ Siamese Cat
+
+
+
+ Siamese Cat
+
+
+
+
+
+
+
+
+ Siamese Cat
+
+
+
+ Siamese Cat
+
+
+
+ Siamese Cat
+
+
+
+
+
+
+ Siamese Cat
+
+
+
+ Siamese Cat
+
+
+
+ Siamese Cat
+
+
- - - +
-
-
+
Solid grey (default) closable
-
-
- Grey (default)
-
-
-
- Grey (default)
-
+ Slotted avatar
- Grey (default)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- - - +
Yellow
-
-
- Yellow
-
-
-
- Yellow
-
-
-
- Yellow
+
-
+
Slotted avatar and icon
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
Green
+ Icon
- Green
+
+ Maritime
+ Maritime
+ Maritime
+
- Green
+
+ Maritime
+
+ Maritime
+
+
+ Maritime
+
+
- Green
+
+ Maritime
+
+ Maritime
+
+
+ Maritime
+
+
-
-
+
Blue
+ Icon (closable)
- Blue
+
+ Maritime
+ Maritime
+ Maritime
+
- Blue
+
+ Maritime
+
+ Maritime
+
+
+ Maritime
+
+
- Blue
+
+
+ Maritime
+
+
+ Maritime
+
+
+ Maritime
+
+
-
- Red
+ Just Icon
- Red
+
+
+
+
+
- Red
+
+
+
+
+
+
+
- Red
+
+
+
+
+
+
+
- - - +
-
-
+
Transparent Grey(default)
+ Just Icon (closable)
-
- Grey (default)
-
+
+
+
+
+
+
+
-
- Grey (default)
-
-
-
-
-
- Grey (default)
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
Yellow
-
-
-
- Yellow
-
-
-
-
-
- Yellow
-
-
-
-
-
- Yellow
-
+
-
+
Just Avatar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
Green
-
-
-
- Green
-
-
-
-
-
- Green
-
-
-
-
-
- Green
-
+
-
+
Just avatar (closable)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
Blue
-
-
-
- Blue
-
-
-
-
-
- Blue
-
-
-
-
-
- Blue
-
+
-
+
Just Image
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- - - -
Red
-
-
-
- Red
-
-
-
-
-
- Red
-
-
-
-
-
- Red
-
+
-
Just image (closable)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- - - -
-
-
-
+
Solid grey(default) closable
-
-
-
- Grey (default)
-
-
-
-
-
- Grey (default)
-
-
-
-
-
- Grey (default)
-
-
-
-
Yellow
-
-
-
- Yellow
-
-
-
-
-
- Yellow
-
-
-
-
-
- Yellow
-
+
-
-
+ Theming example
+
+
+
+
+
+ AWS
+ Azure
+ Maintained
+ Host
+ Test
+ Priority - High
+ Archived
+
+
+
+
+ AWS
+ Azure
+ Maintained
+ Host
+ Test
+ Priority - High
+ Archived
+
+
+
+ AWS
+ Azure
+ Maintained
+ Host
+ Test
+ Priority - High
+ Archived
+
-
-
Green
-
-
-
- Green
-
-
-
-
-
- Green
-
-
-
-
-
- Green
-
+
+ Used as chip in combobox
+
+
+
+
+
-
-
+ Something
+ Something else
+
+ Permission level
+
-
-
Blue
-
-
-
- Blue
-
-
-
-
-
- Blue
-
-
-
-
-
- Blue
-
-
+ Used as badges in a card
+
+
+
+
+ 
+
+
+
+
+
+
+
+ My great Workforce project that might wrap two lines
+ Johnathan Smith +
+
+
+
-
- - -
Red
-
-
-
- Red
-
-
-
-
-
- Red
-
-
-
-
-
- Red
-
+
-
- Used as badges in a wider card
+
+ Authoritative
+
+ Something
+
+ Something else
+
+ Permission level
+
+
+ 
+
+
+ authoritative
+ authoritative
+ authoritative
+
+
+
+ My great Workforce project that might wrap two lines
+ Johnathan Smith +
+ authoritative
+
+
+ - - -