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