open-vault/ui/lib/core/addon/components/icon.js
Matthew Irish eae5e114ba
UI - replication path filtering (#7620)
* rename mount-filter-config models, components, serializer, adapters to path-filter-config

* move search-select component to core addon

* add js class for search-select-placeholder and sort out power-select deps for moving to the core component

* expose oninput from powerselect through search-select

* don't fetch mounts in the replication routes

* remove toggle from add template

* start cross-namespace fetching

* group options and set up for namespace fetch via power-select search prop

* add and style up radio-card CSS component

* add xlm size for icons between l and xl

* copy defaults so they're not getting mutated

* finalize cross-namespace fetching and getting that to work with power-select

* when passing options but no models, format the options in search select so that they render properly in the list

* tint the background of a selected radio card

* default to null mode and uniq options in search-select

* finish styling radio-card

* format inputValues when first rendering the component if options are being passed from outside

* treat mode:null as deleting existing config which simplifies save logic

* correctly prune the auto complete list since path-filter-config-list handles all of that and finish styling

* remove old component

* add search debounce and fix linting

* update search-select docs

* updating tests

* support grouped options for when to show the create prompt

* update and add tests for path-filter-config-list

* fix tests for search-select and path-filter-config-list

* the new api uses allow/deny instead of whitelist/blacklist
2019-10-25 13:16:45 -05:00

37 lines
980 B
JavaScript

/**
* @module Icon
* `Icon` components are glyphs used to indicate important information.
*
* @example
* ```js
* <Icon @glyph="cancel-square-outline" />
* ```
* @param glyph=null {String} - The name of the SVG to render inline.
* @param [size='m'] {String} - The size of the Icon, can be one of 's', 'm', 'l', 'xlm', 'xl', 'xxl'. The default is 'm'.
*
*/
import Component from '@ember/component';
import { computed } from '@ember/object';
import { assert } from '@ember/debug';
import layout from '../templates/components/icon';
const SIZES = ['s', 'm', 'l', 'xlm', 'xl', 'xxl'];
export default Component.extend({
tagName: '',
layout,
glyph: null,
size: 'm',
sizeClass: computed('size', function() {
let { size } = this;
assert(
`The size property of ${this.toString()} must be one of the following: ${SIZES.join(', ')}`,
SIZES.includes(size)
);
if (size === 'm') {
return '';
}
return `hs-icon-${size}`;
}),
});