@platformatic/ui-components 0.1.127 → 0.1.128

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.
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.127",
4
+ "version": "0.1.128",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -52,6 +52,8 @@ function Select ({
52
52
  singleOptionClassName += ` ${styles['bordered-bottom']}`
53
53
  }
54
54
 
55
+ const optionSpanClassName = commonStyles[`text--${mainColor}`]
56
+
55
57
  const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
56
58
  function onFocusClassName () {
57
59
  return inputClassName + ' ' + commonStyles[`bordered--${borderColor}-100`]
@@ -111,8 +113,9 @@ function Select ({
111
113
  >
112
114
  <div className={styles.liContent}>
113
115
  {option.iconName && <PlatformaticIcon iconName={option.iconName} color={mainColor} size={SMALL} onClick={null} />}
114
- <span className={commonStyles[`text--${mainColor}`]}>{option.label}</span>
116
+ <span className={optionSpanClassName}>{option.label}</span>
115
117
  </div>
118
+ {option.descriptionValue && <span className={`${optionSpanClassName} ${styles.descriptionValue}`}>{option.descriptionValue}</span>}
116
119
  </li>
117
120
  )
118
121
  }
@@ -212,7 +215,8 @@ Select.propTypes = {
212
215
  icon: PropTypes.string,
213
216
  notSelectable: PropTypes.bool,
214
217
  notFilterable: PropTypes.bool,
215
- onClick: PropTypes.func
218
+ onClick: PropTypes.func,
219
+ descriptionValue: PropTypes.string
216
220
  })),
217
221
  /**
218
222
  * defaultOptionsClassName
@@ -23,7 +23,7 @@
23
23
  @apply border border-solid rounded-md
24
24
  }
25
25
  .option {
26
- @apply w-full font-light cursor-pointer z-10;
26
+ @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4;
27
27
  }
28
28
  .bordered-bottom {
29
29
  @apply border-b
@@ -33,5 +33,8 @@
33
33
  transform: translateY(-50%);
34
34
  }
35
35
  .liContent {
36
- @apply px-4 py-2 inline-flex items-center gap-x-1 relative z-[-1];
36
+ @apply py-2 flex items-center gap-x-1 relative z-[-1] w-auto basis-2/3;
37
+ }
38
+ .descriptionValue {
39
+ @apply opacity-70
37
40
  }