Add required mark component

[markocikos]

What is your proposal?

I noticed we have four usages of the same markup in DXP, like here. I recently added the fourth to FDS.

const RequiredMark = () => (
	<>
		<span className="inline-item-after reference-mark text-warning">
			<ClayIcon symbol="asterisk" />
		</span>
		<span className="hide-accessible sr-only">
			{Liferay.Language.get('required')}
		</span>
	</>
);

We could extract this into something like:

<ClayRequiredMark
    accessibleLabel={Liferay.Language.get('required')}
>

Why would adopting this proposal be beneficial?

Standardization, DRY.

What are the alternatives to this proposal?

Make a common frontend component in DXP, in frontend-js-components-web. The benefit would be that we could hardcode localized accessible label. text-warning and hide-accessible also look like DXP-specific classes, but it would probably be good to rewrite them into Clay equivalents.

[matuzalemsteles]

Hey @markocikos this makes sense to me, I have some ideas to improve these components related to the form, I also received feedback from Milton from the Objects & Forms team about this, also related to Required because they use a field base a lot, for example with Required, Label, Help Text and ErrorMessage... this composes with any element inside, for example an input or any other type. This is something I wanted to work with the issue #4741.

So it's likely that we'll try to decrease the composition of components for fields and provide something more OOTB like required. It's good to know that you're opening this as well which is more use cases that I can use to understand how to model this.

[matuzalemsteles]

LPS Ticket https://liferay.atlassian.net/browse/LPS-190552