Skip to content

Latest commit

 

History

History
492 lines (300 loc) · 19.8 KB

CHANGELOG.md

File metadata and controls

492 lines (300 loc) · 19.8 KB
Raw

v2.0.0 (to be released)

This is a breaking release that upgrades Keen UI to work with Vue 3. If you are using Vue 2, you may continue to use the latest version of Keen UI 1.x.

UiAlert

  • TODO: document any API changes

UiAutocomplete

  • TODO: document any API changes

UiButton

  • TODO: document any API changes

UiCalendar

  • TODO: document any API changes

UiCheckbox

  • TODO: document any API changes

UiCheckboxGroup

  • TODO: document any API changes

UiCloseButton

  • TODO: document any API changes

UiCollapsible

  • TODO: document any API changes

UiConfirm

  • TODO: document any API changes

UiDatepicker

  • TODO: document any API changes

UiDatepickerCalendar

  • TODO: document any API changes

UiFab

  • TODO: document any API changes

UiFileupload

  • TODO: document any API changes

UiIcon

  • TODO: document any API changes

UiIconButton

  • TODO: document any API changes

UiMenu

  • TODO: document any API changes

UiModal

  • TODO: document any API changes

UiPopover

  • TODO: document any API changes

UiPreloader

  • TODO: document any API changes

UiProgressCircular

  • TODO: document any API changes

UiProgressLinear

  • TODO: document any API changes

UiRadio

  • TODO: document any API changes

UiRadioGroup

  • TODO: document any API changes

UiRippleInk

  • TODO: document any API changes

UiSelect

  • TODO: document any API changes

UiSlider

  • TODO: document any API changes

UiSnackbar

  • TODO: document any API changes

UiSnackbarContainer

  • TODO: document any API changes

UiSwitch

  • TODO: document any API changes

UiTab

  • TODO: document any API changes

UiTabs

  • TODO: document any API changes

UiTextbox

  • TODO: document any API changes

UiToolbar

  • TODO: document any API changes

UiTooltip

  • TODO: document any API changes

v1.4.0

