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 () => (
  • {link( 'How can I set default value of Form.Field?', - '#how-can-i-set-default-value-on-form-field', + '#how-can-i-set-default-value-of-form-field', )}
  • {link( 'Is there an onLoad or equivalent event for Image components so I can run a function after an image loads?', - 'is-there-an-onload-or-equivalent-event-for-image-components-so-i', + '#is-there-an-onload-or-equivalent-event-for-image-components-so-i', + )} +
  • +
  • + {link( + "What's the difference between Flex, Grid, Layout, Box and Segment components?", + '#whats-the-difference-between-flex-grid-layout-box-and-segment-co', )}
  • @@ -111,6 +117,46 @@ export default () => ( } /> + + What's the difference between {code('Flex')}, {code('Grid')}, {code('Layout')}, {code('Box')}{' '} + and {code('Segment')} components? + + +

    + {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. +

    + + } + /> +