fix(datatoolbar): add in examples for expandable by christiemolloy · Pull Request #2273 · patternfly/patternfly · GitHub

closes #2237

Added two examples to distinguish the difference between the expandable content wrapper, and just added pf-m-expanded to components. @mattnolting @mcoker let me know what you think about just having one over the other, or if you think that we should have both.

PatternFly-Next preview: https://patternfly-next-pr-2273.surge.sh

I like the expanded elements example, though I think we should check items in the menus to match the badge counts.

I think the expanded wrapper example is kind of confusing, since you would never see that and you have duplicate filters.

I wonder if we should add a 2nd example after "Data toolbar toggle group (responsive)" and label it "expanded" or "expanded on mobile" or something that shows the content expanded. And/or add "expanded on mobile" to the "Data toolbar selected filters" example, too.

duplicate ID in this and the other example

Suggested change

      
            Expanded Toolbar
          
            Toolbar expanded

Suggested change

      
            Not Expanded Toolbar
          
            Toolbar not expanded

In the expanded elements example, in the responsive/expanded state, the status menu isn't expanded and nothing is selected. Also should the "Name" menu be expanded in both the content and expanded content?

The other 2 demos lgtm!

@mcoker re your comment above, I included the "name" in the expanded area because that was what was implemented in the expanded version of the "selected" example. @mattnolting can you confirm that this is the correct implementation?

Also @mcoker I only expanded the bottom select because it looks like an incorrect implementation if they're both expanded, what are your thoughts?

@christiemolloy gotcha, that makes sense. Only thing left is that nothing under "Risk" is selected in the responsive view. Seems like the same 3 items should be selected there as in the non-responsive view.

Updated @mcoker

excellent! ⭐️

Being that the React toolbar component moves elements' DOM position, the examples will need to be restructured to match. This is consistent w/current Core integration, so LGTM. Just an axe error to address. :)

