Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

refactor(modal,notice,pagination,panel,pick-list-item,popover)!: removed deprecated intl* & accessible label properties #6050

Merged
merged 11 commits into from
Dec 15, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 5 additions & 12 deletions src/components/modal/modal.e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,6 @@ describe("calcite-modal properties", () => {

it("has slots", () => slots("calcite-modal", SLOTS));

it("adds localized strings set via intl-* props", async () => {
const page = await newE2EPage();
await page.setContent(`<calcite-modal intl-close="test"></calcite-modal>`);
const button = await page.find("calcite-modal >>> .close");
expect(button).toEqualAttribute("aria-label", "test");
});

it("should hide closeButton when disabled", async () => {
const page = await newE2EPage();
await page.setContent("<calcite-modal></calcite-modal>");
Expand Down Expand Up @@ -359,7 +352,7 @@ describe("calcite-modal accessibility checks", () => {

it("closes and allows re-opening when Escape key is pressed", async () => {
const page = await newE2EPage();
await page.setContent(`<calcite-modal intl-close="test"></calcite-modal>`);
await page.setContent(`<calcite-modal ></calcite-modal>`);
await skipAnimations(page);
const modal = await page.find("calcite-modal");
await modal.setProperty("open", true);
Expand All @@ -376,7 +369,7 @@ describe("calcite-modal accessibility checks", () => {

it("closes when Escape key is pressed and modal is open on page load", async () => {
const page = await newE2EPage();
await page.setContent(`<calcite-modal intl-close="test" open></calcite-modal>`);
await page.setContent(`<calcite-modal open></calcite-modal>`);
const modal = await page.find("calcite-modal");
await page.waitForChanges();
expect(modal).toHaveAttribute("open");
Expand All @@ -393,7 +386,7 @@ describe("calcite-modal accessibility checks", () => {

it("closes and allows re-opening when Close button is clicked", async () => {
const page = await newE2EPage();
await page.setContent(`<calcite-modal intl-close="test"></calcite-modal>`);
await page.setContent(`<calcite-modal ></calcite-modal>`);
await skipAnimations(page);
const modal = await page.find("calcite-modal");
modal.setProperty("open", true);
Expand All @@ -411,7 +404,7 @@ describe("calcite-modal accessibility checks", () => {

it("should close when the scrim is clicked", async () => {
const page = await newE2EPage();
await page.setContent(`<calcite-modal intl-close="test"></calcite-modal>`);
await page.setContent(`<calcite-modal ></calcite-modal>`);
const modal = await page.find("calcite-modal");
modal.setProperty("open", true);
await page.waitForChanges();
Expand All @@ -423,7 +416,7 @@ describe("calcite-modal accessibility checks", () => {

it("should not close when the scrim is clicked", async () => {
const page = await newE2EPage();
await page.setContent(`<calcite-modal outside-close-disabled intl-close="test"></calcite-modal>`);
await page.setContent(`<calcite-modal outside-close-disabled ></calcite-modal>`);
const modal = await page.find("calcite-modal");
modal.setProperty("open", true);
await page.waitForChanges();
Expand Down
2 changes: 0 additions & 2 deletions src/components/modal/modal.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ export const simple = (): string => html`
${boolean("fullscreen", false)}
${boolean("docked", false)}
${boolean("escape-disabled", false)}
intl-close="${text("intl-close", "Close")}"
>
<h3 slot="header">Small Modal</h3>
<div slot="content">
Expand All @@ -51,7 +50,6 @@ export const darkThemeRTLCustomSize_TestOnly = (): string => html`
${boolean("fullscreen", false)}
${boolean("docked", false)}
${boolean("escape-disabled", false)}
intl-close="${text("intl-close", "Close")}"
>
<h3 slot="header">Small Modal</h3>
<div slot="content">
Expand Down
8 changes: 0 additions & 8 deletions src/components/modal/modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -111,13 +111,6 @@ export class Modal
/** When `true`, disables the closing of the component when clicked outside. */
@Prop({ reflect: true }) outsideCloseDisabled = false;

/**
* Accessible name for the component's close button.
*
* @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
*/
@Prop() intlClose: string;

/** When `true`, prevents the component from expanding to the entire screen on mobile devices. */
@Prop({ reflect: true }) docked: boolean;

Expand Down Expand Up @@ -151,7 +144,6 @@ export class Modal
*/
@Prop({ mutable: true }) messageOverrides: Partial<Messages>;

@Watch("intlClose")
@Watch("messageOverrides")
onMessagesChange(): void {
/* wired up by t9n util */
Expand Down
9 changes: 0 additions & 9 deletions src/components/notice/notice.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -120,14 +120,6 @@ export class Notice
*/
@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;

/** Specifies the size of the component. */
@Prop({ reflect: true }) scale: Scale = "m";

Expand All @@ -146,7 +138,6 @@ export class Notice
*/
@Prop({ mutable: true }) messageOverrides: Partial<Messages>;

@Watch("intlClose")
@Watch("messageOverrides")
onMessagesChange(): void {
/* wired up by t9n util */
Expand Down
30 changes: 0 additions & 30 deletions src/components/pagination/pagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,27 +59,11 @@ export class Pagination implements LocalizedComponent, LocalizedComponent, T9nCo
*/
@Prop({ mutable: true }) messageOverrides: Partial<Messages>;

@Watch("textLabelNext")
@Watch("textLabelPrevious")
@Watch("messageOverrides")
onMessagesChange(): void {
/* wired up by t9n util */
}

getExtraMessageOverrides(): Partial<Messages> {
const extraOverrides: Partial<Messages> = {};

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;

Expand All @@ -94,20 +78,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";

Expand Down
16 changes: 0 additions & 16 deletions src/components/panel/panel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,20 +91,6 @@ export class Panel
*/
@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.
*/
Expand All @@ -130,8 +116,6 @@ export class Panel
*/
@Prop({ mutable: true }) messages: Messages;

@Watch("intlClose")
@Watch("intlOptions")
@Watch("messageOverrides")
onMessagesChange(): void {
/* wired up by t9n util */
Expand Down
4 changes: 2 additions & 2 deletions src/components/pick-list-item/pick-list-item.e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -139,10 +139,10 @@ describe("calcite-pick-list-item", () => {
await page.setContent(
html`
<calcite-pick-list style="width: 400px">
<calcite-pick-list-item label="apple" value="apple" icon="circle" intl-remove="Remove">
<calcite-pick-list-item label="apple" value="apple" icon="circle">
<calcite-action slot="actions-end" icon="information"></calcite-action>
</calcite-pick-list-item>
<calcite-pick-list-item label="mango" value="mango" selected="" icon="circle" intl-remove="Remove">
<calcite-pick-list-item label="mango" value="mango" selected="" icon="circle">
<calcite-action slot="actions-end" icon="information"></calcite-action>
</calcite-pick-list-item>
</calcite-pick-list>
Expand Down
8 changes: 0 additions & 8 deletions src/components/pick-list-item/pick-list-item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,6 @@ export class PickListItem
*/
@Prop({ mutable: true }) messages: Messages;

@Watch("intlRemove")
@Watch("defaultMessages")
@Watch("messageOverrides")
onMessagesChange(): void {
Expand Down Expand Up @@ -148,13 +147,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.
*/
Expand Down
8 changes: 0 additions & 8 deletions src/components/popover/popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -143,13 +143,6 @@ export class Popover
*/
@Prop({ reflect: true }) headingLevel: HeadingLevel;

/**
* Accessible name for the component's close button.
*
* @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
*/
@Prop() intlClose: string;

/** Accessible name for the component. */
@Prop() label!: string;

Expand All @@ -158,7 +151,6 @@ export class Popover
*/
@Prop({ mutable: true }) messageOverrides: Partial<Messages>;

@Watch("intlClose")
@Watch("messageOverrides")
onMessagesChange(): void {
/* wired up by t9n util */
Expand Down