[ML] Migrates ml-form-label to EUI/React. #21059
Conversation
…ip is available now as a stand-alone component.
|
Pinging @elastic/ml-ui |
💚 Build Succeeded |
|
|
||
| // directive for creating a form label including a hoverable icon |
There was a problem hiding this comment.
Isn't it worth keeping in most of this comment which explains what the component does and just remove the Angular parts?
There was a problem hiding this comment.
I adapted the text here in 2073221. I originally copied it to form_label_directive but you're right of course, once the angular part is gone, we need the comment here.
| const { labelId, children } = this.props; | ||
| return ( | ||
| <React.Fragment> | ||
| <label className="kuiFormLabel" id={`ml_aria_label_${labelId}`} ref={this.labelRef}>{children}</label> |
There was a problem hiding this comment.
Should this still be using the kuiFormLabel class? Is there an eui style we can use instead? If you do change the kuiFormLabel class, the Jest file will need updating too.
There was a problem hiding this comment.
In 0bb4939 I updated the component so it defaults to euiFormLabel but you can override it with another class, for example with kuiFormLabel when used within an angular context (necessary so we don't end up with mixed styles when a form uses both ml-form-label and plain labels using kuiFormLabel).
💚 Build Succeeded |
- Migrates the ml-form-label directive to use EUI/React. - Exposes both FormLabel and JsonTooltip as React components from individual files so they can be used in a React context when the wrapping element also has been already ported to React. - Adds jests based tests for the FormLabel and JsonTooltip components. They try where possible to make the same assertions like the mocha based tests. The mocha based tests are kept in the code for now so the code gets still tested in a angular based context and as a reference to have the same mocha/jest based tests side by side as a reference for migration. - The FormLabel component is done in a way so it supports transclusion in both cases when used with React alone (using the children prop) and angularjs (using a ref callback and angular's transclude()).
- Migrates the ml-form-label directive to use EUI/React. - Exposes both FormLabel and JsonTooltip as React components from individual files so they can be used in a React context when the wrapping element also has been already ported to React. - Adds jests based tests for the FormLabel and JsonTooltip components. They try where possible to make the same assertions like the mocha based tests. The mocha based tests are kept in the code for now so the code gets still tested in a angular based context and as a reference to have the same mocha/jest based tests side by side as a reference for migration. - The FormLabel component is done in a way so it supports transclusion in both cases when used with React alone (using the children prop) and angularjs (using a ref callback and angular's transclude()).
💚 Build Succeeded |
ml-form-labeldirective to use EUI/React.FormLabelandJsonTooltipas React components from individual files so they can be used in a React context when the wrapping element also has been already ported to React.FormLabelandJsonTooltipcomponents. They try where possible to make the same assertions like the mocha based tests. The mocha based tests are kept in the code for now so the code gets still tested in a angular based context and as a reference to have the same mocha/jest based tests side by side as a reference for migration.FormLabelcomponent is done in a way so it supports transclusion in both cases when used with React alone (using thechildrenprop) and angularjs (using arefcallback and angular'stransclude()).Part of #21059.