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);