@platformatic/ui-components 0.1.135 → 0.1.137

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/Button.jsx +5 -2
  3. package/src/components/forms/Select.jsx +2 -2
  4. package/src/components/forms/Select.module.css +4 -4
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@platformatic/ui-components",
3
3
  "description": "Platformatic UI Components",
4
- "version": "0.1.135",
4
+ "version": "0.1.137",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Button.jsx CHANGED
@@ -22,7 +22,7 @@ function Button ({
22
22
  selected,
23
23
  ...rest
24
24
  }) {
25
- const containerClassName = `${styles.container} ${styles['color-' + color]} ${commonStyles['background-color-' + backgroundColor]}`
25
+ let containerClassName = `${styles.container} ${styles['color-' + color]} ${commonStyles['background-color-' + backgroundColor]} `
26
26
  let buttonClassName = classes
27
27
  buttonClassName += ` ${styles.button} ${commonStyles['background-color-' + backgroundColor]} ${styles['color-' + color]} ${styles['button-' + size]}`
28
28
  if (!bordered) buttonClassName += ` ${styles['no-border']}`
@@ -44,7 +44,10 @@ function Button ({
44
44
  }
45
45
  }
46
46
  if (bold) buttonClassName += ` ${styles.fontBold}`
47
- if (fullWidth) buttonClassName += ` ${styles.fullWidth}`
47
+ if (fullWidth) {
48
+ buttonClassName += ` ${styles.fullWidth}`
49
+ containerClassName += ` ${styles.fullWidth}`
50
+ }
48
51
  if (selected) buttonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
49
52
  return (
50
53
  <div className={containerClassName}>
package/src/components/forms/Select.jsx CHANGED
@@ -173,8 +173,8 @@ function Select ({
173
173
  <div className={styles.selectContainer}>
174
174
  <input type='text' name={name} value={value} className={wrapperClassName} ref={inputRef} onChange={onChange} disabled={disabled} placeholder={placeholder} onFocus={() => handleFocus()} onBlur={(e) => handleBlur(e)} />
175
175
  <div className={styles.icons}>
176
- {value?.length > 0 && <PlatformaticIcon iconName='CloseIcon' color={borderColor} onClick={() => clearValue()} />}
177
- <PlatformaticIcon iconName={showOptions ? 'ArrowUpIcon' : 'ArrowDownIcon'} color={borderColor} onClick={() => disabled ? null : setShowOptions(!showOptions)} />
176
+ {value?.length > 0 && <PlatformaticIcon iconName='CloseIcon' color={borderColor} onClick={() => clearValue()} size={SMALL} />}
177
+ <PlatformaticIcon iconName={showOptions ? 'ArrowUpIcon' : 'ArrowDownIcon'} color={borderColor} onClick={() => disabled ? null : setShowOptions(!showOptions)} size={SMALL} />
178
178
  </div>
179
179
  </div>
180
180
  {showOptions && !showError && renderOptions()}
package/src/components/forms/Select.module.css CHANGED
@@ -1,11 +1,11 @@
1
1
  .container {
2
- @apply flex flex-col w-full relative;
2
+ @apply flex flex-col w-full relative
3
3
  }
4
4
  .selectContainer {
5
- @apply w-full flex items-center h-10 relative z-10;
5
+ @apply w-full flex items-center relative z-10;
6
6
  }
7
7
  .select {
8
- @apply px-2 h-full border border-solid box-border rounded-md ;
8
+ @apply px-2 h-full border border-solid box-border rounded-md py-1.5;
9
9
  }
10
10
 
11
11
  .select-main-dark-blue.active,
@@ -14,7 +14,7 @@
14
14
  }
15
15
  .select-white.active,
16
16
  .select-white:focus {
17
- @apply shadow-white outline-none;
17
+ @apply outline-none;
18
18
  }
19
19
  .options {
20
20
  @apply absolute left-0 top-[42px] w-full max-h-[216px] overflow-y-scroll z-20;