Merge pull request #1997 from habx/feature/APP-22567

`SearchBar` modifications
habx · Aug 6, 2021 · 931e433 · 931e433
2 parents dd2de16 + 64bc8bf
commit 931e433
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 11 deletions.
diff --git a/src/SearchBar/SearchBar.style.ts b/src/SearchBar/SearchBar.style.ts
@@ -13,6 +13,7 @@ export const SearchPanelInputContainer = styled.div`
   align-items: center;
   padding: 0 12px;
   color: ${theme.textColor()};
+  border-bottom: 1px solid ${theme.neutralColor(300)};
 `
 
 export const SearchPanelInputElementLeft = styled.div`
@@ -52,3 +53,8 @@ export const SearchPanelInput = styled.input.attrs(() => ({
 export const SearchPanelContent = styled.div`
   padding: 24px;
 `
+
+export const TriggerElementContainer = styled.div`
+  box-shadow: 0 0 0 4px ${theme.color('primary', { opacity: 0.3 })};
+  border-radius: 4px;
+`
diff --git a/src/SearchBar/SearchPanel.tsx b/src/SearchBar/SearchPanel.tsx
@@ -4,13 +4,15 @@ import * as React from 'react'
 import { Icon } from '../Icon'
 import { TextInputProps } from '../TextInput'
 import { TogglePanelProps, TogglePanelStyleSetter } from '../TogglePanel'
+import { TriggerElement } from '../withTriggerElement'
 
 import {
   SearchPanelContainer,
   SearchPanelInputContainer,
   SearchPanelInput,
   SearchPanelInputElementLeft,
   SearchPanelContent,
+  TriggerElementContainer,
 } from './SearchBar.style'
 
 const setPanelStyle: TogglePanelStyleSetter = (
@@ -29,6 +31,7 @@ const InnerSearchPanel: React.VoidFunctionComponent<InnerSearchPanelProps> = ({
   onChange,
   placeholder,
   renderPanel,
+  triggerElement,
 }) => {
   const inputRef = React.useRef<HTMLInputElement>(null)
 
@@ -58,6 +61,9 @@ const InnerSearchPanel: React.VoidFunctionComponent<InnerSearchPanelProps> = ({
           onChange={onChange}
           placeholder={placeholder}
         />
+        {!!triggerElement && (
+          <TriggerElementContainer>{triggerElement}</TriggerElementContainer>
+        )}
       </SearchPanelInputContainer>
       <SearchPanelContent onClick={handleStopPropagation}>
         {renderPanel()}
@@ -77,14 +83,17 @@ export const SearchPanel: React.VoidFunctionComponent<SearchPanelProps> = ({
     setStyle={setPanelStyle}
   >
     {(modal) =>
-      modal.state !== ModalState.closed && <InnerSearchPanel {...rest} />
+      modal.state !== ModalState.closed && (
+        <InnerSearchPanel triggerElement={triggerElement} {...rest} />
+      )
     }
   </SearchPanelContainer>
 )
 
 interface InnerSearchPanelProps
   extends Pick<TextInputProps, 'value' | 'onChange' | 'placeholder'> {
   renderPanel: () => React.ReactNode
+  triggerElement?: TriggerElement
 }
 
 interface SearchPanelProps

diff --git a/src/TextInput/TextInput.style.ts b/src/TextInput/TextInput.style.ts
@@ -69,4 +69,12 @@ export const IconButton = styled(Icon)`
   &:hover {
     cursor: pointer;
   }
+  font-size: 24px;
+  color: ${theme.textColor()};
+`
+
+export const Line = styled.div`
+  border-left: 1px solid ${theme.neutralColor(300)};
+  margin: 0 8px;
+  height: 24px;
 `
diff --git a/src/TextInput/TextInput.tsx b/src/TextInput/TextInput.tsx
@@ -9,6 +9,7 @@ import {
   IconButton,
   Input,
   InputContainer,
+  Line,
   SideElementContainer,
 } from './TextInput.style'
 
@@ -63,18 +64,20 @@ const InnerTextInput = React.forwardRef<HTMLInputElement, TextInputInnerProps>(
 
         {(elementRight || canReset) && (
           <SideElementContainer data-position="right">
-            {elementRight}
-
             {canReset && value && `${value}`.length > 0 && (
-              <IconButton
-                icon="close"
-                onClick={(e) =>
-                  props.onChange?.({
-                    target: { ...e.target, value: '' },
-                  } as React.ChangeEvent<HTMLInputElement>)
-                }
-              />
+              <>
+                <IconButton
+                  icon="close"
+                  onClick={(e) =>
+                    props.onChange?.({
+                      target: { ...e.target, value: '' },
+                    } as React.ChangeEvent<HTMLInputElement>)
+                  }
+                />
+                {elementRight && <Line />}
+              </>
             )}
+            {elementRight}
           </SideElementContainer>
         )}
       </InputContainer>