Release: TagSelect

src/Dropdowns/Dropdown/DefaultValueTemplate.tsx

@@ -69,7 +69,6 @@ export interface DefaultValueTemplateProps
     | 'placeholder'
     | 'clearTooltip'
     | 'clearNullTooltip'
-    | 'editor'
   > {
   displayIcon?: string
   style?: React.CSSProperties
@@ -110,7 +109,7 @@ export const DefaultValueTemplate: FC<DefaultValueTemplateProps> = ({
       {noValue ? (
         <>
           <ContentStyled>
-            <ValueStyled style={{ opacity: 0.5 }}>
+            <ValueStyled style={{ opacity: 0.5 }} className="placeholder">
               {value === null ? nullPlaceholder || '(no value)' : placeholder}
             </ValueStyled>
           </ContentStyled>

src/Dropdowns/Dropdown/Dropdown.tsx

@@ -106,7 +106,6 @@ export interface DropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   buttonProps?: Styled.ButtonType['defaultProps']
   activateKeys?: string[]
   startContent?: (value: string[], selected: string[], isOpen: boolean) => React.ReactNode
-  editor?: boolean
 }
 
 export interface DropdownRef {
@@ -182,7 +181,6 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(
       buttonProps,
       activateKeys = ['Enter', 'Space', 'NumpadEnter', 'Tab'],
       startContent,
-      editor,
       ...props
     },
     ref,
@@ -826,7 +824,7 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(
     const valueTemplateNode = useMemo(() => {
       if (typeof valueTemplate === 'function') return valueTemplate
       if (valueTemplate === 'tags')
-        return () => <TagsValueTemplate {...DefaultValueTemplateProps} editor={editor} />
+        return () => <TagsValueTemplate {...DefaultValueTemplateProps} />
     }, [
       valueTemplate,
       value,

src/Dropdowns/EnumDropdown/EnumDropdown.tsx

@@ -40,7 +40,7 @@ export interface EnumDropdownProps
 }
 
 export const EnumDropdown = forwardRef<DropdownRef, EnumDropdownProps>(
-  ({ colorInverse, value, ...props }, ref) => {
+  ({ colorInverse, value, itemStyle, ...props }, ref) => {
     return (
       <Dropdown
         ref={ref}
@@ -59,7 +59,11 @@ export const EnumDropdown = forwardRef<DropdownRef, EnumDropdownProps>(
           )
         }}
         itemTemplate={(option, isSelected) => (
-          <EnumTemplate option={option} isSelected={isSelected} style={{ paddingLeft: '0.5rem' }} />
+          <EnumTemplate
+            option={option}
+            isSelected={isSelected}
+            style={{ paddingLeft: '0.5rem', paddingRight: '12px', ...itemStyle }}
+          />
         )}
         value={value?.map((v) => String(v))}
         {...props}

src/Dropdowns/TagsSelect/TagsSelect.stories.tsx

@@ -17,6 +17,7 @@ export const Default: Story = {
   args: {
     tags,
     tagsOrder,
+    editor: true,
   },
   render: (args) => {
     const [value, setValue] = useState(initValue)

src/Dropdowns/TagsSelect/TagsSelectValueTemplate.tsx

@@ -3,6 +3,15 @@ import { DefaultValueTemplateProps } from '../Dropdown'
 import * as Styled from './TagsSelect.styled'
 import { type TagsType } from './tags'
 import clsx from 'clsx'
+import styled from 'styled-components'
+import { Icon } from '../../Icon'
+
+const PlaceholderTag = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-small);
+  padding: 0 6px;
+`
 
 export interface TagsSelectValueTemplateProps extends Omit<DefaultValueTemplateProps, 'children'> {
   tags: TagsType
@@ -13,21 +22,28 @@ export const TagsSelectValueTemplate: FC<TagsSelectValueTemplateProps> = (props)
   const { value, tags = {}, editor = false } = props
 
   //   if value empty return placeholder tag
-  if (!value?.length) value?.push('Add tags')
+  if (!value?.length && editor)
+    return (
+      <PlaceholderTag className="placeholder">
+        <Icon icon="sell" />
+        <span>Select tags</span>
+      </PlaceholderTag>
+    )
 
   return (
     <Styled.TagsValueTemplate
       {...props}
       hasError={undefined}
       valueStyle={{ gap: 4, display: 'flex' }}
-      className={clsx({ editor }, props.className)}
+      className={clsx('tags', { editor }, props.className)}
     >
       {value?.map((v) => (
         <Styled.Tag
           key={v}
           style={{
             color: tags[v]?.color,
           }}
+          className="tag"
         >
           {v}
         </Styled.Tag>