Primitives
Primitives are the building blocks of WedgeKit components. They are largely settings or wrapper components designed for keeping all WedgeKit components consistent in a composable and discoverable way.
Usage
import settings from '@wedgekit/primitives';
Settings
@wedgekit/primitives
exports a settings object as its default export. These settings are intended to enforce consistency across wedgekit
and A2W apps. The following settings are included in the settings object:
animations
transitions for transform
, box-shadow
, and border
are included in settings.animations
base
base is a set number of pixels that all sizes in wedgekit
and A2W apps should be based on; inspired by Evergreen UI's major scale
border
provides width
and radius
settings
colors
contains status
color codes
cursor
the CSS styles for disabled
and readOnly
font
code
font settings
fontFamily
a CSS complaint font-family
string
fontSize
provides sizes for the following:
- label
- link
- body
- bodySmall
- input
- tooltip
- h1
- h2
- h3
- h4
- h5
- h6
fontWeight
provides font-weights for title
, normal
& link
tabIndex
the tabIndex for disabled
for those who strongly prefer package exports over extremely trivial code
widths
inexplicably the widths for toast
and multiselect-card
are in settings and not in their respective components
zindex
z-index values for modal
and header
Mixins
BackgroundMixin
Background for form elements
Props
disabled
required:
type: boolean
invalid
required:
type: boolean
readOnly
required:
type: boolean
CursorMixin
Same... I think this is a cursor mixin for use with inputs.
Props
disabled
required:
type: boolean
invalid
required:
type: boolean
readOnly
required:
type: boolean
InputBorderMixin
I know this one is for inputs.
disabled
required:
type: boolean
invalid
required:
type: boolean
readOnly
required:
type: boolean
status
required:
type: 'default' | 'error' | 'success' | 'pending'
wrapsGroup
required:
type: boolean
InputFocusMixin
Wipes out existing browser styling(?)
OptionMixin
a mixin for checkboxes and radio inputs which handles hover and focus-within styling
Props
active
required:
type: boolean
disabled
required:
type: boolean
PopoverShadowMixin
It's a shadow mixin for popovers. Which is not in the popover package because it's so versatile.
Props
disabled
required:
type: boolean
invalid
required:
type: boolean
status
required:
type: 'default' | 'error' | 'success' | 'pending'
readOnly
required:
type: boolean
wrapsGroup
required:
type: boolean
UpdatedInputMixin
It's updated, which is how you know its the right one. Unless there's an updatedUpdatedInputMixin of course, in which case please use that instead.
Props
disabled
required:
type: boolean
fullWidth
required:
type: boolean
invalid
required:
type: boolean
labelHidden
required:
type: boolean
labelInline
required:
type: boolean
status
required:
type: 'default' | 'error' | 'success' | 'pending'
readOnly
required:
type: boolean
Animations
withUpDown
withUpDown
is a React HOC which has a direction
prop which can be set to up
or down
. It will transform the content 180 degrees when direction
is up