@lion/ui 0.8.8 → 0.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/combobox/src/LionCombobox.js +6 -2
- package/components/combobox/test/lion-combobox.test.js +56 -3
- package/components/core/src/DisabledMixin.js +6 -0
- package/components/core/test/DisabledMixin.test.js +22 -1
- package/components/core/test/SlotMixin.test.js +3 -3
- package/components/form-core/test/FocusMixin.test.js +6 -4
- package/components/form-core/test-suites/NativeTextFieldMixin.suite.js +4 -8
- package/components/form-integrations/test/form-integrations.test.js +2 -2
- package/components/input-datepicker/translations/es.js +1 -1
- package/components/input-stepper/src/LionInputStepper.js +110 -35
- package/components/input-stepper/test/lion-input-stepper.test.js +96 -1
- package/components/input-tel-dropdown/src/LionInputTelDropdown.js +7 -6
- package/components/input-tel-dropdown/test/LionInputTelDropdown.test.js +62 -10
- package/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js +16 -12
- package/components/overlays/src/OverlayController.js +9 -0
- package/components/overlays/test/OverlayController.test.js +27 -3
- package/components/select-rich/test/lion-select-rich.test.js +9 -8
- package/components/switch/test/lion-switch.test.js +1 -1
- package/components/tabs/test/lion-tabs.test.js +12 -5
- package/custom-elements.json +506 -69
- package/dist-types/components/combobox/src/LionCombobox.d.ts.map +1 -1
- package/dist-types/components/core/src/DisabledMixin.d.ts.map +1 -1
- package/dist-types/components/form-core/test-suites/NativeTextFieldMixin.suite.d.ts.map +1 -1
- package/dist-types/components/input-stepper/src/LionInputStepper.d.ts +33 -24
- package/dist-types/components/input-stepper/src/LionInputStepper.d.ts.map +1 -1
- package/dist-types/components/input-tel-dropdown/src/LionInputTelDropdown.d.ts.map +1 -1
- package/dist-types/components/input-tel-dropdown/test/LionInputTelDropdown.test.d.ts +2 -2
- package/dist-types/components/input-tel-dropdown/test/LionInputTelDropdown.test.d.ts.map +1 -1
- package/dist-types/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.d.ts +2 -2
- package/dist-types/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.d.ts.map +1 -1
- package/dist-types/components/overlays/src/OverlayController.d.ts.map +1 -1
- package/dist-types/components/tabs/test/lion-tabs.test.d.ts.map +1 -1
- package/dist-types/tsconfig.tsbuildinfo +1 -1
- package/docs/components/button/api-table.md +3 -0
- package/docs/components/checkbox-group/api-table.md +3 -0
- package/docs/components/checkbox-group/overview.md +2 -2
- package/docs/components/collapsible/overview.md +1 -1
- package/docs/components/combobox/api-table.md +1 -0
- package/docs/components/combobox/overview.md +1 -1
- package/docs/components/combobox/use-cases.md +1 -1
- package/docs/components/dialog/overview.md +1 -1
- package/docs/components/fieldset/api-table.md +1 -0
- package/docs/components/fieldset/overview.md +5 -5
- package/docs/components/form/overview.md +3 -3
- package/docs/components/form/use-cases.md +2 -2
- package/docs/components/icon/use-cases.md +1 -1
- package/docs/components/input/api-table.md +1 -0
- package/docs/components/input/overview.md +1 -1
- package/docs/components/input-amount/api-table.md +1 -0
- package/docs/components/input-amount/overview.md +3 -3
- package/docs/components/input-date/api-table.md +1 -0
- package/docs/components/input-date/overview.md +3 -3
- package/docs/components/input-datepicker/api-table.md +1 -0
- package/docs/components/input-datepicker/overview.md +5 -5
- package/docs/components/input-email/api-table.md +1 -0
- package/docs/components/input-email/overview.md +2 -2
- package/docs/components/input-file/api-table.md +1 -0
- package/docs/components/input-file/overview.md +1 -1
- package/docs/components/input-iban/api-table.md +1 -0
- package/docs/components/input-iban/overview.md +2 -2
- package/docs/components/input-range/api-table.md +1 -0
- package/docs/components/input-range/overview.md +2 -2
- package/docs/components/input-stepper/api-table.md +7 -3
- package/docs/components/input-stepper/overview.md +1 -1
- package/docs/components/input-stepper/use-cases.md +30 -0
- package/docs/components/input-tel/api-table.md +1 -0
- package/docs/components/input-tel/overview.md +1 -1
- package/docs/components/input-tel/use-cases.md +6 -6
- package/docs/components/input-tel-dropdown/api-table.md +1 -0
- package/docs/components/input-tel-dropdown/overview.md +1 -1
- package/docs/components/listbox/api-table.md +2 -0
- package/docs/components/listbox/use-cases.md +1 -1
- package/docs/components/radio-group/api-table.md +2 -0
- package/docs/components/radio-group/overview.md +3 -3
- package/docs/components/select/api-table.md +1 -0
- package/docs/components/select/use-cases.md +1 -1
- package/docs/components/select-rich/api-table.md +2 -0
- package/docs/components/select-rich/use-cases.md +1 -1
- package/docs/components/switch/api-table.md +2 -0
- package/docs/components/tabs/examples.md +1 -1
- package/docs/components/textarea/api-table.md +1 -0
- package/docs/fundamentals/index.md +4 -4
- package/docs/fundamentals/node-tools/publish-docs/overview.md +3 -3
- package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md +2 -2
- package/docs/fundamentals/rationales/accessibility.md +1 -1
- package/docs/fundamentals/systems/core/SlotMixin.md +1 -1
- package/docs/fundamentals/systems/core/overview.md +1 -1
- package/docs/fundamentals/systems/form/api-table.md +1 -0
- package/docs/fundamentals/systems/form/formatting-and-parsing.md +4 -4
- package/docs/fundamentals/systems/form/model-value.md +1 -1
- package/docs/fundamentals/systems/form/overview.md +28 -28
- package/docs/fundamentals/systems/form/validate.md +2 -2
- package/docs/fundamentals/systems/localize/overview.md +4 -4
- package/docs/fundamentals/systems/overlays/configuration.md +2 -2
- package/docs/fundamentals/systems/overlays/overview.md +5 -5
- package/docs/fundamentals/systems/overlays/use-cases.md +2 -2
- package/docs/fundamentals/tools/helpers/overview.md +1 -1
- package/docs/fundamentals/tools/singleton-manager/overview.md +4 -4
- package/docs/guides/how-to/create-a-custom-field.md +5 -5
- package/docs/guides/how-to/create-a-form.md +4 -4
- package/docs/guides/how-to/extend-a-native-input.md +2 -2
- package/docs/guides/index.md +8 -8
- package/docs/guides/principles/index.md +5 -5
- package/docs/guides/principles/styling.md +1 -1
- package/package.json +1 -1
|
@@ -63,7 +63,7 @@ class MyForm extends LitElement {
|
|
|
63
63
|
}
|
|
64
64
|
```
|
|
65
65
|
|
|
66
|
-
> Today, rendering to light dom is the only way to [stay accessible](https://github.com/ing-bank/lion/blob/
|
|
66
|
+
> Today, rendering to light dom is the only way to [stay accessible](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/fundamentals/rationales/accessibility.md#shadow-roots-and-accessibility).
|
|
67
67
|
|
|
68
68
|
The registration mechanism relies on light dom by design: as soon as you do start to use shadow roots, you will notice that your form components won't register themselves anymore to their parents.
|
|
69
69
|
|
|
@@ -73,7 +73,7 @@ Extending form components is not recommended for Application Developers: it shou
|
|
|
73
73
|
This team will add the styling and default configuration needed to make it fit the particular Design System.
|
|
74
74
|
|
|
75
75
|
With the toolbox provided by the team that creates your Design System, you should be able to build all your forms. Only if you have a really good reason, look into
|
|
76
|
-
[exceptional cases](https://github.com/ing-bank/lion/blob/
|
|
76
|
+
[exceptional cases](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/guides/how-to/#exceptional-cases) below.
|
|
77
77
|
|
|
78
78
|
### Exceptional cases
|
|
79
79
|
|
|
@@ -81,8 +81,8 @@ If the form component you need is still missing, you have two options:
|
|
|
81
81
|
|
|
82
82
|
- is it a generic primitive that should be part of Lion? Request it in [Lion discussions](https://github.com/ing-bank/lion/discussions)
|
|
83
83
|
- is it a non generic component that is unique to your app?
|
|
84
|
-
- follow [create a custom field](https://github.com/ing-bank/lion/blob/
|
|
85
|
-
- follow [extend a native input](https://github.com/ing-bank/lion/blob/
|
|
84
|
+
- follow [create a custom field](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/guides/how-to/create-a-custom-field.md)
|
|
85
|
+
- follow [extend a native input](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/guides/how-to/extend-a-native-input.md)
|
|
86
86
|
|
|
87
87
|
It's also possible to extend other components, like LionListbox or LionCombobox. You need to be aware that you're building on top of protected apis.
|
|
88
88
|
Changing/overriding functionality is only recommended if the source code in `form-core` is fully understood.
|
|
@@ -11,9 +11,9 @@ import '../../fundamentals/systems/form/assets/h-output.js';
|
|
|
11
11
|
loadDefaultFeedbackMessages();
|
|
12
12
|
```
|
|
13
13
|
|
|
14
|
-
Input fields can be created by extending [LionInput](https://github.com/ing-bank/lion/blob/
|
|
14
|
+
Input fields can be created by extending [LionInput](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/components/input/overview.md).
|
|
15
15
|
|
|
16
|
-
> In case you want to wrap a custom form element, follow [Create a custom Field](https://github.com/ing-bank/lion/blob/
|
|
16
|
+
> In case you want to wrap a custom form element, follow [Create a custom Field](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/guides/how-to/create-a-custom-field.md).
|
|
17
17
|
|
|
18
18
|
For this tutorial, we create an input that wraps native `input[type=datetime-local]`.
|
|
19
19
|
This is as simple as adding a type:
|
package/docs/guides/index.md
CHANGED
|
@@ -12,9 +12,9 @@ Developers consuming our web components inside an application (not extending the
|
|
|
12
12
|
`Application Developers` are only allowed to interact with `public` properties and methods.
|
|
13
13
|
Can be abbreviated as `AD`. Sometimes also called `Consuming Developer`.
|
|
14
14
|
|
|
15
|
-
- [Definitions and Terms](https://github.com/ing-bank/lion/blob/
|
|
16
|
-
- [Styling](https://github.com/ing-bank/lion/blob/
|
|
17
|
-
- [Scoped Elements](https://github.com/ing-bank/lion/blob/
|
|
15
|
+
- [Definitions and Terms](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/guides/principles/definitions-and-terms.md)
|
|
16
|
+
- [Styling](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/guides/principles/styling.md)
|
|
17
|
+
- [Scoped Elements](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/guides/principles/scoped-elements.md)
|
|
18
18
|
|
|
19
19
|
## Extending Developer
|
|
20
20
|
|
|
@@ -22,13 +22,13 @@ Developers extending our web components, for instance: `class MaterialInput exte
|
|
|
22
22
|
|
|
23
23
|
Especially for subclassers we have some extra documentation:
|
|
24
24
|
|
|
25
|
-
- [Subclasser APIs](https://github.com/ing-bank/lion/blob/
|
|
26
|
-
- [Extend documentation](https://github.com/ing-bank/lion/blob/
|
|
25
|
+
- [Subclasser APIs](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/guides/principles/subclasser-apis.md)
|
|
26
|
+
- [Extend documentation](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/blog/extending-documentation.md)
|
|
27
27
|
|
|
28
28
|
## How To
|
|
29
29
|
|
|
30
30
|
Next to that we have some specific "How To" documentations.
|
|
31
31
|
|
|
32
|
-
- [Get started](https://github.com/ing-bank/lion/blob/
|
|
33
|
-
- [Create a custom field](https://github.com/ing-bank/lion/blob/
|
|
34
|
-
- [Extend a native input](https://github.com/ing-bank/lion/blob/
|
|
32
|
+
- [Get started](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/guides/how-to/get-started.md)
|
|
33
|
+
- [Create a custom field](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/guides/how-to/create-a-custom-field.md)
|
|
34
|
+
- [Extend a native input](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/guides/how-to/extend-a-native-input.md)
|
|
@@ -12,9 +12,9 @@ Developers consuming our web components inside an application (not extending the
|
|
|
12
12
|
`Application Developers` are only allowed to interact with `public` properties and methods.
|
|
13
13
|
Can be abbreviated as `AD`. Sometimes also called `Consuming Developer`.
|
|
14
14
|
|
|
15
|
-
- [Definitions and Terms](https://github.com/ing-bank/lion/blob/
|
|
16
|
-
- [Styling](https://github.com/ing-bank/lion/blob/
|
|
17
|
-
- [Scoped Elements](https://github.com/ing-bank/lion/blob/
|
|
15
|
+
- [Definitions and Terms](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/guides/principles/definitions-and-terms.md)
|
|
16
|
+
- [Styling](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/guides/principles/styling.md)
|
|
17
|
+
- [Scoped Elements](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/guides/principles/scoped-elements.md)
|
|
18
18
|
|
|
19
19
|
## Extending Developer
|
|
20
20
|
|
|
@@ -22,5 +22,5 @@ Developers extending our web components, for instance: `class MaterialInput exte
|
|
|
22
22
|
|
|
23
23
|
Especially for subclassers we have some extra documentation:
|
|
24
24
|
|
|
25
|
-
- [Subclasser APIs](https://github.com/ing-bank/lion/blob/
|
|
26
|
-
- [Extend documentation](https://github.com/ing-bank/lion/blob/
|
|
25
|
+
- [Subclasser APIs](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/guides/principles/subclasser-apis.md)
|
|
26
|
+
- [Extend documentation](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/blog/extending-documentation.md)
|
|
@@ -19,7 +19,7 @@ Examples for both categories can be found below:
|
|
|
19
19
|
- Accessibility examples:
|
|
20
20
|
- Content (for instance a caption in a table) can be `visually hidden`: it will be
|
|
21
21
|
readable by screen readers, but invisible for end users.
|
|
22
|
-
- When an html table is used, we allow [subclassers](https://github.com/ing-bank/lion/blob/
|
|
22
|
+
- When an html table is used, we allow [subclassers](https://github.com/ing-bank/lion/blob/9825cbf65639370f2e4e7bb994e3bc1ba60b0f9a/docs/guides/principles/subclasser-apis.md) to override the display property (`table-cell`) to `flex`. By putting the proper accessible roles (`role="cell"`) in the markup, we guarantee our markup stays accessible.
|
|
23
23
|
|
|
24
24
|
Although Lion components try to stay as unbiased as possible with regard to styling, defaults will be needed. In these cases we try to follow the platform as much as possible. If the platform doesn't provide defaults, the largest common denominator across existing UI systems is taken as a lead.
|
|
25
25
|
|