Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose secondary block and character counter from ToucanForm for Input and Textarea #222

Merged
merged 3 commits into from
Jul 20, 2023
Merged

Expose secondary block and character counter from ToucanForm for Input and Textarea #222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6cfab01
Expose character counter via ToucanForm
ynotdraw Jul 20, 2023
3cb8650
Revert back to docfy0.6.0
ynotdraw Jul 20, 2023
ff50f27
Add a changeset
ynotdraw Jul 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions .changeset/eight-shoes-flash.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
---
'@crowdstrike/ember-toucan-form': patch
---

Expose the `:secondary` block and Character Counter component from `<ToucanForm` input and textarea components.

```hbs
<ToucanForm @data={{data}} as |form|>
<form.Input @name='input'>
<:label>Label</:label>
<:hint>Hint</:hint>
<:secondary as |secondary|>
<secondary.CharacterCount @max={{255}} />
</:secondary>
</form.Input>

<form.Textarea @name='textarea'>
<:label>Label</:label>
<:hint>Hint</:hint>
<:secondary as |secondary|>
<secondary.CharacterCount @max={{255}} />
</:secondary>
</form.Textarea>
</ToucanForm>
```
4 changes: 2 additions & 2 deletions docs-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
"@babel/eslint-parser": "^7.19.1",
"@crowdstrike/ember-toucan-styles": "^2.0.1",
"@crowdstrike/tailwind-toucan-base": "^3.5.0",
"@docfy/core": "^0.7.0",
"@docfy/ember": "^0.7.0",
"@docfy/core": "^0.6.0",
"@docfy/ember": "^0.6.0",
Comment on lines +33 to +34
Copy link
Contributor Author

@ynotdraw ynotdraw Jul 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to bump these down as I was getting build errors (randomly) from docfy when running:

pnpm build

or

pnpm start

It's apparently not failing on CI though, which is weird. It was bumped by Renovate yesterday.

I didn't see a helpful error as to why, so I figure reverting for the time being is the path of least resistance. I'll pick this back up after other items come off of my plate.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was my PR that was part of the bump to version 0.7.0: josemarluedke/docfy#161

But there were also a lot of 3 dependabot updates...https://github.com/josemarluedke/docfy/pulls?q=is%3Apr+is%3Aclosed

"@ember/optional-features": "^2.0.0",
"@ember/string": "^3.0.1",
"@ember/test-helpers": "^3.1.0",
Expand Down
14 changes: 14 additions & 0 deletions docs/components/input-field/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,20 @@ Provide a string to the `@hint` component argument or content to `:hint` named b
</Form::Fields::Input>
```

## Character Counter

Optional.

A character counter is exposed via a `secondary` block. It can be combined with any of the other named blocks or label/hint arguments.

```hbs
<Form::Fields::Input class='w-full' @label='Label' @hint='With hint text'>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Thanks for adding this in!

<:secondary as |secondary|>
<secondary.CharacterCount @max={{255}} />
</:secondary>
</Form::Fields::Input>
```

## Error

Optional.
Expand Down
14 changes: 14 additions & 0 deletions docs/components/textarea-field/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,20 @@ Provide a string to the `@hint` component argument or content to `:hint` named b
</Form::Fields::Textarea>
```

## Character Counter

Optional.

A character counter is exposed via a `secondary` block. It can be combined with any of the other named blocks or label/hint arguments.

```hbs
<Form::Fields::Textarea class='w-full' @label='Label' @hint='With hint text'>
<:secondary as |secondary|>
<secondary.CharacterCount @max={{255}} />
</:secondary>
</Form::Fields::Textarea>
```
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: it would be nice to have this in the changeset demo...maybe as a follow up.

But then again, we don't have analytics (do we?) so we don't know which docs folks are looking at the most as an example...

Copy link
Contributor Author

@ynotdraw ynotdraw Jul 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah! Good suggestion! I was going to add this in the docs later. There's an issue I filed around maybe making components all full-width, otherwise the demo looks kinda funky. I'll work on this next week hopefully though!


