Editors & Form Labels Animation

[groshenkovamarina]

Editors & Form Labels Animation

The Problem

DevExtreme text editors do not support animated labels as specified in Google Material Design Guidelines.

The Proposed Solution

We plan to implement animated labels and introduce an API that configures them in our text editors and Form component.

Text Editors

label: string, 
labelMode:  'static' | 'floating' | 'hidden'

Form

labelMode:  'static' | 'floating' | 'hidden'

UI Design

In "floating" mode, a label is displayed as a placeholder while the editor is not focused (as shown in the left column on the image below). When the editor gets focus or contains some text, the label moves to the top position (see the right column on the same image). In "static" mode, the label is always displayed at the top position.

Try It

Live Sandbox

jQuery
React
Vue

We Need Your Feedback

Take a Quick Poll

Do you find animated labels for DevExtreme editors and Form useful?

Get Notified of Updates

Subscribe to this thread or to our Facebook and Twitter accounts for updates on this topic.

[elessariel]

Is this already included in the 21.1 Beta ?

[groshenkovamarina]

Hi @elessariel,

This feature is not included in 21.1 Beta. We are putting final touches to this feature and running quality assurance tests. Once we get it done, we will include the feature into our package. Please bear with us.

[sccrgoalie1]

@groshenkovamarina did this make it into the 21.1 release?

[elessariel]

please don't tell us this didn't make it into the 21.1 :-|

[indyrhett]

pleaseeeeeee don't be true :(

[sccrgoalie1]

Doesn't look good as the pull request is still open
#16937

[jurisv]

Any update on this feature? The PR seems to be stalled, last commit was in April...

[groshenkovamarina]

Hi everyone,

This feature is not included in the 21.1 release as we are still fixing minor issues and testing it. We have plans to release this functionality in one of the nearest minor builds. Thank you for your patience.

[elessariel]

Hey there, any update on this one ?

[scde1032]

@elessariel @groshenkovamarina I would be interested in updates, too. We are patiently waiting for this feature to finally be released.

[nikithase]

I too would love to see this in the next minor release :)

[PaulTodd]

Can we have a CTP of this feature to at least get it implemented in our systems and report any bugs we find?

[dxbykov]

@PaulTodd this feature is at the testing stage now. We plan to include it in the first beta release in a few weeks. We'll post an update here.

[raphael-hettich]

So 21.1.6 got released. Is it included ?
*update nevermind, it doesn't seem so.

[hakimio]

@raphael-hettich as the 21_2 issue label suggests, they target v21.2. So, maybe it will come with next 21.2 sprint release.
PR #19458 and #19224 were just recently merged.

[AlisherAmonulloev]

Hello everyone!
We added live sandboxes for jQuery, React, and Vue to test the animation feature. Feel free to leave your feedback!
A sandbox for Angular will be added a bit later, because we haven't decided whether to wait for the CodeSandbox team to fix the following issue or to use another service to create live sandboxes: codesandbox/codesandbox-client#5943
Regardless, the functionality should work in Angular with the following packages:
"devextreme": "21.2.2-beta"
"devextreme-angular": "21.2.2-beta"

[raphael-hettich]

would you consider adding the labelMode property to the globalConfig ?

[dxbykov]

Hi @raphael-hettich,

Thank you for your feedback. We discussed your suggestion and consider it reasonable. We plan to introduce this global configuration property in one of the minor product updates. As a temporary solution, you can use the defaultOptions method to specify default label mode for particular component type.

[konstantinschuette]

https://js.devexpress.com/Demos/WidgetsGallery/Demo/Common/EditorAppearanceVariants/Angular/Light/

Try it with Styling Mode outlined and Label Mode floating.

So this feature is finally in the new 21.2.3

[raphael-hettich]

are there any plans to support floating labels in the form demos?
e.g. at https://js.devexpress.com/Demos/WidgetsGallery/Demo/Common/FormsAndMultiPurposeOverview/Angular/MaterialBlueLight/Compact/

I was also wondering what is DevEx suggestions or best practise on applying floating labels to elements like a dxLookup?

[sccrgoalie1]

Does this work with the form editing mode for dxDataGrid? It appears the labels aren't passed through so if you set the labelMode to floating labels don't show.

https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/FormEditing/Angular/Light/

[sccrgoalie1]

Also, it appears if you change your dxForm to use floating labels and have any boolean/checkboxes, the labels just disappear

[raphael-hettich]

Hi @raphael-hettich,

Thank you for your feedback. We discussed your suggestion and consider it reasonable. We plan to introduce this global configuration property in one of the minor product updates. As a temporary solution, you can use the defaultOptions method to specify default label mode for particular component type.

Glad you find it reasonable. I would also like to suggest to include this setting in the theme builder, including the "outline" and "fill" mode. Or maybe I just don't get it. How to preview "outline" with "static" labels in the ThemeBuilder.

[raphael-hettich]

Would you consider also adding the asterisk for required fields ?
Here is a comparison between devex and angular/material:

top is devex bottom is angular/material.

[konstantinschuette]

Would you consider also adding the asterisk for required fields ? Here is a comparison between devex and angular/material:

top is devex bottom is angular/material.

I also created a ticket: https://supportcenter.devexpress.com/ticket/details/t1044673/form-required-label

[jurisv]

+1

[groshenkovamarina]

Thanks to everybody who gave us feedback on this feature. The feature is available in v21.2. I'm closing this thread. In the case of bugs or questions, feel free to create a new ticket in our Support Center.