diff --git a/addons/rose/addon/components/rose/form/index.hbs b/addons/rose/addon/components/rose/form/index.hbs index e9d8b5527..b4f40b6e3 100644 --- a/addons/rose/addon/components/rose/form/index.hbs +++ b/addons/rose/addon/components/rose/form/index.hbs @@ -25,7 +25,6 @@ checkboxGroup=(component 'rose/form/checkbox/group' disabled=this.disabled ) - input=(component 'rose/form/input' disabled=this.disabled) fieldset=(component 'rose/form/fieldset') actions=(component (if diff --git a/addons/rose/addon/components/rose/form/input/index.hbs b/addons/rose/addon/components/rose/form/input/index.hbs deleted file mode 100644 index 2b3098437..000000000 --- a/addons/rose/addon/components/rose/form/input/index.hbs +++ /dev/null @@ -1,70 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: BUSL-1.1 -}} - -{{#if @contextual}} - {{yield - (hash - label=(component 'rose/form/label' for=this.id error=@error) - helperText=(component - 'rose/form/helper-text' id=(concat 'helper-text-' this.id) error=@error - ) - field=(component - 'rose/form/input/input' - id=this.id - name=@name - value=@value - type=@type - disabled=@disabled - error=@error - aria-describedby=(concat - (if @helperText (concat 'helper-text-' this.id)) - (if @error (concat ' errors-' this.id)) - ) - ) - errors=(component 'rose/form/errors' id=(concat 'errors-' this.id)) - ) - }} -{{else}} -
- - - {{@label}} - - - {{#if @helperText}} - - {{@helperText}} - - {{/if}} - -
- {{#if @icon}} - - {{/if}} - -
- {{yield - (hash errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))) - }} - -
-{{/if}} \ No newline at end of file diff --git a/addons/rose/addon/components/rose/form/input/index.js b/addons/rose/addon/components/rose/form/input/index.js deleted file mode 100644 index 5f1c88217..000000000 --- a/addons/rose/addon/components/rose/form/input/index.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -import Component from '@glimmer/component'; -import { generateComponentID } from '../../../../utilities/component-auto-id'; - -export default class RoseFormInputComponent extends Component { - // =attributes - - id = generateComponentID(); -} diff --git a/addons/rose/addon/components/rose/form/input/input/index.hbs b/addons/rose/addon/components/rose/form/input/input/index.hbs deleted file mode 100644 index 42571feae..000000000 --- a/addons/rose/addon/components/rose/form/input/input/index.hbs +++ /dev/null @@ -1,16 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: BUSL-1.1 -}} - -{{! template-lint-disable no-builtin-form-components }} - \ No newline at end of file diff --git a/addons/rose/app/components/rose/form/input.js b/addons/rose/app/components/rose/form/input.js deleted file mode 100644 index ad4576f12..000000000 --- a/addons/rose/app/components/rose/form/input.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -export { default } from 'rose/components/rose/form/input'; diff --git a/addons/rose/app/components/rose/form/input/input.js b/addons/rose/app/components/rose/form/input/input.js deleted file mode 100644 index dba260004..000000000 --- a/addons/rose/app/components/rose/form/input/input.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -export { default } from 'rose/components/rose/form/input/input'; diff --git a/addons/rose/app/styles/rose/components/form/_index.scss b/addons/rose/app/styles/rose/components/form/_index.scss index 5d8c7f0da..3d337b426 100644 --- a/addons/rose/app/styles/rose/components/form/_index.scss +++ b/addons/rose/app/styles/rose/components/form/_index.scss @@ -6,7 +6,6 @@ @use 'label'; @use 'errors'; @use 'helper-text'; -@use 'input'; @use 'checkbox'; @use 'select'; @use 'fieldset'; diff --git a/addons/rose/app/styles/rose/components/form/_input.scss b/addons/rose/app/styles/rose/components/form/_input.scss deleted file mode 100644 index b1615129d..000000000 --- a/addons/rose/app/styles/rose/components/form/_input.scss +++ /dev/null @@ -1,64 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -@use '../../variables/sizing'; -@use '../../utilities/type'; - -.rose-form-input { - margin-bottom: sizing.rems(m); -} - -.rose-input-wrapper { - position: relative; - - .rose-form-input-field { - padding-left: 30px; - } -} - -.rose-form-input-field { - @include type.type(m); - - display: inline-block; - box-sizing: border-box; - width: 100%; - margin-bottom: sizing.rems(xs); - padding: sizing.rems(xs); - color: var(--stark); - background-color: var(--subtle); - border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2); - border-radius: sizing.rems(xxxs); - box-shadow: inset 0 3px 1px rgba(var(--stark-components), var(--opacity-4)); - - &::placeholder { - color: var(--ui-gray-subtler-1); - } - - &.error { - color: var(--failure); - border-color: currentcolor; - } - - &:not(:disabled, [readonly]) { - &:hover { - border-color: var(--ui-gray); - } - - &:focus { - border-color: var(--info); - } - } - - &:disabled { - cursor: not-allowed; - color: var(--ui-gray); - background-color: var(--ui-gray-subtler-6); - } - - &[readonly] { - border-color: transparent; - box-shadow: none; - } -} diff --git a/addons/rose/tests/dummy/app/templates/playground.hbs b/addons/rose/tests/dummy/app/templates/playground.hbs index 515c258a5..58be7d4d6 100644 --- a/addons/rose/tests/dummy/app/templates/playground.hbs +++ b/addons/rose/tests/dummy/app/templates/playground.hbs @@ -61,41 +61,6 @@ Key Value - - - - - Key - - - - - - Add - - - - - - - - Key - - - - - - - Remove - - - - - diff --git a/addons/rose/tests/integration/components/rose/form-test.js b/addons/rose/tests/integration/components/rose/form-test.js index e4e7e59fe..992821f0b 100644 --- a/addons/rose/tests/integration/components/rose/form-test.js +++ b/addons/rose/tests/integration/components/rose/form-test.js @@ -33,7 +33,7 @@ module('Integration | Component | rose/form', function (hooks) { await click('button:not([type="submit"])'); }); - test('it can render contextual form components', async function (assert) { + test('it yields child form components', async function (assert) { this.submit = () => {}; this.cancel = () => {}; this.select = () => {}; @@ -44,7 +44,6 @@ module('Integration | Component | rose/form', function (hooks) { @disabled={{false}} as |form| > - `); - assert.ok(find('[name="input-field"]')); assert.ok(find('[name="textarea-field"]')); assert.ok(find('[name="select-field"]')); assert.ok(find('[name="checkbox-field"]')); }); - test('it supports an editability toggle when @showEditToggle is true', async function (assert) { - assert.expect(12); - this.cancel = () => { - assert.ok( - true, - 'cancel function may still be passed even for @showEditToggle', - ); - }; - this.submit = () => {}; - await render(hbs` - - - - - `); - // Before enabling edit mode, fields are disabled and the edit mode button is displayed - assert.ok(find('.rose-form')); - assert.strictEqual(findAll('input[disabled]').length, 1); - assert.strictEqual(findAll('button').length, 1); - assert.strictEqual(find('button').textContent.trim(), 'Edit'); - // After entering edit mode, fields are enabled and save/cancel buttons are displayed - await click('button'); - assert.strictEqual(findAll('input[disabled]').length, 0); - assert.strictEqual(findAll('button').length, 2); - assert.strictEqual(find('[type="submit"]').textContent.trim(), 'Save'); - assert.strictEqual( - find('button:not([type="submit"])').textContent.trim(), - 'Cancel', - ); - // After canceling, fields are disabled again and the edit mode button is displayed - await click('button:not([type="submit"])'); - assert.strictEqual(findAll('input[disabled]').length, 1); - assert.strictEqual(findAll('button').length, 1); - assert.strictEqual(find('button').textContent.trim(), 'Edit'); - }); - test('it re-enables read-only mode if the submit handler returns a resolving promise', async function (assert) { this.cancel = () => {}; await render(hbs` @@ -133,7 +87,6 @@ module('Integration | Component | rose/form', function (hooks) { @showEditToggle={{true}} as |form| > - reject(); - assert.strictEqual(findAll('input[disabled]').length, 0); assert.strictEqual(findAll('button').length, 2); assert.strictEqual(find('[type="submit"]').textContent.trim(), 'Save'); assert.strictEqual( @@ -166,7 +116,6 @@ module('Integration | Component | rose/form', function (hooks) { // After saving with success, fields are disabled again and the edit mode button is displayed this.submit = () => resolve(); await click('button[type="submit"]'); - assert.strictEqual(findAll('input[disabled]').length, 1); assert.strictEqual(findAll('button').length, 1); assert.strictEqual(find('button').textContent.trim(), 'Edit'); }); diff --git a/addons/rose/tests/integration/components/rose/form/input-test.js b/addons/rose/tests/integration/components/rose/form/input-test.js deleted file mode 100644 index 0809cfe76..000000000 --- a/addons/rose/tests/integration/components/rose/form/input-test.js +++ /dev/null @@ -1,104 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render, find } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; - -module('Integration | Component | rose/form/input', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.strictEqual(await find('label').textContent.trim(), 'Label'); - assert.strictEqual(await find('input').value, 'Text'); - }); - - test('it displays optional helper text', async function (assert) { - await render(hbs``); - const fieldEl = find('input'); - const id = fieldEl.id; - const helperId = `helper-text-${id}`; - const helperTextEl = find('.rose-form-helper-text'); - assert.strictEqual(helperTextEl.textContent.trim(), 'Help me'); - assert.strictEqual(helperTextEl.id, helperId); - assert.strictEqual( - fieldEl.getAttribute('aria-describedby').trim(), - helperId, - ); - }); - - test('it displays optional errors', async function (assert) { - await render(hbs` - - - An error occurred. - - - `); - const fieldEl = find('input'); - const id = fieldEl.id; - const errorsId = `errors-${id}`; - const errorMessageEl = find('.rose-form-errors'); - assert.strictEqual(errorMessageEl.id, errorsId); - assert.strictEqual(errorMessageEl.textContent.trim(), 'An error occurred.'); - assert.strictEqual( - fieldEl.getAttribute('aria-describedby').split(' ')[1], - errorsId, - ); - }); - - test('it is type="text" by default', async function (assert) { - await render(hbs``); - assert.strictEqual(await find('input').type, 'text'); - }); - - test('it supports a @type attribute', async function (assert) { - await render(hbs``); - assert.strictEqual(await find('input').type, 'password'); - }); - - test('it supports disabled attribute', async function (assert) { - await render(hbs``); - assert.ok(await find('[disabled]')); - }); - - test('it supports an icon using @icon', async function (assert) { - await render(hbs``); - assert.dom('.hds-icon').isVisible(); - }); - - test('it supports readonly attribute', async function (assert) { - await render(hbs``); - assert.ok(await find('[readonly]')); - }); - - test('it gets an `error` class when @error=true', async function (assert) { - await render(hbs``); - assert.ok(await find('.error')); - }); - - test('it supports a fully contextual usage', async function (assert) { - await render(hbs` - - Label - Help - - - An error occurred. - - - `); - assert.notOk( - find('.rose-form-input'), - 'The form field wrapper element is not present in contextual mode', - ); - assert.ok(find('.rose-form-label.error')); - assert.ok(find('.rose-form-helper-text.error')); - assert.ok(find('.rose-form-input-field.error')); - assert.ok(find('.rose-form-error-message')); - }); -}); diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss index 0d3d95ea3..9ee0f5fe3 100644 --- a/ui/admin/app/styles/app.scss +++ b/ui/admin/app/styles/app.scss @@ -48,14 +48,6 @@ width: 66%; } - .rose-form-input { - width: 100%; - - .rose-form-input-field { - width: 100%; - } - } - .rose-dropdown { $icon-width: sizing.rems(m) + sizing.rems(s); $indent: $icon-width + sizing.rems(xs); diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index 5ea8b22cd..f61de4b54 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -69,14 +69,6 @@ width: 66%; } - .rose-form-input { - width: 100%; - - .rose-form-input-field { - width: 100%; - } - } - .rose-dropdown { $icon-width: sizing.rems(m) + sizing.rems(s); $indent: $icon-width + sizing.rems(xs);