2200cde988
From an engineers perspective, whenever specifying colors from now on we should use the form: ``` color: rgb(var(--tone-red-500)); ``` Please note: - Use rgb. This lets us do this like rgb(var(--tone-red-500) / 10%) so we can use a 10% opacity red-500 if we ever need to whilst still making use of our color tokens. - Use --tone-colorName-000 (so the prefix tone). Previously we could use a mix of --gray-500: $gray-500 (note the left hand CSS prop and right hand SASS var) for the things we need to theme currently. As we no longer use SASS we can't do --gray-500: --gray-500, so we now do --tone-gray-500: --gray-500. Just for clarity after that, whenever specifying a color anywhere, use rgb and --tone. There is only one reason where you might not use tone, and that is if you never want a color to be affected by a theme (for example a background shadow probably always should use --black) There are a 2 or 3 left for the code editor, plus our custom-query values |
||
---|---|---|
.. | ||
index.hbs | ||
index.js | ||
index.scss | ||
layout.scss | ||
README.mdx | ||
skin.scss |
--- class: ember --- # ModalDialog ## Arguments | Argument | Type | Default | Description | | --- | --- | --- | --- | | `onopen` | `Function` | `undefined` | A function to call when the modal has opened | | `onclose` | `Function` | `undefined` | A function to call when the modal has closed | | `aria` | `Object` | `undefined` | A `hash` of aria properties used in the component, currently only label is supported | ## Exports | Name | Type | Description | | --- | --- | --- | | `open` | `Function` | Opens the modal dialog | | `close` | `Function` | Closes the modal dialog | Works in tandem with `<ModalLayer />` to render modals. First of all ensure you have a modal layer on the page (it doesn't have to be in the same template) ```hbs <ModalLayer /> ``` Then all modals will be rendered into the `<ModalLayer />` for example: ```hbs preview-template <ModalDialog @onclose={{noop}} @onopen={{noop}} @aria={{hash label="Screenread name of the modal" }} as |modal|> <!-- Save a reference to the modal component so we can call its methods --> {{did-insert (set this 'modal' modal)}} <BlockSlot @name="header"> <h2> Modal Header </h2> </BlockSlot> <BlockSlot @name="body"> <p> Modal body </p> </BlockSlot> <BlockSlot @name="actions"> <button type="button" {{on "click" modal.close}} > Close modal </button> </BlockSlot> </ModalDialog> <button type="button" {{on 'click' (optional this.modal.open)}} > Open Modal </button> ```