diff --git a/ui/component/common/form-components/form-field.jsx b/ui/component/common/form-components/form-field.jsx index 24b3d5b18..67ef22bd1 100644 --- a/ui/component/common/form-components/form-field.jsx +++ b/ui/component/common/form-components/form-field.jsx @@ -154,6 +154,15 @@ export class FormField extends React.PureComponent { }); }; + // Ideally, the character count should (and can) be appended to the + // SimpleMDE's "options::status" bar. However, I couldn't figure out how + // to pass the current value to it's callback, nor query the current + // text length from the callback. So, we'll use our own widget. + const hasCharCount = charCount !== undefined && charCount >= 0; + const countInfo = hasCharCount && ( + {`${charCount || '0'}/${textAreaMaxLength}`} + ); + input = (
@@ -178,6 +187,7 @@ export class FormField extends React.PureComponent { }, }} /> + {countInfo}
); diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss index ab844d25e..b0c296344 100644 --- a/ui/scss/component/_comments.scss +++ b/ui/scss/component/_comments.scss @@ -78,7 +78,15 @@ .comment__char-count { align-self: flex-end; - font-size: var(--font-small); + font-size: var(--font-xsmall); + padding-top: var(--spacing-xs); +} + +.comment__char-count-mde { + align-self: flex-end; + font-size: var(--font-xsmall); + padding-right: var(--spacing-xs); // Align with SimpleMDE's status bar + padding-bottom: 0; } .comment__menu-option {