Home > @uniformdev/design-system

design-system package

Classes

ClassDescription
LinkNode

Functions

FunctionDescription
IconsProvider({ children })Provider to the Icon component
Image_2({ alt, src, className, imgClassName, variant, width, height, ...imgAttribs })
InputComboBox(props)InputComboBox
macifyShortcut(shortcut)
ParameterDataResource({ label, labelLeadingIcon, id, onConnectDatasource, caption, disabled, children, })
ParameterImagePreview({ imageSrc })
ProgressBar({ className, current, max, theme })
ShortcutContext({ children })
ShortcutRevealer({ shortcut, macShortcut, className, })
Tooltip({ children, title, placement, visible, ...props })
useIconContext()
useShortcut({ handler, shortcut, macShortcut, doNotPreventDefault, activeWhenEditing, })

Interfaces

InterfaceDescription
ActionButtonsProps
CalloutProps
DrawerItem
DrawerRendererItemProps
DrawerRendererProps
IconButtonProps
IconProps
ImageProps
InputKeywordSearchProps
LoadingIconProps
LoadingOverlayProps
MenuProps
ProgressBarProps
TabButtonProps
TabContentProps
TabsProps

Variables

VariableDescription
accessibleHidden
AddButtonAdd button component
AddListButtonUniform Add List Button Component
addPathSegmentToPathnameJoins different variants of parent relative url with path segment. Path can be "", "/" and "/foo/bar"
AnimationFileSee https://lottiereact.com/ for example documentation
AvatarA component to render rounded avatars of a user or an app.
AvatarGroupRenders avatars in a group with the ability to truncate the list. This component works best when the <Avatar> component are direct children.
BadgeUniform Badge Component
BannerUniform Banner Component
borderTopIcon
breakpointsObject of breakpoints and the pixel values
button
ButtonUniform Button Component
buttonAccentAltDark
buttonAccentAltDarkOutline
buttonDestructive
buttonGhost
buttonGhostDestructive
buttonGhostUnimportant
buttonPrimary
buttonPrimaryInvert
buttonRippleEffect
buttonSecondary
buttonSecondaryInvert
buttonTertiary
buttonTertiaryOutline
buttonUnimportant
ButtonWithMenuUniform ButtonWithMenu Component
CalloutUniform Callout Component
canvasAlertIcon
CaptionComponent that provides caption text to input fields
Card
CardContainerUniform Card Container
cardIcon
CardTitle
CheckboxWithInfo
ChipChips are used in a variety of ways To represent tokens, where the value of the chip will be replaced with something dynamically. To represent tags or important metadata about an object To represent a different object, as a reference
ConnectToDataElementButton
Container
Counter
cqContainer Query Helper Function
CreateTeamIntegrationTile
CurrentDrawerContext
customIcons
DashedBoxUniform Dashed Box Component
DescriptionListA component to render a key-value list (uses <dl />, <dt /> and <dd /> under the hood).
Details
DismissibleChipActionDismissible chip action should be used with the Chip component
DrawerA drawer component that opens from the right side of is parent. The component is used in combination with DrawerProvider and DrawerRenderer
DrawerContent
DrawerProviderProvides the context to the Drawer and DrawerRenderer components.
DrawerRendererRenders a stack of drawers in a different location than their original position in the component tree. Uses React Portal under the hood.
EditTeamIntegrationTileUniform Edit Team Integration Tile
ErrorMessageComponent that provides error messaging to input fields
extractParameterPropsA function that extracts all common props and element props
fadeInfadeIn animation - fade in an element from 0 to 1 opacity
fadeInBottomfadeInBottom animation - fades in an element from the Y axis by 10px
fadeInLtr
fadeInRtl
fadeInTopfadeInTop animation - fades in an element from the Y axis by -10px
fadeOutBottomfadeOutBottom animation - fades out an element from the Y axis by 10px
Fieldset
fullWidthScreenIcon
getDrawerAttributes
getParentPath
getPathSegment
growSubtlegrowSubtle animation - increases the size of an element from scale(1) - scale(1.15) and back down to scale(1) using transform: scale(1)
HeadingComponent that sets the heading tag
HexModalBackground
HorizontalRhythm
IconComponent that renders icons
IconButton
ImageBroken
imageTextIcon
infoFilledIcon
InfoMessageComponent that provides info messaging to input fields
InlineAlertUniform Inline Alert Component
input
InputInput Component
inputError
InputInlineSelectInput Inline Select
InputKeywordSearchComponent used for keyword search functionality
inputSelect
InputSelectInput Select Component
InputToggleComponent that creates a checkbox or radio input field
IntegrationComingSoonUniform Integration Coming Soon Component
IntegrationHeaderSectionUniform Integration Header Section Component
IntegrationLoadingTileUniform Integration Loading Tile
IntegrationModalHeaderUniform Integration Modal Header
IntegrationModalIconUniform Integration Modal Icon
IntegrationTile
isMacLike
isSecureURL
isValidUrl
JsonEditor
jsonIcon
Label
LabelLeadingIcon
labelText
Legend
LimitsBarUniform Limits Bar Component
LinkUniform Link Component
LinkList
LinkWithRefUniform LinkWithRef Component We recommend using this link <code>next/link</code>
loaderAnimationData
LoadingCardSkeleton
LoadingIconLoading Icon
LoadingIndicatorLoading Indicator
LoadingOverlayLoading Overlay. NOTE: the container/parent element must have a non-static <code>position</code> value for the overlay to work properly.
MediaCard
MenuComponent used for creating clickable menus
MenuContext
MenuGroup
MenuItemMenuItem Component used along side <Menu /> component
MenuItemSeparator
ModalA modal component to open a dialog with a backdrop that covers the whole page.
mqMedia Query Helper Function
MultilineChipA chip specifically designed to fit as a chipped element in an multi-line capable content field. Unlike a regular chip, this one can go onto multiple lines with word wrap, and uses inline behaviours.
numberInput
PageHeaderSection
ParagraphComponent for generic paragraph tags
ParameterDrawerHeader
ParameterGroup
ParameterImage
ParameterImageInner
ParameterInput
ParameterInputInner
ParameterLabel
ParameterLink
ParameterLinkInner
ParameterMenuButton
ParameterNameAndPublicIdInput
ParameterOverrideMarker
ParameterRichText
ParameterRichTextInner
ParameterSelect
ParameterSelectInner
ParameterShellUniform Parameter shell component
ParameterShellContext
ParameterShellPlaceholder
ParameterTextarea
ParameterTextareaInner
ParameterToggle
ParameterToggleInner
Popover
ProgressListComponent that sets the base structure for scrollable content in a max height container
ProgressListItem
queryStringIcon
rectangleRoundedIcon
replaceUnderscoreInString
ResolveIconUniform Resolve Icon Component
richTextToolbarButton
richTextToolbarButtonActive
RichTextToolbarIcon
ripple
ScrollableListComponent that sets the base structure for scrollable content in a max height container
ScrollableListInputItem
ScrollableListItemComponent used within <ScrollableList /> for adding interactive button components with predefined styles
scrollbarStylesCustom scrollbar styles
SegmentedControlHorizontal control with multiple segments. Can be used as a replacement of radio buttons.
settings
settingsIcon
SkeletonA loading skeleton
skeletonLoading
slideInTtb
spinnerAnimationData
StatusBullet
structurePanelIcon
SuccessMessageComponent that provides success messaging to input fields
supportsMedia Query Helper Function
SwitchUniform Switch Input Component
TabButton
TabButtonGroup
TabContent
TableUniform's Table component
TableBody
TableCellData
TableCellHead
TableFoot
TableHead
TableRow
Tabs
TextareaTextarea Component
textInput
ThemeUniform CSS Variables, font provider and optional reset stylesheet
Tile
TileContainerUniform Tile Container Component
TileText
TwoColumnLayout
UniformBadgeUniform Badge Logo
UniformLogoUniform Logo
UniformLogoLarge
useBreakpointReturns the name of the current breakpoint. Built on top of https://github.com/streamich/react-use/blob/master/docs/createBreakpoint.md
useCloseCurrentDrawer
useCurrentDrawer
useCurrentTab
useDrawer
useMenuContext
useOutsideClick
useParameterShell
VerticalRhythm
warningIcon
WarningMessageComponent that provides warning messaging to input fields
yesNoIcon

