CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 🤖 Retire rose form textarea (#1735)

Browse Source 
* chore: 🤖 Retire rose form textarea
This commit is contained in:
NatashaKab authored and GitHub committed 2023-07-10 12:30:46 -07:00
1 parent 23006f2449
commit a8d99b6eef
9 files changed
+40 -282
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/form/index.hbs
-1
View File
@@ -27,7 +27,6 @@
'rose/form/checkbox/group' disabled=this.disabled
)
input=(component 'rose/form/input' disabled=this.disabled)
textarea=(component 'rose/form/textarea' disabled=this.disabled)
fieldset=(component 'rose/form/fieldset')
actions=(component
(if
addons/rose/addon/components/rose/form/index.stories.mdx
+15 -3
View File
@@ -18,7 +18,13 @@ export const Template = (args) => ({
as |form|
>
<form.input @label='Label' @helperText='Helper text' @value='Text' />
<form.textarea @label='Label' @helperText='Helper text' @value='Text' />
<Hds::Form::Textarea::Field
@value="This is my description"
disabled={{form.disabled}}
as |F|>
<F.Label>Short description</F.Label>
<F.HelperText>Add a short description about the workspace you are creating.</F.HelperText>
</Hds::Form::Textarea::Field>
<Hds::Form::Select::Field
@value={{selectedValue}}
@isInvalid={{false}}
@@ -78,8 +84,14 @@ export const Template = (args) => ({
as |form|
>
<form.input @label='Label' @helperText='Helper text' @value='Text' />
<form.textarea @label='Label' @helperText='Helper text' @value='Text' />
<Hds::Form::Textarea::Field
@value='This is my description'
disabled={{form.disabled}}
as |F|
>
<F.Label>Short description</F.Label>
<F.HelperText>Add a short description about the workspace you are creating.</F.HelperText>
</Hds::Form::Textarea::Field>
<Hds::Form::Select::Field
@value={{selectedValue}}
@isInvalid={{false}}
addons/rose/addon/components/rose/form/textarea/index.hbs
-64
View File
@@ -1,64 +0,0 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: MPL-2.0
}}
{{#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/textarea/textarea'
id=this.id
name=@name
value=@value
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}}
<div class='rose-form-input'>
<Rose::Form::Label @for={{this.id}} @error={{@error}}>
{{@label}}
</Rose::Form::Label>
{{#if @helperText}}
<Rose::Form::HelperText
@id='helper-text-{{this.id}}'
@error={{@error}}
@link={{@link}}
@linkText={{@linkText}}
>
{{@helperText}}
</Rose::Form::HelperText>
{{/if}}
<Rose::Form::Textarea::Textarea
...attributes
@id={{this.id}}
@name={{@name}}
@value={{@value}}
@disabled={{@disabled}}
@error={{@error}}
@aria-describedby='{{if @helperText (concat "helper-text-" this.id)}} {{if
@error
(concat "errors-" this.id)
}}'
/>
{{yield
(hash errors=(component 'rose/form/errors' id=(concat 'errors-' this.id)))
}}
</div>
{{/if}}
addons/rose/addon/components/rose/form/textarea/index.js
-13
View File
@@ -1,13 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
import Component from '@glimmer/component';
import { generateComponentID } from '../../../../utilities/component-auto-id';
export default class RoseFormTextareaComponent extends Component {
// =attributes
id = generateComponentID();
}
addons/rose/addon/components/rose/form/textarea/index.stories.mdx
+17 -90
View File
@@ -1,39 +1,30 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Form/Textarea" component="Form/Textarea" />
<Meta title="Rose/Form/Textarea (removed)" component="Form/Textarea" />
# Form Textarea
# Textarea (removed)
Renders a simple form textarea.
Rose/Form/Textarea has been removed in favor of
[HDS::Form::Textarea](https://design-system-components-hashicorp.vercel.app/components/form/textarea).
```handlebars
<Rose::Form::Textarea
@name='field'
@value='Descriptive content'
@label='Description'
@helperText='Enter a description'
@error={{false}}
@disabled={{false}}
readonly={{false}}
@link='www.example.net'
@linkText='link text goes here'
/>
<Hds::Form::Textarea::Field
@value='This is my description'
disabled={{form.disabled}}
as |F|
>
<F.Label>Short description</F.Label>
<F.HelperText>Add a short description about the workspace you are creating.</F.HelperText>
</Hds::Form::Textarea::Field>
```
export const Template = (args) => ({
template: hbs`
<Rose::Form::Textarea
@name='field'
@value={{value}}
@label={{label}}
@helperText={{helperText}}
@error={{false}}
@disabled={{disabled}}
readonly={{read-only}}
@link='www.example.net'
@linkText='link text goes here'
/>`,
<Hds::Form::Textarea::Field name="field" @value={{value}} @isOptional={{isOptional}} disabled={{disabled}} as |F|>
<F.Label>{{label}}</F.Label>
<F.HelperText>{{helperText}}</F.HelperText>
</Hds::Form::Textarea::Field>`,
context: args,
});
@@ -45,74 +36,10 @@ export const Template = (args) => ({
value: 'Value',
label: 'Label',
helperText: 'Helper text',
link: 'link',
linkText: 'link text goes here',
disabled: false,
'read-only': false,
isOptional: true,
}}
>
{Template.bind({})}
</Story>
</Preview>
export const ErrorTemplate = (args) => ({
template: hbs`
<Rose::Form::Textarea
@name='field'
@value={{value}}
@label={{label}}
@helperText={{helperText}}
@error={{true}}
@disabled={{disabled}}
readonly={{read-only}}
as |field|
>
<field.errors as |errors|>
<errors.message>An error occurred.</errors.message>
</field.errors>
</Rose::Form::Textarea>`,
context: args,
});
<Preview>
<Story
name="Textarea with Errors"
height="10rem"
args={{
value: 'Value',
label: 'Label',
helperText: 'Helper text',
disabled: false,
'read-only': false,
}}
>
{ErrorTemplate.bind({})}
</Story>
</Preview>
export const ContextualTemplate = (args) => ({
template: hbs`
<Rose::Form::Textarea
@value='Text'
@error={{true}}
@contextual={{true}}
as |field|
>
<hr />
<field.label>Label</field.label>
<hr />
<field.helperText>Help</field.helperText>
<hr />
<field.field />
<hr />
<field.errors as |errors|>
<errors.message>An error occurred.</errors.message>
</field.errors>
<hr />
</Rose::Form::Textarea>`,
context: args,
});
<Preview>
<Story name="Fully Contextual Textarea">{ContextualTemplate.bind({})}</Story>
</Preview>
addons/rose/addon/components/rose/form/textarea/textarea/index.hbs
-14
View File
@@ -1,14 +0,0 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: MPL-2.0
}}
<Textarea
...attributes
class='rose-form-input-field{{if @error " error"}}'
id={{@id}}
name={{@name}}
disabled={{@disabled}}
@value={{@value}}
aria-describedby={{@aria-describedby}}
/>
addons/rose/app/components/rose/form/textarea/textarea.js
-6
View File
@@ -1,6 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
export { default } from 'rose/components/rose/form/textarea/textarea';
addons/rose/tests/integration/components/rose/form-test.js
+8 -1
View File
@@ -46,7 +46,14 @@ module('Integration | Component | rose/form', function (hooks) {
as |form|
>
<form.input @label="Input" @name="input-field" />
<form.textarea @label="Textarea" @name="textarea-field" />
<Hds::Form::Textarea::Field
@value="This is my description"
name="textarea-field"
disabled={{form.disabled}}
as |F|>
<F.Label>Short description</F.Label>
<F.HelperText>Add a short description about the workspace you are creating.</F.HelperText>
</Hds::Form::Textarea::Field>
<Hds::Form::Select::Field
@isInvalid={{false}}
addons/rose/tests/integration/components/rose/form/textarea-test.js
-90
View File
@@ -1,90 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
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/textarea', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
await render(hbs`<Rose::Form::Textarea @value="Text" @label="Label" />`);
assert.strictEqual(await find('label').textContent.trim(), 'Label');
assert.strictEqual(await find('textarea').value, 'Text');
});
test('it displays optional helper text', async function (assert) {
await render(hbs`<Rose::Form::Textarea @helperText="Help me" />`);
const fieldEl = find('textarea');
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`
<Rose::Form::Textarea @error={{true}} as |field|>
<field.errors as |errors|>
<errors.message>An error occurred.</errors.message>
</field.errors>
</Rose::Form::Textarea>
`);
const fieldEl = find('textarea');
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 supports disabled attribute', async function (assert) {
await render(hbs`<Rose::Form::Textarea @disabled={{true}} />`);
assert.ok(await find('[disabled]'));
});
test('it supports readonly attribute', async function (assert) {
await render(hbs`<Rose::Form::Textarea readonly={{true}} />`);
assert.ok(await find('[readonly]'));
});
test('it gets an `error` class when @error=true', async function (assert) {
await render(hbs`<Rose::Form::Textarea @error={{true}} />`);
assert.ok(await find('.error'));
});
test('it supports a fully contextual usage', async function (assert) {
assert.expect(5);
await render(hbs`
<Rose::Form::Textarea @value="Text" @error={{true}} @contextual={{true}} as |field|>
<field.label>Label</field.label>
<field.helperText>Help</field.helperText>
<field.field />
<field.errors as |errors|>
<errors.message>An error occurred.</errors.message>
</field.errors>
</Rose::Form::Textarea>
`);
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'));
});
});