Goose

The base of a Spruce component library. It aims to describe the functions of UI components semantically, and without knowledge of how styles will visually appear.

Components

Badge

An un-interactive presentation of state.

Modifiers

• positive
• negative
• hero
• primary
• $color

Box

A divided area of content.

The unmodified Box should not have any margins or padding so it can be used as an invisible element container, like a <div>.

Modifiers

• absolute -
• alternative - An alternative style for a box e.g. an alternative background color. Implies that the content of the box is heirarchically adjacent to surrounding content.
• bottom -
• bounded - Applies some kind of boundary so that the boxes contents appear distinct from content around the box. e.g. using a border or background color. Implies that the content of the box is heirarchically beneath surrounding content.
• clearfix -
• color<Name> -
• fixed -
• floatLeft -
• floatRight -
• flood -
• hero -
• inline -
• left -
• margin<Direction><SiPrefix>
• negative -
• pointer -
• positive -
• relative -
• right -
• top -

Button

The unmodified Button should appear as having netural importance. The primary modifier can be used on buttons that need to convey more importance.

Modifiers

• primary - Makes the button more important.
• positive - A button that implies a positive outcome.
• negative - A button that implies a negative outcome.
• solo - A button that is standalone and does not have siblings within the information heirarchy.
• inline - A button that has a small amount of spacing so buttons may be placed next to each other.

Checkbox

???

Choice

The result of a user selection.

Dialog

A small area on screen in which the user is prompted to provide information or select commands.

Children

• Dialog_title
• Dialog_content
• Dialog_actions

Dropdown

Grid

A Grid consists of a series of columns, whose widths are defined by ratios of the Grid's total width. These ratios are divisions of 12, so a 2 column Grid would contain 2 columns, each with width 6. By default Grids columns stack on top of each other on small page widths.

Grids always have Grid_column child elements.

Modifiers

• Grid_column-1, Grid_column-2 ... Grid_column-12 - Sets the width of the column as a division of 12 of the Grid width.
• Grid_column-always - Disables collapsing the Grid on small page widths.
• Grid_column-shrink - Causes a Column to be the same width as its contents.
• Grid_column-padding - The padding between each column. Padding is not applied to the left of the leftmost column, or on the right of the rightmost column.

Header

???

Icon

Image

Input

Textual input.

Link

A link to other content.

List

Core modifiers: divided ordered unordered nested

Lists of items. Lists have child elements List_item.

Neither the List or List_item elements should have margins by default. Margins can be applied using a margin modifier with an optional SI suffix.

Media

Overlay

ProgressBar

Select

A select box to allow the user to choose one or more items from a list. By default goose assumes react-select is being used.

Table

ToggleSet

Toggle

A user input that can toggle a boolean value.

Core modifiers: active

• active - The appearance of the toggle while it's true.

Terminal

Text

Any text to display on the website, e.g. copy, headings, titles.

Sizing

• size<SiPrefix>
  • sizeGiga roughly corresponds with traditional h1 sizing
  • sizeMega roughly corresponds with traditional h2 sizing
  • sizeKilo roughly corresponds with traditional h3 sizing
  • sizeHecto roughly corresponds with traditional h4 sizing
  • sizeMilli roughly corresponds with traditional small sizing

Margins

Text-margin modifiers should only affect the bottom margin. The spacing that might normally be provided by a top margin should instead be provided by a preceding sibling or an ancestor.

• margin<SiPrefix>
  • marginGiga margins often go well with sizeGiga
  • marginMega margins often go well with sizeMega
  • marginKilo margins often go well with sizeKilo
  • margin margins often go well to space out normal paragraphs

Weight

• weightKilo - Text that appears more important than normal, often bolded.
• weightMilli - Text trhat appears less important than normal, often muted.
• emphasis - Styled to demonstrate an emphasis on the text.

Typography

Window

A combination of a fixed-height title bar and a variable-height content area.

Children

• Window_title
• Window_content

Wrapper

A container that enforces vertical page boundaries, such as a maximum width and page alignment.

Modifiers

• size<SiPrefix> - Sets a maximum width to the element.

Too Complex. (Are they molecules?)

Pagination

Lightbox

Navigation

DayPicker

A way to choose a date and or time. Assumes react-day-picker.

Message

Messages are used for when the website communicates information about its current status or data to the user, such as "Loading...", "Invalid password" or "404".

Appearance props

• appearance=deadEnd - A large message, often used at the point at which the user can no longer progress and must choose to navigate elsewhere. E.g: 404's, Large form submissions.
• appearance=block - A block message that appear in their own vertical space, such as password errors.
• appearance=inline - An inline message.

State props

• state=fetch - A message that is styled to appear as though something is loading.
• state=positive - A message that is styled to appear as though something has succeeded.
• state=negative - A message that is styled to appear as though something has failed.

Modifiers

The appearance and state of a Message are applied as modifiers to a Message.

Login

Breadcrumbs

The representation of one branch of a tree hierarchy

Todo: Confused modifiers

These are perhaps too bound to specific visual or design choices and will need to be worked upon before being accepted or rejected from goose.

• flood - Fills the width and height of the parent element.
• spread - Fills the width of the parent element.

Goose Box Model

               Boundary
              +--------------------------------+-------------------------------------+
              |                                ^                                     |  ^
              |                                |                                     |  | Size
              |                                | Padding                             |  |
              |                                |                                     |  |
              |                                v                                     |  |
              |         +----------------------+-----------------------------+       |  |
              |         |                                                    |       |  |
              |         |    ####   ####  #    # ##### ###### #    # #####   |       |  |
 Margin       |         |   #    # #    # ##   #   #   #      ##   #   #     |       |  |
              |         |   #      #    # # #  #   #   #####  # #  #   #     |       |  |
<-----------+ |         |   #      #    # #  # #   #   #      #  # #   #     |       |  |
              |         |   #    # #    # #   ##   #   #      #   ##   #     |       |  |
              |         |    ####   ####  #    #   #   ###### #    #   #     |       |  |
              |         |                                                    |       |  |
              |         +----------------------------------------------------+       |  |
              |                                                                      |  |
              |                                                                      |  |
              |                                                                      |  |
              |                                                                      |  |
              |                                                                      |  v
              +----------------------------------------------------------------------+
   

Categorical State Modifiers

Importance

primary
tertiary

Interactions

active
focus
disabled
waiting
hover

Connotation (suffixable)

positive
negative
warning
edit