Skip to content

Commit 999f532

Browse files
Elijbetbenelan
Elijbet
authored and
benelan
committed
feat(block, block-section): add expanded property and deprecate open property (#11582)
**Related Issue:** #6473, #11225 ## Summary Deprecate `open` prop in favor of `expanded`. Add logger warning for deprecation to help inform users about the deprecated property and guide them towards using the recommended alternatives.
1 parent c80c44c commit 999f532

File tree

10 files changed

+213
-98
lines changed

10 files changed

+213
-98
lines changed

‎packages/calcite-components/src/components/block-section/block-section.e2e.ts

+45-19
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ describe("calcite-block-section", () => {
2020
propertyName: "open",
2121
value: true,
2222
},
23+
{
24+
propertyName: "expanded",
25+
value: true,
26+
},
2327
]);
2428
});
2529

@@ -29,6 +33,10 @@ describe("calcite-block-section", () => {
2933
propertyName: "open",
3034
defaultValue: false,
3135
},
36+
{
37+
propertyName: "expanded",
38+
defaultValue: false,
39+
},
3240
{
3341
propertyName: "toggleDisplay",
3442
defaultValue: "button",
@@ -43,7 +51,7 @@ describe("calcite-block-section", () => {
4351
describe("setFocus", () => {
4452
describe("focuses toggle switch", () => {
4553
focusable(
46-
html`<calcite-block-section text="text" toggle-display="switch" open>
54+
html`<calcite-block-section text="text" toggle-display="switch" expanded>
4755
<div>some content</div>
4856
</calcite-block-section>`,
4957
{
@@ -54,7 +62,7 @@ describe("calcite-block-section", () => {
5462

5563
describe("focuses toggle button", () => {
5664
focusable(
57-
html`<calcite-block-section text="text" toggle-display="button" open>
65+
html`<calcite-block-section text="text" toggle-display="button" expanded>
5866
<div>some content</div>
5967
</calcite-block-section>`,
6068
{
@@ -67,13 +75,13 @@ describe("calcite-block-section", () => {
6775
describe("toggle-display = 'switch'", () => {
6876
describe("accessible", () => {
6977
accessible(html`
70-
<calcite-block-section text="text" toggle-display="switch" open>
78+
<calcite-block-section text="text" toggle-display="switch" expanded>
7179
<div>some content</div>
7280
</calcite-block-section>
7381
`);
7482
});
7583

76-
describe("accessible: when closed", () => {
84+
describe("accessible: when collapsed", () => {
7785
accessible(html`
7886
<calcite-block-section text="text" toggle-display="switch">
7987
<div>some content</div>
@@ -96,7 +104,7 @@ describe("calcite-block-section", () => {
96104

97105
it("renders section text", async () => {
98106
const page = await newE2EPage({
99-
html: `<calcite-block-section text="test text" open toggle-display="switch"></calcite-block-section>`,
107+
html: `<calcite-block-section text="test text" expanded toggle-display="switch"></calcite-block-section>`,
100108
});
101109
const element = await page.find(`calcite-block-section >>> .${CSS.toggle}`);
102110
expect(element.textContent).toBe("test text");
@@ -105,11 +113,11 @@ describe("calcite-block-section", () => {
105113

106114
describe("toggle-display = 'button' (default)", () => {
107115
describe("accessible", () => {
108-
describe("accessible: when open", () => {
109-
accessible(html`<calcite-block-section text="text" open><div>some content</div></calcite-block-section>`);
116+
describe("accessible: when expanded", () => {
117+
accessible(html`<calcite-block-section text="text" expanded><div>some content</div></calcite-block-section>`);
110118
});
111119

112-
describe("accessible: when closed", () => {
120+
describe("accessible: when collapsed", () => {
113121
accessible(html`<calcite-block-section text="text"><div>some content</div></calcite-block-section>`);
114122
});
115123
});
@@ -126,6 +134,24 @@ describe("calcite-block-section", () => {
126134
});
127135
});
128136

137+
// Broader functionality related to the 'expanded' prop is covered in the `expanded` tests.
138+
it("should map deprecated 'open' prop to 'expanded' prop", async () => {
139+
const page = await newE2EPage({
140+
html: html`<calcite-block-section></calcite-block-section>`,
141+
});
142+
const blockSection = await page.find("calcite-block-section");
143+
144+
expect(await blockSection.getProperty("expanded")).toBe(false);
145+
146+
blockSection.setProperty("open", true);
147+
await page.waitForChanges();
148+
expect(await blockSection.getProperty("expanded")).toBe(true);
149+
150+
blockSection.setProperty("open", false);
151+
await page.waitForChanges();
152+
expect(await blockSection.getProperty("expanded")).toBe(false);
153+
});
154+
129155
describe("status = 'invalid'", () => {
130156
it("displays a status indicator when `status` is an accepted value", async () => {
131157
const page = await newE2EPage({
@@ -153,17 +179,17 @@ describe("calcite-block-section", () => {
153179

154180
expect(await content.isVisible()).toBe(false);
155181

156-
element.setProperty("open", true);
182+
element.setProperty("expanded", true);
157183
await page.waitForChanges();
158-
element = await page.find("calcite-block-section[open]");
184+
element = await page.find("calcite-block-section[expanded]");
159185
content = await page.find(`calcite-block-section >>> .${CSS.content}`);
160186

161187
expect(element).toBeTruthy();
162188
expect(await content.isVisible()).toBe(true);
163189

164-
element.setProperty("open", false);
190+
element.setProperty("expanded", false);
165191
await page.waitForChanges();
166-
element = await page.find("calcite-block-section[open]");
192+
element = await page.find("calcite-block-section[expanded]");
167193
content = await page.find(`calcite-block-section >>> .${CSS.content}`);
168194

169195
expect(element).toBeNull();
@@ -181,13 +207,13 @@ describe("calcite-block-section", () => {
181207
await toggle.click();
182208

183209
expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
184-
expect(await element.getProperty("open")).toBe(true);
210+
expect(await element.getProperty("expanded")).toBe(true);
185211
expect(toggle.getAttribute("aria-expanded")).toBe("true");
186212

187213
await toggle.click();
188214

189215
expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
190-
expect(await element.getProperty("open")).toBe(false);
216+
expect(await element.getProperty("expanded")).toBe(false);
191217
expect(toggle.getAttribute("aria-expanded")).toBe("false");
192218

193219
if ((await element.getProperty("toggleDisplay")) === "switch") {
@@ -196,13 +222,13 @@ describe("calcite-block-section", () => {
196222
await switchToggle.click();
197223

198224
expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
199-
expect(await element.getProperty("open")).toBe(true);
225+
expect(await element.getProperty("expanded")).toBe(true);
200226
expect(toggle.getAttribute("aria-expanded")).toBe("true");
201227

202228
await switchToggle.click();
203229

204230
expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
205-
expect(await element.getProperty("open")).toBe(false);
231+
expect(await element.getProperty("expanded")).toBe(false);
206232
expect(toggle.getAttribute("aria-expanded")).toBe("false");
207233
}
208234

@@ -224,22 +250,22 @@ describe("calcite-block-section", () => {
224250
await page.waitForChanges();
225251

226252
expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
227-
expect(await element.getProperty("open")).toBe(true);
253+
expect(await element.getProperty("expanded")).toBe(true);
228254
expect(toggle.getAttribute("aria-expanded")).toBe("true");
229255

230256
await keyboardToggleEmitter.press("Enter");
231257
await page.waitForChanges();
232258

233259
expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
234-
expect(await element.getProperty("open")).toBe(false);
260+
expect(await element.getProperty("expanded")).toBe(false);
235261
expect(toggle.getAttribute("aria-expanded")).toBe("false");
236262
}
237263

238264
describe("theme", () => {
239265
describe("default", () => {
240266
themed(
241267
html`
242-
<calcite-block-section text="Planes" open icon-end="pen" icon-start="pen" text="a block-section">
268+
<calcite-block-section text="Planes" expanded icon-end="pen" icon-start="pen" text="a block-section">
243269
<p>Block section content</p>
244270
</calcite-block-section>
245271
`,

‎packages/calcite-components/src/components/block-section/block-section.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* These properties can be overridden using the component's tag as selector.
55
*
66
* @prop --calcite-block-section-background-color: Specifies the component's background color.
7-
* @prop --calcite-block-section-border-color: Specifies the component's border color. When `open`, applies to the component's bottom border.
7+
* @prop --calcite-block-section-border-color: Specifies the component's border color. When `expanded`, applies to the component's bottom border.
88
* @prop --calcite-block-section-header-text-color: Specifies the component's header text color.
99
* @prop --calcite-block-section-text-color: Specifies the component's text color.
1010
* @prop --calcite-block-section-text-color-hover: Specifies the component's text color on hover.
@@ -26,7 +26,7 @@ calcite-switch {
2626
// --calcite-switch-handle-shadow: var(--calcite-block-section-switch-handle-shadow);
2727
}
2828

29-
:host([open]) {
29+
:host([expanded]) {
3030
@apply border-0
3131
border-b
3232
border-solid;

‎packages/calcite-components/src/components/block-section/block-section.tsx

+41-10
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { FlipContext, Status } from "../interfaces";
66
import { componentFocusable } from "../../utils/component";
77
import { IconNameOrString } from "../icon/interfaces";
88
import { useT9n } from "../../controllers/useT9n";
9+
import { logger } from "../../utils/logger";
910
import T9nStrings from "./assets/t9n/messages.en.json";
1011
import { BlockSectionToggleDisplay } from "./interfaces";
1112
import { CSS, ICONS, IDS } from "./resources";
@@ -27,6 +28,9 @@ export class BlockSection extends LitElement {
2728

2829
// #region Public Properties
2930

31+
/** When `true`, the component is expanded to show child components. */
32+
@property({ reflect: true }) expanded = false;
33+
3034
/** Specifies an icon to display at the end of the component. */
3135
@property({ reflect: true }) iconEnd: IconNameOrString;
3236

@@ -46,8 +50,24 @@ export class BlockSection extends LitElement {
4650
*/
4751
messages = useT9n<typeof T9nStrings>();
4852

49-
/** When `true`, expands the component and its contents. */
50-
@property({ reflect: true }) open = false;
53+
/**
54+
* When `true`, expands the component and its contents.
55+
*
56+
* @deprecated Use `expanded` prop instead.
57+
*/
58+
@property({ reflect: true })
59+
get open(): boolean {
60+
return this.expanded;
61+
}
62+
63+
set open(value: boolean) {
64+
logger.deprecated("property", {
65+
name: "open",
66+
removalVersion: 4,
67+
suggested: "expanded",
68+
});
69+
this.expanded = value;
70+
}
5171

5272
/**
5373
* Displays a status-related indicator icon.
@@ -99,7 +119,7 @@ export class BlockSection extends LitElement {
99119
}
100120

101121
private toggleSection(): void {
102-
this.open = !this.open;
122+
this.expanded = !this.expanded;
103123
this.calciteBlockSectionToggle.emit();
104124
}
105125

@@ -146,10 +166,10 @@ export class BlockSection extends LitElement {
146166
}
147167

148168
override render(): JsxNode {
149-
const { messages, open, text, toggleDisplay } = this;
150-
const arrowIcon = open ? ICONS.menuOpen : ICONS.menuClosed;
169+
const { messages, expanded, text, toggleDisplay } = this;
170+
const arrowIcon = expanded ? ICONS.menuExpanded : ICONS.menuCollapsed;
151171

152-
const toggleLabel = open ? messages.collapse : messages.expand;
172+
const toggleLabel = expanded ? messages.collapse : messages.expand;
153173

154174
const headerNode =
155175
toggleDisplay === "switch" ? (
@@ -160,7 +180,7 @@ export class BlockSection extends LitElement {
160180
>
161181
<div
162182
aria-controls={IDS.content}
163-
ariaExpanded={open}
183+
ariaExpanded={expanded}
164184
class={{
165185
[CSS.toggle]: true,
166186
[CSS.toggleSwitch]: true,
@@ -179,7 +199,13 @@ export class BlockSection extends LitElement {
179199

180200
{this.renderIcon(this.iconEnd)}
181201
{this.renderStatusIcon()}
182-
<calcite-switch checked={open} class={CSS.switch} inert label={toggleLabel} scale="s" />
202+
<calcite-switch
203+
checked={expanded}
204+
class={CSS.switch}
205+
inert
206+
label={toggleLabel}
207+
scale="s"
208+
/>
183209
</div>
184210
</div>
185211
) : (
@@ -190,7 +216,7 @@ export class BlockSection extends LitElement {
190216
>
191217
<button
192218
aria-controls={IDS.content}
193-
ariaExpanded={open}
219+
ariaExpanded={expanded}
194220
class={{
195221
[CSS.sectionHeader]: true,
196222
[CSS.toggle]: true,
@@ -210,7 +236,12 @@ export class BlockSection extends LitElement {
210236
return (
211237
<>
212238
{headerNode}
213-
<section aria-labelledby={IDS.toggle} class={CSS.content} hidden={!open} id={IDS.content}>
239+
<section
240+
aria-labelledby={IDS.toggle}
241+
class={CSS.content}
242+
hidden={!expanded}
243+
id={IDS.content}
244+
>
214245
<slot />
215246
</section>
216247
</>

‎packages/calcite-components/src/components/block-section/resources.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ export const CSS = {
2222
};
2323

2424
export const ICONS = {
25-
menuOpen: "chevron-up",
26-
menuClosed: "chevron-down",
25+
menuExpanded: "chevron-up",
26+
menuCollapsed: "chevron-down",
2727
valid: "check-circle",
2828
invalid: "exclamation-mark-triangle",
2929
} as const;

0 commit comments

Comments
 (0)