What’s new page #55

jonrohan · 2018-10-09T18:44:21Z

This is a work in progress page to get news links into the app.

My approach to this is to get a data structure with links and content types listed out. They will be sorted by newest first. Displayed with a title, where the link lives, and date. For extra credit, I'm going to see if I can filter these links with some UI.

List links in date order
Display the links with content type
Add UI for filtering links
Get unique primer.style illustrations into the page

vercel · 2018-10-09T18:44:24Z

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

Co-authored-by: shawnbot <shawnbot@github.com>

jonrohan · 2018-10-11T20:13:42Z

I'm ready for review on this,

@emilybrick can you review the design? https://primer-style-ttaprfxfpb.now.sh/news
@emplums can you review the react?

emilybrick · 2018-10-11T20:46:16Z

Hey! Dropping some design feedback in here, happy to jump on a call though.

Header

I would try positioning the header + intro para to where it is on the team page. Looks a bit high at the moment.
Looks like the nav* and container padding is jumping a bit between team & news page, not sure exactly why
On mobile, match typography of team page header & intro paragraph
On mobile, SVG is positioned above the header text, right underneath the nav

Filters

I'd avoid using the buttons as filters here...on primer.style that button style is primarily used for going to a new destination 🤔 curious what @broccolini thinks. It also took me a sec to realize that the buttons were filters and not separate destinations
I don't think filtering capabilities are actually necessary at this stage. It might make more sense to tag each item with a label for whatever type of content it is, and clicking on an individual label could filter the list to just that type of content.

I'm going to take a minute to play with the list and label styling, and I'll follow up in a bit.

Thanks for putting this together so quickly 🙌 !

emilybrick · 2018-10-11T22:09:23Z

This spacing is a bit rough, but general thoughts for the list formatting/styling:

filtered list:

Let me know what you think, I think we could definitely improve it, but might be an ok first pass?

src/whats-new.js

emilybrick · 2018-10-11T22:36:42Z

A couple passes at the illustration. First one feels the best to me, but could still use some refining :/

Sorry for all the last minute feedback/designs! I would be okay pushing this release to next week if it feels like too much.

broccolini · 2018-10-11T22:38:22Z

@emilybrick I think this looks great for a first pass, I like the first illo 🙌.

emplums

Just left a few comments!

emplums · 2018-10-12T20:03:34Z

pages/news/index.js

-      <Box p={4}>
-        <Text fontSize={5}>What’s new</Text>
+      <Box className="container-xl" p={3} py={7} style={{overflow: 'hidden'}}>
+        <FlexContainer justifyContent="space-between" flexDirection={['column', 'column', 'row', 'row']}>


The team pages are built to have 5 breakpoints, we might want to match that here

emplums · 2018-10-12T20:04:20Z

pages/news/index.js

-        <Text fontSize={5}>What’s new</Text>
+      <Box className="container-xl" p={3} py={7} style={{overflow: 'hidden'}}>
+        <FlexContainer justifyContent="space-between" flexDirection={['column', 'column', 'row', 'row']}>
+          <Box maxWidth="550px">


Could we use percentages here? I think the team page is using 1/2

emplums · 2018-10-12T20:07:58Z

src/Article.js

+        <Text fontFamily="mono" f={1} color="blue.1">
+          <Link color="blue.1" href={url}>
+            {articleDomain(url)}
+          </Link>{' '}


I think this {' '} will cause that jumping behavior we saw on the team page, use a   here instead

emplums · 2018-10-12T20:10:49Z

src/NewsList.js

