@instructure/emotion - npm Package Versions

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.

Bug Fixes

• ui-checkbox: add spacing between single checkbox and messages (e67bd98)
• ui-popover: tooltips dont dismiss when hovered over (a11y) (7b166c1)
• add all components to docs dependencies (7fb5f51)

Code Refactoring

• Migrated the package and it's component(s) from using ui-themeable to using the new theming solution based on emotion.js.
• emotion,ui-themeable: move ThemeablePropValues and ThemeablePropTypes util to emotion pack (2d0ac1d)
• emotion,ui-themeable,ui-view: move getShorthandPropValue from ui-themeable to emotion (91fd876)
• emotion,ui-themeable,ui-view: move makeThemeVars util from ui-themeable to emotion (f2291ba)
• emotion,ui-themeable,ui-view: move mirrorShorthand utils to emotion (c779407)
• ui-avatar: removed deprecated inline prop (410d6ed)
• ui-avatar: removed deprecated variant prop (ec75e0f)
• ui-babel-preset,ui-webpack-config: remove unnecessary babel and postcss plugins (457bd82)
• ui-breadcrumb: remove deprecated icon prop (ebde230)
• ui-buttons: remove deprecated DeprecatedButton component (c0e2d03)
• ui-buttons: remove deprecated icon prop (e024d59)
• ui-buttons: remove deprecated variant prop (755608a)
• ui-buttons: remove deprecated CloseButton props (cf8657d)
• ui-buttons: removed deprecated buttonRef prop (92330fd)
• ui-buttons,ui-toggle-details: remove deprecated fluidWidth prop (0ced14e)
• ui-byline: remove deprecated Media component (8ba146c)
• ui-date-input: remove deprecated label prop (55a0066)
• ui-file-drop: removed deprecated allowMultiple prop (e67dee7)
• ui-file-drop: removed deprecated allowRepeatFileSelection prop (90b5f19)
• ui-file-drop: removed deprecated enablePreview prop (8a18fcd)
• ui-file-drop: removed deprecated label prop (5a0d088)
• ui-flex: removed deprecated grow prop (01cf295)
• ui-flex: removed deprecated inline prop (92834f0)
• ui-flex: removed deprecated shrink prop (50aab33)
• ui-flex: removed deprecated visualDebug prop (40a0c92)
• ui-flex: removed deprecated wrapItems prop (57ef6ab)
• ui-focusable: removed deprecated FocusableView component (cb1eff4)
• ui-heading: remove deprecated themeAdapter from Heading (bb1f68c)
• ui-heading: removed deprecated ellipsis prop (4eacdef)
• ui-img: removed deprecated blur prop, use withBlur instead. (3db9952)
• ui-img: removed deprecated grayscale prop (5087021)
• ui-img: removed deprecated inline prop (43868ed)
• ui-link: removed deprecated linkRef prop (f09d9e1)
• ui-link: removed deprecated variant prop (624d396)
• ui-list: deprecate variant inline styles (376abd7)
• ui-metric,ui: removed deprecated MetricList component (d795851)
• ui-metric,ui: removed deprecated MetricListItem component (b8e52b8)
• ui-number-input: removed deprecated inline prop (a985528)
• ui-number-input: removed deprecated label prop (15060d7)
• ui-number-input: removed deprecated required prop (987b36f)
• ui-pill,ui-responsive: remove deprecated props from Pill (125f14c)
• ui-popover: removed deprecated alignArrow prop (3799228)
• ui-popover: removed deprecated defaultShow prop (ecfb67f)
• ui-popover: removed deprecated label prop (efb32a7)
• ui-popover: removed deprecated onDismiss prop (5a39dd6)
• ui-popover: removed deprecated onShow prop (43007c0)
• ui-popover: removed deprecated onToggle prop (bdfcda8)
• ui-popover: removed deprecated PopoverContent component (5e5cf71)
• ui-popover: removed deprecated PopoverTrigger component (9768ade)
• ui-popover: removed deprecated show prop (6000c93)
• ui-popover: removed deprecated trackPosition prop (e60e89b)
• ui-popover: removed deprecated variant prop (1d16dff)
• ui-position: deprecate trackPosition and over properties (b636040)
• ui-position: deprecate Position.Target and Position.Content components (9c731c8)
• ui-progress,ui: delete deprecated Progress component (69a84d0)
• ui-spinner: removed deprecated title prop (44dc5b1)
• ui-tabs: remove deprecated selected and disabled props (3472cf2)
• ui-tabs: remove deprecated selectedIndex prop (1557b96)
• ui-tabs: remove deprecated size prop (fecbf13)
• ui-tabs: remove deprecated title prop (3e44810)
• ui-tabs: remove deprecated props onChange and focus (a3c640f)
• ui-text: remove color type error (6d44017)
• ui-text-input: removed deprecated icon prop (694962c)
• ui-text-input: removed deprecated inline prop (7a51241)
• ui-text-input: removed deprecated label prop (dc01d90)
• ui-text-input: removed deprecated required prop (20cd5dd)
• ui-time-select: removed deprecated label prop (fce697f)
• ui-tooltip: tip and variant properties deprecated (cd17b6b)
• ui-view: remove deprecated themeAdapter (bbfb295)
• ui-view: removed deprecated focused prop (3980814)
• ui-view: removed deprecated visualDebug prop (6d8e0bb)

