fix: Disable selected items when MultiComboBox is disabled (#1544)

* fix: if MultiComboBox is disabled, the selected items should be disabled * fix: set CircleIcon color to inherit fix: set CircleIcon color to inherit
kufu · May 24, 2021 · 8edb9e0 · 8edb9e0
1 parent bd3011c
commit 8edb9e0
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 18 deletions.
diff --git a/src/components/ComboBox/ComboBox.stories.tsx b/src/components/ComboBox/ComboBox.stories.tsx
@@ -175,6 +175,10 @@ Creatable.parameters = {
 }
 
 export const Disabled: Story = () => {
+  const [multiItems, setMultiItems] = useState(defaultItems)
+  const [multiSelected, setMultiSelected] = useState<Item[]>([])
+  const [seq, setSeq] = useState(0)
+
   return (
     <List>
       <dt>Single</dt>
@@ -192,14 +196,46 @@ export const Disabled: Story = () => {
       <dt>Multi</dt>
       <dd>
         <MultiComboBox
-          items={[]}
-          selectedItems={[]}
+          items={multiItems}
+          selectedItems={[
+            {
+              label: 'option 1',
+              value: 'value-1',
+            },
+          ]}
           disabled
           placeholder="Disabled"
           width={400}
-          onAdd={action('onAdd')}
-          onDelete={action('onDelete')}
-          onSelect={action('onSelect')}
+          onAdd={(label) => {
+            setMultiItems([
+              ...multiItems,
+              {
+                label: label,
+                value: `new-value-${seq}`,
+                disabled: label === 'disabled',
+              },
+            ])
+            setMultiSelected([
+              ...multiSelected,
+              {
+                label,
+                value: `new-value-${seq}`,
+              },
+            ])
+            setSeq(seq + 1)
+          }}
+          onDelete={({ value }) => {
+            setMultiSelected(multiSelected.filter((item) => item.value !== value))
+          }}
+          onSelect={({ value, label }) => {
+            setMultiSelected([
+              ...multiSelected,
+              {
+                value,
+                label,
+              },
+            ])
+          }}
         />
       </dd>
     </List>

diff --git a/src/components/ComboBox/MultiComboBox.tsx b/src/components/ComboBox/MultiComboBox.tsx
@@ -183,21 +183,18 @@ export const MultiComboBox: FC<Props> = ({
         <List themes={theme}>
           {selectedItems.map(({ value, label, deletable = true }, i) => (
             <li key={i}>
-              <SelectedItem themes={theme}>
+              <SelectedItem themes={theme} disabled={disabled}>
                 <SelectedItemLabel themes={theme}>{label}</SelectedItemLabel>
 
                 {deletable && (
                   <DeleteButton
                     type="button"
                     themes={theme}
                     className={DELETE_BUTTON_CLASS_NAME}
+                    disabled={disabled}
                     onClick={() => onDelete({ value, label })}
                   >
-                    <FaTimesCircleIcon
-                      size={11}
-                      color={theme.palette.TEXT_BLACK}
-                      visuallyHiddenText="delete"
-                    />
+                    <FaTimesCircleIcon size={11} color={'inherit'} visuallyHiddenText="delete" />
                   </DeleteButton>
                 )}
               </SelectedItem>
@@ -320,16 +317,16 @@ const List = styled.ul<{ themes: Theme }>`
     `
   }}
 `
-const SelectedItem = styled.div<{ themes: Theme }>`
-  ${({ themes }) => {
+const SelectedItem = styled.div<{ themes: Theme; disabled: boolean }>`
+  ${({ themes, disabled }) => {
     const { border, color, fontSize, spacingByChar } = themes
 
     return css`
       display: flex;
       border-radius: calc(${fontSize.SHORT}px + (${spacingByChar(0.5)} - ${borderWidth}px) * 2);
       border: ${border.shorthand};
-      background-color: #fff;
-      color: ${color.TEXT_BLACK};
+      background-color: ${disabled ? color.disableColor('#fff') : '#fff'};
+      color: ${disabled ? color.TEXT_DISABLED : color.TEXT_BLACK};
       font-size: ${fontSize.SHORT}px;
       line-height: 1;
     `
@@ -342,12 +339,12 @@ const SelectedItemLabel = styled.span<{ themes: Theme }>`
     `
   }}
 `
-const DeleteButton = styled(ResetButton)<{ themes: Theme }>`
-  ${({ themes: { spacingByChar, shadow } }) => {
+const DeleteButton = styled(ResetButton)<{ themes: Theme; disabled: boolean }>`
+  ${({ themes: { spacingByChar, shadow }, disabled }) => {
     return css`
       padding: calc(${spacingByChar(0.5)} - ${borderWidth}px);
       border-radius: 50%;
-      cursor: pointer;
+      cursor: ${disabled ? 'not-allowed' : 'pointer'};
       line-height: 0;
 
       &:focus {