chore(release): cut version 4.0.0

[varl]

4.0.0 (dhis2/ui@v3.12.0...v4.0.0) (2019-11-20)

Bug Fixes

• alert-stack: revert changes so it just uses a fixed z-index (e9c043d (dhis2/ui@e9c043d))
• checkbox: align focus/blur with change and remove disabled check (2c8abbe (dhis2/ui@2c8abbe))
• checkbox,radio: value should be optional (fix: checkbox value should be optional #419 (build(eslint): block packages from importing themselves ui#419)) (b22a9d0 (dhis2/ui@b22a9d
  0))
• chip remove icon: fix position cross browser (ae7bc0f (dhis2/ui@ae7bc0f)) * css-variables: improve robustness and developer warnings (fix(css-variables): improve robustness and developer warnings #449 (chore(deps-dev): bump @storybook/channels from 6.1.10 to 6.1.12 ui#449)) (6422f3e (https://github.com/dhis2/
  ui/commit/6422f3e)) * correct handler usage for filterable menu (8e35c5d (dhis2/ui@8e35c5d))
• file-field: consistently use FileField instead of File + fix typo (6fc35f7 (dhis2/ui@6fc35f7))
• file-input: adjust component names - FormControl to Field (48bf08d (dhis2/ui@48bf08d)) * file-input: correct line height and add className prop (01d10e3 (dhis2/ui@01d10e3))
• file-input: fix Edge text overflow behavior (e28b751 (dhis2/ui@e28b751))
• file-input: implement PlaceHolder as child of FileList (814f007 (dhis2/ui@814f007))
• file-input: implement spacing between text and link via ::after el (4894747 (dhis2/ui@4894747))
• file-input: improve children prop-type to allow multiple files (34d7d2c (dhis2/ui@34d7d2c))
• file-input: introduce FileList to solve spacing issues (a870efb (dhis2/ui@a870efb)) * file-input: tweak CSS to fix incorrect total height (6732e36 (dhis2/ui@6732e36))
• input: align handleFocus/handleBlur with handleChange (5afc697 (dhis2/ui@5afc697))
• input: allow types specified in design-system (1416d5e (dhis2/ui@1416d5e))
• input: correct prop-type for type (445e69a (dhis2/ui@445e69a))
• input: remove duplicate story and improve "No label" (fix(input): remove duplicate story and improve "Default" story #480 (chore(deps-dev): bump @storybook/core-events from 6.1.10 to 6.1.16 ui#480)) (8e1b045 (https://github.com/dhis2/ui/c
  ommit/8e1b045))
• input-field: add required onChange prop to all stories (5f83475 (dhis2/ui@5f83475))
• input-field: adjust focus props and label story (fix(input-field): adjust focus props and label story #447 (chore(deps-dev): bump @storybook/react from 6.1.11 to 6.1.12 ui#447)) (d85eda7 (https://github.com/dhis2/ui/commit
  /d85eda7))
• layer: children must be a function and required (4d74a9e (dhis2/ui@4d74a9e))
• layer context: simplify and correct calculations (afb27bd (dhis2/ui@afb27bd))
• layer-context: add support for layers upon layers (cccd8ad (dhis2/ui@cccd8ad))
• prop-types: adjust statusPropType and use custom one for AlertBar (4eae18f (dhis2/ui@4eae18f))
• radio: align handleFocus/handleBlur with handleChange (afd8bb2 (dhis2/ui@afd8bb2))
• select: add missing prop types (dfe2105 (dhis2/ui@dfe2105))
• select: add missing tab index default (e2e36dd (dhis2/ui@e2e36dd))
• select: align onfocus and onblur with other cbs (83becac (dhis2/ui@83becac))
• select: align select with callback style changes (f237557 (dhis2/ui@f237557))
• select: fix overlap on specifying input width for flex children (de02c2d (dhis2/ui@de02c2d))
• select: fix positioning issues (f615d46 (dhis2/ui@f615d46))
• select: fix select closing on chip removal (298b1dd (dhis2/ui@298b1dd)) * select: make filtering case insensitive (95d6ff4 (dhis2/ui@95d6ff4))
• split-button: remove unused styles (f66bc5a (dhis2/ui@f66bc5a))
• switch: align handleFocus/handleBlur with handleChange (dfc4efc (dhis2/ui@dfc4efc))
• switch: change input type to checkbox because switch is not valid (b42258c (dhis2/ui@b42258c))
• tab-bar: enforce that children are instances of the Tab component (c8d6c9f (dhis2/ui@c8d6c9f))
• text-area: align handleFocus/handleBlur with handleChange (4a73b78 (dhis2/ui@4a73b78))
• adjust menu position after option selection (a31adcf (dhis2/ui@a31adcf))
• export Label in index.js (69498d0 (dhis2/ui@69498d0))
• introduce layer-context to deal with overlapping elements + story (e4f7169 (dhis2/ui@e4f7169))
• make name prop optional instead of required (0a58802 (dhis2/ui@0a58802))
• use layer-context in alert-stack and drop-menu (abc171a (dhis2/ui@abc171a))
• text-area: only set height when value changes (35ba2f7 (dhis2/ui@35ba2f7))
• toggle-group: remove .isRequired from value prop (deed091 (dhis2/ui@deed091))
• toggles: remove position relative from toggles (04953cf (dhis2/ui@04953cf))

