@wedgekit/primitives
v5.0.1
Published
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.
Downloads
66
Maintainers
Keywords
Readme
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