Skip to content

v1.1.0
Compare
Choose a tag to compare
@JosephusPaye JosephusPaye released this 28 Jan 10:27
· 139 commits to next since this release
v1.1.0
49e7f22

There are breaking changes in this release. Read through and update your usage where required. The upgrade should take less than an hour. If you find any changes not documented here, please file a new issue.

Note: currently Keen UI doesn't follow semver, and there may be breaking changes in minor x.x releases. To avoid these breaking changes, use the ~ version constraint to lock to a specific minor version, restricting updates to patch releases only. Example, in package.json:

-"keen-ui": "^1.1.0",
+"keen-ui": "~1.0.0",

General

UiAlert

  • Add new prop disableAnimation to disable the show/hide animation.

UiAutocomplete

  • Add new method focus() to focus programmatically.
  • Add new prop sort for a custom sort function.
  • Pass default filter function as third parameter to filter prop.

UiButton

  • Breaking: Accepted values for prop dropdownPosition have changed to match Tippy.js. See docs for new values.
  • Fix ripple position starting off when directly clicking an inner element. Fixes #220.
  • Add tooltip, tooltipPosition and openTooltipOn props.
  • Make focus ring transition to fill the button. Previously, it stopped halfway. Fixes #205.
  • Remove UiProgressCircular from the DOM when loading is false. Previously, it was hidden with display: none.
  • Remove pointer cursor, to match default HTML buttons. If you want the hand pointer on buttons by default, add: 
    .ui-button {
    cursor: pointer;
}
  • For secondary buttons, use button color as background for hover and focus.
  • Add new prop href. Setting this prop will render an anchor tag.

UiCollapsible

  • Breaking: Remove no longer needed refreshHeight() method.
  • Refactor toggle transition to be smoother and less janky.

UiConfirm

  • Breaking: Default transition scale is now scale-down. If you didn't use size="scale", this will not affect you.
  • Add new prop size.
  • Document reveal and hide events.

UiDatepicker

  • Breaking: The month of the submitted value now starts at 1, instead of JavaScript's default which starts at 0. So, January is now 1 instead of 0, February is 2, etc.
  • Allow a string for value prop. See #45.
  • Add new prop startOfWeek to change the starting day of the week in the calendar shown.
  • Add new method clear to clear the selected date.

UiFab

  • Breaking: tooltipPosition prop accepted values have changed to match Tippy.js. See docs for new values.

UiFileupload

  • Add new method openPicker() to open the file picker programmatically.
  • Add new method clear() to clear the selected file, if any.

UiIconButton

  • Breaking: Accepted values for prop dropdownPosition have changed to match Tippy.js. See docs for new values.
  • Breaking: tooltipPosition prop accepted values have changed to match Tippy.js. See docs for new values.
  • Remove UiProgressCircular from the DOM when loading is false. Previously, it was hidden with display: none.
  • Remove pointer cursor, to match default HTML buttons.
  • For secondary icon buttons, use button color as background for hover and focus.
  • Add new size: mini.
  • Add href prop. Setting this prop will render an anchor tag.

UiMenu and UiMenuOption

  • Add new props href and target for menu options. Setting the href prop will render the menu option as an anchor tag.
  • Fix focus containment when tabbing backwards.

UiModal

  • Breaking: Default transition scale is now scale-down. If you didn't use size="scale", this will not affect you.
  • Add new props alignTop and alignTopMargin, for creating modals that are vertically aligned to the top of the viewport.
  • Add new size fullscreen.
  • Add new transition scale-up.

UiPopover

  • Breaking: Switch positioning library to Tippy.js, which uses Popper.js.
  • Breaking: trigger prop is now a DOM Element, VueComponent instance, or selector string. If no trigger is provided or the selector doesn't match any element, the popover's immediate parent element is used as the trigger. 
    <!-- Instead of: ref + trigger -->
<button ref="button">My Button</button>
<ui-popover trigger="button">My Popover</ui-popover>

<!-- Use: nested <ui-popover> in target element -->
<button>
    My Button <ui-popover>My Popover</ui-popover>
</button>
  • Breaking: Rename dropdownPosition prop to position, to match UiTooltip. Accepted values have changed to match Tippy.js. See docs for new values.
  • Remove prop removeOnClose, no longer needed. All popovers are now removed from the DOM on close.
  • Add new prop animation to choose animation style.
  • Add new prop closeOnScroll to close an open popover on external scroll.
  • Add new prop appendToBody, to choose between appending popover to document.body or the local parent element.
  • Add new method isOpen(), used to determine if the popover is open.
  • Add new events reveal and hide.
  • Add new prop disabled, to disable the popover.
  • Add new prop offset, to change the popover's offset from the trigger element.

UiProgressLinear

  • Rewrite animation to use transform only (GPU accelerated), remove ::before/::after pseudo elements used for previous animation.

UiRippleInk

  • Breaking: trigger prop is now a DOM Element instance or selector string. If no trigger is provided or the selector doesn't match any element, the ripple's immediate parent element is used as the trigger.
  • Fix incorrect ripple position when clicking directly on trigger's inner elements. Fixes #220.

UiSelect

  • Add new method clearSelection() to clear the current selection.
  • Add new method clearQuery() to clear the current search query.
  • Add new method focus() to focus programmatically.
  • Add new prop sort for a custom sort function.
  • Pass default filter function as third parameter to filter prop.

UiSlider

  • Add new method focus() to focus programmatically.
  • Add new props min and max to specify a custom slider range. See #368.

UiSnackbarContainer

  • Add new event queue-end, emitted when the last snackbar in a queue is hidden.

UiTabs and UiTab

  • UiTabs

    • Breaking: argument passed to tab-change event handler is now the tab instance, not the id. To get the id, use tab.id.
    • Breaking: Remove refreshIndicator method, no longer needed.
    • Change active tab indicator animation, to fix issues related to window resizing and initially hidden tabs. Fixes #328.
    • Add new event tab-click, emitted when a tab is clicked, whether or not the tab is selected.
    • Add new prop confirmTabChange, A function that will be called for confirmation when the user attempts to change tabs.

  • UiTab

    • Breaking: Remove show prop, use v-for with a filtered array of tabs instead.
    • Breaking: Remove icon (string) and iconProps (object) props, use the header slot instead.
    • Tabs can now be created using v-for. Fixes #349.
    • HTML can now be used in tab headers, using the header slot.

UiTextbox

  • Add new method focus() to focus programmatically.

UiTooltip

  • Breaking: Switch positioning library to Tippy.js, which uses Popper.js.
  • Breaking: trigger prop is now a DOM Element, VueComponent instance, or selector string. If no trigger is provided or the selector doesn't match any element, the tooltip's immediate parent element is used as the trigger. 
    <!-- Instead of: ref + trigger -->
<button ref="button">My Button</button>
<ui-tooltip trigger="button">My Tooltip</ui-tooltip>

<!-- Use: nested <ui-tooltip> in target element -->
<button>
    My Button <ui-tooltip>My Tooltip</ui-tooltip>
</button>
  • Breaking: position prop accepted values have changed to match Tippy.js. See docs for new values.
  • Add new prop animation to choose animation style.
  • Add new prop appendToBody, to choose between appending tooltip to document.body or the local parent element.
Assets 2
Loading