Skip to content

feat: Update pfe-content-set to accept custom container queries #710

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

Merged
starryeyez024 merged 25 commits into from
Feb 12, 2020
Merged

feat: Update pfe-content-set to accept custom container queries #710

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
16c794e
Update pfe content set to accept custom container queries
alazzara Jan 29, 2020
4f795c8
cleanup JS
alazzara Jan 30, 2020
c654821
Merge branch 'master' into US231294-Update-pfe-content-set-to-accept-…
alazzara Jan 31, 2020
e33e3a4
Update default breakpoint
starryeyez024 Feb 5, 2020
0c8f88f
Tidy up the demo file
starryeyez024 Feb 5, 2020
53f304d
docs: tidy demo file
starryeyez024 Feb 5, 2020
44130da
chore! update content set schema and docs
starryeyez024 Feb 5, 2020
3300d80
chore: remove test data
starryeyez024 Feb 5, 2020
4a51309
correct documentation
starryeyez024 Feb 5, 2020
f5c049d
update viewport tag and mobile margins on containers
starryeyez024 Feb 6, 2020
99ff44a
Merge branch 'US231294-Update-pfe-content-set-to-accept-custom-contai…
alazzara Feb 7, 2020
6528de8
add Automated tests and update /demo/index.html so faux-container has…
alazzara Feb 7, 2020
9970bbf
Merge branch 'master' into US231294-Update-pfe-content-set-to-accept-…
castastrophe Feb 7, 2020
b2c800b
change single quotes to double for consistency
alazzara Feb 10, 2020
8fd450f
Merge branch 'US231294-Update-pfe-content-set-to-accept-custom-contai…
alazzara Feb 10, 2020
f4f3928
add changelog
alazzara Feb 10, 2020
3820359
fix changelog
alazzara Feb 10, 2020
abfb979
clean up demo file JS & CSS references
starryeyez024 Feb 10, 2020
44fb0eb
use redhatfont instead of overpass
starryeyez024 Feb 10, 2020
a045274
updating changelog and getting latest from master branch
alazzara Feb 10, 2020
8428027
Merge branch 'US231294-Update-pfe-content-set-to-accept-custom-contai…
alazzara Feb 10, 2020
c44e3ac
Merge branch 'master' into US231294-Update-pfe-content-set-to-accept-…
castastrophe Feb 11, 2020
5d1726e
Merge branch 'master' into US231294-Update-pfe-content-set-to-accept-…
starryeyez024 Feb 12, 2020
a1506e8
remove errant line from index
starryeyez024 Feb 12, 2020
c0f2035
fix tests for content-set, closing brackets
starryeyez024 Feb 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion CHANGELOG-prerelease.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
Tag: [v1.0.0-prerelease.39](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.39)

- []() fix: cascading the "on" attribute on pfe-content-set #730
- []() feat: adding the ability for pfe-navigation to use the full width of the viewport (#718)
- [f93af30](https://github.com/patternfly/patternfly-elements/commit/f93af30cc7eef3e7728effb7cedb4773f54a5f43) feat: adding the ability for pfe-navigation to use the full width of the viewport (#718)
- [](https://github.com/patternfly/patternfly-elements/commit/) Update pfe-content-set to accept custom container queries

## Prerelease 38 ( 2020-02-03 )

Expand Down
6 changes: 4 additions & 2 deletions elements/pfe-content-set/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

`pfe-content-set` is a combo component, which brings together the utilities of the accordion and tabs components. Effectively both of these components do the same job, which is to encapsulate chunks of information under headings for easier browsing. Hiding some information and allowing the user to toggle through the headings to show other bits of information.

Since tabs can pose a layout issue on mobile because of the lack of horizontal space, this component will first assess the width of the parent container. If the width is less than 768px, the component will render the content within the `<pfe-accordion>` component. If it is larger than this value, the content will be rendered inside the `<pfe-tabs>` component.
Since tabs can pose a layout issue on mobile because of the lack of horizontal space, this component will first assess the width of the parent container. If the width of pfe-content-set is less than or equal to 700px, the component will render the content within the `<pfe-accordion>` component. If it is larger than this value, the content will be rendered within the `<pfe-tabs>` component.

## Dependencies

Expand Down Expand Up @@ -46,7 +46,9 @@ Each header must have an attribute of `pfe-content-set--header` and each panel m
- `pfe-align="center"`
- Accordion: No effect.
- Tabs: Tabs are centered.

- `pfe-breakpoint="500px`
- You may set a custom breakpoint at which the content set upgrade to tabs above that number and accordions below.
- The value can contain the `px` suffix or not


## Styling
Expand Down
Loading