@platformatic/ui-components 0.3.0 → 0.3.1

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 (10) hide show
  1. package/dist/assets/index-BJ-rQoWR.css +1 -0
  2. package/dist/assets/index-CEKWpFeX.js +40 -0
  3. package/dist/index.html +2 -2
  4. package/package.json +1 -1
  5. package/src/components/Common.module.css +27 -1
  6. package/src/components/forms/Select.jsx +7 -6
  7. package/src/components/forms/Select.module.css +1 -4
  8. package/src/components/forms/SelectWithInput.module.css +1 -1
  9. package/dist/assets/index-Dxmu61J7.js +0 -40
  10. package/dist/assets/index-hpqA85gS.css +0 -1
package/dist/index.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>Platformatic UI Components</title>
7
- <script type="module" crossorigin src="/assets/index-Dxmu61J7.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-hpqA85gS.css">
7
+ <script type="module" crossorigin src="/assets/index-CEKWpFeX.js"></script>
8
+ <link rel="stylesheet" crossorigin href="/assets/index-BJ-rQoWR.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
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.3.0",
4
+ "version": "0.3.1",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Common.module.css CHANGED
@@ -133,28 +133,54 @@
133
133
  .padded {
134
134
  @apply px-2 py-2.5;
135
135
  }
136
-
137
136
  .text--error-red {
138
137
  @apply text-error-red
139
138
  }
139
+ .text--error-red-70 {
140
+ @apply text-error-red/70
141
+ }
140
142
  .text--white {
141
143
  @apply text-white
142
144
  }
145
+ .text--white-70 {
146
+ @apply text-white/70;
147
+ }
143
148
  .text--dark-green {
144
149
  @apply text-dark-green;
145
150
  }
151
+ .text--dark-green-70 {
152
+ @apply text-dark-green/70;
153
+ }
146
154
  .text--main-green {
147
155
  @apply text-main-green;
148
156
  }
157
+ .text--main-green-70 {
158
+ @apply text-main-green/70;
159
+ }
149
160
  .text--light-green {
150
161
  @apply text-light-green;
151
162
  }
163
+ .text--light-green-70 {
164
+ @apply text-light-green/70;
165
+ }
152
166
  .text--main-dark-blue {
153
167
  @apply text-main-dark-blue;
154
168
  }
169
+ .text--main-dark-blue-70 {
170
+ @apply text-main-dark-blue/70;
171
+ }
155
172
  .text--light-blue {
156
173
  @apply text-light-blue;
157
174
  }
175
+ .text--light-blue-70 {
176
+ @apply text-light-blue/70;
177
+ }
178
+ .text--rich-black {
179
+ @apply text-rich-black;
180
+ }
181
+ .text--rich-black-70 {
182
+ @apply text-rich-black/70;
183
+ }
158
184
 
159
185
  .text--base {
160
186
  @apply text-base
package/src/components/forms/Select.jsx CHANGED
@@ -39,7 +39,6 @@ function Select ({
39
39
  let optionsClassName = `${styles.options} ${defaultOptionsClassName} `
40
40
  inputClassName += ' ' + commonStyles[`background-color-${backgroundColor}`]
41
41
  optionsClassName += commonStyles[`background-color-${backgroundColor}`]
42
- const optionSelectedClassName = styles.optionSelected
43
42
 
44
43
  if (borderListColor) {
45
44
  optionsClassName += ' ' + styles['bordered-options']
@@ -50,7 +49,9 @@ function Select ({
50
49
  singleOptionClassName += ` ${styles['bordered-bottom']}`
51
50
  }
52
51
 
53
- const optionSpanClassName = commonStyles[`text--${mainColor}`]
52
+ const optionSpanClassName = commonStyles[`text--${mainColor}-70`]
53
+ const optionSpanClassNameSelected = commonStyles[`text--${mainColor}`]
54
+ const descriptionClassName = commonStyles[`text--${mainColor}`]
54
55
 
55
56
  const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
56
57
 
@@ -110,7 +111,7 @@ function Select ({
110
111
  function renderLi (option, index, isOptionSelected) {
111
112
  return (
112
113
  <li
113
- key={index} className={`${isOptionSelected ? optionSelectedClassName : singleOptionClassName}`} onClick={() => {
114
+ key={index} className={singleOptionClassName} onClick={() => {
114
115
  if (option.notSelectable) {
115
116
  return handleNotSelectable(option.onClick && option.onClick())
116
117
  }
@@ -118,10 +119,10 @@ function Select ({
118
119
  }}
119
120
  >
120
121
  <div className={styles.liContent}>
121
- {option.iconName && <PlatformaticIcon iconName={option.iconName} color={option.iconColor || mainColor} size={option.iconSize ?? SMALL} onClick={null} />}
122
- <span className={optionSpanClassName}>{option.label}</span>
122
+ {option.iconName && <PlatformaticIcon iconName={option.iconName} color={option.iconColor || mainColor} size={option.iconSize ?? SMALL} onClick={null} inactive={!isOptionSelected} />}
123
+ <span className={isOptionSelected ? optionSpanClassNameSelected : optionSpanClassName}>{option.label}</span>
123
124
  </div>
124
- {option.descriptionValue && <span className={`${optionSpanClassName} ${styles.descriptionValue}`}>{option.descriptionValue}</span>}
125
+ {option.descriptionValue && <span className={`${descriptionClassName} ${styles.descriptionValue}`}>{option.descriptionValue}</span>}
125
126
  </li>
126
127
  )
127
128
  }
package/src/components/forms/Select.module.css CHANGED
@@ -23,10 +23,7 @@
23
23
  @apply border border-solid rounded
24
24
  }
25
25
  .option {
26
- @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4;
27
- }
28
- .optionSelected {
29
- @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4 bg-white/15;
26
+ @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4 rounded;
30
27
  }
31
28
  .bordered-bottom {
32
29
  @apply border-b
package/src/components/forms/SelectWithInput.module.css CHANGED
@@ -23,7 +23,7 @@
23
23
  @apply border border-solid rounded
24
24
  }
25
25
  .option {
26
- @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4;
26
+ @apply font-light cursor-pointer z-10 flex flex-row justify-between items-center px-4 rounded;
27
27
  }
28
28
  .bordered-bottom {
29
29
  @apply border-b