Skip to content

Commit

Permalink
chore(chip-group): require main and remove legacy example (#5356)
Browse files Browse the repository at this point in the history
  • Loading branch information
@srambach
srambach committed Jan 31, 2023
1 parent f17321b commit aaeca0e
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 193 deletions.
5 changes: 1 addition & 4 deletions src/patternfly/components/ChipGroup/chip-group.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
--pf-c-chip-group--PaddingBottom: 0;
--pf-c-chip-group--PaddingLeft: 0;
--pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
--pf-c-chip-group--ColumnGap: var(--pf-global--spacer--sm);
--pf-c-chip-group--ColumnGap: 0;

// Chip group main - spaces the category label and list
--pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
Expand All @@ -31,10 +31,8 @@
--pf-c-chip-group__label--MaxWidth: 18ch;

// Chip group close - negative margin stretches height for click area
// margin-left supports legacy chip group
--pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
--pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
--pf-c-chip-group__close--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);

max-width: 100%;
padding-top: var(--pf-c-chip-group--PaddingTop);
Expand Down Expand Up @@ -95,5 +93,4 @@
align-self: flex-start;
margin-top: var(--pf-c-chip-group__close--MarginTop);
margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
margin-left: var(--pf-c-chip-group__close--MarginLeft);
}
190 changes: 1 addition & 189 deletions src/patternfly/components/ChipGroup/examples/ChipGroup.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -355,194 +355,6 @@ cssPrefix: pf-c-chip-group
{{> chip-group-close}}
{{/chip-group}}
```

### Legacy chip group examples without main element
```hbs
{{#> chip-group chip-group--id="legacy-simple"}}
{{#> chip-group-list chip-group-list--attribute='aria-label="Chip group list"'}}
{{#> chip-group-list-item}}
{{#> chip}}
{{#> chip-text chip-text--attribute=(concat 'id="' chip-group--id 'chip_one_select_collapsed"')}}
Chip one
{{/chip-text}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-labelledby="' chip-group--id 'remove_chip_one_select_collapsed ' chip-group--id 'chip_one_select_collapsed" aria-label="Remove" id="' chip-group--id 'remove_chip_one_select_collapsed"')}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/chip}}
{{/chip-group-list-item}}
{{#> chip-group-list-item}}
{{#> chip}}
{{#> chip-text chip-text--attribute=(concat 'id="' chip-group--id 'chip_two_select_collapsed"')}}
Chip two
{{/chip-text}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-labelledby="' chip-group--id 'remove_chip_two_select_collapsed ' chip-group--id 'chip_two_select_collapsed" aria-label="Remove" id="' chip-group--id 'remove_chip_two_select_collapsed"')}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/chip}}
{{/chip-group-list-item}}
{{#> chip-group-list-item}}
{{#> chip}}
{{#> chip-text chip-text--attribute=(concat 'id="' chip-group--id 'chip_three_select_collapsed"')}}
Chip three
{{/chip-text}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-labelledby="' chip-group--id 'remove_chip_three_select_collapsed ' chip-group--id 'chip_three_select_collapsed" aria-label="Remove" id="' chip-group--id 'remove_chip_three_select_collapsed"')}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/chip}}
{{/chip-group-list-item}}
{{/chip-group-list}}
{{/chip-group}}
<br><br>
{{#> chip-group chip-group--id="legacy-simple-removable"}}
{{#> chip-group-list chip-group-list--attribute='aria-label="Chip group list"'}}
{{#> chip-group-list-item}}
{{#> chip}}
{{#> chip-text chip-text--attribute=(concat 'id="' chip-group--id 'chip_one_toolbar"')}}
Chip one
{{/chip-text}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-labelledby="' chip-group--id 'remove_chip_one_toolbar ' chip-group--id 'chip_one_toolbar" aria-label="Remove" id="' chip-group--id 'remove_chip_one_toolbar"')}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/chip}}
{{/chip-group-list-item}}
{{#> chip-group-list-item}}
{{#> chip}}
{{#> chip-text chip-text--attribute=(concat 'id="' chip-group--id 'chip_two_toolbar"')}}
Chip two
{{/chip-text}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-labelledby="' chip-group--id 'remove_chip_two_toolbar ' chip-group--id 'chip_two_toolbar" aria-label="Remove" id="' chip-group--id 'remove_chip_two_toolbar"')}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/chip}}
{{/chip-group-list-item}}
{{#> chip-group-list-item}}
{{#> chip}}
{{#> chip-text chip-text--attribute=(concat 'id="' chip-group--id 'chip_three_toolbar"')}}
Chip three
{{/chip-text}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-labelledby="' chip-group--id 'remove_chip_three_toolbar ' chip-group--id 'chip_three_toolbar" aria-label="Remove" id="' chip-group--id 'remove_chip_three_toolbar"')}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/chip}}
{{/chip-group-list-item}}
{{#> chip-group-list-item}}
{{#> chip}}
{{#> chip-text chip-text--attribute=(concat 'id="' chip-group--id 'chip_four_toolbar"')}}
Chip four
{{/chip-text}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-labelledby="' chip-group--id 'remove_chip_four_toolbar ' chip-group--id 'chip_four_toolbar" aria-label="Remove" id="' chip-group--id 'remove_chip_four_toolbar"')}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/chip}}
{{/chip-group-list-item}}
{{#> chip-group-list-item}}
{{#> chip}}
{{#> chip-text chip-text--attribute=(concat 'id="' chip-group--id 'chip_five_toolbar"')}}
Chip five
{{/chip-text}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-labelledby="' chip-group--id 'remove_chip_five_toolbar ' chip-group--id 'chip_five_toolbar" aria-label="Remove" id="' chip-group--id 'remove_chip_five_toolbar"')}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/chip}}
{{/chip-group-list-item}}
{{#> chip-group-list-item}}
{{#> chip}}
{{#> chip-text chip-text--attribute=(concat 'id="' chip-group--id 'chip_six_toolbar"')}}
Chip six
{{/chip-text}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-labelledby="' chip-group--id 'remove_chip_six_toolbar ' chip-group--id 'chip_six_toolbar" aria-label="Remove" id="' chip-group--id 'remove_chip_six_toolbar"')}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/chip}}
{{/chip-group-list-item}}
{{/chip-group-list}}
{{> chip-group-close}}
{{/chip-group}}
<br><br>
{{#> chip-group chip-group--modifier="pf-m-category" chip-group--id="legacy-category"}}
{{#> chip-group-label chip-group-label--attribute=(concat 'id="' chip-group--id '-label"')}}
Category one
{{/chip-group-label}}
{{#> chip-group-list chip-group-list--attribute=(concat 'aria-labelledby="' chip-group--id '-label"')}}
{{#> chip-group-list-item}}
{{#> chip}}
{{#> chip-text chip-text--attribute=(concat 'id="' chip-group--id 'chip_one_toolbar_collapsed"')}}
Chip one
{{/chip-text}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-labelledby="' chip-group--id 'remove_chip_one_toolbar_collapsed ' chip-group--id 'chip_one_toolbar_collapsed" aria-label="Remove" id="' chip-group--id 'remove_chip_one_toolbar_collapsed"')}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/chip}}
{{/chip-group-list-item}}
{{#> chip-group-list-item}}
{{#> chip}}
{{#> chip-text chip-text--attribute=(concat 'id="' chip-group--id 'chip_two_toolbar_collapsed"')}}
Chip two
{{/chip-text}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-labelledby="' chip-group--id 'remove_chip_two_toolbar_collapsed ' chip-group--id 'chip_two_toolbar_collapsed" aria-label="Remove" id="' chip-group--id 'remove_chip_two_toolbar_collapsed"')}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/chip}}
{{/chip-group-list-item}}
{{#> chip-group-list-item}}
{{#> chip}}
{{#> chip-text chip-text--attribute=(concat 'id="' chip-group--id 'chip_three_toolbar_collapsed"')}}
Chip three
{{/chip-text}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-labelledby="' chip-group--id 'remove_chip_three_toolbar_collapsed ' chip-group--id 'chip_three_toolbar_collapsed" aria-label="Remove" id="' chip-group--id 'remove_chip_three_toolbar_collapsed"')}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/chip}}
{{/chip-group-list-item}}
{{/chip-group-list}}
{{/chip-group}}
<br><br>
{{#> chip-group chip-group--modifier="pf-m-category" chip-group--id="legacy-category-removable"}}
{{#> chip-group-label chip-group-label--attribute=(concat 'id="' chip-group--id '-label"')}}
Category one
{{/chip-group-label}}
{{#> chip-group-list chip-group-list--attribute=(concat 'aria-labelledby="' chip-group--id '-label"')}}
{{#> chip-group-list-item}}
{{#> chip}}
{{#> chip-text chip-text--attribute=(concat 'id="' chip-group--id 'chip_one_toolbar_collapsed"')}}
Chip one
{{/chip-text}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-labelledby="' chip-group--id 'remove_chip_one_toolbar_collapsed ' chip-group--id 'chip_one_toolbar_collapsed" aria-label="Remove" id="' chip-group--id 'remove_chip_one_toolbar_collapsed"')}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/chip}}
{{/chip-group-list-item}}
{{#> chip-group-list-item}}
{{#> chip}}
{{#> chip-text chip-text--attribute=(concat 'id="' chip-group--id 'chip_two_toolbar_collapsed"')}}
Chip two
{{/chip-text}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-labelledby="' chip-group--id 'remove_chip_two_toolbar_collapsed ' chip-group--id 'chip_two_toolbar_collapsed" aria-label="Remove" id="' chip-group--id 'remove_chip_two_toolbar_collapsed"')}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/chip}}
{{/chip-group-list-item}}
{{#> chip-group-list-item}}
{{#> chip}}
{{#> chip-text chip-text--attribute=(concat 'id="' chip-group--id 'chip_three_toolbar_collapsed"')}}
Chip three
{{/chip-text}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-labelledby="' chip-group--id 'remove_chip_three_toolbar_collapsed ' chip-group--id 'chip_three_toolbar_collapsed" aria-label="Remove" id="' chip-group--id 'remove_chip_three_toolbar_collapsed"')}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/chip}}
{{/chip-group-list-item}}
{{/chip-group-list}}
{{> chip-group-close}}
{{/chip-group}}
```

### Overview
A chip group is constrained to the width of its container and will wrap when it exceeds that width. An overflow value can be set and when the number of chips exceeds that value, additional chips will be hidden by default. The default overflow value will be set to 3 chips but this can be adjusted per application needs. The toggle button after the last chip allows the group to be expanded (or collapsed).

Expand All @@ -568,6 +380,6 @@ The chip group requires the [chip component](/components/chip).
| `.pf-c-chip-group__list-item` | `<li>` | Initiates the list item inside of the chip group. **Required.** |
| `.pf-c-chip-group__label` | `<span>` | Initiates the label to be used in the chip group. |
| `.pf-c-chip-group__close` | `<div>` | Initiates the container used for the button to remove the chip group. |
| `.pf-c-chip-group__main` | `<div>` | Initiates the container for the label and list elements so that they wrap together. |
| `.pf-c-chip-group__main` | `<div>` | Initiates the container for the label and list elements so that they wrap together. **Required** |
| `.pf-c-button` | `.pf-c-chip-group__close <button>` | Initiates the button used to remove the chip group. |
| `.pf-m-category` | `.pf-c-chip-group` | Modifies the chip group to support category styling. |

0 comments on commit aaeca0e

Please sign in to comment.