fix(combobox, stepper, table): respect user hidden attribute #10983

josercarcamo · 2024-12-04T21:18:40Z

Related Issue: #8623

Summary

Made items with the hide-item attribute added by the user stay hidden.

This PR supersedes #10515

…te-v2

jcfranco · 2024-12-12T23:35:46Z

@josercarcamo This is missing the utilities mentioned in item 2 from the previous review. Could you update your PR to include them?

Since this supersedes the previous PR, can you close it?

jcfranco

Good progress, @josercarcamo! 😎 This needs a few more tweaks, and it'll be good to go!

jcfranco · 2024-12-12T23:36:32Z

packages/calcite-components/src/assets/styles/includes.scss

@@ -97,10 +97,8 @@
 }

 @mixin base-component() {
-  :host([hidden]) {


Since the internal hide-item attribute is only applicable to certain components, can you create a separate mixin and include in applicable children?

jcfranco · 2024-12-12T23:38:16Z

packages/calcite-components/src/components/combobox-item/combobox-item.tsx

+   * Specifies whether the user set the hidden attribute in the HTML
+   *
+   */
+  @property() hideItem = false;


Thanks for removing user from the prop name! To align with hidden, WDYT about hiddenItem?

jcfranco · 2024-12-12T23:43:33Z

packages/calcite-components/src/components/stepper/stepper.e2e.ts

@@ -262,37 +262,48 @@ describe("calcite-stepper", () => {
          <calcite-stepper-item heading="Step 3" id="step-3">
            <div>Step 3 content</div>
          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 4" id="step-4" hide-item>


FIXME: hide-item is internal, so it shouldn't be used in tests. You'll need to update lines like the following to use the internal prop instead. This change will ensure users can hide elements without our components making them unintentionally visible.

jcfranco · 2024-12-12T23:49:50Z

packages/calcite-components/src/components/table/table.e2e.ts

@@ -1642,9 +1689,8 @@ describe("keyboard navigation", () => {
    await page.keyboard.press("PageUp");
    await page.waitForChanges();
    expect(await getFocusedElementProp(page, "id")).toBe("head-1b");
-    await page.keyboard.down("ControlRight");
+    page.keyboard.press("ControlRight");


This should use await and changing it to press will cause it to no longer go into the expected End + ControlRight path here (i.e., ControlRight is pressed and released before End is pressed).

github-actions · 2024-12-20T01:58:25Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

…te-v2

josercarcamo · 2025-01-13T22:38:03Z

@jcfranco please review again.

…te-v2

jcfranco

Great stuff, @josercarcamo! One more pass and this should be good to go!

BTW, these changes caused some combobox and input-time-zone tests to fail, so they'll need to be updated.

jcfranco · 2025-01-14T18:06:17Z

packages/calcite-components/src/components/combobox/combobox.e2e.ts

@@ -863,6 +863,56 @@ describe("calcite-combobox", () => {
    }
  });

+  it("should show correct number of items when child hidden", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`


Can you use the html formatting helper, so prettier formats embedded HTML? Applies to other test page markup.

jcfranco · 2025-01-14T18:09:25Z

packages/calcite-components/src/components/stepper/stepper.e2e.ts

      await element.callMethod("prevStep");
      await page.waitForChanges();
      expect(step1).toHaveAttribute("selected");
      expect(step2).not.toHaveAttribute("selected");
      expect(step3).not.toHaveAttribute("selected");
+      expect(step4).not.toHaveAttribute("selected");


Can you update this test to step through the hidden item? It currently skips it: 1 ➡️ 3 (skips 2) ⬅️ 1 (skips 2). It should still be ignored, but the test should at least step through it.

jcfranco · 2025-01-14T18:28:56Z

packages/calcite-components/src/components/stepper/stepper.e2e.ts

-      </calcite-stepper>`,
-    );
+  it("should select the next enabled stepper-item if first stepper-item is disabled or hidden", async () => {
+    for (const n of ["disabled", "hidden"]) {


Let's use it.each for this instead.

jcfranco · 2025-01-14T18:29:53Z

packages/calcite-components/src/components/stepper/stepper.e2e.ts

@@ -843,6 +877,9 @@ describe("calcite-stepper", () => {
          <calcite-stepper-item heading="Step 2" id="step-2" disabled>
            <div>Step 2 content</div>
          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 2.1" id="step-2.1" hidden>


For consistency, can you update all steps to be integers?

jcfranco · 2025-01-14T18:57:30Z

packages/calcite-components/src/components/stepper-item/stepper-item.tsx

@@ -274,6 +281,8 @@ export class StepperItem extends LitElement implements InteractiveComponent, Loa
  private handleItemClick(event: MouseEvent): void {
    if (
      this.disabled ||
+      this.hiddenItem ||


This can use isHidden, right?

When I run the e2e tests, this is what I get:

Can you try passing the element instead of the instance? You'll get that error if you pass the latter.

jcfranco · 2025-01-14T19:03:10Z

packages/calcite-components/src/utils/component.ts

@@ -26,3 +29,7 @@ export function warnIfMissingRequiredProp<C extends LitElement>(
    logger.warn(`[${component.el.localName}] "${newProp.toString()}" or "${deprecatedProp.toString()}" is required.`);
  }
 }
+
+export function isHidden<C extends ComboboxChildElement | StepperItem["el"] | TableRow["el"]>(component: C): boolean {
+  return component?.hidden || component?.hiddenItem;


Can component be undefined here?

jcfranco · 2025-01-14T19:25:31Z

packages/calcite-components/src/components/table/table.e2e.ts

+      const items = await page.findAll("calcite-table-row");
+      for (let i = 0; i < items.length; i++) {
+        const style = await items[i].getComputedStyle();
+        expect(style["display"]).toBe(i === 2 || i === 3 ? "none" : "contents");


This test might go away, but I think you can use E2EElement.isVisible for these assertions.

jcfranco · 2025-01-14T19:27:28Z

packages/calcite-components/src/components/table/table.e2e.ts

@@ -34,6 +34,41 @@ describe("calcite-table", () => {
      </calcite-table>`,
      { display: "flex" },
    );
+
+    it("renders only non-hidden rows", async () => {


I think we can drop this test since it's testing native browser behavior.

jcfranco · 2025-01-14T19:30:11Z

packages/calcite-components/src/utils/component.ts

@@ -26,3 +29,7 @@ export function warnIfMissingRequiredProp<C extends LitElement>(
    logger.warn(`[${component.el.localName}] "${newProp.toString()}" or "${deprecatedProp.toString()}" is required.`);
  }
 }
+
+export function isHidden<C extends ComboboxChildElement | StepperItem["el"] | TableRow["el"]>(component: C): boolean {


For consistency, can we rename the input argument to el?

…te-v2

josercarcamo · 2025-01-20T04:56:13Z

@jcfranco one more review please.

fix(combobox, stepper, table): respect user hidden attribute

6dfa7c9

github-actions bot assigned josercarcamo Dec 4, 2024

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Dec 4, 2024

Merge branch 'dev' into josercarcamo/8623-respect-user-hidden-attribu…

cddcabd

…te-v2

jcfranco requested changes Dec 12, 2024

View reviewed changes

josercarcamo mentioned this pull request Dec 16, 2024

fix(combobox, stepper, table, tip-manager): respect user hidden attribute #10515

Closed

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Dec 20, 2024

josercarcamo added 4 commits January 7, 2025 16:40

Merged dev

ff38449

Fixed all e2e tests for combobox

e843d98

Fixed all tests for table

e425670

Removed unnecessary change

1c3680c

github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label Jan 9, 2025

josercarcamo and others added 6 commits January 9, 2025 13:29

Changed hideItem to hiddenItem and fixed test cases

4772e23

Finished addressing all code review comments

46686b4

Added hidden-item mixin

dfb66ae

Removed unnecessary test change

759791a

Merged dev

eee513d

Merge branch 'dev' into josercarcamo/8623-respect-user-hidden-attribu…

3e38b65

…te-v2

Merge branch 'dev' into josercarcamo/8623-respect-user-hidden-attribu…

284d75c

…te-v2

jcfranco requested changes Jan 14, 2025

View reviewed changes

josercarcamo added 7 commits January 16, 2025 16:08

Merge branch 'dev' into josercarcamo/8623-respect-user-hidden-attribu…

09af985

…te-v2

Used html formatter

c88ca71

Parameterized disabled/hidden

a90211f

Changed step number to integer

7d1f446

Removed optional chaining operator; fixed combobox e2e error

f8a9016

Refactored statement in test per code review

37cabf8

Removed unnecessary test per review

3e146b9

josercarcamo and others added 6 commits January 17, 2025 17:42

Renamed argument to el

1d4a2d3

Replaced conditional with use of isHidden

a46227d

Changed test to step through hidden element

da25db2

Fixed combobox test failure

ca3fedc

Fixed errors caused by hidden combobox item'

a3ea10a

Merge branch 'dev' into josercarcamo/8623-respect-user-hidden-attribu…

7da4daa

…te-v2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(combobox, stepper, table): respect user hidden attribute #10983

fix(combobox, stepper, table): respect user hidden attribute #10983

josercarcamo commented Dec 4, 2024 •

edited

Loading

jcfranco commented Dec 12, 2024

jcfranco left a comment

jcfranco Dec 12, 2024

jcfranco Dec 12, 2024

jcfranco Dec 12, 2024

jcfranco Dec 12, 2024

github-actions bot commented Dec 20, 2024

josercarcamo commented Jan 13, 2025

jcfranco left a comment

jcfranco Jan 14, 2025

jcfranco Jan 14, 2025

jcfranco Jan 14, 2025

jcfranco Jan 14, 2025

jcfranco Jan 14, 2025

josercarcamo Jan 17, 2025

jcfranco Jan 17, 2025

jcfranco Jan 14, 2025

jcfranco Jan 14, 2025

jcfranco Jan 14, 2025

jcfranco Jan 14, 2025

josercarcamo commented Jan 20, 2025

fix(combobox, stepper, table): respect user hidden attribute #10983

Are you sure you want to change the base?

fix(combobox, stepper, table): respect user hidden attribute #10983

Conversation

josercarcamo commented Dec 4, 2024 • edited Loading

Summary

jcfranco commented Dec 12, 2024

jcfranco left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Dec 20, 2024

josercarcamo commented Jan 13, 2025

jcfranco left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

josercarcamo commented Jan 20, 2025

josercarcamo commented Dec 4, 2024 •

edited

Loading