@platformatic/ui-components 0.8.7 → 0.8.8

package/package.json

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

package/src/components/Checkbox.module.css

@@ -1,5 +1,5 @@
 .checkbox {
-  @apply border border-solid rounded-sm relative inline-block m-0;
+  @apply border border-solid rounded-sm relative inline-block m-0 hover:cursor-pointer;
   -webkit-appearance: none;
 }
 

package/src/components/Modal.jsx

@@ -42,13 +42,15 @@ function Modal ({
   childrenClassContainer = '',
   modalCloseClassName = '',
   permanent = false,
-  showCloseButtonOnTop = true
+  showCloseButtonOnTop = true,
+  additionalModalClassName = ''
 }) {
   let contentFullscreen
   let titleFullscreen
-  let modalClassName = `${styles.modal}`
+  let modalClassName = `${styles.modal} `
   modalClassName += ' ' + styles[`modal--${layout}`]
   modalClassName += ' ' + styles[`modal--${size}`]
+  modalClassName += ` ${additionalModalClassName || styles.modalDefaultFlex}`
   let buttonFullRoundedClassName
   const blurRef = useRef()
 
@@ -309,7 +311,11 @@ Modal.propTypes = {
   /**
    * showCloseButtonOnTop: show button on X
    */
-  showCloseButtonOnTop: PropTypes.bool
+  showCloseButtonOnTop: PropTypes.bool,
+  /**
+   * additionalModalClassName: show button on X
+   */
+  additionalModalClassName: PropTypes.string
 }
 
 export default Modal

package/src/components/Modal.module.css

@@ -25,8 +25,12 @@
 .modal {
   @apply p-4 rounded-md mx-auto my-auto max-h-[85vh] overflow-y-auto;
 }
+.modalDefaultFlex {
+  @apply flex flex-col gap-y-2;
+}
 .modal--popup-v2 {
-  @apply bg-rich-black border border-solid border-white/30 flex flex-col gap-y-4;
+  @apply bg-rich-black border border-solid;
+  border-color: rgba(255, 255, 255, .3);
 }
 .modal--popup {
   @apply bg-light-blue;

package/src/components/forms/InputFileUpload.jsx

@@ -5,7 +5,7 @@ import styles from './InputFileUpload.module.css'
 import commonStyles from '../Common.module.css'
 import PlatformaticIcon from '../PlatformaticIcon'
 import Button from '../Button'
-import { ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
+import { ACTIVE_AND_INACTIVE_STATUS, ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
 
 function InputFileUpload ({
   idInputFile = 'fileUpload',
@@ -19,12 +19,13 @@ function InputFileUpload ({
   afterIcon = null,
   backgroundColor = WHITE,
   inputTextClassName = '',
-  detailTextClassName = '',
   verticalPaddingClassName = '',
   dataAttrName = '',
   dataAttrValue = '',
   readOnly = false,
   removeFileButton = {},
+  showDetailButton = true,
+  detailFileButton = {},
   onClickDetail = () => {},
   acceptFiles = '*'
 }) {
@@ -108,7 +109,20 @@ function InputFileUpload ({
           >
             {file !== null ? file.name : <span className={styles.inputPlaceholderClassName}>{inputPlaceholder}</span>}
           </label>
-          {file !== null && <span className={`${styles.afterInputDetail} ${detailTextClassName}`} onClick={() => onClickDetail()}>Detail</span>}
+          {file !== null && showDetailButton && (
+            <div className={styles.afterInputDetail}>
+              <Button
+                textClass={detailFileButton?.textClass ?? ''}
+                paddingClass={detailFileButton?.paddingClass ?? ''}
+                label={detailFileButton?.label ?? 'Details'}
+                color={detailFileButton?.color ?? WHITE}
+                type='button'
+                onClick={() => onClickDetail()}
+                bordered={false}
+                hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
+              />
+            </div>
+          )}
         </div>
         {file !== null && (
           <Button
@@ -211,6 +225,14 @@ InputFileUpload.propTypes = {
    * removeFileButton
   */
   removeFileButton: PropTypes.object,
+  /**
+   * showDetailButton
+  */
+  showDetailButton: PropTypes.bool,
+  /**
+   * detailFileButton
+  */
+  detailFileButton: PropTypes.object,
   /**
      * onClickDetail
     */

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

@@ -1,5 +1,5 @@
 .container {
-  @apply flex w-full h-10 items-center gap-x-2;
+  @apply flex w-full items-center gap-x-2;
 }
 .switch {
   @apply relative inline-block cursor-pointer;