fix(scene composer): fix spacing issue between elements

awslabs · Aug 18, 2023 · b65ebdc · b65ebdc
1 parent 8b2f12f
commit b65ebdc
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/...omposer/src/components/panels/scene-components/tag-style/ColorPicker/ColorPicker.spec.tsx b/...omposer/src/components/panels/scene-components/tag-style/ColorPicker/ColorPicker.spec.tsx
@@ -15,7 +15,7 @@ describe('ColorPicker', () => {
 
   it('calls onSelectColor when color is selected', () => {
     const onSelectColorMock = jest.fn();
-    render(<ColorPicker color='#FFFFFF' onSelectColor={onSelectColorMock} label='Colors' />);
+    render(<ColorPicker color='#FFFFFF' onSelectColor={onSelectColorMock} colorPickerLabel='Colors' />);
     const colorElement = screen.getByTestId('color-preview');
     fireEvent.click(colorElement);
     fireEvent.click(screen.getAllByTitle('#000000')[0]);
@@ -24,7 +24,9 @@ describe('ColorPicker', () => {
 
   it('calls handleHexCodeChange when hex code is entered', async () => {
     const onSelectColorMock1 = jest.fn();
-    const { container } = render(<ColorPicker color='#FFFFFF' onSelectColor={onSelectColorMock1} label='Colors' />);
+    const { container } = render(
+      <ColorPicker color='#FFFFFF' onSelectColor={onSelectColorMock1} colorPickerLabel='Colors' />,
+    );
     const polarisWrapper = wrapper(container);
     const input = polarisWrapper.findInput();
     expect(input).toBeDefined();

diff --git a/...ene-composer/src/components/panels/scene-components/tag-style/ColorPicker/ColorPicker.tsx b/...ene-composer/src/components/panels/scene-components/tag-style/ColorPicker/ColorPicker.tsx
@@ -24,14 +24,15 @@ export const ColorPicker = ({
   onUpdateCustomColors,
   colorPickerLabel,
   customColorLabel,
-}: IColorPickerProps): JSX.Element => {
+}: IColorPickerProps) => {
   const [showPicker, setShowPicker] = useState<boolean>(false);
   const [newColor, setNewColor] = useState<string>(color);
   const [showChromePicker, setShowChromePicker] = useState<boolean>(false);
   const [hexCodeError, setHexCodeError] = useState<string>(''); // State variable for hex code error
   const [customInternalColors, setCustomInternalColors] = useState<string[]>(customColors ?? []);
+  const generateRandomString = Math.random().toString(16).slice(2);
+  const [randomDomId] = useState<string>(generateRandomString);
   const intl = useIntl();
-
   /**
    * This method uses a regular expression (`hexRegex`) to validate a hex color code.
    * The regex checks if the hex code starts with a "#" symbol, followed by either a
@@ -47,7 +48,11 @@ export const ColorPicker = ({
 
   const handleOutsideClick = useCallback((event: MouseEvent) => {
     const target = event.target as HTMLElement;
-    const pickerContainer = document.getElementById('circle-picker');
+    const buttonsvg = document.getElementById('button-svg' + `${randomDomId}`);
+    if (buttonsvg && buttonsvg.contains(target)) {
+      return; // We have a different handler for button click
+    }
+    const pickerContainer = document.getElementById('circle-picker' + `${randomDomId}`);
     if (pickerContainer && !pickerContainer.contains(target)) {
       setShowPicker(false);
     }
@@ -59,7 +64,6 @@ export const ColorPicker = ({
     } else {
       document.removeEventListener('click', handleOutsideClick);
     }
-
     return () => {
       document.removeEventListener('click', handleOutsideClick);
     };
@@ -72,10 +76,6 @@ export const ColorPicker = ({
     }
   };
 
-  const handleClick = () => {
-    setShowPicker(!showPicker);
-  };
-
   const handleShowChromePicker = () => {
     setShowChromePicker(true);
     setShowPicker(false);
@@ -138,12 +138,13 @@ export const ColorPicker = ({
             <h5>{colorPickerLabel}</h5>
           </TextContent>
           <Button
+            id={'button-svg' + `${randomDomId}`}
             data-testid='color-preview'
             ariaLabel={intl.formatMessage({ defaultMessage: 'colorPreview', description: 'color picker preview' })}
             variant='inline-icon'
             iconSvg={<Icon size='big' svg={colorPickerPreviewSvg(newColor)} />}
             onClick={() => {
-              handleClick();
+              setShowPicker(!showPicker);
               setHexCodeError('');
             }}
           />
@@ -153,7 +154,7 @@ export const ColorPicker = ({
             value={newColor}
             onChange={handleHexCodeChange}
           />
-          <div id='circle-picker' style={tmColorPickerContainer}>
+          <div id={'circle-picker' + `${randomDomId}`} style={tmColorPickerContainer}>
             {showPicker && !showChromePicker && (
               <div style={tmColorPickerPopover}>
                 <div>
@@ -167,11 +168,11 @@ export const ColorPicker = ({
                     onChange={handleColorChange}
                   />
                 </div>
-                <SpaceBetween size='s'>
-                  <div style={tmDivider} />
-                  <TextContent>
-                    <h5>{customColorLabel}</h5>
-                  </TextContent>
+                <div style={tmDivider} />
+                <TextContent>
+                  <h5>{customColorLabel}</h5>
+                </TextContent>
+                <SpaceBetween size='xxxs'>
                   <CirclePicker
                     width='300px'
                     colors={[...new Set(customInternalColors)]}