Signpost doesn't work in new Forms

[beaker1977]

Describe the bug

When adding a Signpost component inside a directive the Signpost does NOT display in the rendered output. If I add the Signpost outside of the directive it does display but on a separate line.

How to reproduce

See https://stackblitz.com/edit/clarity-light-theme-v1-0-sbkaxq for an example.

Please provide a link to a reproduction scenario using one of the Clarity Stackblitz templates. Reports without a clear reproduction may not be prioritized until one is provided.

Steps to reproduce the behavior:

1. Go to https://stackblitz.com/edit/clarity-light-theme-v1-0-sbkaxq
2. Load the page
3. See the visible Signpost displayed below the input field. The Signpost that should display immediately to the right of the input field is invisible. See app.component.html file for page code.

Expected behavior

Signpost should display to the right of the input field.

Versions

App

• Angular: 7.1.0
• Node: [e.g. 8.10.0]
• Clarity: 1.0.0 beta.2

Device:

• Type: Win 7
• OS: Win 7
• Browser Firefox IE11, Chrome 70, Firefox 63
• Version [e.g. 22]

Additional notes

Add any other notes about the problem here.

[hippee-lee]

clr-input-container doesn't project signpost components. It has been designed to support built in helper text and validation with error messages.

<clr-input-container>
  <label>Field 1 label</label>
  <input clrInput type="text" [(ngModel)]="model" name="example" required />
  <clr-control-helper>Helper text that shows while it is pristine and valid</clr-control-helper>
  <clr-control-error>Error message that appears after focus is lost and control is invalid</clr-control-error>
</clr-input-container>

[Jinnie]

As @hippee-lee said, currently it's not expected that a signpost will be projected.
But the requested generic container from this issue #2886 should resolve your requirement too.
Closing as duplicate. Please follow or update #2886, or reopen this one if you think it's different.

[RobArbor]

Would be helpful if the signpost is supported in the input containers.
I'm having the same issue and the control-helper is to short for more detailed contextual help.

Not sure if it's ux legit but i'm using the following workaround:

<clr-input-container>
  <label>
	Label
	<clr-signpost>
	  <clr-signpost-content clrPosition="top-right" *clrIfOpen>
		Lorem ipsum dolor sit amet...
	  </clr-signpost-content>
	</clr-signpost>
  </label>
  <input clrInput type="text">
</clr-input-container>

https://stackblitz.com/edit/clarity-light-theme-v1-0-3u9fms?file=src%2Fapp%2Fapp.component.html

[gnomeontherun]

@RobArbor Yes that makes sense because the signpost is inside of the label which is projected. If you put it inside of the helper text, it should display too.

The issue here is our structure doesn't support a dedicated place for a signpost so you'll need to put it inside of the label or helper text areas.

[duzenko]

Would be helpful if the signpost is supported in the input containers.
I'm having the same issue and the control-helper is to short for more detailed contextual help.

Not sure if it's ux legit but i'm using the following workaround:

<clr-input-container>
  <label>
	Label
	<clr-signpost>
	  <clr-signpost-content clrPosition="top-right" *clrIfOpen>
		Lorem ipsum dolor sit amet...
	  </clr-signpost-content>
	</clr-signpost>
  </label>
  <input clrInput type="text">
</clr-input-container>

https://stackblitz.com/edit/clarity-light-theme-v1-0-3u9fms?file=src%2Fapp%2Fapp.component.html

Almost perfect, but when multiple clr-input-container's are in a row, the one with a signpost is misaligned :(

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.