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 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
### DataFormatter
@@ -933,7 +933,7 @@ Shows a loading spinner. Accept an optional `size` to make the spinner larger /
### 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.
See `View > Flipper Style Guide` inside the Flipper application for more details.
See [the style guide](style-guide.mdx) for more details.
### 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 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
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
@@ -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.
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

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:
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/)
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.
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,
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
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.
```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.
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.
```tsx