jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace style guide references

Browse Source 
Summary:
allow-large-files
See D34339758

Reviewed By: jknoxville

Differential Revision: D34378570

fbshipit-source-id: ad451afc1774e6d38902d510629ce1b92457adf0
This commit is contained in:
Andrey Goncharov
2022-02-22 07:58:26 -08:00
committed by Facebook GitHub Bot
parent 342c316c84
commit bed23c586b
4 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/extending/flipper-plugin.mdx
View File

@@ -821,7 +821,7 @@ const [showWhitespace, setShowWhitespace] = useLocalStorageState(
### Layout.* ### Layout.*
Layout elements can be used to organize the screen layout. Layout elements can be used to organize the screen layout.
See `View > Flipper Style Guide` inside the Flipper application for more details. See [the style guide](style-guide.mdx) for more details.
### DataTable ### DataTable
### DataFormatter ### DataFormatter
@@ -933,7 +933,7 @@ Shows a loading spinner. Accept an optional `size` to make the spinner larger /
### NUX ### NUX
An element that can be used to provide a New User eXperience: Hints that give a one time introduction to new features to the current user. An element that can be used to provide a New User eXperience: Hints that give a one time introduction to new features to the current user.
See `View > Flipper Style Guide` inside the Flipper application for more details. See [the style guide](style-guide.mdx) for more details.
### FileSelector ### FileSelector
@@ -964,12 +964,12 @@ It doesn't really matter where exactly this component is used in your layout, as
An element that can be used to track user interactions. An element that can be used to track user interactions.
An example scuba query can be found [here](https://fburl.com/scuba/infinity_analytics_events/xryoq5j7). An example scuba query can be found [here](https://fburl.com/scuba/infinity_analytics_events/xryoq5j7).
See `View > Flipper Style Guide` inside the Flipper application for more details. See [the style guide](style-guide.mdx) for more details.
### TrackingScope ### TrackingScope
Defines the location of underlying Tracked elements more precisely. Defines the location of underlying Tracked elements more precisely.
See `View > Flipper Style Guide` inside the Flipper application for more details. See [the style guide](style-guide.mdx) for more details.
### withTrackingScope ### withTrackingScope
@@ -981,7 +981,7 @@ Higher order component that wraps a component automatically in a [`TrackingScope
Provides a standard set of colors and spacings, used by the Flipper style guide. Provides a standard set of colors and spacings, used by the Flipper style guide.
The colors exposed here support dark mode. The colors exposed here support dark mode.
See `View > Flipper Style Guide` inside the Flipper application for more details. See [the style guide](style-guide.mdx) for more details.
## Utilities ## Utilities

2
docs/extending/sandy-migration.mdx
View File

@@ -130,7 +130,7 @@ This will help with achieving consistency in look and feel.
There are three important resources to check for documentation on the components available: There are three important resources to check for documentation on the components available:
1. If you start Flipper, and go to `View > Flipper style guide`, you will see a general overview of the Flipper design system. It will demonstrate colors, typography and creating layouts including some examples. 1. [Flipper style guide - a general overview of the Flipper design system](style-guide.mdx). It will demonstrate colors, typography and creating layouts including some examples.
2. The [ant.design component overview](https://ant.design/components/overview/) 2. The [ant.design component overview](https://ant.design/components/overview/)
3. The [API reference](flipper-plugin.mdx#ui-components) documentation for the components provided by `flipper-plugin` 3. The [API reference](flipper-plugin.mdx#ui-components) documentation for the components provided by `flipper-plugin`

4
docs/extending/styling-components.mdx
View File

@@ -11,7 +11,7 @@ In general, custom styling should be needed rarily, as Ant Design provides a ver
To build plugin layout and data visualization Flipper ships with an additional set of components through the `flipper-plugin` package. To build plugin layout and data visualization Flipper ships with an additional set of components through the `flipper-plugin` package.
The list of available additional components can be found in the <Link to={useBaseUrl('/docs/extending/flipper-plugin#ui-components')}>API Reference</Link> and are further documented The list of available additional components can be found in the <Link to={useBaseUrl('/docs/extending/flipper-plugin#ui-components')}>API Reference</Link> and are further documented
in the Flipper Style Guide which can be found in Flipper under `View > Flipper style guide`. in [the style guide](style-guide.mdx).
In case you still need customly styled components, In case you still need customly styled components,
we are using [emotion](https://emotion.sh) to style our components. For more details on how this works, please refer to emotion's documentation. We heavily use their [Styled Components](https://emotion.sh/docs/styled) approach, which allows you to extend our and Ant's built-in components. we are using [emotion](https://emotion.sh) to style our components. For more details on how this works, please refer to emotion's documentation. We heavily use their [Styled Components](https://emotion.sh/docs/styled) approach, which allows you to extend our and Ant's built-in components.
@@ -81,7 +81,7 @@ Children can be matched by using normal CSS selectors. This makes it possible to
## Colors ## Colors
The `theme` module contains all standard colors used by Flipper. All available colors can be previewed by starting Flipper and opening `View > Flipper Style Guide`. The `theme` module contains all standard colors used by Flipper. All available colors can be previewed in [the style guide](style-guide.mdx).
The colors exposed here will handle dark mode automatically, so it is recommended to use those colors over hardcoded ones. The colors exposed here will handle dark mode automatically, so it is recommended to use those colors over hardcoded ones.
```javascript ```javascript

2
docs/tutorial/js-custom.mdx
View File

@@ -179,7 +179,7 @@ The assertions are provided by [Jest](https://jestjs.io/), and `toMatchInlineSna
So far, in `index.tsx`, our `Component` didn't do anything useful yet. Time to build some nice UI. So far, in `index.tsx`, our `Component` didn't do anything useful yet. Time to build some nice UI.
Flipper leverages Ant design, so any [official Ant component](https://ant.design/components/overview/) can be used in Flipper plugins. Flipper leverages Ant design, so any [official Ant component](https://ant.design/components/overview/) can be used in Flipper plugins.
The styling system used by Flipper can be found by starting Flipper, and opening `View > Flipper Style Guide`. The styling system used by Flipper can be found at [the style guide](../extending/style-guide.mdx).
The different `Layout` elements are documented there as well. The different `Layout` elements are documented there as well.
```tsx ```tsx