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

chore(react-docs): updated react-docs to use Red Hat font #2563

Merged
merged 5 commits into from Jul 22, 2019

Conversation

@tlabaj
Copy link
Contributor

tlabaj commented Jul 22, 2019

#1936

What:

Additional issues:

@patternfly-build

This comment has been minimized.

Copy link
Contributor

patternfly-build commented Jul 22, 2019

PatternFly-React preview: https://patternfly-react-pr-2563.surge.sh

Copy link
Contributor

redallen left a comment

I got to relearn how exactly how Gatsby renders html.js recently. Thank goodness we don't have to worry about how it statically renders it :)

/>
{props.headComponents}
</head>
<body {...props.bodyAttributes} className="pf-m-redhat-font">

This comment has been minimized.

Copy link
@redallen

redallen Jul 22, 2019

Contributor

It's possible to globally include SASS that adds that styling to body, but I like this better to give us more control of the template in the future.

This comment has been minimized.

Copy link
@dgutride

dgutride Jul 22, 2019

Member

I think for now we don't really need to add a template here, this docs site isn't going to last forever anyway once we can move to just using pf.org. If we use react-helmet, it alleviates the need for this entire file. @redallen

@@ -49,6 +49,10 @@ export default <Button variant="primary">Button</Button>;

All css related to each component is provided within it. There is no component level CSS to import.

# Applying Red Hat Fonts (Optional)
If you would like to add Red Hat font instead of Overpass, simply add the class `.pf-m-redhat-font` to an element that wraps your application (ideally `<html>` or `<body>`) to adopt the CSS changes that introduce the Red Hat font into PatternFly.

This comment has been minimized.

Copy link
@mcoker

mcoker Jul 22, 2019

Contributor

Small change, wdyt?

Suggested change
If you would like to add Red Hat font instead of Overpass, simply add the class `.pf-m-redhat-font` to an element that wraps your application (ideally `<html>` or `<body>`) to adopt the CSS changes that introduce the Red Hat font into PatternFly.
If you would like to use Red Hat fonts instead of Overpass, simply add the class `.pf-m-redhat-font` to an element that wraps your application (ideally `<html>` or `<body>`) to adopt the CSS changes that introduce the Red Hats font into PatternFly.

This comment has been minimized.

Copy link
@mcoker

mcoker Jul 22, 2019

Contributor

oops. I made a typo

Suggested change
If you would like to add Red Hat font instead of Overpass, simply add the class `.pf-m-redhat-font` to an element that wraps your application (ideally `<html>` or `<body>`) to adopt the CSS changes that introduce the Red Hat font into PatternFly.
If you would like to use Red Hat fonts instead of Overpass, simply add the class `.pf-m-redhat-font` to an element that wraps your application (ideally `<html>` or `<body>`) to adopt the CSS changes that introduce the Red Hat fonts into PatternFly.
Copy link
Contributor

redallen left a comment

Just some linter nitpicking. You can run yarn lint:js to verify and/or yarn lint:fix to fix the auto-fixable ones.

packages/patternfly-4/react-docs/src/html.js Outdated Show resolved Hide resolved
packages/patternfly-4/react-docs/src/html.js Outdated Show resolved Hide resolved
packages/patternfly-4/react-docs/src/html.js Outdated Show resolved Hide resolved
packages/patternfly-4/react-docs/src/html.js Outdated Show resolved Hide resolved
packages/patternfly-4/react-docs/src/html.js Outdated Show resolved Hide resolved
packages/patternfly-4/react-docs/src/html.js Outdated Show resolved Hide resolved
/>
{props.headComponents}
</head>
<body {...props.bodyAttributes} className="pf-m-redhat-font">

This comment has been minimized.

Copy link
@dgutride

dgutride Jul 22, 2019

Member

We are using react-helmet in other places to alleviate the need for this - you can add this instead (only the body element needs to be added, other code added for reference so you can find it):

in react-docs/src/templates/sidebarLayout.js

<Helmet>
  <html lang="en-US" />
  <meta charSet="utf-8" />
  <meta name="description" content="PatternFly React Documentation" />
  <meta name="keywords" content="React, PatternFly, Red Hat" />
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
  <body className='pf-m-redhat-font' />
</Helmet>

This comment has been minimized.

Copy link
@tlabaj

tlabaj Jul 22, 2019

Author Contributor

I followed these instructions from the Gatsby documentations. Are you saying that I do not need to copy the html.js file?
https://www.gatsbyjs.org/docs/custom-html/

This comment has been minimized.

Copy link
@dgutride

dgutride Jul 22, 2019

Member

No - the html.js file isn't needed for just adding a class on the body tag, react-helmet supports that with a single line change to sidebarLayout

Titani
@patternfly-build

This comment has been minimized.

Copy link
Contributor

patternfly-build commented Jul 22, 2019

PatternFly-React preview: https://patternfly-react-pr-2563.surge.sh

Titani added 3 commits Jul 22, 2019
Titani
Titani
@patternfly-build

This comment has been minimized.

Copy link
Contributor

patternfly-build commented Jul 22, 2019

PatternFly-React preview: https://patternfly-react-pr-2563.surge.sh

Copy link
Contributor

redallen left a comment

🎯 Very precise. 🎯

@mcoker
mcoker approved these changes Jul 22, 2019
Copy link
Contributor

mcoker left a comment

lgtm!

@redallen redallen merged commit 968fd2f into patternfly:master Jul 22, 2019
8 checks passed
8 checks passed
ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: build_integration Your tests passed on CircleCI!
Details
ci/circleci: build_pf3_docs Your tests passed on CircleCI!
Details
ci/circleci: build_pf4_docs Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: test_jest_other Your tests passed on CircleCI!
Details
ci/circleci: test_jest_pf4 Your tests passed on CircleCI!
Details
ci/circleci: upload_docs Your tests passed on CircleCI!
Details
@patternfly-build

This comment has been minimized.

Copy link
Contributor

patternfly-build commented Jul 22, 2019

Your changes have been released in:

  • @patternfly/react-core@3.75.1
  • @patternfly/react-docs@4.9.1
  • @patternfly/react-inline-edit-extension@2.9.48
  • demo-app-ts@2.12.10
  • @patternfly/react-table@2.14.22
  • @patternfly/react-topology@2.6.19
  • @patternfly/react-virtualized-extension@1.1.81

Thanks for your contribution! 🎉

@tlabaj tlabaj mentioned this pull request Jul 22, 2019
0 of 4 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.