fix: adjust optins columns (#1093)

ocean-ds · Mar 26, 2024 · b49ed7c · b49ed7c
1 parent 43b3a1a
commit b49ed7c
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/packages/ocean-core/src/components/_chips.scss b/packages/ocean-core/src/components/_chips.scss
@@ -81,6 +81,7 @@
     padding: $spacing-inset-xxs 0;
     position: absolute;
     top: 38px;
+    width: auto;
 
     &--content {
       align-items: flex-start;
@@ -95,14 +96,18 @@
 
     &--content--columns-2 {
       display: grid;
+      grid-column-gap: 20px;
       grid-template-columns: repeat(2, 1fr);
-      width: 296px;
+      min-width: 296px;
+      width: auto;
     }
 
     &--content--columns-3 {
       display: grid;
+      grid-column-gap: 20px;
       grid-template-columns: repeat(3, 1fr);
-      width: 436px;
+      min-width: 436px;
+      width: auto;
     }
 
     &::-webkit-scrollbar {
@@ -120,6 +125,7 @@
       gap: $spacing-inline-xxs;
       min-height: 40px;
       padding: $spacing-stack-xxs 12px;
+      text-wrap: nowrap;
       width: 100%;
     }
 

diff --git a/packages/ocean-react/src/Chips/Chips.tsx b/packages/ocean-react/src/Chips/Chips.tsx
@@ -18,6 +18,7 @@ interface IChips {
   initialCounter?: number;
   onClick?: () => void;
   onChange?: (value: ChipValue[] | ChipValue) => void;
+  onClose?: () => void;
 }
 
 const Chips: React.FunctionComponent<IChips> = ({
@@ -32,6 +33,7 @@ const Chips: React.FunctionComponent<IChips> = ({
   initialCounter,
   onClick,
   onChange,
+  onClose,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const [counter, setCounter] = React.useState<number>(0);
@@ -46,6 +48,8 @@ const Chips: React.FunctionComponent<IChips> = ({
     if (wrapperRef.current && !wrapperRef.current.contains(target)) {
       setSelectionIsOpen(false);
     }
+
+    if (onClose) onClose();
   }
 
   useEffect(() => {
@@ -54,6 +58,7 @@ const Chips: React.FunctionComponent<IChips> = ({
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [wrapperRef]);
 
   const handleClickChips = () => {
@@ -117,9 +122,7 @@ const Chips: React.FunctionComponent<IChips> = ({
   const filterOptions = () => {
     setSelectionIsOpen(false);
 
-    if (onChange) {
-      onChange(selectedOptions);
-    }
+    if (onClose) onClose();
   };
 
   return (

diff --git a/packages/ocean-react/src/Chips/__tests__/Chips.test.tsx b/packages/ocean-react/src/Chips/__tests__/Chips.test.tsx
@@ -7,9 +7,14 @@ import Chips from '../Chips';
 interface ISetup {
   handleClick?: () => void;
   handleChange?: () => void;
+  handleClose?: () => void;
 }
 
-const multiChoiceSetup = ({ handleClick, handleChange }: ISetup) => {
+const multiChoiceSetup = ({
+  handleClick,
+  handleChange,
+  handleClose,
+}: ISetup) => {
   const options = [
     { label: 'Option 1', value: '1' },
     { label: 'Option 2', value: '2' },
@@ -22,6 +27,7 @@ const multiChoiceSetup = ({ handleClick, handleChange }: ISetup) => {
       options={options}
       onClick={handleClick}
       onChange={handleChange}
+      onClose={handleClose}
       filterLabel="Test Filter"
       clearLabel="Test Clear"
       multiChoice
@@ -184,19 +190,14 @@ describe('Chips', () => {
   });
 
   test('checks filter options button', async () => {
-    const handleChange = jest.fn();
-    multiChoiceSetup({ handleChange });
+    const handleClose = jest.fn();
+    multiChoiceSetup({ handleClose });
 
     await clickInOption('Option 1');
 
     fireEvent.click(screen.getByText('Test Filter'));
 
-    expect(handleChange).toHaveBeenCalledWith([
-      {
-        label: 'Option 1',
-        value: '1',
-      },
-    ]);
+    expect(handleClose).toHaveBeenCalledTimes(1);
 
     expect(() => screen.getByTestId('ods-chips-option')).toThrow(
       'Unable to find an element'
@@ -205,7 +206,8 @@ describe('Chips', () => {
 
   test('checks click outside', async () => {
     const handleClick = jest.fn();
-    multiChoiceSetup({ handleClick });
+    const handleClose = jest.fn();
+    multiChoiceSetup({ handleClick, handleClose });
 
     expect(handleClick).toHaveBeenCalled();
     expect(screen.getByTestId('ods-chips-option')).toBeInTheDocument();
@@ -215,6 +217,7 @@ describe('Chips', () => {
       document.dispatchEvent(addEvent);
     });
 
+    expect(handleClose).toHaveBeenCalledTimes(1);
     expect(() => screen.getByTestId('ods-chips-option')).toThrow(
       'Unable to find an element'
     );

diff --git a/packages/ocean-react/src/Chips/stories/Chips.stories.mdx b/packages/ocean-react/src/Chips/stories/Chips.stories.mdx
@@ -70,6 +70,7 @@ If that's not sufficient, you can check the [implementation of the component](ht
       ],
       onClick: () => null,
       onChange: () => null,
+      onClose: () => null,
     }}
     argTypes={{
       label: {