Potentially Breaking Change: Upgraded from node-sass to sass, and fixed warnings about / division (see #529). node-sass is now deprecated, and sass no longer uses the / operator for division.

If you import Keen UI components from the source folder (e.g. import UiButton from 'keen-ui/src/UiButton.vue), this release might break your project due to the switch from node-sass to sass. There are a few options to fix this:

  1. If you don't need Sass customisation, import from the compiled components instead of the source components. The compiled components come with plain CSS instead of Sass. Here's an example of changing from a source component import to a compiled component import:

    -import UiButton from 'keen-ui/src/UiButton.vue'
+import { UiButton } from 'keen-ui'

  2. Upgrade to sass in your project, and replace all usage of / for division in your Sass files with the new math.div() function.

  3. Pin your version of Keen UI to the previous release (1.3.2) to avoid getting the new version with the breaking change until you're ready to upgrade to sass.

UiPopover

  • Add new props closeOnEsc and closeOnExternalClick for more control over when the popover closes. See #536.

v1.3.2

Sass customisation

  • Add the ability to define a custom rem() function to override Keen UI's default. See #520.

UiCalendar

  • Fix the prev/next month buttons being incorrectly disabled when yearRange is a list of years in descending order. See #491.

UiCollapsible

  • Hide collapsible content overflow only the during open/close animation. See #519.

UiModal

  • Close on backdrop click only if the backdrop also got a mousedown event. This avoids closing the modal when selecting text and releasing the mouse with the cursor over the backdrop. See #497.
  • Added a new prop beforeClose that can be used to dynamically allow or reject closing of the modal on backdrop clicks. See the docs for details.

UiPopover

  • Support rendering inside a Shadow DOM. See #518.

UiSwitch

  • Fix UiSwitch thumb overlapping open modals in certain cases due to z-index. See #514.

UiTextbox

  • Add autocapitalize prop. See #501.
  • Fix a value of zero being treated as falsy in UiTextbox value length calculation. Previously, when the value was the number 0, the textbox would be considered empty. See #516.

v1.3.1

UiFileupload

  • Potentially Breaking: Update UiFileupload's clear() method to reset the placeholder. See #510.

v1.3.0

UiSlider

  • Potentially Breaking: Update slider to work when initially-hidden, e.g. in a tab or modal. The refreshSize() method is no longer needed and has been removed. See #489.

UiPopover

  • Change Tippy's hideOnClick prop to true to close popover on external click

v1.2.1

UiSelectOption

  • Allow a Number as option. See #472.

UiCheckbox, UiRadio, UiRadioGroup

  • Change selected check to use strict equals (===) instead of loose equal (==). This allows an empty string '' to be used as the radio or checkbox's value. See #465.

UiCheckbox

  • Apply border-radius to checkmark background. Also switch background from ::before pseudo element to an actual element: .ui-checkbox__checkmark-background. This avoids visual artifacts that appear when applying border-radius to a pseudo element. See #471.

UiDatepicker

  • Add new prop defaultView to set the default datepicker view: date or year. See #454.

UiTextbox

  • Add new prop minlength to set the minlength attribute on the textbox input or textarea.
  • Allow a Number for step prop. See #460.
  • Ensure floating label doesn't overflow parent when scaling up. See #447.

v1.2.0

UiCalendar (new)

  • Added a new calendar component for showing calendars. Using a scoped slot, you can specify a custom template that will be used to render each date in the calendar. This could be used to add things like events to the calendar.

UiDatepicker

  • Breaking Remove OK and Cancel button in modal picker. Now, like the popover picker, dismissing the picker without a selection is "Cancel" and selecting a date is "OK".
  • Rewrite internal calendar for better semantics and accessibility.
  • Removed month switch animation. This unnecessarily slows down the user when switching through many months.
  • Add new prop appendDropdownToBody to append the dropdown to the document body.
  • Add new prop dropdownZIndex to customize the dropdown z-index.
  • Fix implementation to respect yearRange prop. See #449.
  • Keep dropdown open on scroll

UiModal

  • Add new size: auto, to make the modal's width grow to fit its content.

UiPopover

  • Upgrade to Tippy.js 4.
  • Breaking: Remove offset prop, as it's not recommended for interactive poppers (which is what UiPopover is).
  • Add new animation: scale.
  • Add new prop zIndex to customize the z-index of the popover.

UiSelect

  • Keep dropdown open on scroll

UiTooltip

  • Upgrade to Tippy.js 4.
  • Add new animation: scale.
  • Add new prop zIndex to customize the z-index of the tooltip.

v1.1.2

UiDatepicker

  • Fix loss of popover reference when disabled and re-enabled. See #435.

v1.1.1

UiDatepicker

  • Fix month transition when current date is not in target month. See #434.

v1.1.0

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.

v1.0.1

  • Upgrade Vue to v2.4.2 and fix template warnings. See #268.
  • Add aria-describedby attribute to UiTooltip.
  • Fix bug where help and error content provided via slot isn't shown unless the help or error props are set. Affects UiAutocomplete, UiCheckboxGroup, UiDatepicker, UiRadioGroup, UiSelect, and UiTextbox. See #204.
  • Allow null for UiAutocomplete and UiTextbox value prop. See #253.
  • Allow UiTooltip trigger prop to be a VueComponent instance. See #204.
  • Add checked attribute to the input element for UiRadio. See #207.
  • Fix error being thrown when using UiRippleInk with SVG elements on touch devices. See #236.
  • Fix minor errors and dead links in the docs.
  • Remove Material Icons webfont and use inline SVG icons in the docs.
  • Update contributing guidelines with information about linting, BEM and using the next branch.

v1.0.0

There are several breaking changes in this release, as the components have been re-written from scratch to support Vue 2. However, this release marks a stabilization of the API (hence v1.0) and breaking changes will be avoided in 1.x where possible.

Please consult the docs for component API changes.

Highlights

  • New components: UiCheckboxGroup, UiDatepicker and UiFileupload
  • Documentation for customizing the components
  • Global configuration now available for certain component props
  • CSS switched from Stylus to Sass, adopting the BEM naming convention
  • Component sizing switched from px to rem, using a root font size of 16px. Changing this font size will scale the components up/down appropriately.
  • Component event names switched from past tense to present to be more in line with the native DOM events
  • Remove validatorjs and draggabilly dependencies
  • Now shipping both minified and unminified versions of standalone component files in lib/
  • Fix several issues and unnecessary API limitations