diff --git a/addons/rose/addon/styles/rose/components/form/_helper-text.scss b/addons/rose/addon/styles/rose/components/form/_helper-text.scss
new file mode 100644
index 000000000..d31446681
--- /dev/null
+++ b/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);
+}
diff --git a/addons/rose/addon/styles/rose/components/form/_index.scss b/addons/rose/addon/styles/rose/components/form/_index.scss
index 5a65d3912..8d29b2d3d 100644
--- a/addons/rose/addon/styles/rose/components/form/_index.scss
+++ b/addons/rose/addon/styles/rose/components/form/_index.scss
@@ -3,3 +3,4 @@
@import 'select';
@import 'radio';
@import 'errors';
+@import 'helper-text';
diff --git a/addons/rose/addon/styles/rose/components/form/_input.scss b/addons/rose/addon/styles/rose/components/form/_input.scss
index 7b11a0a8e..2a20fe1a1 100644
--- a/addons/rose/addon/styles/rose/components/form/_input.scss
+++ b/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;
}
diff --git a/addons/rose/addon/styles/rose/components/form/_select.scss b/addons/rose/addon/styles/rose/components/form/_select.scss
index f0bdf9f04..16c58e9b2 100644
--- a/addons/rose/addon/styles/rose/components/form/_select.scss
+++ b/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;
}
diff --git a/addons/rose/addon/templates/components/rose/form/input.hbs b/addons/rose/addon/templates/components/rose/form/input.hbs
index 273ce0dc2..810064254 100644
--- a/addons/rose/addon/templates/components/rose/form/input.hbs
+++ b/addons/rose/addon/templates/components/rose/form/input.hbs
@@ -6,7 +6,7 @@
{{#if @helperText}}
{{@helperText}}
diff --git a/addons/rose/addon/templates/components/rose/form/select.hbs b/addons/rose/addon/templates/components/rose/form/select.hbs
index db870f1fd..56fbe0000 100644
--- a/addons/rose/addon/templates/components/rose/form/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select.hbs
@@ -6,7 +6,7 @@
{{#if @helperText}}
{{@helperText}}
diff --git a/addons/rose/addon/templates/components/rose/form/textarea.hbs b/addons/rose/addon/templates/components/rose/form/textarea.hbs
index 1d01effa4..cdf2f31d8 100644
--- a/addons/rose/addon/templates/components/rose/form/textarea.hbs
+++ b/addons/rose/addon/templates/components/rose/form/textarea.hbs
@@ -6,7 +6,7 @@
{{#if @helperText}}
{{@helperText}}
diff --git a/addons/rose/tests/integration/components/rose/form/input-test.js b/addons/rose/tests/integration/components/rose/form/input-test.js
index 424a9cba8..c98826da5 100644
--- a/addons/rose/tests/integration/components/rose/form/input-test.js
+++ b/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);
diff --git a/addons/rose/tests/integration/components/rose/form/select-test.js b/addons/rose/tests/integration/components/rose/form/select-test.js
index 1f30200fb..3e4dd1df0 100644
--- a/addons/rose/tests/integration/components/rose/form/select-test.js
+++ b/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);
diff --git a/addons/rose/tests/integration/components/rose/form/textarea-test.js b/addons/rose/tests/integration/components/rose/form/textarea-test.js
index f1e5f2a6c..56c698e61 100644
--- a/addons/rose/tests/integration/components/rose/form/textarea-test.js
+++ b/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);