diff --git a/CHANGELOG.md b/CHANGELOG.md index b15dc21391..acf2beeb28 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -49,6 +49,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix broken fragments on CodeSandbox @lucivpav ([#1655](https://github.com/stardust-ui/react/pull/1655)) - Improve a table with component props in docs @layershifter ([#1634](https://github.com/stardust-ui/react/pull/1634)) - Improve rendering performance for docs examples @Bugaa92 ([#1654](https://github.com/stardust-ui/react/pull/1654)) +- Add FAQ entry for `Flex`, `Grid`, `Layout`, `Box`, `Segment` @lucivpav ([#1646](https://github.com/stardust-ui/react/pull/1646)) ## [v0.34.1](https://github.com/stardust-ui/react/tree/v0.34.1) (2019-07-11) diff --git a/docs/src/views/FAQ.tsx b/docs/src/views/FAQ.tsx index 01a7927358..dea7f614a4 100644 --- a/docs/src/views/FAQ.tsx +++ b/docs/src/views/FAQ.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import DocPage from '../components/DocPage/DocPage' import GuidesNavigationFooter from '../components/GuidesNavigationFooter' -import { link } from '../utils/helpers' +import { link, code } from '../utils/helpers' import { CodeSnippet } from '@stardust-ui/docs-components' import { Header } from '@stardust-ui/react' @@ -30,13 +30,19 @@ export default () => (
+ {code('Flex')}, {code('Grid')} and {code('Layout')} components handle layout aspects. + The {code('Flex')} component is for laying out items in one direction, while the{' '} + {code('Grid')} component is made for two dimensional layouts. Visit the{' '} + {link('Layout guide', '/layout')} page for a detailed comparison between {code('Flex')} + and {code('Grid')}. +
++ The {code('Layout')} component is now deprecated. Its purpose was arrangement of the + content of a component. {code('Flex')} or {code('Grid')} component should be used + instead of the {code('Layout')} + component. +
++ {code('Box')} is a utility component that is often used by Stardust to implement + higher-level components. By default, it renders styled {code('div')} element. +
++ The cases when client might want to use it are very exceptional, and all are about + applying custom styles to rendered {code('div')} element. However, more robust approach + that won't break theming consistency is to instead create a custom component and define + related styles as part of a theme. Visit{' '} + {link('Integrate Custom Components', '/integrate-custom-components')} + page to see how this can be done. +
++ {link('Segment', '/components/segment')} groups related content together. It shouldn't + be used to handle layout aspects. +
+ + } + /> +