chore: fix demo links and move back icon intro
This commit is contained in:
Joren Broekema
parent
8d9225c040
commit
b500dfe237
14 changed files with 15 additions and 40 deletions
|
|
@ -39,7 +39,7 @@ Our fieldset instead has a label attribute or you can add a label with a div- or
|
|||
|
||||
- Easy retrieval of form data based on field names
|
||||
- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
|
||||
- Can have [validate](?path=/docs/forms-validation-examples) on fieldset level and shows the validation feedback below the fieldset
|
||||
- Can have [validate](?path=/docs/forms-validation-overview--main#validate) on fieldset level and shows the validation feedback below the fieldset
|
||||
- Can disable input fields on fieldset level
|
||||
- Accessible out of the box
|
||||
|
||||
|
|
@ -65,4 +65,4 @@ import '@lion/fieldset/lion-fieldset.js';
|
|||
</lion-fieldset>
|
||||
```
|
||||
|
||||
For more examples please look at [Fieldset Examples](?path=/docs/forms-fieldset-examples).
|
||||
For more examples please look at [Fieldset Examples](?path=/docs/forms-fieldset-examples--data#fieldset-examples).
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ For a detailed description of the validation system and the `ValidateMixin`, ple
|
|||
### Installation
|
||||
|
||||
```bash
|
||||
npm i --save @lion/validate
|
||||
npm i --save @lion/form-core
|
||||
```
|
||||
|
||||
```js
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ export const FocusMixin = dedupeMixin(
|
|||
}
|
||||
|
||||
__registerEventsForFocusMixin() {
|
||||
// focus
|
||||
this.__redispatchFocus = ev => {
|
||||
ev.stopPropagation();
|
||||
this.dispatchEvent(new Event('focus'));
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ function validateSvg(svg) {
|
|||
}
|
||||
|
||||
/**
|
||||
* Custom element for rendering SVG icons.
|
||||
* Custom element for rendering SVG icons
|
||||
*/
|
||||
export class LionIcon extends LitElement {
|
||||
static get properties() {
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ export const faultyPrefilled = () => html`
|
|||
### Country Restrictions
|
||||
|
||||
By default, we validate the input to ensure the IBAN is valid.
|
||||
To get the default feedback message for this default validator, use `loadDefaultFeedbackMessages` from `@lion/validate`.
|
||||
To get the default feedback message for this default validator, use `loadDefaultFeedbackMessages` from `@lion/form-core`.
|
||||
|
||||
In the example below, we show how to use an additional validator that restricts the `input-iban` to IBANs from only certain countries.
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { friendlyFormatIBAN } from 'ibantools';
|
|||
* @return {string} formatted value
|
||||
*/
|
||||
export function formatIBAN(modelValue) {
|
||||
// defensive code because of ibantools.
|
||||
// defensive code because of ibantools
|
||||
if (!modelValue) {
|
||||
return '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ Manages their position on the screen relative to other elements, including other
|
|||
|
||||
Its purpose is to make it easy to use our Overlay System declaratively. It can be easily extended where needed, to override event listeners and more.
|
||||
|
||||
See [lion-dialog](../dialog) and [lion-tooltip](../tooltip) for example Web Component implementations using the Overlay System.
|
||||
See [lion-dialog](?path=/docs/overlays-dialog--main#dialog) and [lion-tooltip](?path=/docs/overlays-tooltip--main#tooltip) for example Web Component implementations using the Overlay System.
|
||||
|
||||
## Features
|
||||
|
||||
|
|
@ -26,9 +26,9 @@ See [lion-dialog](../dialog) and [lion-tooltip](../tooltip) for example Web Comp
|
|||
- lion-overlay web component:
|
||||
- Show content when clicking the invoker
|
||||
- Have a `.config` object to set or update the OverlayController's configuration
|
||||
- [**OverlaysManager**](./docs/OverlaysManager.md), a global repository keeping track of all different types of overlays
|
||||
- [**OverlayController**](./docs/OverlayController.md), a single controller class for handling overlays
|
||||
- **OverlayMixin**, a mixin that can be used to create webcomponents that use the OverlayController under the hood
|
||||
- [**OverlaysManager**](?path=/docs/overlays-system-overview--overlay-manager#overlaysmanager), a global repository keeping track of all different types of overlays
|
||||
- [**OverlayController**](?path=/docs/overlays-system-overview--overlay-manager#overlaycontroller), a single controller class for handling overlays
|
||||
- [**OverlayMixin**](?path=/docs/overlays-system-overview--overlay-manager#overlaymixin), a mixin that can be used to create webcomponents that use the OverlayController under the hood
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ Global refers to overlays where the content is positioned in a global root node
|
|||
|
||||
Overlays can be configured in many ways to suit your needs. We go in-depth into each option in the Overlay System - Configuration chapter.
|
||||
|
||||
We also export a few preset configuration objects, which you can find [here](?path=/docs/overlays-system-configuration).
|
||||
We also export a few preset configuration objects, which you can find [here](?path=/docs/overlays-system-configuration--placement-local#overlay-system---configuration).
|
||||
|
||||
- withModalDialogConfig
|
||||
- withDropdownConfig
|
||||
|
|
|
|||
|
|
@ -306,7 +306,7 @@ Features:
|
|||
|
||||
> Popper strictly is scoped on positioning. **It does not change the dimensions of the content node nor the invoker node**.
|
||||
> This also means that if you use the arrow feature, you are in charge of styling it properly, use the x-placement attribute for this.
|
||||
> An example implementation can be found in [lion-tooltip](?path=/docs/overlays-tooltip), where an arrow is set by default.
|
||||
> An example implementation can be found in [lion-tooltip](?path=/docs/overlays-tooltip--main#tooltip), where an arrow is set by default.
|
||||
|
||||
To override the default options we set for local mode, you add a `popperConfig` object to the config passed to the OverlayController.
|
||||
Here's a succinct overview of some often used popper properties:
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ export class OverlayController {
|
|||
* @desc Usually the parent node of contentWrapperNode that either exists locally or globally.
|
||||
* When a responsive scenario is created (in which we switch from global to local or vice versa)
|
||||
* we need to know where we should reappend contentWrapperNode (or contentNode in case it's
|
||||
* projected)
|
||||
* projected).
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
get _renderTarget() {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,6 @@ export const main = () => html`
|
|||
- Uses Popper.js under the hood, to have the content pop up relative to the invoker
|
||||
- Use `.config` to override the overlay configuration
|
||||
- Config has `popperConfig` property that has a one to one relation with Popper.js configuration API.
|
||||
- Comes with a default `lion-tooltip-arrow` for an arrow.
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -200,7 +200,7 @@ describe('lion-tooltip', () => {
|
|||
</lion-tooltip>
|
||||
`);
|
||||
|
||||
// FIXME: This should be refactored to Array.from(this.children).find(child => child.slot === 'content')
|
||||
// FIXME: This should be refactored to Array.from(this.children).find(child => child.slot === 'content').
|
||||
// When this issue is fixed https://github.com/ing-bank/lion/issues/382
|
||||
const content = el.querySelector('[slot=content]');
|
||||
expect(content.getAttribute('role')).to.be.equal('tooltip');
|
||||
|
|
|
|||
25
yarn.lock
25
yarn.lock
|
|
@ -1998,31 +1998,6 @@
|
|||
npmlog "^4.1.2"
|
||||
write-file-atomic "^2.3.0"
|
||||
|
||||
"@lion/field@0.13.1":
|
||||
version "0.13.1"
|
||||
resolved "https://registry.yarnpkg.com/@lion/field/-/field-0.13.1.tgz#566244c16fbac8e46d59e5a2eca7024cc6c8bfdc"
|
||||
integrity sha512-ecAzZt4qq4VA+BCrxS9wcE5Vzy3yK6ETdHQlnmIZKuJwaACbtx+FKTkDovwxkYy4jpohWB2g+etQevz4F6GOzw==
|
||||
dependencies:
|
||||
"@lion/core" "0.6.0"
|
||||
"@lion/validate" "0.11.0"
|
||||
|
||||
"@lion/localize@0.10.0":
|
||||
version "0.10.0"
|
||||
resolved "https://registry.yarnpkg.com/@lion/localize/-/localize-0.10.0.tgz#f3608baeb9ae65ac4e0c3efdd6208208220a6153"
|
||||
integrity sha512-oAy07yvNkFlsMxW3TBwrHvj1QEcjVDJ50vazuekzpc0M6v9c+00/6Y3U3TnH/H5V5qjKmOHnfhqYZoVqkmaqhA==
|
||||
dependencies:
|
||||
"@bundled-es-modules/message-format" "6.0.4"
|
||||
"@lion/core" "0.6.0"
|
||||
singleton-manager "1.0.0"
|
||||
|
||||
"@lion/validate@0.11.0":
|
||||
version "0.11.0"
|
||||
resolved "https://registry.yarnpkg.com/@lion/validate/-/validate-0.11.0.tgz#634465b2a90461024e913698f60505cd0b774a19"
|
||||
integrity sha512-pphmYoWZZyybjLo0kdZ8jBSDwS2yh4Kjuanu6Qv8YJCK1gK1d7CvMIqBdFAPlRvZ5DSpz7eoHMrY/iYbo6edog==
|
||||
dependencies:
|
||||
"@lion/core" "0.6.0"
|
||||
"@lion/localize" "0.10.0"
|
||||
|
||||
"@marionebl/sander@^0.6.0":
|
||||
version "0.6.1"
|
||||
resolved "https://registry.yarnpkg.com/@marionebl/sander/-/sander-0.6.1.tgz#1958965874f24bc51be48875feb50d642fc41f7b"
|
||||
|
|
|
|||
Loading…
Reference in a new issue