chore

• help: remove indent props and examples from stories (chore(help): remove indent props and examples from stories #471 (chore(deps-dev): bump @storybook/channels from 6.1.10 to 6.1.15 ui#471)) (bba5ba9 (https://github.com/dhis2/ui/co
  mmit/bba5ba9))
• upgrade react to support hooks (27c852f (dhis2/ui@27c852f))

Code Refactoring

• checkbox: align 'on' function handlers (7cc2f6b (dhis2/ui@7cc2f6b))
• fileinput: align 'on' function handlers (0a94f88 (dhis2/ui@0a94f88))
• formcontrol: rename to field (refactor(formcontrol): rename to field #402 (chore(package.json): fix repository urls ui#402)) (84edf35 (dhis2/ui@84edf35))
• input: align 'on' function handlers (8aeaf64 (dhis2/ui@8aeaf64))
• input,textarea: remove option to pass in number for width (4a4a2e7 (dhis2/ui@4a4a2e7))
• modal: align modal with component structure (1cafa84 (dhis2/ui@1cafa84))
• modal: remove open prop (e616bd9 (dhis2/ui@e616bd9))
• modal: remove unnecessary aside element wrapper (ace92d1 (dhis2/ui@ace92d1))
• radio: align 'on' function handlers (f37501c (dhis2/ui@f37501c))
• select: update component to new design (a21e426 (dhis2/ui@a21e426))
• select,input: drop -field suffix on components (refactor(select,input): drop -field suffix on components #389 (chore(deps-dev): bump @storybook/components from 6.0.26 to 6.1.7 ui#389)) (ed56586 (https://github.com/dhis2/ui/commit/
  ed56586))
• splitbutton: separate component from buttonstrip (refactor: remove compact from button strip #396 (docs(ui-icons): add rudimentary storybook generation for icons ui#396)) (b33d4f4 (https://github.com/dhis2/ui/commi
  t/b33d4f4))
• implement the Radio component consistently with other inputs (9387656 (dhis2/ui@9387656))
• kill the filled option for selectfield and inputfield (refactor: kill the filled option for selectfield and inputfield #427 (chore(deps-dev): bump @storybook/theming from 6.1.10 to 6.1.11 ui#427)) (73ab1be (https://github.com/dhis2/ui/
  commit/73ab1be))
• toggle input components (e5bfb32 (dhis2/ui@e5bfb32))
• switch: align 'on' function handlers (36707da (dhis2/ui@36707da))
• tabbar: align component structure (427d7cb (dhis2/ui@427d7cb))
• textarea: align 'on' function handlers (267b088 (dhis2/ui@267b088))
• toggle-group: split into composable components (refactor(toggle-group): split into composable components and generalise #388 (chore(deps-dev): bump @storybook/react from 6.0.26 to 6.1.7 ui#388)) (a5d17e1 (https://github.com/dhis2/ui/commit/
  a5d17e1))

Documentation

• introduce user docs (docs: introduce user docs #397 (chore(deps-dev): bump @storybook/addons from 6.0.26 to 6.1.10 ui#397)) (9f7cd2b (dhis2/ui@9f7cd2b))

Features

• field: add className prop (32d3638 (dhis2/ui@32d3638))
• file-field: introduce FileField component (023d0db (dhis2/ui@023d0db))
• file-input: add disabled prop and button sizes (83fce79 (dhis2/ui@83fce79))
• input atom: add ellipsis to overflowing text (0cc8155 (dhis2/ui@0cc8155))
• label: add className prop (4cb579c (dhis2/ui@4cb579c))
• modal: add className prop (663d717 (dhis2/ui@663d717))
• node: add className prop to node (82e921c (dhis2/ui@82e921c))
• screencover: add transparent prop (70ade82 (dhis2/ui@70ade82))
• select: add input max height prop (47a6516 (dhis2/ui@47a6516))
• select: add inputWidth property to control width (81d67f1 (dhis2/ui@81d67f1))
• status-icon: add info and defaultTo props (b972bce (dhis2/ui@b972bce))
• tab components: add className props (8512eec (dhis2/ui@8512eec))
• textarea: introduce TextArea and TextAreaField with docs and stories (feat(textarea): introduce TextArea and TextAreaField with docs and stories #456 (test(cypress): revert visibility tests ui#456)) (3d85a6c (dhis2/ui@3d85a6c))
• theme: expose spacers, elevations and layers constants (d82f1f4 (dhis2/ui@d82f1f4))

BREAKING CHANGES

• modal: Removed the aside element wrapper
• select,input: InputField renamed to Input
  SelectField renamed to Select
• chore: trigger netlify
• input,textarea: Input and TextArea now requires the input width
  override to be passed in as a string.
• Now requires React >= 16.8.
• fileinput: onChange is called with two parameters:
  First parameter an object with properties for checked, name, and
  value.
  The second is the React event object.
• textarea: onChange is called with two parameters:
  First parameter an object with properties for checked, name, and
  value.
  The second is the React event object.
• input: onChange is called with two parameters:
  First parameter an object with properties for checked, name, and
  value.
  The second is the React event object.
• checkbox: onChange is called with two parameters:
  First parameter an object with properties for checked, name, and
  value.
  The second is the React event object.
• radio: onChange is called with two parameters:
  First parameter an object with properties for checked, name, and
  value.
  The second is the React event object.
• switch: onChange is called with two parameters:
  First parameter an object with properties for checked, name, and
  value.
  The second is the React event object.
• tabbar: This replaces the need to nest a TabBar in a ScrollBar,
  and instead allows TabBar.propTypes.scrollable to toggle if a TabBar
  is scrollable.
• tabbar: This deprecates external use of ScrollBar.
• modal: This deprecated use of Modal.Actions. Instead, use
  ModalActions.
• modal: This deprecated use of Modal.Content. Instead, use
  ModalContent.
• modal: This deprecated use of Modal.Title. Instead, use
  ModalTitle.
• tab-bar: TabBar will now only accept Tab instances
• modal: Removing the "open" prop from the Modal.
• select: SelectField deprecated in favor of SingleSelectField,
  see the docs for the API.
• select: The new Select components do not accept a standard HTML option
  element, instead they require use of SingleSelectOption, MultiSelectOption,
  or a component with a matching API.
• select: The Select's onChange no longer returns a standard Event.target,
  instead returns the selected Object with properties: label and
  string, or an array of those for the MultiSelects
• select: The Selects all require a selected prop, instead of a value.
  Where selected is an object with a label and a value string, or an array of
  those for the MultiSelect.
• select: Since the Selects do not use a native input element, the name
  prop has been dropped from the Select components.
• The icon and required props have been removed from
  the Checkbox and Switch. For Switch, the label prop has become
  required.
• RadioGroup has a new implementation and drops the
  following props: label, inline, options, and helpText.
• The icon and required props have been removed from the Radio component and the value and label props have become required.
• help: Removes indent prop from Help. Use className to
  override if necessary.
• Remove the Filled field style for SelectField and
  InputField.
• MenuItem value prop is more strict, requires String
  instead of any.
• formcontrol: Renames FormControl to Field.
• splitbutton: remove the compact prop from buttonstrip
• toggle-group: Renames ToggleGroup to FieldSet to match intended
  usage.
• select: Select deprecated in favor of the SingleSelect, refer
  to the docs for the API.

[netlify]

Deploy preview for dhis2-ui-core ready!

Built with commit 61099e2

https://deploy-preview-430--dhis2-ui-core.netlify.com

[HendrikThePendric]

I've compared the props in the storybook-prop-table@master with the-docs@next. Got down to RadioGroup and left a few comments. I'm not sure how we should describe the breaking changes in Menu, because I didn't take time to look into it. There a comment to flag up the breaking changes though...

[varl]

I have gone over all the comments noted, and scanned the APIs to make them more consistent. I found that in some places we say that onChange functions are required, and in other places they are optional.

I have applied a strict definition that isRequired indicates that the component will crash if the property is not passed in, for example the name property is assumed to exist in the code. If it is not supplied, the component will throw an error, so that's a required prop.

For the onChange we always check if we have an onChange function before calling it, so that's not a strictly required property and as such I have loosened it so that all on handlers are optional. This makes the components easier to use in a prototype situation.

Naturally, the component won't work properly without an onChange handler, but I think that should be documented in the user docs instead of enforcing it with props.

[varl]

Let's fly. 🚀