New utilities & docs - fade out, hover grow, border white fade, responsive positioning, and circle #375

sophshep · 2017-10-19T16:28:48Z

This PR adds the following styles and corresponding docs to Primer:

Fade out animation

This is in github/github but not in Primer nor was it documented. (this will close https://github.com/github/design-systems/issues/424)

Hover-grow animation

This is a pattern used in many places, for example on Explore spotlights, our customers page, and even on our style guide homepage. Since it's used on so many different types of projects, I decided to put it in core utilties vs. marketing.

border-white-fade

Similar to border-black-fade, but to be used on dark backgrounds. I needed this on these video pages and it could also be used on marketing sites with dark backgrounds or components, such as the partner site.

Responsive Positioning

This is something I have needed on a few projects and added as custom CSS in github/github. For now I am leaving this in marketing only, but as we move forward with more responsive stuff in product we may want to move it over.

(note: I have never needed position-static, let alone a responsive version of it, so I left it out to prevent unnecessary CSS. Any objections to this or should responsive styles always have full parity with their non-responsive counterparts?)

.circle

Which adds a border-radius of 50%. This was brought up in this issue, and is needed in both marketing and product.

/cc @primer/ds-core

To-do for v10:

Fix storybook errors (probably by manually adding components rather than depending on markdown parser)
Open PR in github/github to remove custom CSS: https://github.com/github/github/pull/81113

shawnbot · 2017-10-19T20:27:16Z

modules/primer-utilities/docs/animations.md

+
+```html
+<div class="box hover-grow p-4">
+  <%= octicon("mark-github"), :height => 32 %>


I think the ) is misplaced here; it should go after 32.

shawnbot · 2017-10-19T21:37:48Z

FYI @broccolini, @sophshep and I paired on getting these additions into Storybook, and ended up adding all of the utilities in the process. There are a lot of code blocks in the primer-utilities/doc/*.md under duplicate headings, so a bunch of them have automatically generated (and guaranteed unique) names like docs/margin.md:23 (that is, line 23), but I think that these are things we can whittle away at in another pass.

broccolini · 2017-10-26T19:32:53Z

@sophshep I pulled this down and I don't want to publish storybook like this with all the garbled stories titles in the nav, and having everything under utilities makes it hard to navigate as well as super long. Did you and @shawnbot discuss any options for fixing this up? I can help with this next week if needed but wanted to check what you'd discussed first.

sophshep · 2017-10-26T19:52:09Z

Did you and @shawnbot discuss any options for fixing this up? I can help with this next week if needed but wanted to check what you'd discussed first.

No, we didn't. I used the story mainly to test the components I wrote for the docs. Could we remove it from this PR and then fix separately when adding stories to all the other styles?

sophshep · 2017-11-03T20:51:57Z

@broccolini I've updated storybook to manually add the new styles that are in this PR.

broccolini

Totes on board with these additions and happy to see custom Sass being remove from GitHub. Requested changes mostly re documentation feedback.

broccolini · 2017-10-26T19:56:07Z

modules/primer-marketing-utilities/lib/borders.scss

@@ -15,3 +15,8 @@
    .border-#{$breakpoint}-left-0   { border-left: 0 !important; }
  }
 }
+
+/* Use with .border to turn the border rgba white 0.15 */
+.border-white-fade {


Small code-style comment, we usually put single line properties on one line 😬

broccolini · 2017-11-04T23:17:53Z

modules/primer-marketing-utilities/docs/borders.md

+
+### White border with alpha transparency
+
+In addition to `.border-black-fade` which is in primer-core, primer-marketing includes `.border-white-fade`. This adds a rgba white border with an alpha transparency of `0.15`. This is useful when you want a border that is a lighter shade of the background color.


I think starting off with what this style is and how it can be used is more helpful, and I don't think you need to specifically reference the border-black-fade specifically but would be nice to link to the border color utilities. If you do think it's important to mention the black version, perhaps say "such as border-black-fade in the last sentence? Feel free to edit:

Use border-white-fade to add a white border with an alpha transparency of 0.15. This is useful when you want a border that is a lighter shade of the background color. Additional border colors are available in primer-core border utilities.

(I think this is the right url but worth double checking in the style guide.)

broccolini · 2017-11-04T23:18:40Z

modules/primer-marketing-utilities/docs/borders.md

@@ -17,3 +17,22 @@ Top, right, bottom, and left border utilities are can be used responsively to ad
  .border-top-0
 </div>
 ```
+
+## Border Colors


Does this need to be changed to Marketing border colors to avoid dupes in stories?

I have these added manually to the story for now, using the class names. But they're under "marketing utilities" so I think it's pretty clear.

broccolini · 2017-11-04T23:19:22Z

modules/primer-marketing-utilities/docs/layout.md

+---
+title: Layout
+status: New release
+status_issue: https://github.com/github/design-systems/issues/325


We're moving away from status issues and plan to just let people open a new issue in the Primer repo so that it will work when this goes public.

broccolini · 2017-11-04T23:27:26Z

modules/primer-marketing-utilities/docs/layout.md

+status_issue: https://github.com/github/design-systems/issues/325
+---
+
+The following layout utilities are meant to used in addition to those within primer-core.


The first paragraph should describe what these styles are, this para will get used in other contexts such as og metadata in future. Also, it's nice to hyperlink things that are documented in the style. Suggest something like this:

Marketing layout utilities build on top of primer-core utilities, adding the option of responsive positioning.

broccolini · 2017-11-04T23:43:39Z

modules/primer-marketing-utilities/docs/layout.md

+
+## Responsive position
+
+These position utilities behave the same way as the positioning utilities in primer-core, however they include responsive states so that they can be used at specific viewport widths.


It's good to start with how to use the style before getting into details such as referencing how it works with other styles. I basically try and write docs with the assumption that people will put up with reading information for about 5 seconds 🙃. Suggest something like:

Use responsive position utilities to adjust the position of an element at different breakpoints. These can be used in addition to the position utilities available in primer-core.

broccolini · 2017-11-04T23:49:08Z

modules/primer-utilities/docs/borders.md

@@ -109,7 +109,7 @@ Use `border-dashed` to give an element a dashed border.

 ## Rounded corners

-Add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px.
+Add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles.


I realize this wasn't your edit, but could we start with a slightly nicer intro, such as:

Use the following utilities to add or remove rounded corners:

broccolini · 2017-11-04T23:49:47Z

modules/primer-utilities/lib/animations.scss

@@ -151,3 +172,13 @@
    transform: scale3d(1, 1, 1);
  }
 }
