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.

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

Adding flex utilities for grow, order, and width #763

Merged
merged 8 commits into from
Jul 17, 2019

Conversation

jonrohan
Copy link
Member

@jonrohan jonrohan commented Apr 23, 2019

This pull adds some flex utilities that I've been using to do some complex responsive stuff with the header.

What's added:

  • .flex-grow-0 This was used in the blob header to get content to grow the columns. cc @emilybrick
  • .flex-order-[1,2,none] this is useful for reordering columns at smaller sizes.
  • .width-auto we needed a way to turn off width: 100% at other breakpoints.

TODO

  • Add styles
  • Add documentation

After release:

  • Remove styles in components/flexbox.scss in .com.

/cc @primer/ds-core

@jonrohan jonrohan requested a review from shawnbot April 23, 2019 18:58
@jonrohan
Copy link
Member Author

This stuff currently lives in components/flexbox.scss in .com. It should be removed from there when this is added.

shawnbot
shawnbot previously approved these changes Apr 23, 2019
Copy link
Contributor

@shawnbot shawnbot left a comment

Choose a reason for hiding this comment

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

Awesome, thanks! I'll kick off a new minor release for this to merge into.

@shawnbot shawnbot mentioned this pull request Apr 29, 2019
13 tasks
@shawnbot shawnbot dismissed their stale review April 29, 2019 18:33

We agreed this morning that this needs docs before being merged.

@vercel
Copy link

vercel bot commented Jul 17, 2019

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.


.flex#{$variant}-order-1 { order: 1 !important; }
.flex#{$variant}-order-2 { order: 2 !important; }
.flex#{$variant}-order-none { order: inherit !important; }
Copy link
Contributor

@simurai simurai Jul 17, 2019

Choose a reason for hiding this comment

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

I guess we could also use order: 0 instead of inherit to "remove" the order since 0 is the default value?

@simurai
Copy link
Contributor

simurai commented Jul 17, 2019

Added some documentation for...

/cc @jonrohan @shawnbot needs review/approval in case we want to make it part of 12.5.0.

@simurai simurai requested a review from shawnbot July 17, 2019 00:15
@simurai simurai mentioned this pull request Jul 17, 2019
16 tasks
Copy link
Contributor

@shawnbot shawnbot left a comment

Choose a reason for hiding this comment

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

This looks great to me. Thanks for wrapping up the docs, @simurai!

@shawnbot shawnbot changed the base branch from master to release-12.5.0 July 17, 2019 19:45
@shawnbot shawnbot merged commit d136c10 into release-12.5.0 Jul 17, 2019
@shawnbot shawnbot deleted the flex_utilities branch July 17, 2019 19:45
@jonrohan
Copy link
Member Author

❤️ Thanks @simurai !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants