ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lion/docs/blog/introducing-lion-ui.md
gerjanvangeest d2de984f0b
Feat/input file (#1881) 
* feat(input-file): create input-file component

* chore: improvements after review

* chore: update after review

* chore: update translations

* chore: - fixed demo with form submit, submit was not prevented
       - fixed checking allowed file extensions
       - fixed clicking on select file button in drag and drop area

* chore: since the input-file does not upload files itself but enables user to select files, I replaced "upload" and "upload" with "select" and "selected" where applicable

* chore: - removed unused properties allowedFileTypes and allowedFileExtensions from lion-input-file
       - cleaned up docs

* chore: - changed type Array.<type> to Array<type>
       - removed redundant type definition

* fix: - FocusMixin: moved registering events for from connectedCallback to firstUpdated since _focusableNode is sometimes not available yet
     - SlotMixin: changed updated to update in since slots were rendered too late (related to previous fix in FocusMixin.js)

* fix: renamed lion-uploaded-file-list.js to lion-selected-file-list.js

* fix: fixed test for lion-selected-file-list

* fix: fixed typ

* wip

* fix: - fixed issue with multiple file selection where element would not select valid files after invalid ones
     - added getMessage method to FileValidation that returns empty string to prevent message being shown that error message must be configured
     - fixed tests

* chore: replaced `uploadOnFormSubmit` with `uploadOnSelect` and flipped the default value to false. When `uploadOnSelect` is set to true, the file will be uploaded as soon as it is selected.

* fix: - replaced `uploadOnFormSubmit` with `uploadOnSelect` and flipped the default value to false. When `uploadOnSelect` is set to true, the file will be uploaded as soon as it is selected.
     - fixed issue where a valid file was not selected and added to the file list if it was preceded by an invalid file

* chore: removed redundant README.md

* fix: fixed failing test

* chore: added missing type annotation

* chore: annotated event param as optional

---------

Co-authored-by: Danny Moerkerke <danny.moerkerke@ing.com>
Co-authored-by: Thijs Louisse <Thijs.Louisse@ing.com>
2023-06-06 11:30:43 +02:00

2.2 KiB
Raw Blame History

title published description date tags
Introducing Lion UI false Lion introduces the new package @lion/ui which is a collection of all lion UI components. 2023-03-20
javascript

A new package

Lion introduces a new package @lion/ui which is a collection of UI components that can be used in your application. It contains all the components/systems that used to be distributed via separate @lion/* packages. This brings back around 40 packages to just 1.

Better dependency management

Since @lion/ui is now a single package, the dependencies of the individual components are now managed in a single package.json file. This results in a single folder of dependencies for all components instead of a folder for each component separately.

This means you will now have less dependencies that are easier to manage.

New entrypoints

All components are now imported from @lion/ui instead of @lion/* packages and therefore this is a breaking change. Where before you would import from @lion/<package>, you will now import from @lion/ui/<package>.js.

For example:

- import { LionAccordion } from '@lion/accordion';
+ import { LionAccordion } from '@lion/ui/accordion.js';

Element registrations have changed as well. For example:

- import '@lion/accordion/define';
+ import '@lion/ui/define/lion-accordion.js';

All available entrypoints for the packages in Lion can now easily be found in the /packages/ui/exports folder which makes the public API much more clear. This is now possible because Node.js supports the exports field in package.json where these entrypoints are defined.

For example, @lion/ui/accordion.js maps to /packages/exports/accordion.js and @lion/ui/define/lion-accordion.js maps to /packages/exports/define/lion-accordion.js.

Support for this exports field was added to TypeScript 4.7 so for that reason, @lion/ui only supports TypeScript 4.7+ with "moduleResolution": "Node16" or "moduleResolution": "NodeNext".

A new changelog

@lion/ui has a new single CHANGELOG.md in /packages/ui for the whole package. The older individual changelogs can be found in the /packages/ui/_legacy-changelogs folder.