Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
discourse/app/assets/stylesheets/common/components/char-counter.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

19 lines
266 B
SCSS
Raw Normal View History

FEATURE: Add word count and indicator when exceeded max (#19367) **This PR creates a new core reusable component wraps a character counter around any input.** The component accepts the arguments: `max` (the maximum character limit), `value` (the value of text to be monitored). It can be used for example, like so: ```hbs <CharCounter @max="50" @value={{this.charCounterContent}}> <textarea placeholder={{i18n "styleguide.sections.char_counter.placeholder"}} {{on "input" (action (mut this.charCounterContent) value="target.value")}} class="styleguide--char-counter"></textarea> </CharCounter> ``` **This PR also:** 1. Applies this component to the chat plugins edit channel's *Edit Description** modal, thereby replacing the simple text area which provided no visual indication when text exceeded the max allowed characters. 2. Adds an example to the `/styleguide` route
2023-02-20 06:06:43 -05:00
.char-counter {
&__ratio {
display: block;
text-align: right;
margin-top: 0.5rem;
}
&.exceeded {
> textarea {
border-color: var(--danger);
outline-color: var(--danger);
}
&__ratio {
color: var(--danger);
}
}
}