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.

Sign up for GitHub

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

Jump to bottom

[Filter panel] Heading knob not updating #7441

Closed
2 tasks done
emyarod opened this issue Oct 19, 2021 · 4 comments · Fixed by #8362
Closed
2 tasks done

[Filter panel] Heading knob not updating #7441

emyarod opened this issue Oct 19, 2021 · 4 comments · Fixed by #8362
Assignees
@jkaeser
Labels
bug Something isn't working dev Needs some dev work owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround

Comments

@emyarod
Copy link
Member

emyarod commented Oct 19, 2021 •
edited by proeung
Loading

Engineering info:

Description

When changing the filter panel heading knob in Storybook, the filter panel heading value does not update

Component(s) impacted

Filter panel

Browser

No response

Carbon for IBM.com version

canary

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://ibmdotcom-web-components-canary.mybluemix.net/?path=/story/components-filter-panel--default

Steps to reproduce the issue (if applicable)

Screen.Recording.2021-10-19.at.12.16.51.PM.mov

Release date (if applicable)

No response

Code of Conduct
@emyarod emyarod added bug Something isn't working documentation Improvements or additions to documentation dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package labels Oct 19, 2021
@emyarod emyarod mentioned this issue Oct 20, 2021
Merged
@emyarod
Copy link
Member Author

emyarod commented Oct 20, 2021

While looking into #6677, I noticed that the storybook knobs would not update the filter panel heading as expected (#7441), so it seems that the props and internal state need to be reconciled for this to be resolved. Resolving this should also improve support for translated strings, as the "Filter" heading is currently hard coded

kodiakhq bot pushed a commit that referenced this issue Oct 20, 2021
@emyarod
fix(filter-panel): prevent accordion state resetting on input selecti…
0a41071 
…on (#7452)

### Related Ticket(s)

#6677

### Description

This PR resolves an issue with the filter panel where panel groups would unexpectedly collapse on selection of filter items. It also addresses the issue of inconsistent filter panel headings, so it now reflects the number of selections in the standalone filter panel (matching the filter panel modal)

https://user-images.githubusercontent.com/8265238/138103411-8225e811-1446-4dce-88db-20a9cef12670.mov

It looks like the light DOM controls the filter panel modal and the shadow DOM controls the standalone filter panel. I'm a bit iffy on changing light DOM attributes after iterating through the shadow DOM but I think this approach is required given the current construction of the component (need some more feedback on that)

While looking into this, I noticed that the storybook knobs would not update the filter panel heading as expected (#7441), so it seems that the props and internal state need to be reconciled for this to be resolved. Resolving this should also improve support for translated strings, as the "Filter" heading is currently hard coded. The component may be due for a refactor but that can probably be done separately from the work for #6677

### Changelog

**Changed**

- making selections in the standalone filter panel (large viewport widths) should no longer collapse filter groups
- filter panel heading now matches filter panel modal

**Removed**

- unused component methods

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
@RobertaJHahn RobertaJHahn added the severity 3 Affects minor functionality, has a workaround label Oct 21, 2021
@jeffchew jeffchew added this to the Sprint 21-25 milestone Oct 26, 2021
@jeffchew jeffchew removed this from the Sprint 21-25 milestone Jan 4, 2022
@jeffchew jeffchew added follow-up: innovation team owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants and removed follow-up: innovation team labels Feb 4, 2022
@proeung
Copy link
Contributor

proeung commented Feb 7, 2022

@jkaeser I'm going to assign this issue to you since you've been working on the Filter Panel component. 👍

@proeung
Copy link
Contributor

proeung commented Feb 11, 2022

I'm going to move this issue up to Sprint: 04 as I don't think we'll be able to get a PR up and reviewed/approved in time for today's code freeze period.

cc: @ljcarot @jeffchew

@jkaeser
Copy link
Member

jkaeser commented Feb 15, 2022

This isn't a bug with the Storybook configuration; the light DOM heading element does update when the knob value changes. However, this doesn't trigger anything in the composite to re-render the heading in the other places it is used. Ideally we can emit an event from the <dds-filter-panel-heading> when it changes that triggers the composite to fire its _renderStatus() method.

@proeung proeung removed the documentation Improvements or additions to documentation label Feb 21, 2022
@jkaeser jkaeser mentioned this issue Feb 23, 2022
Merged
@kodiakhq kodiakhq bot closed this as completed in #8362 Feb 24, 2022
kodiakhq bot pushed a commit that referenced this issue Feb 24, 2022
@jkaeser
fix(filter-panel): update heading when knob changes (#8362)
1a1079b 
### Related Ticket(s)

Resolves #7441

### Description

The `<dds-filter-panel-composite>`'s heading appears in multiple places, each of which is essentially copied from a source `<dds-filter-panel-heading>` in the `heading` slot. The problem was that changes to this source were not being reflected in all the places that copy it (i.e. the modal button, the modal header, and the desktop header).

The changes in this PR result in changes to the story's "heading" knob updating the heading everywhere it appears.

### Changelog

**New**

- `DDSFilterPanelHeading` emits an event when its slotted content changes.
- `DDSFilterPanelComposite` propagates changes to source header to modal button text, modal header text, and desktop header text.

**Changed**

- Changes to the "heading" knob are reflected in the component.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jkaeser jkaeser

Labels
bug Something isn't working dev Needs some dev work owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(filter-panel): update heading when knob changes jkaeser/carbon-for-ibm-dotcom
9 participants
@kennylam @jeffchew @proeung @emyarod @jkaeser @shixiedesign @ljcarot @oliviaflory @RobertaJHahn