Block

Type: React component

How to get Block?

JavaScript

import { Block } from 'fds/components';

One of the two basic layout container components (the other is Flex).

Block is intended to be used as an easy intermediate component when declaring the layout of a custom component. It layouts its children using CSS' (inline) block flow and can be customized with commonly used props or if need be, with custom styles through its 'applyCss' prop.

Props

  1. alignSelf

    (Optional)

    Type: String

    The value to use for CSS' align-self property, should be one of:

    • 'auto',

    • 'baseline',

    • 'center',

    • 'flex-end',

    • 'flex-start',

    • 'stretch'

    Default value

  2. applyCss

    (Optional)

    Type: Object | Array<Object>

    A single object or an array of objects containing style rules to apply to the component.

    Eg.

    JSX

    const styles = { maxHeight: '100px' };
    ...
    <Component applyCss={styles}>
    ...

    Note: Use this as a last resort to set certain styles that cannot be modified by other, more explicit props (eg. use <Flex flex="1" /> instead of <Flex applyCss={{ flex: '1' }} />). This helps the framework to reuse more and generate less runtime overhead which in turn helps with (re-)render performance across the board.

    Best practices when using applyCss:

    • Separating or grouping style rules. Try to group related style rules that often change together in a single object. Separate unrelated style rules into separate objects. Try to reuse grouped styles when sensible.

    • Static and dynamic styles. Try to define as much of your style rules at the module level. This means they are only processed once by the CSS-in-JS framework. Which gives the best performance.

    Styles at the module level are called 'static' styles because they don't (cannot) change during the program's runtime.

    You probably also have use cases for styling that depends on component props (and/or other dynamic data in general). These are called 'dynamic' styles because they might change during the program's runtime.

    Try to define dynamic styles statically (define your options at the module level): eg. if you have a component that displays either red or green text based on a prop (say, hasError), define two separate style objects at the module level and write a module level function which chooses between the style objects based on its parameters.

    If you can't, do not use applyCss: eg. if you have a component that has a height prop to set its height, you cannot define your options at the module level: height has an infinite number of values. Instead just set the style attribute of the element directly using a JSX expression: Eg. <div style={{height: this.props.height }} /> instead of <div {...applyCss({ height: this.props.height })} />.

    Default value

  3. children

    (Optional)

    Type: ReactNode

  4. flex

    (Optional)

    Type: Number | String

    The value to use for CSS' flex property.

    Default value

  5. isInline

    (Optional)

    Type: Boolean

    Use CSS display: inline-block instead of block when set to true.

    Default value

  6. isScrollContainer

    (Optional)

    Type: Boolean

    Whether or not this component should act as a scroll container. Meaning, if it should render a (vertical) scrollbar if the contents of the component exceed their bounds; available space.

    When making a component a scroll container, a renderer is also introduced. This is used to render positioned elements like Drop to.

    Default value

  7. onRef

    (Optional)

    Type: Function

    A callback that is called whenever a component's ref changes.

    Use this callback to get a ref to (the domNode of) a component. There shouldn't be many usecases for using this prop yourself, but you might have to implement it with a given argument from a render callback somewhere.

    For more information about React and "refs", check the React documentation

    Arguments

    Returns

    Default value

  8. paddingSize

    (Optional)

    Type: Number | String | Object

    The amount of padding rendered by the component.

    This should be a either, A single size value, one of the following values:

    • 0 (zero, no padding at all)

    • 's' (small)

    • 'm' (medium)

    • 'l' (large) to set the paddingSize for the top, right, bottom and left side to a single shared value.

    Or you can pass an object whose properties determine a specific padding size for either:

    • 'horizontal': %single size value% to set the 'left' and 'right' padding to the given size value (one of the values listed above)

    • 'vertical': %single size value% to set the 'top' and 'bottom' padding

    Or you can pass any combination of 'bottom', 'horizontal', 'left', 'right', 'top', 'vertical', where the more specific keys override the generic (eg. setting 'left': 's' and 'horizontal': 'm' would result in a padding size of 's' for the left side and a size of 'm' for the right side.

    Default value

  9. spaceHorizontalSize

    (Optional)

    Type: Number | String

    The amount of horizontal space (or margin) between the children of the component.

    This should be one of the following values:

    • 0 (zero, no margin at all)

    • 's' (small)

    • 'm' (medium)

    • 'l' (large)

    Default value

  10. spaceVerticalSize

    (Optional)

    Type: Number | String

    The amount of vertical space (or margin) between the children of the component.

    This should be one of the following values:

    • 0 (zero, no margin at all)

    • 's' (small)

    • 'm' (medium)

    • 'l' (large)

    Default value