Skip to main content

Scale Principle

When thinking about the size of a container you need to think about explicit size and implicit scale. We cover these concepts below.

SizeProps (Explicit size)​

/** 
 * Add support for explicit size
 */
export interface SizeProps {
  height?: CSSLength,
  minHeight?: CSSLength,
  maxHeight?: CSSLength,

  width?: CSSLength,
  minWidth?: CSSLength,
  maxWidth?: CSSLength,
}

Explicit sizes are driven by width,height,minHeight,minWidth,maxHeight,maxWidth arguments. You can have an explicit value on only one dimension e.g. here we have a simple Column container with explicit height only:

Live Editor
Result
Loading...

This is essentially what you are doing in most design tools out there. Sadly explicit height+width sizing does not scale to real applications, where sizes need to be reactive to either their parent or their content. Fortunately we provide concepts to handle these cases with implicit scale concept we cover next.

ScaleProp (Implicit size)​

Implicit size controls the component behaviour when no explicit size properties are provided.

The ScaleProp is what controls the implicit size (content / stretch / stretch-ratio) features: 

/** 
 * Specifies scale interaction
 */
export interface ScaleProp {
  /** 
   * Specifies `scale` interaction
   */
  scale?:
  | 'content' /** default */
  | 'stretch' /** Same as `1` */
  | number /** A stretch ratio */;
}

Lets discuss these individually below:

Content​

A content scaled component takes up as much space as needed by the children. This is the most common scale that you want and is therefore the default for our containers.

In the example below, we have

  • an explicit sized Column (background lightskyblue)
  • an inner content scaled Column (background darkorange).

The inner vertical keeps it size to match whatever is needed by its children (the orange will scale as you add more / less content).

Live Editor
Result
Loading...

You can set scale to content explicitly as well if you want (scale='content').

Stretch​

A stretch sized component takes up as much space as offered by the parent.

In the example below, we have

  • an explicit sized Column (background lightskyblue)
  • an inner stretch-sized Vertical (background darkorange)

The inner vertical keeps its size to match that of the outer container (the orange will cover up the blue).

Live Editor
Result
Loading...

Stretch Ratio​

With stretch scale, you can specify number values. This controls how much you want different items dividing the space provided by their parent.

In the example below:

  • We have 1 going to darkorgange
  • We have 2 going to lightpink
Live Editor
Result
Loading...

Mixing​

You can mix Stretch, Content and explicit sizes to match your design requirements as shown in the example below (explicit,content,stretch 1,stretch 2):

Live Editor
Result
Loading...

Additional Guidance​

Defaults and Priorities​

info

stretch >> explicit size >> content (default)

scale=stretch takes precedence on any explicit sizing e.g. width has no effect in the following example:

Live Editor
Result
Loading...

Explicit size takes precedence over scale=content e.g. width takes precedence in the following example:

Live Editor
Result
Loading...