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

Wiki page

https://github.com/Esri/calcite-design-system/wiki/hiddenItem-Property

…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.

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

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.

jcfranco

👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻
👻✅👻👻👻✅👻✅✅✅👻👻✅✅✅👻✅✅✅✅👻✅👻
👻✅✅👻👻✅👻👻✅👻👻✅👻👻👻👻✅👻👻👻👻✅👻
👻✅👻✅👻✅👻👻✅👻👻✅👻👻👻👻✅✅✅👻👻✅👻
👻✅👻👻✅✅👻👻✅👻👻✅👻👻👻👻✅👻👻👻👻👻👻
👻✅👻👻👻✅👻✅✅✅👻👻✅✅✅👻✅✅✅✅👻✅👻
👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻

Once comments are addressed, this will be good to merge! Thanks, @josercarcamo!

jcfranco · 2025-01-21T17:18:18Z

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

@@ -53,6 +53,13 @@ export class ComboboxItemGroup extends LitElement {
   */
  @property() scale: Scale = "m";

+  /**
+   * Specifies whether the user set the hidden attribute in the HTML


This comment doesn't seem to be accurate. Can you give it another look? Applies to most hiddenItem prop doc.

jcfranco · 2025-01-21T17:22:10Z

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

-    );
+  it.each(["disabled", "hidden"])(
+    "should select the next enabled stepper-item if first stepper-item is %s",
+    async (accessibility) => {


IMO, accessibility seems out of place here. Would stateProp be a better fit?

jcfranco · 2025-01-21T17:24:41Z

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

@@ -390,7 +391,8 @@ export class Stepper extends LitElement {

  private handleDefaultSlotChange(event: Event): void {
    const items = slotChangeGetAssignedElements(event).filter(
-      (el): el is StepperItem["el"] => el?.tagName === "CALCITE-STEPPER-ITEM",
+      (el): el is StepperItem["el"] =>
+        el?.tagName === "CALCITE-STEPPER-ITEM" && !isHidden(el as StepperItem["el"]),


Can you confirm if you need to typecast here? It looks like el is properly typed by the filter's return type.

It seems like the type casting is needed:

driskull

Looking good @josercarcamo 👍

driskull · 2025-01-21T19:26:41Z

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"]>(el: C): boolean {


Maybe we could have an interface for HiddenItem that each of these components could implement? Then this utility may not be necessary.

I don't think an interface is appropriate here since they all behave the same. A parent class would be more appropriate. This way we wouldn't need to pass anything to the method. However, we would only have this one method.

Now that we're using lit, we may be able to have a class that these could extend.

We're moving more towards controllers, so we could enforce the interface this way. This would be handled separately from this PR.

We can handle this separately with a followup

driskull · 2025-01-21T19:30:20Z

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

+   *
+   * @private
+   */
+  @property({ reflect: true }) hiddenItem = false;


Should we have e2e defaults and reflects tests for each of these new private properties?

Not for internal props, but the controller approach could help us test this behavior.

Not for internal props, but the controller approach could help us test this behavior.

It would be beneficial even for internal props because if this property isn't reflected then the CSS and querySelector logic won't work. I would think it would be beneficial

That should be handled by the controller testing.

…github.com:Esri/calcite-design-system into josercarcamo/8623-respect-user-hidden-attribute-v2

josercarcamo · 2025-01-21T20:14:03Z

@driskull are you ok with handling your two comments in a separate PR and merge this PR for now?

driskull · 2025-01-22T00:18:54Z

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

+   *
+   * @private
+   *  */
+  @property({ reflect: true }) hiddenItem = false;


nitpick: would itemHidden be preferred here? it aligns better with our other props like feature-disabled.

I had proposed that but it was decided to go with hiddenItem.

@jcfranco what you think? 🤔 It doesn't matter much since its a private property but would align better with other props as itemHidden or even calciteHidden to illustrate that calcite is hiding this.

Renaming sounds good for consistency. @josercarcamo I'll defer to you whether you want to tackle that here or separately.

I'll tackle it here. I'll change it to calciteHidden, if there are no objections.

driskull · 2025-01-22T00:19:36Z

Should we have a followup issue to use itemHidden/hiddenItem in place of filterHidden and any other props we use to hide items?

josercarcamo · 2025-01-22T15:41:40Z

@driskull I'll create a separate issue as renaming in other components might need further changes and testing. I just want to close this one knowing that it is solid. Then we can make further changes.

driskull · 2025-01-22T19:21:33Z

I'll create a separate issue as renaming in other components might need further changes and testing. I just want to close this one knowing that it is solid. Then we can make further changes.

Sounds good. I like calcite-hidden as it aligns with our other global attributes like calcite-hydrated.

driskull

👍

jcfranco · 2025-01-22T20:29:22Z

Sounds good. I like calcite-hidden as it aligns with our other global attributes like calcite-hydrated.

Sorry for chiming in late here, but calcite-hydrated is a special case, doesn't have a corresponding prop, and we don't prefix internal props with calcite. I'd suggest itemHidden, sticking with the previous name or to find an alternative name.

This can be done as a follow-up since it is internal.

…te-v2

* origin/dev: (34 commits) build: update browserslist db (#11339) build(deps): update dependency lint-staged to v15.4.1 (#11343) chore: release next feat(graph): add component tokens (#11355) chore: release next fix(popover, tooltip): drop relative-positioning to reduce risk of clipping (#11373) chore: release next fix(date-picker): no longer disable min/max value month in select menu (#11350) chore(icon): improve icon load error message (#11367) fix(date-picker): remove outline for header actions (#11369) chore: release next fix(carousel): Ensure correct `autoplay` display and animation (#11338) chore: release next fix(flow): process items on loaded (#11364) chore: release next fix(combobox, stepper, table): respect user hidden attribute (#10983) refactor(action-pad): restore rounded styling (#11358) test(combobox): avoid emitting change event for value property update (#11281) chore: release next refactor(action-pad): remove unnecessary overflow css styling. (#11349) ...

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

jcfranco approved these changes Jan 21, 2025

View reviewed changes

driskull requested changes Jan 21, 2025

View reviewed changes

josercarcamo added 2 commits January 21, 2025 11:43

Changed wording of comment and name of argument

4f6d67a

Merge branch 'josercarcamo/8623-respect-user-hidden-attribute-v2' of …

e07beac

…github.com:Esri/calcite-design-system into josercarcamo/8623-respect-user-hidden-attribute-v2

driskull reviewed Jan 22, 2025

View reviewed changes

jcfranco requested a review from driskull January 22, 2025 19:18

driskull approved these changes Jan 22, 2025

View reviewed changes

Renamed 'hiddenItem' to 'calciteHidden'

8c8c883

josercarcamo mentioned this pull request Jan 22, 2025

Replace Props Used to Hide Items with itemHidden Property #11360

Open

5 tasks

josercarcamo and others added 2 commits January 22, 2025 12:42

Renamed 'calciteHidden' to 'itemHidden'

d867b85

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

26f24a1

…te-v2

josercarcamo added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jan 22, 2025

josercarcamo merged commit 42fd9c5 into dev Jan 22, 2025
14 checks passed

josercarcamo deleted the josercarcamo/8623-respect-user-hidden-attribute-v2 branch January 22, 2025 22:05

github-actions bot added this to the 2025-01-30 - 3.0.0 Jan Breaking Change Release milestone Jan 22, 2025

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

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

Conversation

josercarcamo commented Dec 4, 2024 • edited Loading

Summary

Wiki page

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

josercarcamo commented Jan 20, 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

driskull 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

josercarcamo commented Jan 21, 2025

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

driskull commented Jan 22, 2025

josercarcamo commented Jan 22, 2025

driskull commented Jan 22, 2025

driskull left a comment

Choose a reason for hiding this comment

jcfranco commented Jan 22, 2025 • edited Loading

josercarcamo commented Dec 4, 2024 •

edited

Loading

jcfranco commented Jan 22, 2025 •

edited

Loading