refactor: 💡 extract helper-text styles

addons/rose/addon/styles/rose/components/form/_helper-text.scss

@@ -0,0 +1,9 @@
+@use '../../variables/sizing';
+@use '../../utilities/type';
+
+.rose-form-helper-text {
+  @include type.type(xs);
+  display: block;
+  color: var(--ui-gray);
+  margin-bottom: sizing.rems(xxs);
+}

addons/rose/addon/styles/rose/components/form/_index.scss

@@ -3,3 +3,4 @@
 @import 'select';
 @import 'radio';
 @import 'errors';
+@import 'helper-text';

addons/rose/addon/styles/rose/components/form/_input.scss

@@ -10,13 +10,6 @@
     margin-bottom: sizing.rems(xxs);
   }
 
-  .rose-form-input-helper-text {
-    @include type.type(xs);
-    display: block;
-    color: var(--ui-gray);
-    margin-bottom: sizing.rems(xxs);
-  }
-
   .rose-form-input-field {
     @include type.type(m);
     box-sizing: border-box;
@@ -54,7 +47,7 @@
   &.error {
     color: var(--failure);
 
-    .rose-form-input-helper-text {
+    .rose-form-helper-text {
       color: currentColor;
     }
 

addons/rose/addon/styles/rose/components/form/_select.scss

@@ -10,13 +10,6 @@
     margin-bottom: sizing.rems(xxs);
   }
 
-  .rose-form-select-helper-text {
-    @include type.type(xs);
-    display: block;
-    color: var(--ui-gray);
-    margin-bottom: sizing.rems(xxs);
-  }
-
   .rose-form-select-field {
     @include type.type(s);
     -webkit-appearance: none;
@@ -59,7 +52,7 @@
   &.error {
     color: var(--failure);
 
-    .rose-form-select-helper-text {
+    .rose-form-helper-text {
       color: currentColor;
     }
 

addons/rose/addon/templates/components/rose/form/input.hbs

@@ -6,7 +6,7 @@
 
   {{#if @helperText}}
     <span
-      class="rose-form-input-helper-text"
+      class="rose-form-helper-text"
       id="helper-text-{{this.id}}">
       {{@helperText}}
     </span>

addons/rose/addon/templates/components/rose/form/select.hbs

@@ -6,7 +6,7 @@
 
   {{#if @helperText}}
     <span
-      class="rose-form-select-helper-text"
+      class="rose-form-helper-text"
       id="helper-text-{{this.id}}">
       {{@helperText}}
     </span>

addons/rose/addon/templates/components/rose/form/textarea.hbs

@@ -6,7 +6,7 @@
 
   {{#if @helperText}}
     <span
-      class="rose-form-input-helper-text"
+      class="rose-form-helper-text"
       id="helper-text-{{this.id}}">
       {{@helperText}}
     </span>

addons/rose/tests/integration/components/rose/form/input-test.js

@@ -17,7 +17,7 @@ module('Integration | Component | rose/form/input', function (hooks) {
     const fieldEl = find('input');
     const id = fieldEl.id;
     const helperId = `helper-text-${id}`;
-    const helperTextEl = find('.rose-form-input-helper-text');
+    const helperTextEl = find('.rose-form-helper-text');
     assert.equal(helperTextEl.textContent.trim(), 'Help me');
     assert.equal(helperTextEl.id, helperId);
     assert.equal(fieldEl.getAttribute('aria-describedby').trim(), helperId);

addons/rose/tests/integration/components/rose/form/select-test.js

@@ -44,7 +44,7 @@ module('Integration | Component | rose/form/select', function (hooks) {
     const fieldEl = find('select');
     const id = fieldEl.id;
     const helperId = `helper-text-${id}`;
-    const helperTextEl = find('.rose-form-select-helper-text');
+    const helperTextEl = find('.rose-form-helper-text');
     assert.equal(helperTextEl.textContent.trim(), 'Help me');
     assert.equal(helperTextEl.id, helperId);
     assert.equal(fieldEl.getAttribute('aria-describedby').trim(), helperId);

addons/rose/tests/integration/components/rose/form/textarea-test.js

@@ -17,7 +17,7 @@ module('Integration | Component | rose/form/textarea', function (hooks) {
     const fieldEl = find('textarea');
     const id = fieldEl.id;
     const helperId = `helper-text-${id}`;
-    const helperTextEl = find('.rose-form-input-helper-text');
+    const helperTextEl = find('.rose-form-helper-text');
     assert.equal(helperTextEl.textContent.trim(), 'Help me');
     assert.equal(helperTextEl.id, helperId);
     assert.equal(fieldEl.getAttribute('aria-describedby').trim(), helperId);