open-consul/ui/packages/consul-ui/app/components/inline-alert
John Cowen 26be113b5d
ui: Colocate remaining CSS components to the app/components folder (#10328)
2021-06-23 09:19:35 +01:00
..
README.mdx ui: Colocate remaining CSS components to the app/components folder (#10328) 2021-06-23 09:19:35 +01:00
debug.scss ui: Rename icons for consistency and remove unused icons (#10311) 2021-06-22 18:56:17 +01:00
index.scss
layout.scss
skin.scss ui: Rename icons for consistency and remove unused icons (#10311) 2021-06-22 18:56:17 +01:00

README.mdx

---
class: css
state: needs-love
---
# inline-alert

CSS component for giving inline feedback to the user, generally used for form
element feedback like errors and suchlike.

Potentially an improvement here could be that this could make use of `%horizontal-kv-list`, and do we really need a placeholder per state, can we just use a class?

```hbs preview-template
  <label class="type-text">
    <span>Input some text</span>
    <input type="text" />
    <strong class={{or this.type "info"}}>{{capitalize (or this.type "info")}}</strong>
  </label>

  <figure>
    <figcaption>Provide a widget to change the <code>class</code></figcaption>

    <select
      onchange={{action (mut this.type) value="target.value"}}
    >
      <option>info</option>
      <option>success</option>
      <option>warning</option>
      <option>error</option>
    </select>

  </figure>
```


```css
strong.info {
  @extend %inline-alert-info;
}
strong.success {
  @extend %inline-alert-success;
}
strong.warning {
  @extend %inline-alert-warning;
}
strong.error {
  @extend %inline-alert-error;
}
```