Space

The Morningstar Design System applies space within and between components—even differently sized ones—to consistently render harmonious visual displays. The spatial standards and concepts described below are woven through the entire library and can help product teams compose custom views and components.

System components are composed with consistent spatial applications using a few reusable concepts: insetting, stretching an inset, stacking, and separating items inline.

Inset

An inset applies padding equal on all four sides to block or inline elements.

Example 2: Insets With Left and Right Edge Cropped

Some element arrangements conform to inset spacing conventions, but need left-most and right-most elements to align with an element’s edge. In that case, zero out the left edge of the left-most cell and right edge of the right-most cell, as is done within the Data Table component.

Here is where we want an accurate description about the data displayed and/or the table’s intent

Inline Left and Right

Use inline-left spacing to separate inline elements flowing together from the left edge. This applies right margin to each item. The opposite is true for inline-right.

Variables

Apply inline-left and inline-right constants to a component or element’s margins.

Omit this space from the :last-child component or element item in a set.

Combine relevant stack and inline concepts when inline items wrap.

Variable Name

Value

Result

$mds-space-inline-left-three-quarter-x

0 6px 0 0

ABC

$mds-space-inline-left-1-x

0 8px 0 0

ABC

$mds-space-inline-left-1-and-a-half-x

0 12px 0 0

ABC

$mds-space-inline-right-three-quarter-x

0 0 0 6px

ABC

$mds-space-inline-right-1-x

0 0 0 8px

ABC

$mds-space-inline-right-1-and-a-half-x

0 0 0 12px

ABC

Implementing Space

Line Height and Cropping Text

In order to unify spacing concepts across the library, the System crops out the unpredictable impact of line-height at the top and bottom of text blocks.

This effect is achieved by the mds-text-crop() mixin available within the src/library/styles/shared/typography.scss file, which trims the margin-top and margin-bottom of an element using :before and :after pseudo elements.

Without Text Crop

Text

With Text Crop

Text

The mds-text-crop() mixin is applied to a component or element block:

.mds-form__microcopy {
@include mds-text-crop();
...
}

Spacing by Size

Many System components are offered in two or more sizes, such as small, medium and large. Space is configured to adjust padding, margin and other concerns at each increment. These concepts enable multiple components to be positioned together vertically or horizontally with consistency regardless of size.

Incremental Spacing

Many components use the incremental-spacing() mixin within the src/library/styles/size.scss file. This macro enables an engineer to quickly apply System spacing concepts across component elements.

Parameter

Default

Examples

Outcome

$component-name

None

list-group

Includes component name within selectors.

$spacing-type

None

inset, inset-stretch, stack

Applies the spacing concept for use on margins or padding.

$default-size

m

m, s, l

Sets the “middle” size so that spacing is properly encoded across levels.

$selector-level

element

element or block

Applies spacing at the block- or element-level selectors, consistent with BEM methodology.

$property-list

false

(‘padding-left’, ‘padding-top’)

Accepts a SASS list of CSS properties that the space value will be applied to. If not provided, the mixin will select the CSS property based on the $spacing-type.

$space-adjustment

0

$space-adjustment: 3px

Used in conjunction with $property-list. A positive or negative px value that is added to the values. Output by the mixin. Used only in special cases to correct alignment issues.

$text-cropped

true

If set to false, the incremental-spacing mixin will recreate the same effect as the mds-text-crop mixin using custom padding sizes. Used exclusively on <input> elements which cannot use mds-text-crop. Do not set this argument to false if you are already using the mds-text-crop mixin.