skip to main content
skip to navigation sidebar
skip to context sidebar
A pack of extensions for grommet 2
Edit this page
created:7/7/2021
updated:7/7/2021
loc
263
comments
3%
passed
6
failed
6
coverage
66%

Colors

avatar of atanasster
grommet-controls
3.0.2

A color selection element, with custom color palettes.

Component

browse
docs
issues
import { Colors } from 'grommet-controls';

Main

browse
docs
issues
() => (
  <Box direction="row">
    <Box basis="medium">
      <Colors
        size="small"
        onSelect={() => console.log('onSelect')}
        colors={materialColors}
      />
    </Box>
  </Box>
)

Properties

Name
Description
Default
colors

Color palette for the user to choose a color from

object
-
color

The default selected color

string
-
onSelect

Called with an object containing the selected color, rowName and colorName

(props: { color: string; rowName: string; colorName: string; }) => void
-
size

What size to make it

mediumsmalllarge
medium
columns

The maximum number of colors per row, if left emty will be calculated automatically

number
-
wrap

If true, will wrap any rows of colors that exceed the columns limit, otherwise will truncate larger rows

boolean
-

Commits

Date
Author
Commit Message
8/31/2020

atanasster

avatar of atanasster
update stories titles and navigation
8/30/2020

atanasster

avatar of atanasster
update versions for publish
8/30/2020

atanasster

avatar of atanasster
update eslint and add component-controls
8/27/2019

atanasster

avatar of atanasster
initial commit 2.x alpha
4 commits

External dependencies

package
imports
peer
grommet
^2.15.0
KeyboardBox
*
grommet/utils/colors
^2.15.0
normalizeColor
*
grommet/utils/mixins
^2.15.0
parseMetricToNum
*
react
^17.0.1
ReactComponent
*
react-dom
^17.0.1
findDOMNode
*
styled-components
^5.1.1
ThemeContext
*

Internal dependencies

file
imports
"./StyledColors"
StyledColorsStyledColorStyledColorContainerStyledRowStyledRows
"./ColorsProps"
IColorsProps

Component JSX

<StyledRow
keythemestyle
>
StyledRow
from"./StyledColors"
<StyledColorContainer
keytheme
>
StyledColorContainer
from"./StyledColors"
<ThemeContext.Consumer
>
styled-components
^5.1.1
<StyledColors
sizetheme
>
StyledColors
from"./StyledColors"

Stories

Colors

browse
docs
issues
() => (
  <Colors size="small" color="#ff0000" colors={uiColors} />
)

On Select

browse
docs
issues
() => (
  <Colors
    size="small"
    colors={basicColors}
    onSelect={() => console.log('onSelect')}
  />
)

Size

browse
docs
issues
() => (
  <Box gap="small">
    <Colors
      size="small"
      colors={{
        blue,
        blueGrey,
        brown,
        cyan,
        deepOrange,
      }}
    />
    <Colors
      size="medium"
      columns={5}
      colors={{
        blue,
        blueGrey,
        brown,
        cyan,
        deepOrange,
      }}
    />
    <Colors
      size="large"
      columns={3}
      colors={{
        blue,
        blueGrey,
        brown,
        cyan,
        deepOrange,
      }}
    />
  </Box>
)

Columns

browse
docs
issues
() => (
  <Colors
    size="small"
    columns={5}
    colors={{
      blue,
      blueGrey,
      brown,
      cyan,
      deepOrange,
    }}
  />
)

Wrap

browse
docs
issues
() => (
  <Colors
    size="small"
    columns={5}
    wrap={true}
    colors={{
      blue,
      blueGrey,
      brown,
      cyan,
      deepOrange,
    }}
  />
)
Previous
controls/Card
Next
controls/IconButton