@platformatic/ui-components 0.1.116 → 0.1.117

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.116",
+  "version": "0.1.117",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/Button.jsx

@@ -18,6 +18,7 @@ function Button ({
   bordered,
   fullWidth,
   platformaticIcon,
+  platformaticIconAfter,
   selected,
   ...rest
 }) {
@@ -46,8 +47,9 @@ function Button ({
   if (selected) buttonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
   return (
     <button className={buttonClassName} disabled={disabled} alt={label} {...rest}>
-      {platformaticIcon ? <PlatformaticIcon iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} /> : null}
+      {platformaticIcon ? <PlatformaticIcon key='left' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} /> : null}
       <span className={styles.label}>{label}</span>
+      {platformaticIconAfter ? <PlatformaticIcon key='right' iconName={platformaticIconAfter.iconName} color={platformaticIconAfter.color} data-testid='button-icon' onClick={null} /> : null}
     </button>
   )
 }
@@ -94,12 +96,19 @@ Button.propTypes = {
    */
   fullWidth: PropTypes.bool,
   /**
-   * platformaticIcon: should be removed once we use totally our icons
+   * platformaticIcon: should be removed
    */
   platformaticIcon: PropTypes.shape({
     iconName: PropTypes.string,
     color: PropTypes.string
   }),
+  /**
+   * platformaticIconAfter: should be removed
+   */
+  platformaticIconAfter: PropTypes.shape({
+    iconName: PropTypes.string,
+    color: PropTypes.string
+  }),
   /**
    * Selected: default false
    */

package/src/components/forms/Input.module.css

@@ -40,5 +40,6 @@
 }
 .input.active,
 .input:focus {
-  @apply shadow-main-dark-blue outline-none;
+  @apply shadow-main-dark-blue;
+  outline: none;
 }

package/src/components/forms/Password.module.css

@@ -30,5 +30,6 @@
 }
 .password.active,
 .password:focus {
-  @apply shadow-main-dark-blue outline-none;
+  @apply shadow-main-dark-blue;
+  outline: none;
 }

package/src/components/forms/RadioGroup.module.css

@@ -17,7 +17,8 @@
 }
 .radio.active,
 .radio:focus {
-  @apply shadow-main-dark-blue outline-none;
+  @apply shadow-main-dark-blue;
+  outline: none;
 }
 
 input[type="radio"] {

package/src/components/forms/Select.jsx

@@ -6,7 +6,20 @@ import commonStyles from '../Common.module.css'
 import { MAIN_DARK_BLUE, MAIN_GREEN, SMALL } from '../constants'
 import PlatformaticIcon from '../PlatformaticIcon'
 
-function Select ({ placeholder, name, value, options, borderColor, errorMessage, onChange, onSelect, onClear, disabled, optionsIconColor }) {
+function Select ({
+  placeholder,
+  name,
+  value,
+  options,
+  borderColor,
+  errorMessage,
+  onChange,
+  onSelect,
+  onClear,
+  disabled,
+  optionsIconColor,
+  optionSelected
+}) {
   const inputRef = useRef()
   const [showOptions, setShowOptions] = useState(false)
   const [isSelected, setIsSelected] = useState(false)
@@ -43,6 +56,12 @@ function Select ({ placeholder, name, value, options, borderColor, errorMessage,
     }
   }, [value])
 
+  useEffect(() => {
+    if (optionSelected) {
+      setSelected(optionSelected)
+    }
+  }, [optionSelected])
+
   function renderLi (option, index) {
     return (
       <li
@@ -169,7 +188,17 @@ Select.propTypes = {
   /**
    * optionsIconColor
    */
-  optionsIconColor: PropTypes.string
+  optionsIconColor: PropTypes.string,
+  /**
+   * optionSelected
+   */
+  optionSelected: PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ])
+  })
 }
 
 Select.defaultProps = {
@@ -184,7 +213,8 @@ Select.defaultProps = {
   onSelect: () => {},
   onClear: () => {},
   disabled: false,
-  optionsIconColor: MAIN_DARK_BLUE
+  optionsIconColor: MAIN_DARK_BLUE,
+  optionSelected: null
 }
 
 export default Select

package/src/components/forms/Select.module.css

@@ -9,7 +9,8 @@
 }
 .select.active,
 .select:focus {
-  @apply shadow-main-dark-blue outline-none;
+  @apply shadow-main-dark-blue;
+  outline: none;
 }
 .options {
   @apply absolute left-0 top-[42px] bg-white w-full max-h-[216px] overflow-y-scroll z-20;

package/src/components/forms/TextArea.module.css

@@ -9,7 +9,8 @@
 }
 .textarea.active,
 .textarea:focus {
-  @apply shadow-main-dark-blue outline-none;
+  @apply shadow-main-dark-blue;
+  outline: none;
 }
 .afterIcon {
   @apply absolute top-[1.25rem] right-[1.25rem]