## Error

Optional.
Expand Down
228 changes: 168 additions & 60 deletions packages/ember-toucan-form/src/-private/input-field.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,66 +18,174 @@
a string is easy.
}}
<@form.Field @name={{@name}} as |field|>
{{#if (this.hasOnlyLabelBlock (has-block 'label') (has-block 'hint'))}}
<Form::Fields::Input
@hint={{@hint}}
@error={{this.mapErrors field.rawErrors}}
@value={{this.assertString field.value}}
{{! @glint-expect-error }}
@onChange={{field.setValue}}
@isDisabled={{@isDisabled}}
@isReadOnly={{@isReadOnly}}
@rootTestSelector={{@rootTestSelector}}
name={{@name}}
...attributes
>
<:label>{{yield to='label'}}</:label>
</Form::Fields::Input>
{{else if (this.hasHintAndLabelBlocks (has-block 'label') (has-block 'hint'))
}}
<Form::Fields::Input
@error={{this.mapErrors field.rawErrors}}
@value={{this.assertString field.value}}
{{! @glint-expect-error }}
@onChange={{field.setValue}}
@isDisabled={{@isDisabled}}
@isReadOnly={{@isReadOnly}}
@rootTestSelector={{@rootTestSelector}}
name={{@name}}
...attributes
>
<:label>{{yield to='label'}}</:label>
<:hint>{{yield to='hint'}}</:hint>
</Form::Fields::Input>
{{else if (this.hasLabelArgAndHintBlock @label (has-block 'hint'))}}
<Form::Fields::Input
@label={{@label}}
@error={{this.mapErrors field.rawErrors}}
@value={{this.assertString field.value}}
{{! @glint-expect-error }}
@onChange={{field.setValue}}
@isDisabled={{@isDisabled}}
@isReadOnly={{@isReadOnly}}
@rootTestSelector={{@rootTestSelector}}
name={{@name}}
...attributes
>
<:hint>{{yield to='hint'}}</:hint>
</Form::Fields::Input>
{{#if (has-block 'secondary')}}
{{#if (this.hasOnlyLabelBlock (has-block 'label') (has-block 'hint'))}}
<Form::Fields::Input
@hint={{@hint}}
@error={{this.mapErrors field.rawErrors}}
@value={{this.assertString field.value}}
{{! @glint-expect-error }}
@onChange={{field.setValue}}
@isDisabled={{@isDisabled}}
@isReadOnly={{@isReadOnly}}
@rootTestSelector={{@rootTestSelector}}
name={{@name}}
...attributes
>
<:label>{{yield to='label'}}</:label>
<:secondary as |secondary|>
{{yield
(hash
CharacterCount=(component
(ensure-safe-component secondary.CharacterCount)
)
)
to='secondary'
}}
</:secondary>
</Form::Fields::Input>
{{else if
(this.hasHintAndLabelBlocks (has-block 'label') (has-block 'hint'))
}}
<Form::Fields::Input
@error={{this.mapErrors field.rawErrors}}
@value={{this.assertString field.value}}
{{! @glint-expect-error }}
@onChange={{field.setValue}}
@isDisabled={{@isDisabled}}
@isReadOnly={{@isReadOnly}}
@rootTestSelector={{@rootTestSelector}}
name={{@name}}
...attributes
>
<:label>{{yield to='label'}}</:label>
<:hint>{{yield to='hint'}}</:hint>
<:secondary as |secondary|>
{{yield
(hash
CharacterCount=(component
(ensure-safe-component secondary.CharacterCount)
)
)
to='secondary'
}}
</:secondary>
</Form::Fields::Input>
{{else if (this.hasLabelArgAndHintBlock @label (has-block 'hint'))}}
<Form::Fields::Input
@label={{@label}}
@error={{this.mapErrors field.rawErrors}}
@value={{this.assertString field.value}}
{{! @glint-expect-error }}
@onChange={{field.setValue}}
@isDisabled={{@isDisabled}}
@isReadOnly={{@isReadOnly}}
@rootTestSelector={{@rootTestSelector}}
name={{@name}}
...attributes
>
<:hint>{{yield to='hint'}}</:hint>
<:secondary as |secondary|>
{{yield
(hash
CharacterCount=(component
(ensure-safe-component secondary.CharacterCount)
)
)
to='secondary'
}}
</:secondary>
</Form::Fields::Input>
{{else}}
{{! Argument-only case }}
<Form::Fields::Input
@label={{@label}}
@hint={{@hint}}
@error={{this.mapErrors field.rawErrors}}
@value={{this.assertString field.value}}
{{! @glint-expect-error }}
@onChange={{field.setValue}}
@isDisabled={{@isDisabled}}
@isReadOnly={{@isReadOnly}}
@rootTestSelector={{@rootTestSelector}}
name={{@name}}
...attributes
>
<:secondary as |secondary|>
{{yield
(hash
CharacterCount=(component
(ensure-safe-component secondary.CharacterCount)
)
)
to='secondary'
}}
</:secondary>
</Form::Fields::Input>
{{/if}}
{{else}}
{{! Argument-only case }}
<Form::Fields::Input
@label={{@label}}
@hint={{@hint}}
@error={{this.mapErrors field.rawErrors}}
@value={{this.assertString field.value}}
{{! @glint-expect-error }}
@onChange={{field.setValue}}
@isDisabled={{@isDisabled}}
@isReadOnly={{@isReadOnly}}
@rootTestSelector={{@rootTestSelector}}
name={{@name}}
...attributes
/>
{{#if (this.hasOnlyLabelBlock (has-block 'label') (has-block 'hint'))}}
<Form::Fields::Input
@hint={{@hint}}
@error={{this.mapErrors field.rawErrors}}
@value={{this.assertString field.value}}
{{! @glint-expect-error }}
@onChange={{field.setValue}}
@isDisabled={{@isDisabled}}
@isReadOnly={{@isReadOnly}}
@rootTestSelector={{@rootTestSelector}}
name={{@name}}
...attributes
>
<:label>{{yield to='label'}}</:label>
</Form::Fields::Input>
{{else if
(this.hasHintAndLabelBlocks (has-block 'label') (has-block 'hint'))
}}
<Form::Fields::Input
@error={{this.mapErrors field.rawErrors}}
@value={{this.assertString field.value}}
{{! @glint-expect-error }}
@onChange={{field.setValue}}
@isDisabled={{@isDisabled}}
@isReadOnly={{@isReadOnly}}
@rootTestSelector={{@rootTestSelector}}
name={{@name}}
...attributes
>
<:label>{{yield to='label'}}</:label>
<:hint>{{yield to='hint'}}</:hint>
</Form::Fields::Input>
{{else if (this.hasLabelArgAndHintBlock @label (has-block 'hint'))}}
<Form::Fields::Input
@label={{@label}}
@error={{this.mapErrors field.rawErrors}}
@value={{this.assertString field.value}}
{{! @glint-expect-error }}
@onChange={{field.setValue}}
@isDisabled={{@isDisabled}}
@isReadOnly={{@isReadOnly}}
@rootTestSelector={{@rootTestSelector}}
name={{@name}}
...attributes
>
<:hint>{{yield to='hint'}}</:hint>
</Form::Fields::Input>
{{else}}
{{! Argument-only case }}
<Form::Fields::Input
@label={{@label}}
@hint={{@hint}}
@error={{this.mapErrors field.rawErrors}}
@value={{this.assertString field.value}}
{{! @glint-expect-error }}
@onChange={{field.setValue}}
@isDisabled={{@isDisabled}}
@isReadOnly={{@isReadOnly}}
@rootTestSelector={{@rootTestSelector}}
name={{@name}}
...attributes
/>
{{/if}}
{{/if}}
</@form.Field>
Loading