github
/
consul
mirror of https://github.com/hashicorp/consul
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
consul/ui/packages/consul-ui/app/components/text-input/README.mdx

47 lines
1.6 KiB
Plaintext
Raw Normal View History

ui: Adds initial CRUD for partitions (#11188) * Add `is` and `test` helpers in a similar vein to `can` Adds 2 new helpers in a similar vein to ember-cans can: - `is` allows you to use vocab/phrases such as (is "something model") which calls isSomething() on the models ability. - `test` allows you to use vocab/phrases such as (test "is something model") or (test "can something model")which calls isSomething() / canSomething() on the models ability. Mostly using the is helper and the can helper. It's basically the is/can helper combined. * Adds TextInput component + related modifiers/helpers/machines/services (#11189) Adds a few new components/modifiers/helpers to aid building forms. - state-chart helper, used in lieu of a more generic approach for requiring our statecharts. - A few modifications to our existing disabled modifier. - A new 'validation' modifier, a super small form validation approach built to make use of state charts (optionally). Eventually we should be able to replace our current validation approach (ember-changeset-validations + extra deps) with this. - A new TextInput component, which is the first of our new components specifically to make it easy to build forms with validations. This is still a WIP, I left some comments in pointing out where this one would be progressed, but as we don't need the planned functionality yet, I left it where it was. All of this will be fleshed out more at a later date. Documentation is included for all of ^ * ui: Adds initial CRUD for partitions (#11190) Adds basic CRUD support for partitions. Engineering-wise probably the biggest takeaway here is that we needed to write very little javascript code to add this entire feature, and the little javascript we did need to write was very straightforwards. Everything is pretty much just HTML. Another note to make is that both ember-changeset and ember-data (model layer things) are now completely abstracted away from the view layer of the application. New components: - Consul::Partition::Form - Consul::Partition::List - Consul::Partition::Notifications - Consul::Partition::SearchBar - Consul::Partition::Selector See additional documentation here for more details New Route templates: - index.hbs partition listing/searching/filtering - edit.hbs partition editing and creation Additionally: There is some additional debug work here for better observability and to prevent any errors regarding our href-to usage when a dc is not available in our documentation site. Our softDelete functionality has been DRYed out a little to be used across two repos. isLinkable was removed from our ListCollection component for lists like upstream and service listing, and instead use our new is helper from within the ListCollection, meaning we've added a few more lighterweight templateOnly components. * ui: Exclude all debug-like files from the build (#11211) This PR adds **/*-debug.* to our test/prod excluded files (realised I needed to add test-support.js also so added that here as its more or less the same thing). Conditionally juggling ES6 static imports (specifically debug ones) for this was also getting a little hairy, so I moved it all to use the same approach as our conditional routes. All in all it brings the vendor build back down to ~430kb gzipped.
2021-10-08 15:29:30 +00:00
# TextInput
Form component to be used for entering text values, both short form and long
form. Currently an inline component but as and when we get chance this will be
changed to also accept slots for specifying specific parts of the component.
```hbs preview-template
<TextInput
@name="single"
@label="Single Line Text Input"
@item={{hash
single=""
}}
@placeholder="Placeholder: Enter some single line text here"
@help="Help me if you can, I'm feeling down"
/>
<hr />
<TextInput
@expanded={{true}}
@name="Description"
@label="Multiline Input"
@item={{hash
Description="Long form text"
}}
/>
```
## Arguments
| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `item` | `Object` | | An object whose properties are to be edited |
| `name` | `String` | '' | An identifier for the property to be edited on the `item` |
| `label` | `String` | `@name` | A label to use to label the text input element |
| `placeholder` | `String` | | Equivalent to the HTML `placeholder=""` attribute |
| `help` | `String` | | Provide some help text for the input (consider using `@validations` instead) |
| `expanded` | `Boolean` | `false` | Whether to use an expanded textarea or just a normal single line input |
| `validations` | `Object` | | A `validations` object to be passed to the underlying `validate` modifier |
| `chart` | `Object` | | A StateChart object (implementing `state` and `dispatch` to be passed to the underlying `validate` modifier |
## See
- [Validate Modifier](../modifiers/validate.mdx)
- [Template Source Code](./index.hbs)
---