Features

• instui-cli,ui-upgrade-scripts: add codemod to rename theme prop to themeOverride (e0607dd)
• instui-config: add codemod for themeable util imports (89a95f8)
• ui-color-utils: add utility mehtod to convert a color string to a hexadecimal color string in the #AABBCC format(20a3a69)
• ui-editable,ui-focusable: delete depracated FocusableView (fac2670)
• ui-i18n: remove decimal.js, its .mjs export is causing issues with Jest (2e00b30)
• ui-icons: add new icons and update old ones (03e6027)
• ui-icons-build,ui-icons: generate icons from svg files (7bf065a)
• ui-test-sandbox,ui: delete ui-themeable package and usages (60e4080)

Performance Improvements

• ui-docs-client: speed up iconography page (d16a046)

BREAKING CHANGES

• ui-checkbox: VISUAL CHANGE: Since there is more space between the checkbox and the messages, it can potentially break layouts (vertically more pixels).
• It is no longer a valid strategy to surround 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-babel-preset,ui-webpack-config: Removed the following packages because they were supporting ui-themable, and are no longer needed when using emotion theming: babel-plugin-themeable-styles, postcss-themeable-styles, ui-postcss-config.
• ui-test-sandbox,ui: The whole ui-themeable package was deleted. It is superseeded by the emotion package.
• ui-tabs: 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
• emotion,ui-themeable,ui-view: Moved mirrorShorthand, mirrorShorthandEdges, mirrorShorthandCorners utils to from ui-themeable to emotion package.
• emotion,ui-themeable,ui-view: Moved getShorthandPropValue from ui-themeable to emotion package.
• emotion,ui-themeable,ui-view: Moved makeThemeVars util from ui-themeable to emotion package.
• emotion,ui-themeable: Moved ThemeablePropValues and ThemeablePropTypes utils from ui-themeableto emotion package.
• ui-heading: The theme variable 'fontFamily' has been split into the following values, override them individually: h1FontFamily, h2FontFamily, h3FontFamily, h4FontFamily, h5FontFamily.
• ui-view: Removed themeAdapter for deprecated theme variables: 'borderColorDefault' is now borderColorPrimary, 'borderColorInverse' is now borderColorTransparent, 'colorInverse' is now colorPrimaryInverse, 'background' is now backgroundPrimary, 'backgroundLight' is now backgroundSecondary, 'backgroundInverse' is now backgroundPrimaryInverse.
• ui-view: Removed deprecated visualDebug prop, use withVisualDebug instead.
• ui-view: Removed deprecated focused prop, use withFocusOutline instead.
• ui-img: Removed deprecated blur prop, use withBlur instead.
• ui-img: Removed deprecated grayscale prop, use withGrayscale instead.
• ui-img: Removed deprecated inline prop, use display ('inline-block' or ‘block') instead.
• ui-heading: Removed deprecated ellipsis prop, use TruncateText component child instead.
• ui-focusable: Removed deprecated FocusableView component, use View instead.
• ui-avatar: Removed deprecated variant prop, use shape instead.
• ui-avatar: Removed deprecated inline prop, use display ('inline-block' or 'block') instead.
• ui-number-input: Removed deprecated inline prop, use display ('inline-block' or 'block') instead.
• ui-number-input: Removed deprecated required prop, use isRequired instead.
• ui-number-input: Removed deprecated label prop, use renderLabel instead.
• ui-time-select: Removed deprecated label prop, use renderLabel instead.
• ui-text-input: Removed deprecated icon prop, use renderAfterInput instead.
• ui-text-input: Removed deprecated inline prop, use display ('inline-block' or ‘block') instead.
• ui-text-input: Removed deprecated required prop, use isRequired instead.
• ui-text-input: Removed deprecated label prop, use renderLabel instead.
• ui-spinner: Removed deprecated title prop, use renderTitle instead.
• ui-popover: Removed deprecated onDismiss prop, use onHideContent instead.
• ui-popover: Removed deprecated alignArrow prop, use shouldAlignArrow instead.
• ui-popover: Removed deprecated trackPosition prop, use shouldTrackPosition instead.
• ui-popover: Removed deprecated label prop, use screenReaderLabel instead.
• ui-popover: Removed deprecated variant prop, use color ('primary' or 'primary-inverse') instead.
• ui-popover: Removed deprecated defaultShow prop, use defaultIsShowingContent instead.
• ui-popover: Removed deprecated show prop, use isShowingContent instead.
• ui-popover: Removed deprecated onToggle prop, use onShowContent and onHideContent instead.
• ui-popover: Removed deprecated onShow prop, use onPositioned instead.
• ui-popover: Removed deprecated PopoverContent component, use Popover's children instead.
• ui-popover: Removed deprecated PopoverTrigger component, use Popover's renderTrigger prop instead.
• ui-metric,ui: Removed deprecated MetricList component, use MetricGroup instead.
• ui-metric,ui: Removed deprecated MetricListItem component, use Metric instead.
• ui-link: Removed deprecated variant prop, use color ('link' or ’link-inverse') instead.
• ui-link: Removed deprecated linkRef prop, use elementRef instead.
• ui-flex: Removed deprecated shrink prop, use shouldShrink instead.
• ui-flex: Removed deprecated grow prop, use shouldGrow instead.
• ui-flex: Removed deprecated visualDebug prop, use withVisualDebug instead.
• ui-flex: Removed deprecated wrapItems prop, use wrap ('wrap', 'no-wrap' or 'wrap-reverse') instead.
• ui-flex: Removed deprecated inline prop, use display (‘flex’ or ‘inline-flex’) instead.
• ui-file-drop: Removed deprecated allowMultiple prop, use shouldAllowMultiple instead.
• ui-file-drop: Removed deprecated allowRepeatFileSelection prop, use shouldAllowRepeats instead.
• ui-file-drop: Removed deprecated enablePreview prop, use shouldEnablePreview instead.
• ui-file-drop: Removed deprecated label prop, use renderLabel instead.
• ui-byline: Removed deprecated Media component, use Byline instead.
• ui-breadcrumb: Removed deprecated icon prop, use renderIcon instead.
• ui-progress,ui: Deleted deprecated Progress component, use ProgressBar or ProgressCircle instead.
• ui-date-input: Removed deprecated label prop: use renderLabel prop instead.
• ui-checkbox: Removed deprecated theme variables: baseSizeSmall, baseSizeMedium, baseSizeLarge. Use toggleSize instead.
• ui-number-input: Removed deprecated props: label, required, inline
• ui-tabs: Removed deprecated onChange prop: use onRequestTabChange instead. Removed deprecated focus prop: use shouldFocusOnRender instead.
• ui-tabs: Removed deprecated selectedIndex prop.
• ui-tabs: Removed deprecated size prop, use maxWidth instead.
• ui-tabs: Removed deprecated title prop: use renderTitle instead.
• ui-tabs: [Tabs.Tab and Tabs.Panel] Removed deprecated selected prop: use isSelected instead. Removed deprecated disabled prop: use isDisabled instead.
• ui-buttons: Removed deprecated CloseButton prop children, use screenReaderLabel instead. Removed deprecated CloseButton prop variant, use color instead.
• ui-buttons: Remove deprecated DeprecatedButton component.
• ui-buttons: Removed deprecated variant prop. The default value for color prop is now secondary.
• ui-buttons: Removed deprecated icon prop, use renderIcon instead.
• ui-buttons,ui-toggle-details: Removed deprecated fluidWidth prop, set display="block" and textAlign="start" instead.
• ui-buttons: removed deprecared buttonRef prop from Button and CloseButton, use elementRef instead.
• ui-position: trackPosition prop is deprecated, use shouldTrackPosition prop instead. over prop is depreacted, use shouldPositionOverTarget prop instead.
• ui-position: Position.Target is deprecated, use Position's renderTarget prop instead. Position.Content is deprecated, use Position's children instead.
• ui-position,ui-view: The "box-sizing" and "z-index" css properties are now added as inline css on the Content element, might break other rules added in class.
• ui-table: Removed support for deprecated "mode" property, since it was deprecated in v7.
• ui-list: Removed 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.
• ui-pill,ui-responsive: Removed 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.
• ui-text: Removed error type for color, use danger instead
• ui-tooltip: tip property is deprecated (use renderTip instead). | renderTip property is now required. | variant property is deprecated (use color instead)
• ui-alerts: Remove deprecated closeButtonLabel prop
• Removed Decimal 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.