0.9.23

General (tooling and infrastructure)

Added

• Refine Storybook config to support build-modes
  • enables faster image-snapshot generation and better development performance.
  • specify mode via shell export: export storybookBuildMode=develop
    • fast - disables Typescript extraction and all addons
    • develop - disables "Docs" addon
    • publish - enables Typescript extraction and full addon-essentials support

@looker/components

Added

• DataTable (the component formerly known as ActionList)
  • Columns now support size
    • If small, medium or large is specified the content will be truncated to fit
    • If nowrap column will not wrap white-space and will grow fit content width
  • Responsive support - if table exceeds viewport width it will scroll sideways
    • firstColumnStuck developer can specify if the first column should "stick" to the viewport edge when scrolling
    • NOTE: Column for checkbox selection and actions column are always stuck to their respective edges
  • Column selection - the user can select which columns are displayed (if any columns have hide specified in their configuration)
  • Supports state="loading|noResults" and noResultsDisplay
• autoFocus prop will now work for inputs in Popover and Dialog
• Dialog & Drawer now support semantic sizes (xxsmall - xlarge)
• Dialog now supports placement - center (default), top & cover
• Drawer now supports placement - left & right (default)
• Select, SelectMulti, InputTimeSelect, and InputSearch now support autoFocus

Changed

• ActionList was renamed to DataTable
  • Now uses a table element instead of previous grid layout (IE11 compatible)
  • Vertical cadence of ActionList reduced to a minimum of 36px
• Popover, Menu, and Select no longer cancel the first click outside by default (use cancelClickOutside to override this)
• DialogContent no longer has py unless it overflows the available space (acting as overflow: scroll)
• Padding in Button's has been updated to have better visual balance when icons are used

Fixed

• FieldCheckboxGroup now sets border-color of child checkboxes to "critical" when validationMessage.type is equal to 'error'
• InlineInputText now supports disabled and readOnly props
• InlineTextArea now supports disabled and readOnly props
• InputColor no longer allows user to click swatch when readOnly is assigned
• MenuItems within the same MenuList align consistently when icons are used
• Page fix size to use % instead of vh/vw
• Popover flashing in the upper left corner of the screen on slow pages
• Select on a mobile device or with "tap to click" on a touch pad reopens immediately after clicking on an option
• Select options not being announced in a screen reader on keyboard navigation
• Select that is controlled no longer loses focus if there's delay between onChange and value update
• Select alignment of options when some have icons and others do not
• Select inappropriately shows "No options" when the current value is empty, after filtering a long list down to a single option then deleting the filter text
• Select remounts its options when the options prop changes, using a shallow comparison. This causes select via click to fail if the options prop "changes" (same values, new array instance) after a mousedown, e.g. if a parent component contains usePopover.

Removed

• ActionListManager was removed (DataTable now supports state=loading|noResults)
• ActionList (now known as DataTable) no longer supports header prop (header is always generated by component now)
  • column no longer supports width (see new size behavior)
• Dialog no longer supports maxWidth (it's now always 100% - use width)
• Drawer no longer supports height (use minHeight)
• Dialog no longer supports surfaceStyles (use built-in props instead)
• DialogManager is no longer available (Dialog is completely compatible with previous interface)
• groupedPopoversRef and groupedMenusRef (Popover and Menu no longer cancel the first click outside)