+
+/* Increase scale of an element on hover */
+


Accidental extra white space?

…r-css into new-marketing-utils

Sophie Shepherd added 8 commits October 19, 2017 11:27

New reponsive layout/position utils

1c9fbfa

Docs for responsive positioning

93170a2

border-white fade css

62f552c

border-white-fade docs

57075a2

hover grow css

12bd248

hover grow docs

c18b8d0

Add fade out css

aee1483

Add fade out docs

3d47e86

sophshep changed the title ~~WIP - Adding some marketing utilities & docs~~ New utilities & docs - fade out, hover grow, border white fade, and responsive padding Oct 19, 2017

shawnbot requested a review from a team October 19, 2017 19:46

Add circle class

2530d4c

sophshep changed the title ~~New utilities & docs - fade out, hover grow, border white fade, and responsive padding~~ New utilities & docs - fade out, hover grow, border white fade, responsive padding, and circle Oct 19, 2017

sophshep added the status: review needed label Oct 19, 2017

shawnbot reviewed Oct 19, 2017

View reviewed changes

Sophie Shepherd added 6 commits October 19, 2017 16:50

Add utilities and marketing utilities to storybook

17542a2

Rename headings to fix storybook errors

4c713a9

oops, put the ) in the right spot

abc2175

fix border examples

cbae32d

show more examples of positioning in docs

c814e56

include scss (might need that) & add margin to make example look better

9060f34

sophshep requested review from broccolini and jonrohan October 20, 2017 14:48

broccolini mentioned this pull request Oct 25, 2017

Tracking issue for Primer v10 #335

Closed

28 tasks

broccolini added the v10 label Oct 25, 2017

sophshep changed the title ~~New utilities & docs - fade out, hover grow, border white fade, responsive padding, and circle~~ New utilities & docs - fade out, hover grow, border white fade, responsive positioning, and circle Oct 26, 2017

Sophie Shepherd added 2 commits November 3, 2017 15:27

Remove stories to stop things from being broken

8fec79d

Marketing utils story

c46fe01

Add more stories

7079001

broccolini requested changes Nov 4, 2017

View reviewed changes

Sophie Shepherd and others added 3 commits November 6, 2017 09:49

incorporate @broccolini's feedback

c2f6984

add link to docs folder

dea33f2

Merge branch 'new-marketing-utils' of https://github.com/primer/prime…

d14f8f8

…r-css into new-marketing-utils

broccolini approved these changes Nov 8, 2017

View reviewed changes

broccolini changed the base branch from dev to release-10.0.0 November 8, 2017 21:36

broccolini merged commit 82fd962 into release-10.0.0 Nov 8, 2017

broccolini deleted the new-marketing-utils branch November 8, 2017 21:37

jonrohan added the Tag: Enhancement label Nov 10, 2017

github-actions bot mentioned this pull request Nov 28, 2022

Link Checker Report ronna/MERL-Center-public#20

Open

This was referenced Dec 26, 2022

Link Checker Report ronna/MERL-Center-public#62

Open

Link Checker Report ronna/MERL-Center-public#64

Open

Link Checker Report ronna/MERL-Center-public#66

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New utilities & docs - fade out, hover grow, border white fade, responsive positioning, and circle #375

New utilities & docs - fade out, hover grow, border white fade, responsive positioning, and circle #375

sophshep commented Oct 19, 2017 •

edited

Loading

shawnbot Oct 19, 2017

shawnbot commented Oct 19, 2017

broccolini commented Oct 26, 2017

sophshep commented Oct 26, 2017

sophshep commented Nov 3, 2017

broccolini left a comment

broccolini Oct 26, 2017

broccolini Nov 4, 2017

broccolini Nov 4, 2017

sophshep Nov 6, 2017

broccolini Nov 4, 2017

broccolini Nov 4, 2017

broccolini Nov 4, 2017

broccolini Nov 4, 2017

broccolini Nov 4, 2017


		### White border with alpha transparency

		In addition to `.border-black-fade` which is in primer-core, primer-marketing includes `.border-white-fade`. This adds a rgba white border with an alpha transparency of `0.15`. This is useful when you want a border that is a lighter shade of the background color.


		## Responsive position

		These position utilities behave the same way as the positioning utilities in primer-core, however they include responsive states so that they can be used at specific viewport widths.

New utilities & docs - fade out, hover grow, border white fade, responsive positioning, and circle #375

New utilities & docs - fade out, hover grow, border white fade, responsive positioning, and circle #375

Conversation

sophshep commented Oct 19, 2017 • edited Loading

Fade out animation

Hover-grow animation

border-white-fade

Responsive Positioning

.circle

To-do for v10:

Choose a reason for hiding this comment

shawnbot commented Oct 19, 2017

broccolini commented Oct 26, 2017

sophshep commented Oct 26, 2017

sophshep commented Nov 3, 2017

broccolini left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sophshep commented Oct 19, 2017 •

edited

Loading