feat(ui5-step-input): inintial implementation #2804
Conversation
|
Old PR: #2701 |
There was a problem hiding this comment.
Regarding the Playground sample
- Remove the class attr from the snippet the people are reading (you can keep them in the real source) as they make the example long, and this is not the interesting part. This applies to two sections.
- "When to use" should be on a new line, same as "When not to use"
| } | ||
| </style> | ||
|
|
||
| <header> |
There was a problem hiding this comment.
You need this "Since marker" so the version is displayed in the API ref next to the StepInput title, just replace your current header with the one below:
<header class="component-heading">
<h2 class="control-header">StepInput</h2>
<div class="component-heading-since">
<span><!--since_tag_marker--></span>
</div>
</header>There was a problem hiding this comment.
Done!
- Playground sample fixed.
- valueStateMessage fixed
packages/main/src/StepInput.hbs
Outdated
| @@ -44,6 +44,11 @@ | |||
| @focusout="{{_onInputFocusOut}}" | |||
| @focusin="{{_onInputFocusIn}}" | |||
| > | |||
|
|
|||
| {{#if valueStateMessage.length}} | |||
| <slot name="valueStateMessage" slot="valueStateMessage" style="width: 100%"></slot> | |||
There was a problem hiding this comment.
style="width: 100%" Is this have any effect on the slot element
There was a problem hiding this comment.
err, no... just tried something... will remove it now!
| * @defaultvalue "" | ||
| * @public | ||
| */ | ||
| name: { |
There was a problem hiding this comment.
Providing the name API is not enough to have Form Support. You can test the FormSupport in the FormSupport.html by adding a StepInput with name and value. Currently, nothing is being submitted from the StepInput.
Look at the Input's onBeforeRendering method to see how the FormSupport is implemented:
const FormSupport = getFeature("FormSupport");
if (FormSupport) {
FormSupport.syncNativeHiddenInput(this);
} else if (this.name) {
}There was a problem hiding this comment.
Done. Also did some "design" to FormSupport.html :)
| * @private | ||
| * @defaultvalue "" | ||
| */ | ||
| ariaLabel: { |
There was a problem hiding this comment.
Both ariaLabel and ariaLabelledby doesn't make anything, you have to forward them to the internal Input component, use the DatePicker as reference particularly the method
get accInfo() {
Otherwise nothing would be read.
Done |
Part of #3107 BREAKING CHANGE: The support for ```aria-labelledby``` have been deprecated in favour of new attribute ```accessible-name-ref``` for the following components: - ComboBox (Requested by SF #1916) - DatePicker (Requested by SF #2107) - Input (Requested #1866) - List (Requested by SF #1886) - Rating Indicator - Select (Requested by SF #2107) - StepInput (Implemented as part of the initial implementation #2804) - TextArea (Requested by SF #2107) - WizardStep (Implemented as part of the initial implementation #2400) The ```aria-labelledby``` has been deprecated for the following component: - Button (Requested by SF #1425) The ```accessible-name``` has been deprecated for the following components: - Link (Requested by SF #2356) Both ```aria-labelledby``` and ```accessible-name``` have been deprecated for the following components: - Card (Requested by CBC #2127) - CheckBox (Requested by SF #2265)
Fixes #2640