@policystudio/policy-studio-ui-vue 1.0.58 → 1.0.62

package/src/stories/Button.stories.js

@@ -15,78 +15,83 @@ const TemplateDefault = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsButton },
   template: `
-  <div style="display:flex; flex-direction: column;">
+  <div style="display:flex; flex-direction: column;">     
     <p>Size: Big</p> 
     <div style="display: flex; flex-direction: column; gap: 10px;">
-      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;">
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;">
           <span style="text-align: center; color: black;">Solid Style</span>
           <PsButton label='Left Icon'  layout='solid' icon='verified' iconPosition='left'/>
           <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right'/>
           <PsButton label='Text Only'  layout='solid' />
-          <PsButton label='Disabled'   layout='solid' icon='verified' iconPosition='left' disabled/>
+          <PsButton label='Disabled'   layout='solid' icon='verified' iconPosition='left' disabled/>          
+          <PsButton label='Loading Solid'   layout='solid' icon='verified' iconPosition='left' loading />
       </div>
-      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
           <span style="text-align: center; color: blue;">Outline Style</span>
           <PsButton label='Left Icon'  layout='outline' icon='verified' iconPosition='left'/>
           <PsButton label='Right Icon'    layout='outline' icon='verified' iconPosition='right'/>
           <PsButton label='Text Only'  layout='outline'/>
           <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled/>
+          <PsButton label='Loading Outline' layout='outline' icon='verified' iconPosition='left' loading />
       </div>
-      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
           <span style="text-align: center; color: brown;">Ghost Style</span>
           <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left'/>
           <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right'/>
           <PsButton label='Text Only' layout='ghost' />
           <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled/>
+          <PsButton label='Loading Ghost' layout='ghost' icon='verified' iconPosition='left' loading />
       </div>
-      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
           <span style="text-align: center; color: green;">Only-Text Style</span>
           <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left'/>
           <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right'/>
           <PsButton label='Text Only' layout='onlytext'/>
           <PsButton label='Disabled' layout='onlytext' icon='verified' iconPosition='left' disabled/>
+          <PsButton label='Loading Only-Text' layout='onlytext' icon='verified' iconPosition='left' loading />
       </div>
-      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
           <span style="text-align: center; color: red;">Caution Button</span>
           <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left'/>
           <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right'/>
           <PsButton label='Text Only' layout='caution' />
           <PsButton label='Disabled' layout='caution' icon='verified' iconPosition='left' disabled/>
+          <PsButton label='Loading Caution' layout='caution' icon='verified' iconPosition='left' loading />
     </div>
 
 
     </div>
     <p>Size: Medium</p>
     <div style="display: flex; flex-direction: column; gap: 10px;">
-      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
           <span style="text-align: center; color: black;">Solid Style</span>
           <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='medium'/>
           <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='medium'/>
           <PsButton label='Text Only' layout='solid'  size='medium'/>
           <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='medium'/>
       </div>
-      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
           <span style="text-align: center; color: blue;">Outline Style</span>
           <PsButton label='Left Icon' layout='outline' icon='verified' iconPosition='left' size='medium'/>
           <PsButton label='Right Icon' layout='outline' icon='verified' iconPosition='right' size='medium'/>
           <PsButton label='Text Only' layout='outline' size='medium'/>
           <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled size='medium'/>
       </div>
-      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
           <span style="text-align: center; color: brown;">Ghost Style</span>
           <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left' size='medium'/>
           <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right' size='medium'/>
           <PsButton label='Text Only' layout='ghost' size='medium'/>
           <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled size='medium'/>
       </div>
-      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
           <span style="text-align: center; color: green;">Only-Text Style</span>
           <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='medium'/>
           <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='medium'/>
           <PsButton label='Text Only' layout='onlytext' size='medium'/>
           <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='medium'/>
       </div>
-      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
           <span style="text-align: center; color: red;">Caution Button</span>
           <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='medium'/>
           <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='medium'/>
@@ -96,21 +101,21 @@ const TemplateDefault = (args, { argTypes }) => ({
     </div>
     <p>Size: Small</p>
     <div style="display: flex; flex-direction: column; gap: 10px;">
-      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
           <span style="text-align: center; color: black;">Solid Style</span>
           <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='small'/>
           <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='small'/>
           <PsButton label='Text Only' layout='solid' size='small'/>
           <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='small'/>
       </div>
-      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
           <span style="text-align: center; color: green;">Only-Text Style</span>
           <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='small'/>
           <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='small'/>
           <PsButton label='Text Only' layout='onlytext' size='small'/>
           <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='small'/>
       </div>
-      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
           <span style="text-align: center; color: red;">Caution Button</span>
           <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='small'/>
           <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='small'/>

package/src/stories/CheckboxSimple.stories.js

@@ -1,7 +1,7 @@
 import PsCheckboxSimple from '../components/controls/PsCheckboxSimple.vue'
 // const icons = ['add_circle', 'delete', 'done', 'info', 'send']
 export default {
-  title: 'Components/CheckboxSimple',
+  title: 'Components/Inputs V2/Checkbox',
   component: PsCheckboxSimple,
 }
 
@@ -23,8 +23,8 @@ const defaultTemplate = (args, {argTypes}) => ({
       <div style='display:flex; flex-direction:column; gap:5px;'>
         <p>Active</p>
         <div style='display: flex; flex-direction:column; gap: 10px;'>
-          <PsCheckboxSimple v-bind="$props" label='Label 3'  checked />
-          <PsCheckboxSimple v-bind="$props" label='Label 4'  checked size='small'/>
+          <PsCheckboxSimple v-bind="$props" label='Label 3' checked />
+          <PsCheckboxSimple v-bind="$props" label='Label 4' checked size='small'/>
         </div>
       </div>
       <div style='display:flex; flex-direction:column; gap:5px;'>
@@ -37,8 +37,9 @@ const defaultTemplate = (args, {argTypes}) => ({
       <div style='display:flex; flex-direction:column; gap:5px;'>
         <p>Disabled</p>
         <div style='display: flex; flex-direction:column; gap: 10px;'>
-          <PsCheckboxSimple v-bind="$props" label='Label 7' disabled/>
-          <PsCheckboxSimple v-bind="$props" label='Label 8' size='small' disabled/>
+          <PsCheckboxSimple v-bind="$props" label='Input via inputAttrs' :inputAttrs="{ id: 'my-input-id' }" disabled/>
+          <PsCheckboxSimple v-bind="$props" label='Input via component id' size='small' id="my-component-id" data-test="test" disabled/>
+          <PsCheckboxSimple v-bind="$props" label='Input fallback' size='small' disabled/>
         </div>
       </div>
     </div>

package/tailwind.config.js

@@ -4,7 +4,7 @@ module.exports = {
   darkMode: false, // or 'media' or 'class'
   theme: {
     colors: {
-      'white': '#ffffff !important',
+      'white': '#ffffff ',
       'gray-10': '#F3F6F9',
       'gray-20': '#E6ECF2',
       'gray-30': '#D6DDE5',

package/vetur/attributes.json

@@ -39,6 +39,44 @@
     "type": "string",
     "description": "It sets the text key to get the svg icon in Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/."
   },
+  "ps-badge-with-icon/icon": {
+    "type": "string"
+  },
+  "PsBadgeWithIcon/icon": {
+    "type": "string"
+  },
+  "ps-badge-with-icon/iconClass": {
+    "type": "string",
+    "description": "It set any further css style that might be needed."
+  },
+  "PsBadgeWithIcon/iconClass": {
+    "type": "string",
+    "description": "It set any further css style that might be needed."
+  },
+  "ps-badge-with-icon/message": {
+    "type": "string"
+  },
+  "PsBadgeWithIcon/message": {
+    "type": "string"
+  },
+  "ps-badge-with-icon/layout": {
+    "type": "string",
+    "options": [
+      "grey",
+      "blue",
+      "green",
+      "yellow"
+    ]
+  },
+  "PsBadgeWithIcon/layout": {
+    "type": "string",
+    "options": [
+      "grey",
+      "blue",
+      "green",
+      "yellow"
+    ]
+  },
   "ps-card-infos/title": {
     "type": "string",
     "description": "It sets the title of your card."
@@ -143,7 +181,12 @@
       "success",
       "warning",
       "error",
-      "default"
+      "default",
+      "solid-info",
+      "solid-success",
+      "solid-warning",
+      "solid-error",
+      "solid-default"
     ]
   },
   "PsMiniTag/layout": {
@@ -154,7 +197,12 @@
       "success",
       "warning",
       "error",
-      "default"
+      "default",
+      "solid-info",
+      "solid-success",
+      "solid-warning",
+      "solid-error",
+      "solid-default"
     ]
   },
   "ps-mini-tag/message": {
@@ -362,18 +410,18 @@
     "description": "It sets the label of the checkbox input."
   },
   "ps-checkbox/inputValue": {
-    "type": "string",
+    "type": "string|boolean",
     "description": "It sets the value which should be monitored."
   },
   "PsCheckbox/inputValue": {
-    "type": "string",
+    "type": "string|boolean",
     "description": "It sets the value which should be monitored."
   },
   "ps-checkbox/value": {
-    "type": "array"
+    "type": "array|boolean"
   },
   "PsCheckbox/value": {
-    "type": "array"
+    "type": "array|boolean"
   },
   "ps-checkbox/disabled": {
     "type": "boolean",
@@ -415,6 +463,60 @@
       "mixed"
     ]
   },
+  "ps-checkbox-simple/label": {
+    "type": "string",
+    "description": "It sets the label of the checkbox input."
+  },
+  "PsCheckboxSimple/label": {
+    "type": "string",
+    "description": "It sets the label of the checkbox input."
+  },
+  "ps-checkbox-simple/disabled": {
+    "type": "boolean",
+    "description": "It disables the checkbox input."
+  },
+  "PsCheckboxSimple/disabled": {
+    "type": "boolean",
+    "description": "It disables the checkbox input."
+  },
+  "ps-checkbox-simple/checked": {
+    "type": "boolean"
+  },
+  "PsCheckboxSimple/checked": {
+    "type": "boolean"
+  },
+  "ps-checkbox-simple/size": {
+    "type": "string",
+    "description": "It set the of the checkbox input. eg: big and small.",
+    "options": [
+      "big",
+      "small"
+    ]
+  },
+  "PsCheckboxSimple/size": {
+    "type": "string",
+    "description": "It set the of the checkbox input. eg: big and small.",
+    "options": [
+      "big",
+      "small"
+    ]
+  },
+  "ps-checkbox-simple/layout": {
+    "type": "string",
+    "description": "It set the layout of the checkbox input. eg: default and mixed.",
+    "options": [
+      "default",
+      "mixed"
+    ]
+  },
+  "PsCheckboxSimple/layout": {
+    "type": "string",
+    "description": "It set the layout of the checkbox input. eg: default and mixed.",
+    "options": [
+      "default",
+      "mixed"
+    ]
+  },
   "ps-draggable/getColumns": {
     "type": "object",
     "description": "It sets the data that will be used."
@@ -431,6 +533,14 @@
     "type": "string",
     "description": "It sets the module which will be used to set getters and actions."
   },
+  "ps-draggable/disabled": {
+    "type": "boolean",
+    "description": "It disables the input. All mouse events are disabled."
+  },
+  "PsDraggable/disabled": {
+    "type": "boolean",
+    "description": "It disables the input. All mouse events are disabled."
+  },
   "ps-inline-selector/width": {
     "type": "number",
     "description": "It sets the default width of the inline selector."
@@ -529,6 +639,12 @@
     "type": "string",
     "description": "It sets the placeholder of the component."
   },
+  "ps-radio-button/inputId": {
+    "type": "string"
+  },
+  "PsRadioButton/inputId": {
+    "type": "string"
+  },
   "ps-radio-button/label": {
     "type": "string",
     "description": "It sets the label of the radio button."
@@ -538,18 +654,18 @@
     "description": "It sets the label of the radio button."
   },
   "ps-radio-button/inputValue": {
-    "type": "string",
+    "type": "string|object",
     "description": "It's the value of the checkbox"
   },
   "PsRadioButton/inputValue": {
-    "type": "string",
+    "type": "string|object",
     "description": "It's the value of the checkbox"
   },
   "ps-radio-button/value": {
-    "type": "string"
+    "type": "string|object"
   },
   "PsRadioButton/value": {
-    "type": "string"
+    "type": "string|object"
   },
   "ps-radio-button/disabled": {
     "type": "boolean",
@@ -639,6 +755,14 @@
     "type": "boolean",
     "description": "It sets the value of the switch button."
   },
+  "ps-switch/disabled": {
+    "type": "boolean",
+    "description": "It sets disabling mode."
+  },
+  "PsSwitch/disabled": {
+    "type": "boolean",
+    "description": "It sets disabling mode."
+  },
   "ps-switch/size": {
     "type": "string",
     "description": "It sets the size of the switch button. eg: small and big.",
@@ -885,61 +1009,61 @@
     "type": "boolean",
     "description": "It sets a active css class based on a boolean property."
   },
-  "ps-select-input/items": {
+  "ps-input-select/items": {
     "type": "",
     "description": "It sets the items which will be rendered within the select input."
   },
-  "PsSelectInput/items": {
+  "PsInputSelect/items": {
     "type": "",
     "description": "It sets the items which will be rendered within the select input."
   },
-  "ps-select-input/value": {
+  "ps-input-select/value": {
     "type": "string"
   },
-  "PsSelectInput/value": {
+  "PsInputSelect/value": {
     "type": "string"
   },
-  "ps-select-input/label": {
+  "ps-input-select/label": {
     "type": "string",
     "description": "It sets the value label of the select input if needed."
   },
-  "PsSelectInput/label": {
+  "PsInputSelect/label": {
     "type": "string",
     "description": "It sets the value label of the select input if needed."
   },
-  "ps-select-input/optionalLabel": {
+  "ps-input-select/optionalLabel": {
     "type": "string",
     "description": "It sets a o optional label below the select input."
   },
-  "PsSelectInput/optionalLabel": {
+  "PsInputSelect/optionalLabel": {
     "type": "string",
     "description": "It sets a o optional label below the select input."
   },
-  "ps-select-input/keyLabel": {
+  "ps-input-select/keyLabel": {
     "type": "string",
     "description": "It sets the key label of your items if needed."
   },
-  "PsSelectInput/keyLabel": {
+  "PsInputSelect/keyLabel": {
     "type": "string",
     "description": "It sets the key label of your items if needed."
   },
-  "ps-select-input/keyValue": {
+  "ps-input-select/keyValue": {
     "type": "string",
     "description": "It sets the key value of yout items if needed."
   },
-  "PsSelectInput/keyValue": {
+  "PsInputSelect/keyValue": {
     "type": "string",
     "description": "It sets the key value of yout items if needed."
   },
-  "ps-select-input/disabled": {
+  "ps-input-select/disabled": {
     "type": "boolean",
     "description": "It disables the select input. All mouse events are disabled."
   },
-  "PsSelectInput/disabled": {
+  "PsInputSelect/disabled": {
     "type": "boolean",
     "description": "It disables the select input. All mouse events are disabled."
   },
-  "ps-select-input/layout": {
+  "ps-input-select/layout": {
     "type": "string",
     "description": "It sets the layout of the select input. eg: default and mini.",
     "options": [
@@ -947,7 +1071,7 @@
       "mini"
     ]
   },
-  "PsSelectInput/layout": {
+  "PsInputSelect/layout": {
     "type": "string",
     "description": "It sets the layout of the select input. eg: default and mini.",
     "options": [
@@ -1325,22 +1449,6 @@
     "type": "number|string",
     "description": "It sets the size of the icon."
   },
-  "app-icon/width": {
-    "type": "number|string",
-    "description": "It sets the width of the icon."
-  },
-  "AppIcon/width": {
-    "type": "number|string",
-    "description": "It sets the width of the icon."
-  },
-  "app-icon/height": {
-    "type": "number|string",
-    "description": "It sets the height of the icon."
-  },
-  "AppIcon/height": {
-    "type": "number|string",
-    "description": "It sets the height of the icon."
-  },
   "app-icon/stroke": {
     "type": "string",
     "description": "It sets fill property of the icon."

package/vetur/tags.json

@@ -27,6 +27,24 @@
     ],
     "description": ""
   },
+  "ps-badge-with-icon": {
+    "attributes": [
+      "icon",
+      "iconClass",
+      "message",
+      "layout"
+    ],
+    "description": ""
+  },
+  "PsBadgeWithIcon": {
+    "attributes": [
+      "icon",
+      "iconClass",
+      "message",
+      "layout"
+    ],
+    "description": ""
+  },
   "ps-card-infos": {
     "attributes": [
       "title",
@@ -199,17 +217,39 @@
     ],
     "description": ""
   },
+  "ps-checkbox-simple": {
+    "attributes": [
+      "label",
+      "disabled",
+      "checked",
+      "size",
+      "layout"
+    ],
+    "description": ""
+  },
+  "PsCheckboxSimple": {
+    "attributes": [
+      "label",
+      "disabled",
+      "checked",
+      "size",
+      "layout"
+    ],
+    "description": ""
+  },
   "ps-draggable": {
     "attributes": [
       "getColumns",
-      "module"
+      "module",
+      "disabled"
     ],
     "description": ""
   },
   "PsDraggable": {
     "attributes": [
       "getColumns",
-      "module"
+      "module",
+      "disabled"
     ],
     "description": ""
   },
@@ -251,6 +291,7 @@
   },
   "ps-radio-button": {
     "attributes": [
+      "inputId",
       "label",
       "inputValue",
       "value",
@@ -261,6 +302,7 @@
   },
   "PsRadioButton": {
     "attributes": [
+      "inputId",
       "label",
       "inputValue",
       "value",
@@ -299,6 +341,7 @@
     "attributes": [
       "label",
       "value",
+      "disabled",
       "size"
     ],
     "description": ""
@@ -307,6 +350,7 @@
     "attributes": [
       "label",
       "value",
+      "disabled",
       "size"
     ],
     "description": ""
@@ -427,7 +471,7 @@
     ],
     "description": ""
   },
-  "ps-select-input": {
+  "ps-input-select": {
     "attributes": [
       "items",
       "value",
@@ -440,7 +484,7 @@
     ],
     "description": ""
   },
-  "PsSelectInput": {
+  "PsInputSelect": {
     "attributes": [
       "items",
       "value",
@@ -517,6 +561,14 @@
     ],
     "description": ""
   },
+  "ps-scroll-bar": {
+    "attributes": [],
+    "description": ""
+  },
+  "PsScrollBar": {
+    "attributes": [],
+    "description": ""
+  },
   "ps-tab-header": {
     "attributes": [
       "layout",
@@ -605,8 +657,6 @@
       "type",
       "iconClasses",
       "size",
-      "width",
-      "height",
       "stroke",
       "color",
       "loaderIcon",
@@ -620,8 +670,6 @@
       "type",
       "iconClasses",
       "size",
-      "width",
-      "height",
       "stroke",
       "color",
       "loaderIcon",