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] Web Component: add View all link for filter groups - DDS Consulting #7405

Closed
11 tasks
RobertaJHahn opened this issue Oct 15, 2021 · 4 comments · Fixed by #8188 or #8258
Closed
11 tasks

[Filter panel] Web Component: add View all link for filter groups - DDS Consulting #7405

RobertaJHahn opened this issue Oct 15, 2021 · 4 comments · Fixed by #8188 or #8258
Assignees
@jkaeser @IgnacioBecerra
Labels
adopter: AEM used when component or pattern will be used by this adopter adopter support 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 priority: high

Comments

@RobertaJHahn
Copy link

RobertaJHahn commented Oct 15, 2021 •
edited by proeung
Loading

Engineering info:

User Story

As a [user role below]:
Carbon for ibm.com developer

I need to:
create/change the Filter panel

so that I can:
provide the ibm.com adopter developers components they can use to build ibm.com web pages

Additional information

Acceptance criteria

  • Include README for the web component and corresponding styles
  • Create Web Components styles in styles package
  • Do not create knobs in Storybook that include JSON objects
  • Break out Storybook stories into multiple variation stories, if applicable
  • Create codesandbox example under /packages/web-components/examples/codesandbox and include in README
  • Minimum 80% unit test coverage
  • Update the Carbon for ibm.com website component data file to be sure the web site Component Status and Storybook links are correct
  • Use the Visual QA checklist to verify design quality
  • If a design is provided, the Designer is included as a Reviewer in the Pull Request
  • Provide a direct link to the deploy preview for the designer in the Pull Request description
  • A comment is posted in the Prod QA issue, tagging Praveen when development is finished
@RobertaJHahn RobertaJHahn added adopter support adopter: AEM used when component or pattern will be used by this adopter dev Needs some dev work priority: high package: web components Work necessary for the IBM.com Library web components package labels Oct 15, 2021
This was referenced Oct 15, 2021
Closed
Closed
@shixiedesign
Copy link
Contributor

This feature already exist in design and func spec. Just need dev issues.

@RobertaJHahn RobertaJHahn reopened this Oct 20, 2021
@RobertaJHahn
Copy link
Author

@shixiedesign reopenning.... This is the dev issue.

@RobertaJHahn RobertaJHahn changed the title [Filter panel] Web Component: add View all and View less links for filter groups [Filter panel] Web Component: add View all link for filter groups Oct 20, 2021
@jeffchew jeffchew added this to the Sprint 21-24 milestone Oct 26, 2021
@emyarod emyarod self-assigned this Nov 23, 2021
@jeffchew jeffchew removed this from the Sprint 21-25 milestone Jan 4, 2022
@jeffchew
Copy link
Member

jeffchew commented Jan 4, 2022

@emyarod going to put this back in pending scheduling until we re-jigger the sprints for January. Unassigning from you for now.

