- AspectRatio lays out content with a specified aspect
- ratio.
+ AspectRatio is a simple component that controls the
+ aspect ratio of its first direct child.
- AspectRatio is a new simple component.
-
- AspectRatio controls the aspect ratio and containment
- of its first direct child.
-
- DataTable is a new composite component loosely based
- upon the legacy Table component.
-
- Because API changes to this component are so extensive, it should - be considered a new component. -
-Icons are simple, standalone components that wrap SVG source.
+ } >
- These standalone icon components are new. These are intended to
- replace the single legacy Icon component.
-
- ScrollBox is a re-implementation of the legacy
- component Scrollbox (note casing change).
-
Scrollbox
- ScrollBox
- withHeader
- Scroll components
- directly to add header-like non-scrolling content.
- classes
- Scroll-family components
- directly for more customization
-
- Scroll is a new component.
-
- ScrollContent is a new component.
-
- ScrollContainer is a new component.
-
- Table, TableHead, TableBody,{' '}
- TableRow and TableCell are new components.
-
- Table is a presentational component, and, as such, is
- not equivalent to the legacy Table component.
-
- Thumbnail is a reimplementation of a legacy component
- with the same name.
-
classes
- AspectRatio directly
- isLoading
- loading
- size:{' '}
- {"'small'"},{"'medium'"},
- {"'large'"}
- {"'sm'"}, {"'md'"}, or{' '}
- {"'lg'"}
- ratio (default {'"16/9"'}) ➜ All
- content is constrained to this aspect ratio
-
- Modal is a presentational component that combines
- aspects of legacy Modal and Dialog{' '}
- components.
-
- This implementation should, however, provide a more flexible and - simplified API compared to its legacy counterpart. -
-contentClass
- classes instead to style the outer container.
- cancelLabel
- buttons prop instead, and label it however
- you like.
- onCancel
- onClose: This prop is forwarded to{' '}
- Panel and its naming more clearly indicates that
- its purpose is to handle the closing of the modal.
- withCancelButton
- withCloseButton
- onClose is provided.
- icon prop: Now takes an IconComponent{' '}
- instead of a string.
- initialFocus prop: Set to {"'manual'"}{' '}
- to opt out of automatic focus routing (formerly{' '}
- null).
- width prop
-
- Spinner is a new reimplementation of a legacy component
- of the same name.
-
classes
- size:{' '}
- {"'small'"},{"'medium'"},
- {"'large'"}
- {"'sm'"}, {"'md'"}, or{' '}
- {"'lg'"}
- size:{' '}
- {"'medium'"}
- {"'sm'"}
-
- Button is a new component that re-implements the{' '}
- LabeledButton legacy component.{' '}
-
buttonRef
- elementRef
- iconPosition
- icon,{' '}
- {'{string}'}
- {'{IconComponent}'}
- variant value{' '}
- {"'dark'"}:
- ButtonBase instead.
- variant default value{' '}
- {"'normal'"}
- {"'secondary'"}
- size values{' '}
- {"'small'"}
- {"'medium'"}
- {"'large'"}
- {"'xs'"}, {"'sm'"},{' '}
- {"'md'"}, {"'lg'"}
-
- IconButton is a reimplementation of an existing legacy
- component with the same name.
-
buttonRef
- elementRef
- icon,{' '}
- {'{string}'}
- {'{IconComponent}'}
- variant value{' '}
- {"'light'"}:
- ButtonBase instead
- variant default value{' '}
- {"'normal'"}
- {"'secondary'"}
- size values{' '}
- {"'small'"}
- {"'medium'"}
- {"'large'"}
- {"'xs'"}, {"'sm'"},{' '}
- {"'md'"}, {"'lg'"}
- size value{' '}
- {"'small'"}
- {"'xs'"} instead: the padding/spacing values
- have been adjusted such that all Button components are
- harmonized. {"IconButton's"}{' '}
- {"'small'"} size was inconsistent with the{' '}
- {"'sm'"} size for other Buttons.
-
- ButtonBase is a new component.
-
- Checkbox combines the functionality of both the{' '}
- Checkbox and LabeledCheckbox legacy
- components.
-
onToggle
- onChange instead
- inputRef
- elementRef
- checked now configures{' '}
- Checkbox as a controlled component.
- defaultChecked
- HTMLInput{' '}
- elements.
- id is no longer required
- containerClasses
- classes)
-
- InputGroup is a new component based loosely on the
- legacy TextInputWithButton component.
-
- Input is new component modeled after the{' '}
- TextInput legacy component.
-
inputRef
- elementRef
- input element now stretches to fill all
- available horizontal space
-
- Select is a new component.
-
- Card is a re-implementation of a legacy component of
- the same name. CardContent, CardHeader,{' '}
- CardTitle and CardActions are new
- components.
-
Card no longer provides padding or spacing around
- content. Use Card in combination with{' '}
- CardContent for spacing.
- Card no longer provides styling for the{' '}
- clean theme. Use classes to apply
- theme styles.
- Card no longer provides styling for the{' '}
- .is-focused class. Use the active prop
- instead.
- containerRef
- elementRef
- variant: raised (default) or{' '}
- flat. The flat variant disables any
- dimensionality or shadows.
- active (boolean): Sets hover-style shadows on{' '}
- Card. Must be combined with raised{' '}
- variant.
-
- Overlay is a new component based on a design pattern
- used in legacy modals and FullScreenSpinner components.
-
- Panel is a re-implementation of a legacy component with
- the same name.
-
icon:{' '}
- {'{string}'}
- {'{IconComponent}'}
- containerRef
-
- LinkButton is a re-implementation of a legacy component
- with the same name.
-
- LinkButton styling approach has changed. Instead of
- defining its own inconsistent set of variants, it
- applies the same design patterns as Link. Most
- styling control is handled by the color and{' '}
- underline props.
-
buttonRef
- elementRef
- variant values have been removed
- className
-
- Link is a reimplementation of an existing legacy
- component with the same name.
-
linkRef
- elementRef
- className
- LinkBase instead
- color, underline props
- LinkBase component
-
- LinkBase is a new component.
-
- PointerButton is a new component.
-
- Tab is a new component.
-