Devextreme: Suggestion: Material Design theme dxForm label animation on focus

[vrk1975]

First of all, great feature. I was able to get Material look an feel very quickly in my existing project.

Minor issues - In material design of forms the form label should actually moves when the focus is set on the control. The dxForm label does not do it. But still very good.

[BingoRUS]

@vrk1975 I'm glad to hear such positive feedback. Really hope you will enjoy the new theme even more than now when we fix some minor issues. We don't plan to add the focus animation of a label in a form with the release v18.1, but it's going to be added later this year.

[jcox86]

Is this planned for the 18.2 release in Q4 of 2018? I do not see anything mentioned about this on the roadmap.

[BingoRUS]

@jcox86 Yes, it's planned to be a part of the upcoming v18.2 release later this year. I will post an additional comment and an example link here when the preview is available. Also, we are considering updating the roadmap to reflect our plans according to the Material Design theme.

[pilouk]

@jcox86 Yes, it's planned to be a part of the upcoming v18.2 release later this year. I will post an additional comment and an example link here when the preview is available. Also, we are considering updating the roadmap to reflect our plans according to the Material Design theme.

Is this still valid?

[BingoRUS]

Hello @pilouk,

Unfortunately, it's not included in v18.2 release. We work hard to make it available by the end of year with one of minor updates. In coming days, I'll share our progress here.

[LegendaryMike]

Hi. I am also waiting for this feature. Any update on the expected release date?

[homerokzam]

Hi. Any news?

[BingoRUS]

Hi everyone! First, I want to thank you for your interest. Due to another text editor feature implementation, we had to postpone the form labels temporarily. Now I'm afraid we can't release it in v18.2 and v19.1 with the desired level of quality. It is on the top of our planned features list and we will try to share our results in a preview build as soon as possible.

[joellenicelook21]

Thanks for the feedback, upset to hear that though. The material inputs, when placed one under the other, becomes difficult to know which label is for which line ...

[rogerioyuuki]

Here is a temporary solution in SCSS for underline stylingMode inputs:

@import 'dx.material.palette.scss';
$placeholder-margin: 1.1em;

@mixin move-placeholder {
  transform: translateY(-$placeholder-margin) scale(0.75);
}

.material-placeholder {
  .dx-texteditor-container {
    border-top: $placeholder-margin solid transparent;
    overflow: initial;
  }

  .dx-placeholder {
    transform-origin: top left;
    transition: transform .4s cubic-bezier(.25,.8,.25,1),color .4s cubic-bezier(.25,.8,.25,1);

    &.dx-state-invisible {
      display: initial !important;
      @include move-placeholder;
    }
  }

  .dx-texteditor.dx-state-focused .dx-placeholder,
  .dx-texteditor.dx-state-active .dx-placeholder {
    @include move-placeholder;
    color: $texteditor-focused-border-color;
  }  
}

To set the label color, I used the variable $texteditor-focused-border-color from the palette, which is in the imported file dx.material.palette.scss (generated with devextreme export-theme-vars --base-theme material.blue.dark --output-format scss).
If you want to remove the import and set your own color is up to you.

I used the .material-placeholder class to scope these modifications because I haven't tested if it would cause problems globally. Maybe someone can remove the scoping and see if it would mess up other components.

[sccrgoalie1]

Is this feature still on the radar?

[hakimio]

@sccrgoalie1 yes, its coming in v20.2 -> https://js.devexpress.com/Roadmap/#UIComponents

[skymarktech]

It's on the road map, but not listed in the new features for 20.2. So is it available or not in 20.2? Interesting that the DevExp login form has this feature for the input fields.

[BingoRUS]

Hi @sccrgoalie1 @skymarktech!
The Editor Label Animations feature is in our roadmap as you can see here . Although it isn't presented in the beta (v20.2.2) and might be not included in the first public release (v20.2.3), we are working hard to introduce it by the end of the year. Thanks again for your patience!