Job Flashcards
ALERT
alignAction flex-start
className
AppBar
Propname Type default description
ID
AppBar
Prop name Type default description
id string Required The html id
children node The content of the component
color enum primary The color of a component. It suports those theme colores that make sense
One of: inherit, primary, secondary, default
position enum static The positon type.
One of type: fixed, absolute, sticky, static
Avatar
Prop name Type Default Description
alt string Used in combination with src or srcSet to provide an alt attribute for the rendered img element.
children node Used to render icon or text elements inside the Avatar. When children are provided, the name, src and alt props will not be used and no img will be rendered by default. This can be an element, or just a string.
email string The user’s email. Used to fall back to Gravatar
gutter enum none The left/right margin around the avatar.
One of: left, right, both, none
id string The html id
name string The name of the user. This is used to generate the initials shown. If children are provided this will not be shown. If no alt provided, this will be used instead.
onBlur func Event handler for onBlur
onFocus func Event handler for onFocus
onMouseLeave func Event handler for onMouseLeave
onMouseOver func Event handler for onMouseOver
onTouchEnd func Event handler for onTouchEnd
onTouchStart func Event handler for onTouchStart
size enum small The size of the avatar.
One of: small, medium, large
sizes string The sizes attribute for the img element.
src string The src attribute for the img element.
srcSet string The srcSet attribute for the img element.
BackgroundJob
Prop name Type Default Description
active false
https://preamble-ui.azurewebsites.net/#/Components/BackgroundJob
BackgroundJobsMenu
Prop name Type Default Description
jobs []
https://preamble-ui.azurewebsites.net/#/Components/BackgroundJobsMenu
BackgroundJobsMenu
Prop name Type Default Description
jobs []
https://preamble-ui.azurewebsites.net/#/Components/BackgroundJobsMenu
BoxModel
Prop name Type Default Description
id string The html id
margin union Any pre-set margin, false to disable. { top: { value: “”, unit: “” }, left: { value: “”, unit: “” },
bottom: { value: “”, unit: “” }, right: { value: “”, unit: “” } }
One of type: object, bool
onChange func Callback fired when an input is changed. function ({ size, padding, margin}) => {}
padding union Any pre-set padding, false to disable. { top: { value: “”, unit: “” }, left: { value: “”, unit: “” },
bottom: { value: “”, unit: “” }, right: { value: “”, unit: “” } }
One of type: object, bool
size union Any pre-set sizes, false to disable. { width: { value: “”, unit: “” }, height: { value: “”, unit:
“” } }
One of type: object, bool
Breadcrumbs
Prop name Type Default Description
children node Pass in multiple children. Each child will become a separate breadcrumb.
id string The html id
maxItems number 8 Specifies the maximum number of breadcrumbs to display. When there are more
than the maximum number, only the first and last will be shown, with an ellipsis in
between.
Button
PROPS & METHODS
Prop name Type Default Description
children node Required The content of the button.
aria-label string An accessibility label to display for the button. Defaults to the title
prop. If title prop omitted, and the icon is a button variant, this is
required for accessibility.
color enum The color of the component. It supports those those theme colors that make sense for this component
One of: default, primary, secondary, inherit
component union You can use this prop with react-router. See https://material-
ui.com/guides/composition/#button
One of type: string, func, object
disabled bool If true, the button will be disabled.
endIcon node Icon placed to the right of the text
fullWidth bool If true, the button will take up the full width of its container.
href string The URL to link to when the button is clicked. If desired, an a
element will be used as the root node.
id string The html id
onClick any Callback to execute when the button is pressed
openInNewWindowbool Set true to open the href in a new window.
role string HTML role
size enum The size of the button. small is equivalent to the dense button
styling.
One of: small, medium, large
startIcon node Icon placed to the left of the text
stopPropagation bool If true, we will stop propagation of event execution for onClick.
style object Additional styles to render
tabIndex union The tab index of the button. Should be 0 if the button is selectable,
-1 if the button is not selectable.
One of type: number, string
title node The tooltip to display for the button
tooltipProps object Shape Props to spread to the Tooltip component if rendered
type enum default The type of button to render
One of: default, icon, fab
variant enum contained The style of button.
One of: contained, outlined, text
ButtonDropDown
PROPS & METHODS
Prop name Type Default Description
options shape[] Required An array of Button props
id: string — The html id
children: node — Required — The content of the button.
component: union —
@ignoreUtilized By: Preamble => Page
disabled: bool — If true, the button will be disabled.
href: string — The URL to link to when the button is clicked. If desired, an a element will be used as the root node.
onClick: any — Callback to execute when the button is pressed
size: enum — The size of the button. small is equivalent to the dense button styling.
type: enum — The type of button to render
variant: enum — The style of button.
openInNewWindow: bool — Set true to open the href in a new window.
color enum The color of the component. It supports those those theme
colors that make sense for this component
One of: default, primary, secondary, inherit
fullWidth bool If true, the ButtonDropDown will take up the full width of its
container.
id string The html id
ButtonGroup
PROPS & METHODS
Prop name Type Default Description
className string Classes to apply to the root
id string The html id
layout enum left Sets the layout and margin of your group of buttons
One of: left, right, justify, stacked, center
Card
PROPS & METHODS
Prop name Type Default Description
id string Required The html id
avatar shape The Avatar for the Card Header.
id: string — Required — The html id
alt: string — Used in combination with src or srcSet to provide an alt attribute for the rendered img element.
children: node — Used to render icon or text elements inside the Avatar. src and alt props will not be used and no img will be rendered by default. This can be an element, or just a string.
className: string — @ignore
onBlur: func — Event handler for onBlur
onFocus: func — Event handler for onFocus
onMouseLeave: func — Event handler for onMouseLeave
onMouseOver: func — Event handler for onMouseOver
onTouchEnd: func — Event handler for onTouchEnd
onTouchStart: func — Event handler for onTouchStart
sizes: string — The sizes attribute for the img element.
src: string — The src attribute for the img element.
srcSet: string — The srcSet attribute for the img element.
cardActionsProps object
Props to pass on to the CardActions component
cardContentProps object Props to pass on to the CardContent component
cardHeaderProps object Props to pass on to the CardAction component
cardMediaProps object Props to pass on to the CardMedia component
content node The content of the card
disableFooterSpacing bool If true, the card footer does not have additional margin.
footer node The footer content of the card
image string If provided, the card will have an image shown at the top
imageHeight string The height of a provided image
raised bool If true, the card will use raised styling.
subheader node The subheader to use on the card header
title node The title to use on the card header
Checkbox
PROPS & METHODS
Prop name Type Default Description
id string Required The html id
checked union If true the checkbox is checked
One of type: bool, string
color enum Color for the checkbox
One of: default, primary, secondary
disabled bool If true the checkbox is disabled
helperText string The text to display for input help/hints
indeterminate bool If true the checkbox is selected with the indeterminate icon -
label string The text to be used in the label.
onChange func Callback for the checkbox is clicked
Signature: function(event, checked) => void event: the originating event.
checked: the checked value of the switch
value string The value to put on the checkbox input.
value=”Green” equals: event.target.value = “Green”
Utilized by:
FormBuilder
Chip
PROPS & METHODS
Prop name Type Default Description
avatar element
Avatar element
id string The html id
label node The contents of the chip label
onDelete func Callback function fired when the delete icon is clicked. If set, the delete icon will
be shown.
CodeEditor
PROPS & METHODS
Prop name Type Default Description
enableOverviewRuler false
height 300
minimap { enabled: false }
scrollBeyondLastLine false
ColorPicker
PROPS & METHODS
Prop name Type Default Description
color union Color in one of the following formats: - Hex (#fff or #ffffff) - RGB(A) ({r: 21, g: 21, b: 21, a:
.5} or {r: 21, g: 21, b: 21}) - HSL(A) ({h: 0, s: 0, l: .1, a: .5} or {h: 0, s: 0, l: .1})
One of type: string, shape, shape
id string The html id
label node The contents of the label
labelPosition enum inside Whether to display the label normally or outside of the color picker
One of: inside, outside
onChange func Function fired when color is picked
onClear func Callback when color is cleared
presetColors union[] Preset Colors (see color format)
DataMapper
https://preamble-ui.azurewebsites.net/#/Components/DateDistanceTooltip
DateDistanceTooltip
https://preamble-ui.azurewebsites.net/#/Components/DateDistanceTooltip
Divider
PROPS & METHODS
Prop name Type Default Description
absolute bool false Sets an absolute position with left and top set to 0px.
component union hr The component used for the root node. Either a string to use a DOM element
or a component.
One of type: func, string, object
flexItem bool false If true, a vertical divider will have the correct height when used in flex
container. (By default, a vertical divider will have a calculated height of 0px if
it is the child of a flex container.)
id string The html id.
light bool false If true, the divider will have a lighter color.
orientation enum horizontal The divider orientation
One of: horizontal, vertical
variant enum fullWidth The variant to use.
One of: fullWidth, inset, middle
Drawer
PROPS & METHODS
Prop name Type Default Description
id string Required
The html id
anchor enum Side from which the drawer will appear
One of: left, top, right, bottom
children node The contents of the drawer
onClose func Callback fired when the component requests to be closed
open bool If ‘true’, the drawer is open.
variant enum temporary The variant to use
One of: permanent, persistent, temporary
ErrorMessage
PROPS & METHODS
Prop name Type Default Description
id string Required The html id
align enum left Set the text-align on the component.
One of: left, center
children node The error message
gutterBottom bool true If true, the text will have a bottom margin.
gutterTop bool false If true, the text will have a top margin.
message custom Deprecated: Use a child node instead
preset enum Use a preset error
One of: 403, 404
title string The title shown large
type enum error The type of error.
One of: warning, error, info
ErrorPage
PROPS & METHODS Prop name Type Default Description className maxWidth lg severity warning
ExpansionPanel
PROPS & METHODS
Prop name Type Default Description
id string Required The html id
defaultExpanded bool false If true, will display the expansion panel in the
expanded state by default.
disabled bool false If true, will render the expansion panel as disabled
expandActions node The actions to be displayed when the panel is
expanded
expandDetails node The content to be displayed when the panel is
expanded
expandIcon node An icon to display at the right side of the expansion
panel (replaces the Expand Arrow)
expandSummary node The content to be displayed when the panel is
collapsed
expanded bool If set, will give manual control over the expansion
panel.
onChange func Callback fired when the expand/collapse state is
changed.
Signature: function(event: object, expanded: bool) =>
void event: The event source of the callback
expanded: The expanded state of the panel
removeMarginExpanded bool false If true, the margin between expanded panels is
removed
startIcon node An icon to display at the left side of the expansion
panel
unmountOnExit bool false If true, the details/actions will unmount when the panel
is closed
FieldGroup
https://preamble-ui.azurewebsites.net/#/Components/FieldGroup
FieldRenderer
https://preamble-ui.azurewebsites.net/#/Components/FieldRenderer
FieldWrapper
https://preamble-ui.azurewebsites.net/#/Components/FieldWrapper
FileUpload
PROPS & METHODS
Prop name Type Default Description
id string Required The html id. This must be unique for accessibility.
children union Contents to be displayed within the FileUpload component
One of type: node, func
disablePreview bool If true, the preview generation will be disabled.
disabled bool If true, the component will be disabled.
dontWrapChildren bool false If true the dropzone’s children won’t be wrapped into the
dropzone-inner div This useful to have full control of the FileUpload
children content
error bool If true, the input will indicate an error. And display the provided
errorMessage
errorMessage string The message to display when error is true.
fileTypes union The allowed file types to upload. Use both the MIME type and file
extension for best results.
One of type: string, string[]
filesProcessing array [] Displays files as being uploaded
filesRejected array [] Contains the files that were rejected in the upload
filesUploaded array [] Displays the files that were uploaded in a component
fullWidth bool true Makes the input span the entire component’s width
helperText string Adds helper text to the component
label node The label to display
maxSize number If set, a limit will be placed on the maximum filesize allowed
minSize number If set, a limit will be placed on the minimun filesize required for
uploading
multiple bool true If false, only a single file can be uploaded
mustBeImage bool If true, the file upload component will only accept images
onDelete func Callback called when a file is deleted from the FileUpload
component.
Signature: function(file, isProcessing) => void
file: The file being deleted isProcessing: Indicates that the file is in
the filesProcessing prop. Otherwise the file is in the FilesUploaded
prop
onDrop func
Callback called when a file is selected (either drag and dropped or
selected from the file browser) Signature: function(filesUploaded) =>
void
filesUploaded: All the files that the File Upload component
accepted
required bool If true the label will indicate that the input is required.
Geolocation
PROPS & METHODS
Prop name Type Default Description
id string Required The html id
disabled bool Renders the component as disabled
editor string Map The label for the geolocation field
error union This now supports two types of error results. If the
type is object then child component validations
have failed, otherwise we return a bool For the child
component validation, this is supported by the
following childComponentValidation
One of type: bool, array
errorMessage string The message to display when error is true.
fields shape Shape Determines what properties should be visible.
showAddress1: bool
showAddress2: bool
showCity: bool
showState: bool
showZipCode: bool
googleMapsKey string The google maps api key.
helperText node The contents of the helper text
label string The label used for the component.
onChange func onChange function called when address fields
change. latitude and longitude will be null if no
google search was done since these two fields can
not be filled out by the user. signature: ({ address1:
string, address2: string, city: string, state: string, zip:
string, latitude: decimal?, longitude: decimal? }) =>
void
onlyValidateOnBlur bool false Enforces the validation to trigger on blur, not on load.
required bool If true the label will indicate that the input is required.
statePattern string State regular expression value to be used.
statePatternMessage string State regular expression pattern message to be used.
value shape Pass through to override the initial value of the input
fields. This will only be set once.
address1: string
address2: string
city: string
state: string
zip: string
latitude: number
longitude: number
zipCodePattern string ZipCode regular expression value to be used.
zipCodePatternMessage string ZipCode regular expression message to be used.
Grid
PROPS & METHODS
Prop name Type Default Description
alignContent enum Defines the align content style property. It’s applied
for all screen sizes.
One of: stretch, center, flex-start, flex-
end, space-between, space-around
alignItems enum Defines the align items style property. It’s applied for
all screen sizes.
One of: flex-start, center, flex-end,
stretch, baseline
children node The content of the component.
component union The component or element to render for the grid
One of type: string, object
container bool If true, the component will have the flex container
behavior. You should be wrapping items with a
container.
direction enum Defines the flex-direction style property. It is applied
for all screen sizes.
One of: row, row-reverse, column, column-reverse
id string The html id
item bool If true, the component will have the flex item behavior.
You should be wrapping items with a container.
justify enum Defines the justify-content style property. It is applied
for all screen sizes.
One of: flex-start, center, flex-end, space-between,
space-around
lg enum Defines the number of grids the component is going
to use. It’s applied for the lg breakpoint and wider
screens if not overridden. Grid always has a size of 12,
so using value 6 means the grid item will take up half
the space. Allowing for another size 6 grid item to be
alongside it.
One of: false, auto, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12
md enum Defines the number of grids the component is going
to use. It’s applied for the md breakpoint and wider
screens if not overridden. Grid always has a size of 12,
so using value 6 means the grid item will take up half
the space. Allowing for another size 6 grid item to be
alongside it.
One of: false, auto, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12
role string HTML Role
sm enum Defines the number of grids the component is going
to use. It’s applied for the sm breakpoing and wider
screens if not overridden. Grid always has a size of
12, so using value 6 means the grid item will take up
half the space. Allowing for another size 6 grid item
to be alongside it.
One of: false, auto, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,
12
spacing enum Defines the space between the type item
component. It can only be used on a type container
component.
One of: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
wrap enum Defines the flex-wrap style property. It’s applied for
all screen sizes.
One of: nowrap, wrap, wrap-reverse
xl enum Defines the number of grids the component is going
to use. It’s applied for the xl breakpoint and wider
screens. Grid always has a size of 12, so using value
6 means the grid item will take up half the space.
Allowing for another size 6 grid item to be alongside
it.
One of: false, auto, true, 1, 2, 3, 4, 5, 6, 7, 8, 9,
10, 11, 12
xs enum Defines the number of grids the component is going
to use. It’s applied for all the screen sizes with the
lowest priority. Grid always has a size of 12, so using
value 6 means the grid item will take up half the
space. Allowing for another size 6 grid item to be
alongside it.
One of: false, auto, true, 1, 2, 3, 4, 5, 6, 7, 8, 9,
10, 11, 12
zeroMinWidth bool If true, it sets min-width: 0 on the item.
ItemMeta
PROPS & METHODS
Prop name Type Default Description
actions node[] Links to show as actions
actionsCustomLabel string Custom Label for modified section
createdBy shape The user who created the item
name: string — The user’s name
avatar: string — URL to the user’s avatar
url: string — Link to the user
email: string — The user’s email
createdCustomLabel string
Custom Label for created section
createdDate Date The date the item was created
id string The html id
modifiedBy shape The user who modified the item
name: string — The user’s name
avatar: string — URL to the user’s avatar
url: string — Link to the user
email: string — The user’s email
modifiedCustomLabel string
Custom Label for modified section
modifiedDate Date The date the item was modified
Link
PROPS & METHODS Prop name Type Default Description block false color primary component a underline hover
LinkField
PROPS & METHODS
Prop name Type Default Description
id string Required The html id
disabled bool If the field should be disabled
displayName string The text inside the Display Name field.
error bool If true, the URL field will light up red, and display the errorMessage prop.
errorMessage string Will be used in place of the helperText if the error prop is true.
helperText string Text to be shown at the bottom of the component to give the user an idea of how to
use the fields.
label string The text to be displayed above the Text Inputs as the label
onChange func Function to be called when one of the fields change.
openInNewWindow bool Whether or not when the URL is clicked if it should open the link in a new window,
or open it in the current window.
required bool If true, thr URL field will display an asterisk next to the label.
url string The text inside the URL field.
Loader
PROPS & METHODS
Prop name Type Default Description
color enum primary The color of the component. It supports those those theme colors that make sense
for this component
One of: default, primary, secondary, inherit
size number Size of the circle vairant
thickness number Thickness of the circle variant
value number Sets the progress value (0-100) of a determinate loader - automatically switches
loader to “determinant”
variant enum circular Determines whether the loader appears as a line or a circle element
One of: circular, linear
verticallyCenterbool false If true, the loader will try to center vertically
Logo
PROPS & METHODS
Prop name Type Default Description
role img
MetricCard
PROPS & METHODS
Prop name Type Default Description
id string Required The html id
content node The content of the metric card
icon node An icon to display in the header
label node The label of the content in the metric card
measure node The measure of the content in the metric card
title node The title to use on the metric card header
NavigationRail
PROPS & METHODS
Prop name Type Default Description
buttons []
Page
PROPS & METHODS
Prop name Type Default Description
id string Required
The html id
accountMenuOptions shape Shape See Account Menu Options belows.
includeDefault: bool menuItems: shape[] show: bool platformBaseUrl: string signoutUrl: string children node The content of the Page
cssReset bool Whether to include CSS resets for preamble styles. Useful in
preventing conflicts in legacy applications.
currentOrg string The current organization’s name
currentOrgSettings shape The current organization’s branding settings
name: string
id: string
settings: object
customTopbar node Items to render in the topbar
disableFooter bool If true, the footer will not be displayed
disableMargin bool
disableProductList bool If true the product list will not render
disableSidebar bool If true the side bar will not be displayed
disableTopbar bool If true, the top bar will not be displayed
footerMessage node The footer content
forcePadding bool
helpMenuOptions shape See Help Menu Options belows.
menuItems: shape[]
show: bool
signoutOfProduct: func
identityServerSdk object The identitySeverSdk object. Requires accessToken,
identityServerBaseUrl, and idToken. Used to get the user’s
products and information.
If no user is specified, a blank product list will be shown and a user avatar will be hidden.
navigationRailProps object
Props to pass to a NavigationRail. If present, will render a NavigationRail with these props. The sidebar must be disabled or set to always collapse before the NavigationRail will render.
navigationSections custom {}
See Navigation Sections below for more details
onOrgSelect func
What to do when the organization is selected.
onOrgSettingsRetrieved func
Called when organization settings are loaded. This is useful for if you want to cache the organization settings to prevent them from being re-pulled from the platform.
prefix string
The prefix to generate classNames
primaryHex string
The hex value for the product’s primary color
product enum
Sets product colors and logo automatically. Can be overridden by primaryHex and productLogo
One of: engageCentral, engageEvolve, engage, engage6, hr, clerk, rec, ready, preamble
productLogo node
The html node to render as the product logo
productNavSections custom []
See Product navagation sections below for more details
shouldCollapseMenu bool false
If true the menu will always collapse into a button, otherwise only on small screens
specificity number
How much extra specificty should be added to the JSS generated by Preamble
title string
Default Page Title when no Titlebar rendered. If not provided, falls back to one based on product
type enum internal
The type of page, which affects what logo and color is used
One of: internal, external