@jeffchew jeffchew changed the title [Filter panel] Web Component: add View all link for filter groups [Filter panel] Web Component: add View all link for filter groups - DDS Consulting Jan 18, 2022
@jeffchew jeffchew added 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 Jan 18, 2022
@proeung proeung assigned jkaeser and unassigned proeung Jan 18, 2022
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 1, 2022
@jkaeser
feat(filter-panel): begin adding view all functionality (carbon-desig…
5b8b40d 
…n-system#7405)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 1, 2022
@jkaeser
feat(filter-panel): style view all buttons (carbon-design-system#7504)
76220e6 
feat(filter-panel): style view all buttons (carbon-design-system#7405)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 1, 2022
@jkaeser
feat(filter-panel): make revealed state persistent (carbon-design-sys…
472649b 
…tem#7405)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 1, 2022
@jkaeser
feat(filter-panel): make composite rendering logic more obvious (carb…
0c5e99c 
…on-design-system#7405)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 1, 2022
@jkaeser
feat(filter-panel): ensure behavior works in modal and desktop (carbo…
366f0fb 
…n-design-system#7405)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 1, 2022
@jkaeser
feat(filter-panel): active filters should not be hidden (carbon-desig…
a29f4d3 
…n-system#7405)
@jkaeser jkaeser mentioned this issue Feb 1, 2022
Merged
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 1, 2022
@jkaeser
feat(filter-panel): active filters should not be hidden (carbon-desig…
21f26e9 
…n-system#7405)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 2, 2022
@jkaeser
feat(filter-panel): add e2e test coverage (carbon-design-system#7405)
3f54121
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 2, 2022
@jkaeser
feat(filter-panel): add storybook knobs (carbon-design-system#7405)
87a20cb
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 2, 2022
@jkaeser
feat(filter-panel): fix linting errors (carbon-design-system#7405)
7172c73
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 2, 2022
@jkaeser
feat(filter-panel): use ghost button styles (carbon-design-system#7405)
15e6e40
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 3, 2022
@jkaeser
feat(filter-panel): set focus on reveal (carbon-design-system#7405)
d08eeaa
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 3, 2022
@jkaeser
feat(filter-panel): match default knob values to specs (carbon-design…
84a738b 
…-system#7405)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 3, 2022
@jkaeser
feat(filter-panel): fix corner case reveal error (carbon-design-syste…
3fef125 
…m#7405)

Fixes an issue where: given I open a filter group with excess filters, and
I reveal all filters, and I select a previously hidden filter, and I close
the filter group, and I reopen the filter group, and I unselect the previously
selected filter, then the filter group re-hides the excess filters.
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 3, 2022
@jkaeser
feat(filter-panel): allow select items to delegate focus (carbon-desi…
d227d59 
…gn-system#7405)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 4, 2022
@jkaeser
feat(filter-panel): follow event naming conventions (carbon-design-sy…
8a4c5cd 
…stem#7405)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 4, 2022
@jkaeser
feat(filter-panel): name method more descriptively (carbon-design-sys…
38f9473 
…tem#7405)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 4, 2022
@jkaeser
feat(filter-panel): apply carbon focus-visible state (carbon-design-s…
44f03b4 
…ystem#7405)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 8, 2022
@jkaeser
feat(filter-panel): document event name getter (carbon-design-system#…
116b638 
…7405)

This prevents CI from producing an error for reasons that are unclear
to me.
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 8, 2022
@jkaeser
feat(filter-panel): do not rely on type casting (carbon-design-system…
fce1b8e 
…#7405)
@ljcarot ljcarot closed this as completed Feb 10, 2022
kodiakhq bot pushed a commit that referenced this issue Feb 10, 2022
@jkaeser
feat(filter-panel): add view all button for filter groups (#8188)
6a55992 
### Related Ticket(s)

Resolves #7405 

### Description

Adds support for "view all" buttons in `DDSFilterGroupItem` components. 

- The button text defaults to "View all" and can be changed with the `view-all-text` attribute.
- The button appears when the number of filters in the group exceeds the `max-filters` attribute value. This defaults to 7, as per the functional specs.
- When the button appears, the number of filters specified by the `filter-cutoff` attribute are shown at first (defaults to 5 as per functional specs). The hidden filters are revealed once the button has been clicked.
- The shown/hidden filters are reset once the filter group is toggled closed and then re-opened.
   - There is one exception to this: if one of the filters that would be hidden has been selected, all filter items are revealed when re-opening the filter group.

### Changelog

**New**
- "View all" buttons render in `DDSFilterGroupItem` components when a sufficient number of filters are present in the group.

**Changed**

- Split the `DDSFilterPanelComposite`'s modal and desktop rendering into two methods to make it more obvious what's going on.

<!-- 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) -->
@jkaeser jkaeser mentioned this issue Feb 13, 2022
Merged
@jeffchew jeffchew reopened this Feb 14, 2022
@jeffchew
Copy link
Member

@IgnacioBecerra @jkaeser reopened this since the work has to be re-merged in.

cc: @kennylam @oliviaflory

jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 15, 2022
@jkaeser
feat(filter-panel): do not break react wrapper builds (carbon-design-…
48c4ad4 
…system#7405)
@kodiakhq kodiakhq bot closed this as completed in #8258 Feb 15, 2022
kodiakhq bot pushed a commit that referenced this issue Feb 15, 2022
@jkaeser
feat(filter-panel): add view all button for filter groups (#8258)
d1ecf59 
### Related Ticket(s)

Resolves #7405 

### Description

Adds support for "view all" buttons in `DDSFilterGroupItem` components. 

- The button text defaults to "View all" and can be changed with the `view-all-text` attribute.
- The button appears when the number of filters in the group exceeds the `max-filters` attribute value. This defaults to 7, as per the functional specs.
- When the button appears, the number of filters specified by the `filter-cutoff` attribute are shown at first (defaults to 5 as per functional specs). The hidden filters are revealed once the button has been clicked.
- The shown/hidden filters are reset once the filter group is toggled closed and then re-opened.
   - There is one exception to this: if one of the filters that would be hidden has been selected, all filter items are revealed when re-opening the filter group.

### Changelog

**New**
- "View all" buttons render in `DDSFilterGroupItem` components when a sufficient number of filters are present in the group.

**Changed**

- Split the `DDSFilterPanelComposite`'s modal and desktop rendering into two methods to make it more obvious what's going on.

<!-- 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

@IgnacioBecerra IgnacioBecerra

Labels
adopter: AEM used when component or pattern will be used by this adopter adopter support 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 priority: high
Projects
None yet
Milestone
No milestone
8 participants
@jeffchew @proeung @emyarod @jkaeser @shixiedesign @ljcarot @IgnacioBecerra @RobertaJHahn