@bildvitta/quasar-ui-asteroid 3.5.0 → 3.6.0-beta.1

package/src/components/delete/QasDelete.vue

@@ -1,5 +1,5 @@
 <template>
-  <component v-bind="$attrs" :is="tag" @click.stop="openConfirmDialog">
+  <component v-bind="attributes" :is="tag" @click.stop="openConfirmDialog">
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
@@ -25,6 +25,8 @@ export default {
     QasDialog
   },
 
+  inheritAttrs: false,
+
   props: {
     customId: {
       default: '',
@@ -74,6 +76,13 @@ export default {
   },
 
   computed: {
+    attributes () {
+      return {
+        ...this.$attrs,
+        color: this.isButton ? 'grey-9' : this.$attrs.color
+      }
+    },
+
     defaultDialogProps () {
       return {
         card: {
@@ -98,6 +107,10 @@ export default {
         error: 'Não conseguimos excluir as informações. Por favor, tente novamente em alguns minutos.',
         success: 'Informações excluídas com sucesso.'
       }
+    },
+
+    isButton () {
+      return this.tag === 'qas-btn'
     }
   },
 

package/src/components/dialog/QasDialog.vue

@@ -6,7 +6,7 @@
           <div class="items-center justify-between row">
             <h5 class="text-grey-9 text-h5">{{ card.title }}</h5>
 
-            <qas-btn v-if="isInfoDialog" v-close-popup color="grey-9" dense flat icon="sym_r_close" rounded />
+            <qas-btn v-if="isInfoDialog" v-close-popup color="grey-9" icon="sym_r_close" variant="tertiary" />
           </div>
         </slot>
       </header>
@@ -19,15 +19,15 @@
         </component>
       </section>
 
-      <footer v-if="!isInfoDialog" class="q-mt-xl">
+      <footer v-if="!isInfoDialog">
         <slot name="actions">
           <qas-actions v-bind="actionsProps" :use-equal-width="hasAllActions" :use-full-width="hasSingleAction">
             <template v-if="hasOk" #primary>
-              <qas-btn v-close-popup="!useForm" class="full-width" v-bind="defaultOk" @click="submitHandler" />
+              <qas-btn v-close-popup="!useForm" class="full-width" variant="primary" v-bind="defaultOk" @click="submitHandler" />
             </template>
 
             <template v-if="hasCancel" #secondary>
-              <qas-btn v-close-popup class="full-width" v-bind="defaultCancel" />
+              <qas-btn v-close-popup class="full-width" v-bind="defaultCancel" variant="secondary" />
             </template>
           </qas-actions>
         </slot>

package/src/components/filters/QasFilters.vue

@@ -4,44 +4,46 @@
       <div v-if="showSearch" class="col-12 col-md-6">
         <slot :filter="filter" name="search">
           <q-form v-if="useSearch" @submit.prevent="filter()">
-            <qas-input v-model="search" class="bg-white q-px-sm qas-filters__input rounded-borders-sm shadow-2" data-cy="filters-search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" :outlined="false" :placeholder="searchPlaceholder" type="search">
-              <template #prepend>
-                <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
-                <qas-btn v-else color="grey-9" flat icon="sym_r_search" padding="0" @click="filter()" />
-              </template>
-
-              <template #append>
-                <qas-btn v-if="hasSearch" class="q-mr-sm" color="grey-9" flat icon="sym_r_clear" padding="0" size="sm" @click="clearSearch" />
-
-                <qas-btn v-if="useFilterButton" :color="filterButtonColor" data-cy="filters-btn" flat icon="sym_r_tune" padding="0">
-                  <q-menu anchor="center right" class="full-width" max-width="270px" self="top right">
-                    <div v-if="isFetching" class="q-pa-xl text-center">
-                      <q-spinner color="grey" size="2em" />
-                    </div>
-
-                    <div v-else-if="hasFetchError" class="q-pa-xl text-center">
-                      <q-icon color="negative" name="sym_r_warning" size="2em" />
-                    </div>
-
-                    <q-form v-else class="q-gutter-y-md q-pa-md" @submit.prevent="filter()">
-                      <div v-for="(field, index) in fields" :key="index">
-                        <qas-field v-model="filters[field.name]" :data-cy="`filters-${field.name}-field`" :field="field" v-bind="fieldsProps[field.name]" />
+            <div class="qas-filters__input-content">
+              <qas-input v-model="search" class="bg-white q-px-sm rounded-borders-sm shadow-2" data-cy="filters-search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" :outlined="false" :placeholder="searchPlaceholder" type="search">
+                <template #prepend>
+                  <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
+                  <qas-btn v-else color="grey-9" icon="sym_r_search" variant="tertiary" @click="filter()" />
+                </template>
+
+                <template #append>
+                  <qas-btn v-if="hasSearch" class="q-mr-sm" color="grey-9" icon="sym_r_clear" variant="tertiary" @click="clearSearch" />
+
+                  <qas-btn v-if="useFilterButton" :color="filterButtonColor" data-cy="filters-btn" icon="sym_r_tune" variant="tertiary">
+                    <q-menu anchor="center right" class="full-width" max-width="270px" self="top right">
+                      <div v-if="isFetching" class="q-pa-xl text-center">
+                        <q-spinner color="grey" size="2em" />
                       </div>
 
-                      <div class="q-col-gutter-x-md q-mt-xl row">
-                        <div class="col-6">
-                          <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" outline size="12px" @click="clearFilters" />
+                      <div v-else-if="hasFetchError" class="q-pa-xl text-center">
+                        <q-icon color="negative" name="sym_r_warning" size="2em" />
+                      </div>
+
+                      <q-form v-else class="q-gutter-y-md q-pa-md" @submit.prevent="filter()">
+                        <div v-for="(field, index) in fields" :key="index">
+                          <qas-field v-model="filters[field.name]" :data-cy="`filters-${field.name}-field`" :field="field" v-bind="fieldsProps[field.name]" />
                         </div>
 
-                        <div class="col-6">
-                          <qas-btn class="full-width" color="primary" data-cy="filters-submit-btn" label="Filtrar" size="12px" type="submit" />
+                        <div class="q-col-gutter-x-md q-mt-xl row">
+                          <div class="col-6">
+                            <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" variant="secondary" @click="clearFilters" />
+                          </div>
+
+                          <div class="col-6">
+                            <qas-btn class="full-width" data-cy="filters-submit-btn" label="Filtrar" type="submit" variant="primary" />
+                          </div>
                         </div>
-                      </div>
-                    </q-form>
-                  </q-menu>
-                </qas-btn>
-              </template>
-            </qas-input>
+                      </q-form>
+                    </q-menu>
+                  </qas-btn>
+                </template>
+              </qas-input>
+            </div>
           </q-form>
         </slot>
       </div>
@@ -225,6 +227,7 @@ export default {
   created () {
     this.fetchFilters()
     this.watchOnceFields()
+    this.handleSearchModelOnCreate()
   },
 
   methods: {
@@ -322,8 +325,9 @@ export default {
     },
 
     updateValues () {
-      const { filters, search } = this.mx_context
-      this.search = search || ''
+      this.setSearch()
+
+      const { filters } = this.mx_context
 
       for (const key in filters) {
         this.filters[key] = parseValue(this.normalizeValues(filters[key], this.fields[key]?.multiple))
@@ -343,6 +347,15 @@ export default {
           watchOnce()
         }
       })
+    },
+
+    handleSearchModelOnCreate () {
+      !this.useFilterButton && this.setSearch()
+    },
+
+    setSearch () {
+      const { search } = this.mx_context
+      this.search = search || ''
     }
   }
 }
@@ -351,41 +364,43 @@ export default {
 <style lang="scss">
 // TODO rever
 .qas-filters {
-  .q-field::before {
-    border: 2px solid transparent;
-    border-radius: 4px;
-    bottom: 0;
-    content: '';
-    left: 0;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: border-color var(--qas-generic-transition);
-  }
+  &__input-content {
+    .q-field {
+      &::before {
+        border: 2px solid transparent;
+        border-radius: var(--qas-generic-border-radius);
+        bottom: 0;
+        content: '';
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transition: border-color var(--qas-generic-transition);
+      }
 
-  .q-field--focused::before {
-    border-color: var(--q-primary);
-    color: var(--q-primary);
-  }
+      &--dense .q-field__prepend {
+        padding-right: var(--qas-spacing-xs);
+      }
 
-  .q-field--dense .q-field__prepend {
-    padding-right: var(--qas-spacing-xs);
-  }
+      &--dense .q-field__append {
+        padding-left: var(--qas-spacing-sm);
+      }
 
-  .q-field--dense .q-field__append {
-    padding-left: var(--qas-spacing-sm);
-  }
+      &--focused::before {
+        border-color: var(--q-primary);
+        color: var(--q-primary);
+      }
 
-  &__input {
-    .q-field__control::before,
-    .q-field__control::after {
-      display: none;
-    }
+      &__control::after,
+      &__control::before {
+        display: none !important;
+      }
 
-    .q-field__native {
-      padding-bottom: var(--qas-spacing-sm);
-      padding-top: var(--qas-spacing-sm);
+      &__native {
+        padding-bottom: var(--qas-spacing-sm);
+        padding-top: var(--qas-spacing-sm);
+      }
     }
   }
 }

package/src/components/form-view/QasFormView.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="mx_componentTag" :class="mx_componentClass">
+  <component :is="mx_componentTag" class="qas-form-view" :class="mx_componentClass">
     <header v-if="mx_hasHeaderSlot">
       <slot name="header" />
     </header>
@@ -8,15 +8,15 @@
       <slot />
 
       <slot v-if="useActions" name="actions">
-        <div class="justify-end q-col-gutter-md q-my-lg row">
-          <div v-if="hasCancelButton" class="col-12 col-sm-2" :class="cancelButtonClass">
-            <qas-btn v-close-popup class="full-width" :data-cy="`btnCancel-${entity}`" :disable="isSubmitting" :label="cancelButtonLabel" outline type="button" @click="cancel" />
-          </div>
-
-          <div v-if="useSubmitButton" class="col-12 col-sm-2" :class="submitButtonClass">
-            <qas-btn class="full-width" :data-cy="`btnSave-${entity}`" :disable="disable" :label="submitButtonLabel" :loading="isSubmitting" type="submit" />
-          </div>
-        </div>
+        <qas-actions>
+          <template #primary>
+            <qas-btn class="qas-form-view__btn" :data-cy="`btnSave-${entity}`" :disable="disable" :label="submitButtonLabel" :loading="isSubmitting" type="submit" variant="primary" />
+          </template>
+
+          <template #secondary>
+            <qas-btn v-close-popup class="qas-form-view__btn" :data-cy="`btnCancel-${entity}`" :disable="isSubmitting" :label="cancelButtonLabel" type="button" variant="secondary" @click="cancel" />
+          </template>
+        </qas-actions>
       </slot>
     </q-form>
 
@@ -161,10 +161,6 @@ export default {
   },
 
   computed: {
-    cancelButtonClass () {
-      return this.$qas.screen.isSmall && 'order-last'
-    },
-
     fetchURL () {
       return this.url ? (`${this.url}/${this.isCreateMode ? 'new' : 'edit'}`) : ''
     },
@@ -189,13 +185,9 @@ export default {
       return this.$route
     },
 
-    submitButtonClass () {
-      return this.$qas.screen.isSmall && 'order-first'
-    },
-
     defaultNotifyMessages () {
       return {
-        validationError: 'Existem campos no formulário que ainda não foram preenchidos. Complete todas as informações para avançar.',
+        validationError: 'Não conseguimos salvar as informações. Por favor, revise os campos e tente novamente.',
         error: 'Não conseguimos salvar as informações. Por favor, tente novamente em alguns minutos.',
         success: 'Informações salvas com sucesso.'
       }
@@ -434,8 +426,9 @@ export default {
       } catch (error) {
         const errors = error?.response?.data?.errors
         const message = error?.response?.data?.status?.text
+        const hasFieldError = !!Object.keys(errors || {})?.length
 
-        const defaultMessage = error
+        const defaultMessage = hasFieldError
           ? this.defaultNotifyMessages.validationError
           : this.defaultNotifyMessages.error
 
@@ -462,3 +455,12 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.qas-form-view {
+  &__btn {
+    min-width: 132px;
+    width: 100%;
+  }
+}
+</style>

package/src/components/gallery/QasGallery.vue

@@ -13,9 +13,7 @@
 
             <div v-if="useDestroy">
               <slot :destroy="onDestroy" :image="image" :index="index" name="destroy">
-                <qas-btn color="grey-9" dense :disabled="isDestroyDisabled(image)" flat round size="sm" @click="onDestroy(image, index)">
-                  <q-icon name="sym_r_delete" size="xs" />
-                </qas-btn>
+                <qas-btn color="grey-9" :disabled="isDestroyDisabled(image)" icon="sym_r_delete" variant="tertiary" @click="onDestroy(image, index)" />
               </slot>
             </div>
           </div>
@@ -26,7 +24,7 @@
 
       <slot>
         <div v-if="!hideShowMore" class="full-width text-center">
-          <qas-btn color="primary" data-cy="gallery-btn-show-more" flat :label="showMoreLabel" @click="showMore" />
+          <qas-btn color="primary" data-cy="gallery-btn-show-more" :label="showMoreLabel" variant="tertiary" @click="showMore" />
         </div>
       </slot>
 

package/src/components/gallery/private/PvGalleryCarouselDialog.vue

@@ -1,21 +1,23 @@
 <template>
-  <qas-dialog v-model="model" :cancel="false" class="q-pa-xl" max-width="1100px" :ok="false" :persistent="false" use-full-max-width>
-    <template #header>
-      <div class="text-right">
-        <qas-btn v-close-popup dense flat icon="sym_r_close" rounded @click="close" />
-      </div>
-    </template>
+  <div class="pv-gallery-carousel-dialog">
+    <qas-dialog v-model="model" :cancel="false" class="q-pa-xl" max-width="1100px" :ok="false" :persistent="false" use-full-max-width>
+      <template #header>
+        <div class="text-right">
+          <qas-btn v-close-popup color="grey-9" icon="sym_r_close" variant="tertiary" @click="close" />
+        </div>
+      </template>
 
-    <template #description>
-      <q-carousel v-model="imageIndexModel" animated :arrows="!$qas.screen.isSmall" control-text-color="primary" data-cy="gallery-carousel" :fullscreen="$qas.screen.isSmall" :height="carouselImageHeight" next-icon="sym_r_chevron_right" prev-icon="sym_r_chevron_left" swipeable :thumbnails="!isSingleImage">
-        <q-carousel-slide v-for="(image, index) in images" :key="index" class="bg-no-repeat bg-size-contain" :data-cy="`gallery-carousel-slide-${index}`" :img-src="image.url" :name="index">
-          <div v-if="$qas.screen.isSmall" class="full-width justify-end row">
-            <qas-btn dense flat icon="sym_r_close" @click="close" />
-          </div>
-        </q-carousel-slide>
-      </q-carousel>
-    </template>
-  </qas-dialog>
+      <template #description>
+        <q-carousel v-model="imageIndexModel" animated :arrows="!$qas.screen.isSmall" class="pv-gallery-carousel-dialog__carousel" control-text-color="primary" data-cy="gallery-carousel" :fullscreen="$qas.screen.isSmall" :height="carouselImageHeight" next-icon="sym_r_chevron_right" prev-icon="sym_r_chevron_left" swipeable :thumbnails="!isSingleImage">
+          <q-carousel-slide v-for="(image, index) in images" :key="index" class="bg-no-repeat bg-size-contain" :data-cy="`gallery-carousel-slide-${index}`" :img-src="image.url" :name="index">
+            <div v-if="$qas.screen.isSmall" class="full-width justify-end row">
+              <qas-btn color="grey-9" icon="sym_r_close" variant="tertiary" @click="close" />
+            </div>
+          </q-carousel-slide>
+        </q-carousel>
+      </template>
+    </qas-dialog>
+  </div>
 </template>
 
 <script>
@@ -80,3 +82,18 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.pv-gallery-carousel-dialog {
+  // https://quasar.dev/style/sass-scss-variables#caveat: $
+
+  &__carousel .q-carousel__control .q-btn {
+    @include set-button(
+      tertiary,
+      true,
+      false,
+      primary
+    );
+  }
+}
+</style>

package/src/components/list-items/QasListItems.vue

@@ -9,9 +9,7 @@
 
           <q-item-section v-if="useSectionActions" side>
             <slot :index="index" :item="item" name="item-section-side">
-              <qas-btn flat round @click="onClick({ item, index })">
-                <q-icon v-bind="iconProps" />
-              </qas-btn>
+              <qas-btn color="primary" :icon="icon" variant="tertiary" @click="onClick({ item, index })" />
             </slot>
           </q-item-section>
         </slot>
@@ -33,9 +31,9 @@ export default {
   },
 
   props: {
-    iconProps: {
-      default: () => ({ color: 'primary', name: 'sym_r_chevron_right' }),
-      type: Object
+    icon: {
+      type: String,
+      default: 'sym_r_chevron_right'
     },
 
     list: {

package/src/components/list-items/QasListItems.yml

@@ -4,10 +4,10 @@ meta:
   desc: Componente para listagem.
 
 props:
-  icon-props:
-    desc: Props do [QIcon](https://quasar.dev/vue-components/icon#introduction)
-    default: { color: 'primary', name: 'sym_r_chevron_right' }
-    type: Object
+  icon:
+    desc: Nome do ícone
+    default: sym_r_chevron_right
+    type: String
 
   list:
     desc: Lista para ser selecionada.

package/src/components/list-view/QasListView.vue

@@ -26,7 +26,7 @@
           <q-spinner color="grey" size="3em" />
         </div>
 
-        <div v-if="hasPages" class="flex items-center q-mt-sm" :class="paginationClasses">
+        <div v-if="hasPages" class="flex items-center q-mt-md" :class="paginationClasses">
           <qas-pagination v-model="page" :max="totalPages" @click="changePage" />
         </div>
 

package/src/components/nested-fields/QasNestedFields.vue

@@ -9,7 +9,7 @@
         <div v-for="(row, index) in nested" :id="`row-${index}`" :key="`row-${index}`" class="full-width">
           <div v-if="!row[destroyKey]" :key="index" class="col-12 q-mt-md">
             <div>
-              <div class="flex items-center justify-between q-py-xs">
+              <div class="flex items-center justify-between q-py-md">
                 <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" />
                 <qas-actions-menu v-if="hasBlockActions(row)" :list="getActionsList(index, row)" :use-label-on-small-screen="false" />
               </div>
@@ -39,7 +39,7 @@
       <div v-if="useAdd" class="q-mt-md">
         <slot :add="add" name="add-input">
           <div v-if="showAddFirstInputButton" class="text-left">
-            <qas-btn class="q-px-sm" color="dark" flat @click="add()">{{ addFirstInputLabel }}</qas-btn>
+            <qas-btn class="q-px-sm" color="primary" variant="tertiary" @click="add()">{{ addFirstInputLabel }}</qas-btn>
           </div>
 
           <div v-else-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" @click="add()">
@@ -48,12 +48,12 @@
             </div>
 
             <div class="col-auto">
-              <qas-btn color="dark" flat icon="sym_r_add_circle_outline" round />
+              <qas-btn color="primary" icon="sym_r_add_circle_outline" variant="tertiary" />
             </div>
           </div>
 
           <div v-else class="text-left">
-            <qas-btn class="q-px-sm" color="dark" flat icon="sym_r_add" @click="add()">{{ addInputLabel }}</qas-btn>
+            <qas-btn class="q-px-sm" color="primary" icon="sym_r_add" :label="addInputLabel" variant="tertiary" @click="add()" />
           </div>
         </slot>
       </div>
@@ -106,10 +106,10 @@ export default {
       type: Object,
       default: () => {
         return {
-          label: 'Excluir',
+          color: 'grey-9',
           icon: 'sym_r_delete',
-          flat: true,
-          dense: true
+          label: 'Excluir',
+          variant: 'tertiary'
         }
       }
     },
@@ -118,11 +118,10 @@ export default {
       type: Object,
       default: () => {
         return {
-          label: 'Duplicar',
           icon: 'sym_r_content_copy',
-          flat: true,
+          label: 'Duplicar',
           useLabelOnSmallScreen: false,
-          dense: true
+          variant: 'tertiary'
         }
       }
     },

package/src/components/pagination/QasPagination.vue

@@ -19,7 +19,7 @@ export default {
         directionLinks: true,
         iconNext: 'sym_r_chevron_right',
         iconPrev: 'sym_r_chevron_left',
-        maxPages: modelValue < 3 ? 3 : 6,
+        maxPages: 3,
         modelValue,
 
         ...attributes
@@ -31,8 +31,41 @@ export default {
 
 <style lang="scss">
 .qas-pagination {
-  .q-icon {
-    color: $grey-9;
+  // https://quasar.dev/style/sass-scss-variables#caveat: $
+
+  .q-pagination__content .q-btn {
+    @include set-button(
+      tertiary,
+      true,
+      false,
+      grey-9
+    );
+
+    min-width: max-content !important;
+
+    &.text-primary {
+      color: var(--q-primary) !important;
+    }
+  }
+
+  .q-pagination__middle + .q-btn,
+  .q-btn + .q-pagination__middle,
+  .q-btn + .q-btn {
+    margin-left: var(--qas-spacing-md) !important;
+  }
+
+  .q-pagination__content > .q-btn,
+  .q-pagination__middle > .q-btn {
+    margin-left: 0;
+    margin-top: 0;
+  }
+
+  @media (max-width: $breakpoint-xs) {
+    .q-pagination__middle + .q-btn,
+    .q-btn + .q-pagination__middle,
+    .q-btn + .q-btn {
+      margin-left: var(--qas-spacing-sm) !important;
+    }
   }
 }
 </style>

package/src/components/search-box/QasSearchBox.vue

@@ -1,8 +1,8 @@
 <template>
   <qas-box>
     <qas-input v-bind="attributes" ref="search" v-model="mx_search">
-      <template #append>
-        <q-icon color="primary" name="sym_r_search" />
+      <template #prepend>
+        <q-icon color="grey-8" name="sym_r_search" />
       </template>
     </qas-input>
 
@@ -153,7 +153,6 @@ export default {
 
     defaultFuseOptions () {
       return {
-        threshold: 0.1,
         ignoreLocation: true,
 
         ...this.fuseOptions

package/src/components/search-box/QasSearchBox.yml

@@ -34,7 +34,7 @@ props:
     examples: ["{ keys: ['label'] }"]
     default:
       ignoreLocation: true
-      threshold: 0.1
+      threshold: 0.6
 
   height:
     desc: Define altura do box quando a lista não está vazia.

package/src/components/select/QasSelect.vue

@@ -105,7 +105,6 @@ export default {
       return {
         ignoreLocation: true,
         keys: ['label', 'value'],
-        threshold: 0.1,
 
         ...this.fuseOptions
       }

package/src/components/select/QasSelect.yml

@@ -27,7 +27,7 @@ props:
     default:
       ignoreLocation: true
       keys: [label, value]
-      threshold: 0.1
+      threshold: 0.6
 
   label-key:
     desc: O componente internamente espera receber na propriedade "options" um array de objeto contendo "label" e "value", caso o seu objeto não tenha "label" mas um "name" por exemplo, você pode definir esta prop "label-key" como "name".

package/src/components/select-list/QasSelectList.vue

@@ -128,12 +128,9 @@ export default {
       const isSelected = this.values.includes(value)
 
       return {
-        dense: this.$qas.screen.isSmall,
-        useLabelOnSmallScreen: false,
-        icon: !this.$qas.screen.isSmall ? undefined : isSelected ? 'sym_r_close' : 'sym_r_add',
-        label: isSelected ? 'Remover' : 'Adicionar',
-        outline: isSelected,
-        size: 'sm'
+        variant: 'tertiary',
+        color: isSelected ? 'grey-9' : 'primary',
+        icon: isSelected ? 'sym_r_remove' : 'sym_r_add'
       }
     },