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

[ListSubheader] Use sticky list by default #8194

Merged
merged 1 commit into from
Sep 23, 2017
Merged

[ListSubheader] Use sticky list by default #8194

merged 1 commit into from
Sep 23, 2017

Conversation

slavab89
Copy link
Contributor

@slavab89 slavab89 commented Sep 14, 2017 •
edited
Loading

Fixes #7413

Please let me know what you think or if i should change anything 😄

BTW, i was able to only run tests. flow failed on some package in node_modules(not sure why it ran it) and eslint just hangs indefinitely

p.s Sticky is supported in all recent version browsers but not in all
https://caniuse.com/#search=sticky
Is it good enough?

@slavab89
Copy link
Contributor Author

I've verified that it works on Chrome, Firefox and Safari (latest versions). Didnt check on IE or mobile yet.

1 thing that i've discovered while working with this is that if you have an overflow: hidden on one of the ancestors (any ancestor) then Firefox and Safari wont do the sticky effect, it will just be fixed in place.
The relevant issue: w3c/csswg-drafts#865. It does seem like the specification but in chrome it does work.
https://developer.mozilla.org/en-US/docs/Web/CSS/position

@oliviertassinari oliviertassinari added v1 component: list This is the name of the generic UI component, not the React module! labels Sep 18, 2017
@oliviertassinari oliviertassinari self-assigned this Sep 19, 2017
@oliviertassinari
Copy link
Member

Sticky is supported in all recent version browsers but not in all https://caniuse.com/#search=sticky Is it good enough?

I think that it can be good enough as long as the UI isn't broken on the browsers that don't support it.

oliviertassinari
oliviertassinari previously requested changes Sep 19, 2017
View reviewed changes
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright, we can move forward after fixing those comments :)

docs/src/pages/demos/lists/PinnedSubheaderList.js Outdated
function PinnedList(props) {
const classes = props.classes;

const sections = Array.from(Array(SECTIONS).keys());
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Array.from is not supported by IE11.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have been using [1, 2, 3, .. on the other demos to dodge the issue.

docs/src/pages/demos/lists/PinnedSubheaderList.js Outdated
width: '100%',
maxWidth: 360,
background: theme.palette.background.paper,

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

blank line

docs/src/pages/demos/lists/lists.md Outdated
@@ -26,6 +26,10 @@ Lists are best suited for similar data types.

{{demo='pages/demos/lists/NestedList.js'}}

### Pinned Subheader List

{{demo='pages/demos/lists/PinnedSubheaderList.js'}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add some remark around the browser support here.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can also say that browser that doesn't support it will render as before, the UI won't be broken.

@oliviertassinari oliviertassinari added the PR: needs revision The pull request can't be merged. More details is available on the code review or fails in the CI label Sep 19, 2017
@mbrookes
Copy link
Member

Looking at the spec it says "Upon scrolling, subheaders remain pinned to the top of the screen until pushed off screen by the next subheader.", so I'm wondering, should this be the default behavior?

@leMaik
Copy link
Member

leMaik commented Sep 21, 2017

@mbrookes I think that the default should always be what the spec says. In #8307 I also default to making the popover as wide as the select field (as the spec shows it) and added a prop to disable this.

@oliviertassinari
Copy link
Member

👍

@oliviertassinari
Copy link
Member

I'm continuing this PR :)

@oliviertassinari oliviertassinari removed the PR: needs revision The pull request can't be merged. More details is available on the code review or fails in the CI label Sep 23, 2017
@oliviertassinari oliviertassinari changed the title [ListSubheader] Add sticky list subheader ability [ListSubheader] Use sticky list by default Sep 23, 2017
@oliviertassinari oliviertassinari merged commit 29694e5 into mui:v1-beta Sep 23, 2017
@oliviertassinari
Copy link
Member

@slavab89 Thanks!

@slavab89
Copy link
Contributor Author

slavab89 commented Sep 26, 2017 •
edited
Loading

Thanks @oliviertassinari 😄 I was on vacation so you beat me to it :)

@slavab89 slavab89 deleted the sticky-subheader branch September 26, 2017 12:20
@ceciliamvrie ceciliamvrie mentioned this pull request Mar 30, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oliviertassinari oliviertassinari oliviertassinari left review comments

Assignees

@oliviertassinari oliviertassinari

Labels
component: list This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@slavab89 @oliviertassinari @mbrookes @leMaik @pano-slava