Type Aliases

Type AliasDescription
AddButtonProps
AddListButtonProps
AddListButtonThemeProps
AnimationFileProps
ArrowPositionProps
AvatarGroupProps
AvatarProps
BadgeProps
BadgeSizeProps
BadgeThemeProps
BadgeThemeStyleProps
BannerProps
BannerType
BoxHeightProps
BreakpointSizeBreakpoint label values
BreakpointsMap
ButtonProps
ButtonSizePropsButton sizes that are available to use with our brand
ButtonThemePropsButton themes that are available to use with our brand
ButtonWithMenuPropsButtonWithMenuProps combines the ActionButtonsProps with React HTMLButtonElement attributes
CalloutTypeCallout button types available to use with our brand
CaptionProps
CardContainerBgColorProps
CardContainerProps
CardProps
CardTitleProps
CheckboxWithInforProps
ChildFunction
ChipProps
ChipTheme
ComboBoxGroupBase
ConnectToDataElementButtonProps
ContainerProps
CounterProps
CreateTeamIntegrationTileProps
DashedBoxProps
DescriptionListProps
DetailsProps
DrawerContentProps
DrawerContextValue
DrawerProps
DrawersRegistryRecord
EditTeamIntegrationTileProps
ErrorMessageProps
FieldsetProps
HeadingProps
IconColorsets fill color of the svg icon 'default'
IconNameA list of available icon names that can be used with the Uniform brand
IconTypesets the type of icon to use from the available list
InfoMessageProps
InlineAlertProps
InputComboBoxOption
InputComboBoxProps
InputInlineSelectOption
InputInlineSelectProps
InputProps
InputSelectProps
InputToggleProps
IntegrationComingSoonProps
IntegrationHeaderSectionProps
IntegrationLoadingTileProps
IntegrationModalHeaderProps
IntegrationModalIconProps
IntegrationTileProps
JsonEditorProps
LabelProps
LegendProps
LevelPropsAvailable heading weights e.g. 1 - 6
LimitsBarProps
LinkColorProps
LinkListProps
LinkManagerWithRefType
LinkProps
MediaCardProps
MenuGroupProps
MenuItemProps
MenuItemTextThemeProps
ModalProps
MultilineChipProps
PageHeaderSectionProps
ParagraphProps
ParameterDataConnectButtonProps
ParameterDrawerHeaderProps
ParameterGroupProps
ParameterImageProps
ParameterInputProps
ParameterLabelProps
ParameterLinkProps
ParameterMenuButtonProps
ParameterNameAndPublicIdInputProps
ParameterRichTextInnerProps
ParameterRichTextProps
ParameterSelectProps
ParameterShellProps
ParameterTextareaProps
ParameterToggleProps
PopoverProps
ProgressListItem
ProgressListItemProps
ProgressListProps
RegisterDrawerProps
ResolveIconProps
RhythmProps
RichTextParamValue
ScrollableItemProps
ScrollableListContainerProps
ScrollableListItemProps
ScrollableListProps
SegmentedControlOption
SegmentedControlProps
SerializedLinkNode
SkeletonProps
StatusBulletProps
StatusTypeProps
SuccessMessageProps
SwitchProps
TableBodyProps
TableCellDataProps
TableCellHeadProps
TableFootProps
TableHeadProps
TableProps
TableRowProps
TextAlignProps
TextareaProps
ThemeProps@todo: line 144 onwards will be brought into a title, paragraph, list and link components
TileContainerProps
TileProps
TileTitleProps
TooltipProps
TwoColumnLayoutProps
UniformLogoProps
UseShortcutOptions
WarningMessageProps