0.9.24

@looker/components

Added

• ExtendComponentsProvider
• useDataTable hook for simple DataTable rendering (used for testing)

Fixed

• Avatar will consistently maintain it's 1:1 aspect ratio within flex layouts
• CodeBlock should now uses overflow-y: auto instead of overflow-y: scroll
• DataTable with number columns now properly aligns the cell content
• DataTableCell truncates description appropriately now
• DataTableCell with a link is presented properly when it gains focus via keyboard
• DataTableColumn width again supports number for percentage-based column widths
• DataTableHeaderCell properly aligns sort direction icon when column size is specified
• DataTableItem supports a single column
• DialogContent now will only enter "overflow" state exactly once per render lifecycle
• DialogFooterLayout is no longer exported

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)

0.9.22

@looker/components

Fixed

• AvatarIcon, AvatarUser, AvatarCombo - corrected rendering flaw where initials or icon weren't centered

0.9.21

@looker/components

Changed

• InputFilters
  • Default editor uses RadioGroup (single choice) and CheckboxGroup (multiple choice)
  • Developers can specify a custom editor that via fieldFilter.editor property (must match interface for InputFilterEditorRenderProp)

Fixed

• InputFilters
  • improved styling when Chips wrap to additional lines
  • Popover no longer moves when Chip is initially displayed
• Select inside a Dialog losing focus after clicking an option
• Tooltip adding extra space to its child's className

0.9.20

@looker/components

Added

• IconButton supports toggle prop (uses key color when toggled and aria-pressed)
• Tooltip and useTooltip now include a brief delay before showing
  • delay prop controls the length
  • Improved test coverage / added image-snapshots
• Tree branchAlign prop allows item be indented at the same depth as adjacent TreeItem(s)
• Tree now supports dividers to produce a small visual space between each TreeItem displayed in the list so that adjacent items in a "selected" or active state have visual separation.

Changed

• ButtonItem used inside ButtonToggle and ButtonGroup now uses fonts.body
• Dialog, Drawer and Popover no longer focus the first "tab-able" child. Instead they now focus the surface of the overlay itself.
• InputFilter to support multiline filter tokens
• useDialog (Dialog & Drawer) refactored
  • Removed use of react-transition-group dependency
  • Added support for aria-busy
  • Simplified implementation of DialogRender component
• Swatch no longer turns gray when disabled, but has a reduced opacity instead
• Removed dependencies on polished library

Fixed

• InputTimeSelect can accept a time that is not included in the select dropdown options
• FieldInline refactored to use MS-compatible grid (IE11 compatibility)
  • FieldCheckbox
  • FieldRadio
  • FieldToggleSwitch
• MenuItem now receives and uses passed-in rel prop
  • Also auto appends "noopener noreferrer" to rel if target="_blank"
• Popover & usePopover refactored internally to be consistent with Dialog refactor patterns
  • IMPORTANT NOTE: Popover will no longer apply active className to target. Instead it now applies [aria-expanded='true'] instead. Button* has been updated to match this change but implementations that depend on the previous behavior will need to be updated.
• Select / SelectMulti / InputTimeSelect click to select option in IE11

Removed

• Drawer no longer supports backdrop prop for customizing backdrop presentation
• IconButton support for color (neutral for all now)
• ToggleSwitch no longer supports size (now always consistent with Checkbox & Radio)

@looker/design-tokens

Changed

• theme.transitions durations are now integers (in milliseconds) rather than strings
• Reduced & consolidated dependencies on polished library

@looker/icons

Added

• ScheduleOutline

0.9.19

Changed

• InputDateRange allows you to specify a single day range by clicking on one of the date range endpoints

Fixed

• Truncate no longer conflicts with Text/truncate helper (moved to separate directory)
• FieldTimeSelect label ARIA accessibility fixes
• ComboBox and constituents caret color corrected, indicator size corrected

0.9.18

Added

• TreeGroup supports truncate and labelColor props

Changed

• IconButton w/ size="small" icon size adjusted to small (was xsmall)
• useDialog needs to support scenario it is controlled but onClose isn't specified

Fixed

• Space revert mistakenly applied flex-shrink: 0
• Reverts: HoverDisclosure toggles visibility with css rather than inserting elements into the DOM
• Fix image-snapshots issue

