@bitrise/bitkit 12.93.1-alpha.3 → 12.95.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.93.1-alpha.3",
+  "version": "12.95.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Filter/FilterForm/FilterForm.tsx

@@ -146,12 +146,22 @@ const FilterForm = (props: FilterFormProps) => {
             </Text>
           </Radio>
           {items.length
-            ? items.map((opt) => (
-                <Radio key={opt} value={opt}>
-                  {iconsMap && iconsMap[opt] && <Icon name={iconsMap[opt]} />}
-                  {getOptionLabel(opt, optionsMap)}
-                </Radio>
-              ))
+            ? items.map((opt) => {
+                const hasIcon = iconsMap && iconsMap[opt];
+                const label = getOptionLabel(opt, optionsMap);
+                return (
+                  <Radio key={opt} value={opt}>
+                    {hasIcon ? (
+                      <Box alignItems="center" as="span" display="flex" gap="4">
+                        <Icon name={iconsMap[opt]} />
+                        {label}
+                      </Box>
+                    ) : (
+                      label
+                    )}
+                  </Radio>
+                );
+              })
             : getEmptyText()}
         </RadioGroup>
       )}

package/src/Components/Form/Radio/Radio.theme.ts

@@ -50,9 +50,6 @@ const RadioTheme = {
     },
     label: {
       _disabled: { color: 'neutral.60' },
-      alignItems: 'center',
-      display: 'flex',
-      gap: '4',
       userSelect: 'none',
     },
   },

package/src/Components/Form/{ChipInput/ChipInput.tsx → TagsInput/TagsInput.tsx}

@@ -14,7 +14,7 @@ import Tag from '../../Tag/Tag';
 import Text from '../../Text/Text';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
-export interface ChipInputProps extends UsedFormControlProps {
+export interface TagsInputProps extends UsedFormControlProps {
   label?: string;
   placeholder?: string;
   value: string[];
@@ -27,7 +27,7 @@ export interface ChipInputProps extends UsedFormControlProps {
   helperText?: ReactNode;
 }
 
-const ChipInput = ({
+const TagsInput = ({
   errorText,
   helperText,
   invalidValues = [],
@@ -39,8 +39,8 @@ const ChipInput = ({
   separator = /[, ]/,
   value,
   ...rest
-}: ChipInputProps) => {
-  const theme = useStyleConfig('ChipInput');
+}: TagsInputProps) => {
+  const theme = useStyleConfig('TagsInput');
   const keyupHandler: KeyboardEventHandler<HTMLInputElement> = (ev) => {
     const target = ev.currentTarget;
     if (ev.key === 'Backspace' && target.value.length === 0) {
@@ -147,4 +147,4 @@ const ChipInput = ({
   );
 };
 
-export default ChipInput;
+export default TagsInput;

package/src/index.ts

@@ -334,5 +334,5 @@ export * from './Components/Filter/Filter.types';
 export type { DateInputProps } from './Components/Form/DateInput/DateInput';
 export { default as DateInput } from './Components/Form/DateInput/DateInput';
 
-export type { ChipInputProps } from './Components/Form/ChipInput/ChipInput';
-export { default as ChipInput } from './Components/Form/ChipInput/ChipInput';
+export type { TagsInputProps } from './Components/Form/TagsInput/TagsInput';
+export { default as TagsInput } from './Components/Form/TagsInput/TagsInput';

package/src/theme.ts

@@ -54,7 +54,7 @@ import zIndices from './Foundations/Zindex/Zindex';
 import Toggletip from './Components/Toggletip/Toggletip.theme';
 import FilterSwitch from './Components/Filter/FilterSwitch/FilterSwitch.theme';
 import { colors, semanticTokens } from './tokens/tokens';
-import ChipInput from './Components/Form/ChipInput/ChipInput.theme';
+import TagsInput from './Components/Form/TagsInput/TagsInput.theme';
 
 const theme = {
   breakpoints,
@@ -79,7 +79,6 @@ const theme = {
     FilterSwitch,
     ...Form,
     Alert,
-    ChipInput,
     CloseButton,
     CodeBlock,
     CodeSnippet,
@@ -109,6 +108,7 @@ const theme = {
     Table,
     Tabs,
     Tag,
+    TagsInput,
     Text,
     Textarea,
     Toggletip,