+import styled from 'react-emotion'
+
+const FilterButton = styled(props => {
+  const Tag = props.selected ? ButtonFill : ButtonOutline


this Tag isn't used, did you mean to set the tag prop in line 11 with it?

I had this, and meant to delete the line, 👍

src/NewsList.js

emilybrick · 2018-10-17T17:52:33Z

I started playing around with ways to make these sub pages more cohesive with the main index page...

A few things I tried:

updated the SVG on the team page a bit (changed the angle of the hexagon & diamond so that the shapes aren't rotated on an angle)
took negative top margin off team page SVG
increased the padding top on the container-xl component

before (prod):

updated svg & placement:

Let me know if this feels any better, I can always roll these changes back. Still working on mobile adjustments.

shawnbot

I think this looks great! 👏

emilybrick · 2018-10-18T16:45:44Z

Pushed up most changes we talked about yesterday aside from the mobile image sizes, which I think I need @jonrohan's help with 😬.

I tried out using the team heading styles on the news page, but I'm not crazy about it:

Specifically on mobile it feels out of place..I reverted back to Mono. I don't feel strongly that the relationship needs to be 1:1 with title styling on the page, but we can continue discussing it if others feel strongly.

Done:
Adjusted margin for filter bar on mobile
Changed tag labels to mono
Stacked filter nav on mobile
Tightened line height for news titles to 1.25

To do:

SVG sizing on mobile

emilybrick · 2018-10-19T14:16:19Z

Would love some feedback on this. If it's feeling good I'd love to merge today, since this branch has been hanging around for a bit.

Based on feedback from Wednesday afternoon, I've been going back and forth with the typography on the /news list titles. Using the same size as our titles on the /team page felt really loud*. At the same time, the mono font doesn't feel as right here, as it seems like we are typically using mono for metadata or short strings (aside from the questions on the page).

As a middle ground, I'm using the sans font for the titles, but one size down from the team page titles.

Link: https://primer-style-fiipaarela.now.sh/

👋 Updates as per convo w/ @broccolini:

add a bit more margin between list items on /news
add React podcast
Swap filter titles to mono
Add all releases (not just major/minor)
Use full words for releases (e.g. Primer Components v4.0.0-beta or Primer CSS v10.9.0)
add truncation for article descriptions
follow up: fix link underline color to match text

script/get-release-data

shawnbot · 2018-10-22T21:09:21Z

script/get-release-data

+  done
+done
+
+echo "[ $(echo $output | sed -e "s/,$//g") ]" > ./src/data/releases.json


It would be nice to pretty-print the JSON so that diffs were more useful, but that might be tricky given the way this is generated. 😬

src/whats-new.js

Co-Authored-By: jonrohan <rohan@github.com>

* creating a whats new page * Adding some links * Updates to small text, adding link * Adding stateful news list with filterbuttons Co-authored-by: shawnbot <shawnbot@github.com> * Updating the ui and extracting * Lint * Adding border to fill button so the filter buttons don't jump * Change border color on hover * Making updates to what's new design and adding more data * Pluralizing the filters * Updates based on feedback * New line for prettier * Adding padding to nav * Using Flex instead of FlexContainer and FlexItem * Another FlexContainer to replace * Completing get releases data script and updating releases data * Blue.2 * fontSize prop * updated the design to the news page and removed unused assets * ran the linter, added target blank and fixed a typo in an article description * replaced 6px margin for 4px & 8px * updated descriptions * styling tweaks to svg illo and placement * reduced padding top on container xl down to 8 * fixed mobile margin and margin right for team image * linter fixes * styling changes for news page and team page image and content * reverted image sizing changes and renamed team svg * Formating and using the styled octicon * fixed sizing of svg and changed news list title font * styling changes to filter titles and list margin * updated get release data * new function to create titles for releases * changed truncation to start after 30 words * changed diamond color to blue 2 * Update src/whats-new.js Co-Authored-By: jonrohan <rohan@github.com> * linter fixes

jonrohan added 2 commits October 9, 2018 09:14

creating a whats new page

8606888

Adding some links

290ed6d

Updates to small text, adding link

69558a8

shawnbot mentioned this pull request Oct 9, 2018

Fix preview deployments for branches with non-word chars #52

Merged

Merge remote-tracking branch 'origin/site-updates' into news_page

da9bfbb

jonrohan changed the base branch from site-updates to master October 10, 2018 03:12

jonrohan and others added 6 commits October 11, 2018 11:29

Merge branch 'master' into news_page

fa0a5e9

Adding stateful news list with filterbuttons

72e6819

Co-authored-by: shawnbot <shawnbot@github.com>

Updating the ui and extracting

ae21b8c

Lint

b3df486

Adding border to fill button so the filter buttons don't jump

c1345a6

Change border color on hover

4301507

jonrohan changed the title ~~[WIP] What’s new page~~ What’s new page Oct 11, 2018

jonrohan added the review needed label Oct 11, 2018

jonrohan requested review from emplums and emilybrick October 11, 2018 20:13

broccolini reviewed Oct 11, 2018

View reviewed changes

src/whats-new.js Show resolved Hide resolved

Making updates to what's new design and adding more data

3dc0bb6

emplums reviewed Oct 12, 2018

View reviewed changes

shawnbot reviewed Oct 12, 2018

View reviewed changes

src/NewsList.js Show resolved Hide resolved

jonrohan added 3 commits October 12, 2018 13:38

Pluralizing the filters

8795bfb

Updates based on feedback

76719e1

Merge branch 'master' into news_page

ae8c3c2

emilybrick added 2 commits October 17, 2018 13:48

styling tweaks to svg illo and placement

5bbf0df

reduced padding top on container xl down to 8

73abfb8

emilybrick and others added 3 commits October 17, 2018 17:25

fixed mobile margin and margin right for team image

f7c6cee

linter fixes

d0b4ff3

Merge branch 'master' into news_page

12afe18

shawnbot approved these changes Oct 17, 2018

View reviewed changes

emilybrick added 2 commits October 18, 2018 12:11

styling changes for news page and team page image and content

ee1d3aa

reverted image sizing changes and renamed team svg

01fea15

jonrohan and others added 3 commits October 18, 2018 13:32

Formating and using the styled octicon

172ad2c

Merge branch 'master' into news_page

a89be18

fixed sizing of svg and changed news list title font

56672cd

styling changes to filter titles and list margin

9de549a

emilybrick reviewed Oct 22, 2018

View reviewed changes

script/get-release-data Show resolved Hide resolved

emilybrick added 3 commits October 22, 2018 15:48

updated get release data

519181d

new function to create titles for releases

2307b3a

changed truncation to start after 30 words

b7a79e6

shawnbot reviewed Oct 22, 2018

View reviewed changes

emilybrick added 2 commits October 22, 2018 18:09

changed diamond color to blue 2

ddea06a

Merge branch 'master' into news_page

ff260f8

broccolini reviewed Oct 22, 2018

View reviewed changes

src/whats-new.js Outdated Show resolved Hide resolved

broccolini and others added 2 commits October 22, 2018 15:44

Update src/whats-new.js

cd8de43

Co-Authored-By: jonrohan <rohan@github.com>

linter fixes

154b0a6

jonrohan removed the review needed label Oct 23, 2018

emilybrick merged commit f23ff2c into master Oct 23, 2018

broccolini deleted the news_page branch October 24, 2018 03:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

What’s new page #55

What’s new page #55

jonrohan commented Oct 9, 2018 •

edited

Loading

vercel bot commented Oct 9, 2018

jonrohan commented Oct 11, 2018

emilybrick commented Oct 11, 2018 •

edited

Loading

emilybrick commented Oct 11, 2018

emilybrick commented Oct 11, 2018

broccolini commented Oct 11, 2018

emplums left a comment

emplums Oct 12, 2018

emplums Oct 12, 2018

emplums Oct 12, 2018

emplums Oct 12, 2018 •

edited

Loading

jonrohan Oct 15, 2018

emilybrick commented Oct 17, 2018

shawnbot left a comment

emilybrick commented Oct 18, 2018 •

edited

Loading

emilybrick commented Oct 19, 2018 •

edited

Loading

shawnbot Oct 22, 2018

What’s new page #55

What’s new page #55

Conversation

jonrohan commented Oct 9, 2018 • edited Loading

vercel bot commented Oct 9, 2018

jonrohan commented Oct 11, 2018

emilybrick commented Oct 11, 2018 • edited Loading

emilybrick commented Oct 11, 2018

emilybrick commented Oct 11, 2018

broccolini commented Oct 11, 2018

emplums left a comment

Choose a reason for hiding this comment

emplums Oct 12, 2018

Choose a reason for hiding this comment

emplums Oct 12, 2018

Choose a reason for hiding this comment

emplums Oct 12, 2018

Choose a reason for hiding this comment

emplums Oct 12, 2018 • edited Loading

Choose a reason for hiding this comment

jonrohan Oct 15, 2018

Choose a reason for hiding this comment

emilybrick commented Oct 17, 2018

shawnbot left a comment

Choose a reason for hiding this comment

emilybrick commented Oct 18, 2018 • edited Loading

emilybrick commented Oct 19, 2018 • edited Loading

shawnbot Oct 22, 2018

Choose a reason for hiding this comment

jonrohan commented Oct 9, 2018 •

edited

Loading

emilybrick commented Oct 11, 2018 •

edited

Loading

emplums Oct 12, 2018 •

edited

Loading

emilybrick commented Oct 18, 2018 •

edited

Loading

emilybrick commented Oct 19, 2018 •

edited

Loading