Suggested change

      
                    {{#> select id=(concat data-toolbar--id '-select-checkbox-risk') select--IsCheckboxSelect="true" select--IsChecked="true" select--ItemIsSelected="true" select--IsExpanded="true"}}
          
                    {{#> select id=(concat data-toolbar--id '-select-checkbox-risk-expanded') select--IsCheckboxSelect="true" select--IsChecked="true" select--ItemIsSelected="true" select--IsExpanded="true"}}

id throws axe error

thank you! updated!

🎉 This PR is included in version 2.33.5 🎉

The release is available on:

Your semantic-release bot 📦🚀

# 2019.08 release notes (2019-10-01) Packages released: - @patternfly/patternfly@2.x ## Components - **Charts:** - Adjust padding for pie and donut charts ([#2247](#2247)) - Set mix-blend-mode for better color contrast ([#2239](#2239)) - Update area chart opacity ([#2233](#2233)) - **Copy to clipboard:** Wrapped code in pre which allows the code to preserve line-breaks and spaces and also applies styling such as the monospace font. ([#2260](#2260)) - **Data list:** Make data list borders consistent with table ([#2289](#2289)) - **Data toolbar:** - Updated clear button mods ([#2248](#2248)) - Added in examples for expandable ([#2273](#2273)) - **Flex layout:** Wrapped flex items, update css ([#2214](#2214)) - **Wizard:** - Re-enabled wizard modal demos ([#2259](#2259)) - Updated in page wizard demos to use dark sidebar/nav ([#2296](#2296)) - **Navigation:** Added styling updates to dark nav ([#2283](#2283)) - **Page:** Added ability to keep sidebar collapsed between sizes ([#2264](#2264)) - **Pagination:** Added compact variation ([#2275](#2275)) - **Radio:** Updated the radio component example to single components ([#2231](#2231)) - **Table:** - Fixed a11y issues in org documentation/html/table ([#2282](#2282)) - Added empty and loading state table demos ([#2254](#2254)) - **Tooltip:** Added text align left modifier ([#2284](#2284)) - **Select:** - Added typeahead form wrapper, udpated css ([#2255](#2255)) - Add top expanded example ([#2026](#2026)) - **Chip group:** Add overflow to group ([#2278](#2278)) - **Button:** Add control modifier ([#2005](#2005)) ## Other - **Shield:** Added missing components, missing var to brand docs js ([#2263](#2263))

* Create 2019.08 release notes (2019-10-01) Adding new release notes * Update 2019.08 release notes (2019-10-01) # 2019.08 release notes (2019-10-01) Packages released: - @patternfly/patternfly@2.x ## Components - **Charts:** - Adjust padding for pie and donut charts ([#2247](#2247)) - Set mix-blend-mode for better color contrast ([#2239](#2239)) - Update area chart opacity ([#2233](#2233)) - **Copy to clipboard:** Wrapped code in pre which allows the code to preserve line-breaks and spaces and also applies styling such as the monospace font. ([#2260](#2260)) - **Data list:** Make data list borders consistent with table ([#2289](#2289)) - **Data toolbar:** - Updated clear button mods ([#2248](#2248)) - Added in examples for expandable ([#2273](#2273)) - **Flex layout:** Wrapped flex items, update css ([#2214](#2214)) - **Wizard:** - Re-enabled wizard modal demos ([#2259](#2259)) - Updated in page wizard demos to use dark sidebar/nav ([#2296](#2296)) - **Navigation:** Added styling updates to dark nav ([#2283](#2283)) - **Page:** Added ability to keep sidebar collapsed between sizes ([#2264](#2264)) - **Pagination:** Added compact variation ([#2275](#2275)) - **Radio:** Updated the radio component example to single components ([#2231](#2231)) - **Table:** - Fixed a11y issues in org documentation/html/table ([#2282](#2282)) - Added empty and loading state table demos ([#2254](#2254)) - **Tooltip:** Added text align left modifier ([#2284](#2284)) - **Select:** - Added typeahead form wrapper, udpated css ([#2255](#2255)) - Add top expanded example ([#2026](#2026)) - **Chip group:** Add overflow to group ([#2278](#2278)) - **Button:** Add control modifier ([#2005](#2005)) ## Other - **Shield:** Added missing components, missing var to brand docs js ([#2263](#2263)) * Rename 2019.08 release notes (2019-10-01) to 2019.08 release notes (2019-10-01).MD Added .md file name * Update 2019.08 release notes (2019-10-01).MD Co-Authored-By: Michael Coker <35148959+mcoker@users.noreply.github.com> * alphabetize components

fix(datatoolbar): add in examples for expandable

e23d358

christiemolloy requested review from mattnolting and mcoker September 16, 2019 20:43

mcoker reviewed Sep 16, 2019

View reviewed changes

christiemolloy added 4 commits September 19, 2019 14:34

fix(toolbar): update examples based on review

834b2ee

fix(datatoolbar): update id

473ad0e

fix(toolbar): add expandable content in

a50781a

fix(toolbar): update example

9d75b58

mcoker reviewed Sep 24, 2019

View reviewed changes

fix(toolbar): fix titles

abeaac6

fix(datatoolbar): update example

b8e7d5f

mcoker approved these changes Sep 25, 2019

View reviewed changes

mattnolting reviewed Sep 25, 2019

View reviewed changes

fix(toolbar): fix a11y

f864862

mcoker merged commit a4d3c64 into patternfly:master Sep 25, 2019

redallen added the released label Sep 25, 2019

@@ @@ -0,0 +1,90 @@ @@
+              Not Expanded Toolbar
+              <br>
+              {{#> data-toolbar data-toolbar--id="data-toolbar-not-expanded-example"}}

+                      {{/select}}
+                    {{/data-toolbar-item}}
+                    {{#> data-toolbar-item data-toolbar-item--modifier="pf-m-shared-item"}}
+                      {{#> select id=(concat data-toolbar--id '-select-checkbox-risk') select--IsCheckboxSelect="true" select--IsChecked="true" select--ItemIsSelected="true" select--IsExpanded="true"}}

	{{#> select id=(concat data-toolbar--id '-select-checkbox-risk') select--IsCheckboxSelect="true" select--IsChecked="true" select--ItemIsSelected="true" select--IsExpanded="true"}}
	{{#> select id=(concat data-toolbar--id '-select-checkbox-risk-expanded') select--IsCheckboxSelect="true" select--IsChecked="true" select--ItemIsSelected="true" select--IsExpanded="true"}}

fix(datatoolbar): add in examples for expandable by christiemolloy · Pull Request #2273 · patternfly/patternfly · GitHub

Uh oh!

fix(datatoolbar): add in examples for expandable - #2273

fix(datatoolbar): add in examples for expandable#2273mcoker merged 8 commits intopatternfly:masterpatternfly/patternfly:masterfrom christiemolloy:iss2237christiemolloy/patternfly-next:iss2237Copy head branch name to clipboard

Conversation

christiemolloy commented Sep 16, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patternfly-build commented Sep 16, 2019

Uh oh!

mcoker commented Sep 16, 2019

Uh oh!

mcoker Sep 16, 2019

Choose a reason for hiding this comment

Uh oh!

mcoker Sep 24, 2019

Choose a reason for hiding this comment

Uh oh!

mcoker Sep 24, 2019

Choose a reason for hiding this comment

Uh oh!

mcoker commented Sep 24, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

christiemolloy commented Sep 25, 2019

Uh oh!

christiemolloy commented Sep 25, 2019

Uh oh!

mcoker commented Sep 25, 2019

Uh oh!

christiemolloy commented Sep 25, 2019

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mattnolting left a comment

Choose a reason for hiding this comment

Uh oh!

mattnolting Sep 25, 2019

Choose a reason for hiding this comment

Uh oh!

mattnolting Sep 25, 2019

Choose a reason for hiding this comment

Uh oh!

christiemolloy Sep 25, 2019

Choose a reason for hiding this comment

Uh oh!

redallen commented Sep 25, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

fix(datatoolbar): add in examples for expandable#2273
mcoker merged 8 commits into
patternfly:masterfrom
christiemolloy:iss2237

christiemolloy commented Sep 16, 2019 •
edited
Loading

mcoker commented Sep 24, 2019 •
edited
Loading