0.9.17

Added

• Combobox and ComboboxMulti openOnClick prop
• ComboboxInput now supports freeInput prop
• MenuItem & MenuGroup now use list-item-style to suppress bullet for list item when rendered outside of MenuList context.
• Select, SelectMulti and InputSearch now support isLoading and detail prop on options
• Span - same as Text without the annoying fontSize="medium" (inherits by default instead)
• Truncate component
• useDialog - all of the power of Dialog in a hook!
• Visual Snapshot test for MenuItem, MenuGroup, Status

Changed

• Code, CodeBlock & Paragraph now explicitly use theme.colors.text as default color
• Dialog
  • Backdrop is now dark (Material-esque)
  • now supports all previous DialogManager composition capabilities
  • can be used in either an "uncontrolled" or "controlled" manner
  • temporarily supports optional content prop until existing call sites can be updated. content will become required in next significant release.
• DialogManager is deprecated and all existing use cases should be replaced with Dialog
  • All internal use of DialogManager replaced with Dialog
• Drawer is nearly a direct pass-through to Dialog via useDrawer and DialogRender
  • useDrawer is nearly a direct pass-through to useDrawer with the key exception being Surface override
• HoverDisclosure toggles visibility with css rather than inserting elements into the DOM
• InputSearch onChange callback argument is now a string rather than an event
• InputTimeSelect supports 20- and 60-minute intervals
• Legend now applies font-family brand
• MenuGroupLabel now applies font-family brand
• Span replaced all library-internal usage of Text with Span
• TreeItem
  • now supports text truncation behavior
  • now wraps long text pleasantly
  • now defaults to 24px minimum height (was previously 25px)
  • detail no longer has padding on the right side
• Tooltip now has a default maxWidth of 30rem (this can be overridden)
• Brand font defaults to Roboto
• Adjusted icons sizes in IconButtons, Button, MenuItems, TextField to ensure consistent sizing across components

Fixed

• ComboboxMulti issue with chips not updating reflecting updated option labels
• DialogFooter & DialogHeader will no longer shrink in Safari when vertical space is limited
• InputTimeSelect disabled state
• MessageBar now displays properly in IE11 (switched from grid to flex layout)

Removed

• InputSearch onClear – use onChange with a check for empty value instead
• InputSearch and InputChips hideControls – use isClearable={false} instead

Preview / Experimental

• Experimental: InputSearch supports onSelectOption, changeOnSelect, clearOnClose and all Select props except isFilterable, onFilter, showCreate and formatCreateLabel

0.9.16

Added

• Drawer component

  • Note: This is a new implementation of the previously deprecated Drawer and features a more modern API. DrawerManager behaviors are now baked in to Drawer
  • Includes useDrawer hook

• TabList now supports PaddingProps and fontSize

• TabList w/ distribute now uses default "small" fontSize

• Image snapshots tests

  • Infrastructure to run image snapshot tests leveraging Storybook storyshots + jest-image-snapshots
  • Image snapshot coverage for Button*, IconButton & Tree components

• Storybook: Preliminary infrastructure for composition

• Storybook: Added support for extract behavior to improve published-Storybook performance

Changed

• ComponentsProvider now includes ScrollLockContext to manage all scroll locks for Dialog and Popover
  • Where previously DialogContext properties enableScrollLock, disableScrollLock, and scrollLockEnabled could previously be used to take control of a scroll lock, now use ScrollLockContext properties enableCurrentLock, disableCurrentLock, and activeLockRef to do so.
• AccordionDisclosure "indicator" now matches color of container rather than preserving it's initial color
• Storybook configuration improvements
  • addons-essentials now used
  • Replace withKnobs with Controls & Args

Fixed

• Page "jumps" when opening a Popover due to the scrollbar disappearing

Preview / Experimental

• Experimental: @looker/components-theme-editor package
• Preview: InputFilters component and tests (this component is not yet ready for general-use)
• Preview: ActionListControls component (this component is not yet ready for general-use)
• Preview: "Semantic" Layout components - Layout, Header, Footer, Aside

0.9.15

Changed

• theme.fonts.* now produced with single quotes rather than double quotes
• @looker/components-test-utils helpers will no longer produce globalStyles