@instructure/emotion
Advanced tools
Changelog
8.0.0 (2021-03-29)
The main feature for version 8 is the switch of the theming engine, we replaced the in-house themeable
theming with the popular emotion.js.
ui-themeable
to using the new theming solution based on emotion.js.getShorthandPropValue
from ui-themeable
to emotion
(91fd876)makeThemeVars
util from ui-themeable
to emotion
(f2291ba)mirrorShorthand
utils to emotion
(c779407)inline
prop (410d6ed)variant
prop (ec75e0f)icon
prop (ebde230)DeprecatedButton
component (c0e2d03)icon
prop (e024d59)variant
prop (755608a)buttonRef
prop (92330fd)fluidWidth
prop (0ced14e)Media
component (8ba146c)label
prop (55a0066)allowMultiple
prop (e67dee7)allowRepeatFileSelection
prop (90b5f19)enablePreview
prop (8a18fcd)label
prop (5a0d088)grow
prop (01cf295)inline
prop (92834f0)shrink
prop (50aab33)visualDebug
prop (40a0c92)wrapItems
prop (57ef6ab)FocusableView
component (cb1eff4)ellipsis
prop (4eacdef)blur
prop, use withBlur
instead. (3db9952)grayscale
prop (5087021)inline
prop (43868ed)linkRef
prop (f09d9e1)variant
prop (624d396)variant
inline styles (376abd7)MetricList
component (d795851)MetricListItem
component (b8e52b8)inline
prop (a985528)label
prop (15060d7)required
prop (987b36f)alignArrow
prop (3799228)defaultShow
prop (ecfb67f)label
prop (efb32a7)onDismiss
prop (5a39dd6)onShow
prop (43007c0)onToggle
prop (bdfcda8)PopoverContent
component (5e5cf71)PopoverTrigger
component (9768ade)show
prop (6000c93)trackPosition
prop (e60e89b)variant
prop (1d16dff)trackPosition
and over
properties (b636040)Position.Target
and Position.Content
components (9c731c8)Progress
component (69a84d0)title
prop (44dc5b1)selected
and disabled
props (3472cf2)selectedIndex
prop (1557b96)size
prop (fecbf13)title
prop (3e44810)onChange
and focus
(a3c640f)error
(6d44017)icon
prop (694962c)inline
prop (7a51241)label
prop (dc01d90)required
prop (20cd5dd)label
prop (fce697f)tip
and variant
properties deprecated (cd17b6b)focused
prop (3980814)visualDebug
prop (6d8e0bb)theme
prop to themeOverride
(e0607dd)jsx
code with try..catch
because writing something in the console does not cause errors to be thrown. Use spy(console, 'error')
instead. Also, when accessing Component.displayName
, use Component.displayName || Component.name
with the name as a fallback instead.ui-themable
, and are no longer needed when using emotion
theming: babel-plugin-themeable-styles
, postcss-themeable-styles
, ui-postcss-config
.ui-themeable
package was deleted. It is superseeded by the emotion
package.SecondarySelectedColor
style was removed, now just secondaryColor
determines the color of the secondary tab. VISUAL CHANGE: secondaryColor
changed to textDarkest
, in the Canvas theme to ic-brand-font-color-dark
mirrorShorthand
, mirrorShorthandEdges
, mirrorShorthandCorners
utils to from
ui-themeable
to emotion
package.getShorthandPropValue
from ui-themeable
to emotion
package.makeThemeVars
util from ui-themeable
to emotion
package.ThemeablePropValues
and ThemeablePropTypes
utils from ui-themeable
to emotion
package.h1FontFamily
, h2FontFamily
, h3FontFamily
, h4FontFamily
, h5FontFamily
.borderColorPrimary
, 'borderColorInverse' is now borderColorTransparent
, 'colorInverse' is now
colorPrimaryInverse
, 'background' is now backgroundPrimary
, 'backgroundLight' is now
backgroundSecondary
, 'backgroundInverse' is now backgroundPrimaryInverse
.visualDebug
prop, use withVisualDebug
instead.focused
prop, use withFocusOutline
instead.blur
prop, use withBlur
instead.grayscale
prop, use withGrayscale
instead.inline
prop, use display
('inline-block' or ‘block') instead.ellipsis
prop, use TruncateText
component child instead.FocusableView
component, use View
instead.variant
prop, use shape
instead.inline
prop, use display
('inline-block' or 'block') instead.inline
prop, use display
('inline-block' or 'block') instead.required
prop, use isRequired
instead.label
prop, use renderLabel
instead.label
prop, use renderLabel
instead.icon
prop, use renderAfterInput
instead.inline
prop, use display
('inline-block' or ‘block') instead.required
prop, use isRequired
instead.label
prop, use renderLabel
instead.title
prop, use renderTitle
instead.onDismiss
prop, use onHideContent
instead.alignArrow
prop, use shouldAlignArrow
instead.trackPosition
prop, use shouldTrackPosition
instead.label
prop, use screenReaderLabel
instead.variant
prop, use color
('primary' or 'primary-inverse') instead.defaultShow
prop, use defaultIsShowingContent
instead.show
prop, use isShowingContent
instead.onToggle
prop, use onShowContent
and onHideContent
instead.onShow
prop, use onPositioned
instead.PopoverContent
component, use Popover's children
instead.PopoverTrigger
component, use Popover's renderTrigger
prop instead.MetricList
component, use MetricGroup
instead.MetricListItem
component, use Metric
instead.variant
prop, use color
('link' or ’link-inverse') instead.linkRef
prop, use elementRef
instead.shrink
prop, use shouldShrink
instead.grow
prop, use shouldGrow
instead.visualDebug
prop, use withVisualDebug
instead.wrapItems
prop, use wrap
('wrap', 'no-wrap' or 'wrap-reverse') instead.inline
prop, use display
(‘flex’ or ‘inline-flex’) instead.allowMultiple
prop, use shouldAllowMultiple
instead.allowRepeatFileSelection
prop, use shouldAllowRepeats
instead.enablePreview
prop, use shouldEnablePreview
instead.label
prop, use renderLabel
instead.Media
component, use Byline
instead.icon
prop, use renderIcon
instead.label
prop: use renderLabel
prop instead.baseSizeSmall
, baseSizeMedium
, baseSizeLarge
. Use
toggleSize
instead.onChange
prop: use onRequestTabChange
instead. Removed deprecated focus
prop: use shouldFocusOnRender
instead.selectedIndex
prop.size
prop, use maxWidth
instead.title
prop: use renderTitle
instead.selected
prop: use isSelected
instead. Removed
deprecated disabled
prop: use isDisabled
instead.children
, use screenReaderLabel
instead. Removed deprecated
CloseButton prop variant
, use color
instead.DeprecatedButton
component.variant
prop. The default value for color
prop is now secondary
.icon
prop, use renderIcon
instead.fluidWidth
prop, set display="block"
and textAlign="start"
instead.buttonRef
prop from Button
and CloseButton
, use elementRef
instead.trackPosition
prop is deprecated, use shouldTrackPosition
prop instead. over
prop is
depreacted, use shouldPositionOverTarget
prop instead.Position.Target
is deprecated, use Position's renderTarget
prop instead. Position.Content
is deprecated, use Position's children
instead.variant
property: use InlineList component for inline lists and isUnstyled boolean prop for unstyled lists. Removed inline delimiter values (pipe, slash and arrow) from delimiter
property.text
property: use children
instead. Children
is now required. Removed variant
property: use color instead. Within the new color prop default
is now primary
(gray), primary
has updated to info
(blue) and message
is now alert
.error
type for color, use danger
insteadtip
property is deprecated (use renderTip
instead). | renderTip
property is now required. | variant
property is deprecated (use color
instead)closeButtonLabel
propDecimal
wrapper for decimal.js because it was causing compilation errors with projects using Jest. If you need its functionality we recommend to copy-paste the needed methods from the source code.