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

Remove Babel #1045

Closed
wants to merge 1 commit into from
Closed

Remove Babel #1045

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions babel-defines.js
View file
Open in desktop

This file was deleted.

32 changes: 0 additions & 32 deletions babel.config.js
View file
Open in desktop

This file was deleted.

31 changes: 15 additions & 16 deletions docs/content/core-concepts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ title: Core Concepts
This document aims to discuss some of the core concepts of building with Primer React.

## Responsive props

It's really easy to set different values for most of our component props based on screen size! We take advantage of [styled-system](https://github.com/styled-system/styled-system)'s responsive props API in our components.

```
Expand All @@ -20,45 +21,43 @@ or
You can provide your own theme to Primer React! There are a few ways of doing this to varying degrees, checkout the [theme docs](https://primer.style/components/primer-theme) for more information.

## The `css` prop

When push comes to shove and you just _really_ need to add a custom CSS rule, you can do that with the `css` prop. Please don't abuse this :)

```
<Box css='border-bottom-right-radius: 0px' />

```

Please note that you will need to have the **[styled-components babel plugin](https://www.styled-components.com/docs/tooling#babel-plugin)** set up in your project in order to use the `css` prop.
Copy link
Member Author

Choose a reason for hiding this comment

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

TODO: Verify css still works.


## Types of components

We categorize our components into 3 general types. Building block components, pattern components, and helper components. Understanding how these types of components interact with each other can help you better understand how to get the most out of Primer React.

- Building Blocks

Building block components are components that are basic in their functions and can be used together with other components to build just about any UI. Some examples of building block components are `Box`, `Avatar`, `Details`, and `Link`.
Building block components are components that are basic in their functions and can be used together with other components to build just about any UI. Some examples of building block components are `Box`, `Avatar`, `Details`, and `Link`.

- Pattern Components
- Pattern Components

Pattern components are components that are made up of several building block components to represent a commonly used pattern in our UI. Some examples of pattern components are `UnderlineNav` and `FilterList`. We plan on expanding our offering of pattern components in the near future.
Pattern components are components that are made up of several building block components to represent a commonly used pattern in our UI. Some examples of pattern components are `UnderlineNav` and `FilterList`. We plan on expanding our offering of pattern components in the near future.

- Helper Components
- Helper Components

Helper components are components that help the user achieve common CSS patterns while maintaining some control over values used. Some examples of helper components are `Flex`, `Text`, `Grid`, and the `Position` components.
Helper components are components that help the user achieve common CSS patterns while maintaining some control over values used. Some examples of helper components are `Flex`, `Text`, `Grid`, and the `Position` components.

## The `as` prop

## The `as` prop
The `as` prop is a feature that all of our components get from [styled-components](https://www.styled-components.com). It allows you to pass a HTML tag or another component to a Primer Component to be rendered as the base tag of that component along with all of it's styles and props.
The `as` prop is a feature that all of our components get from [styled-components](https://www.styled-components.com). It allows you to pass a HTML tag or another component to a Primer Component to be rendered as the base tag of that component along with all of it's styles and props.

For example, say you are using a `Button` component, and you really need to apply `Flex` styles to it. You can compose `Flex` and `Button` like so:

For example, say you are using a `Button` component, and you really need to apply `Flex` styles to it. You can compose `Flex` and `Button` like so:

```.jsx
<Flex as={Button} href='https://github.com'>Hello</Flex>
```
```.jsx
<Flex as={Button} href='https://github.com'>Hello</Flex>
```

This will allow you to use all of the `Button` props _and_ all of the `Flex` props without having to wrap your `Button` component in another `Flex` component.
This will allow you to use all of the `Button` props _and_ all of the `Flex` props without having to wrap your `Button` component in another `Flex` component.

**This pattern does have some limitations.** Usage of the `as` prop can lead to unexpected output. In the example above, if the user had done `<Button as={Flex}/>` instead, because the `Flex`'s render method is ultimately applied, and `Flex` components render `div`'s, you'll see that the rendered component is a `div` when ideally you'd like it to be a `button`. It is also not always clear how the styles in both components will interact and/or override each other.
**This pattern does have some limitations.** Usage of the `as` prop can lead to unexpected output. In the example above, if the user had done `<Button as={Flex}/>` instead, because the `Flex`'s render method is ultimately applied, and `Flex` components render `div`'s, you'll see that the rendered component is a `div` when ideally you'd like it to be a `button`. It is also not always clear how the styles in both components will interact and/or override each other.

For these reasons, **we recommend only using the `as` prop when you cannot achieve the same result by nesting components.** The `Flex` / `Button` example could be done like so:

Expand Down
10 changes: 3 additions & 7 deletions docs/gatsby-node.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
const defines = require('../babel-defines')

exports.onCreateWebpackConfig = ({actions, plugins, loaders, getConfig}) => {
const config = getConfig()
// Add our `__DEV__` and `process.env.NODE_ENV` defines
config.plugins.push(plugins.define(defines[process.env.NODE_ENV || 'development']))
Copy link
Member Author

Choose a reason for hiding this comment

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

Check out the note above: https://github.com/primer/components/pull/1045/files#r574817860


config.module.rules = [
...config.module.rules,
Expand All @@ -12,11 +8,11 @@ exports.onCreateWebpackConfig = ({actions, plugins, loaders, getConfig}) => {
// The new configuration is based off the original...
...loaders.js(),
test: /\.jsx?$/,
exclude: (modulePath) => /node_modules/.test(modulePath),
exclude: modulePath => /node_modules/.test(modulePath),
// ...except that we want to run Primer React through webpack as well.
// By default, Gatsby won't use the define plugin we added above on Primer React.
include: (modulePath) => /@primer\/components/.test(modulePath),
},
include: modulePath => /@primer\/components/.test(modulePath)
}
]
actions.replaceWebpackConfig(config)
}
Loading