From 2b03cb53043ea1e42deb4182ba025bd8b34793ff Mon Sep 17 00:00:00 2001
From: Rahul Singh Thakur <rahulsthakur19@gmail.com>
Date: Tue, 3 Sep 2024 23:36:12 +0530
Subject: [PATCH 01/11] Added flex-wrap to CardControls css

---
 packages/fuselage/src/components/Card/Card.styles.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/fuselage/src/components/Card/Card.styles.scss b/packages/fuselage/src/components/Card/Card.styles.scss
index a8916301be..151dd7f818 100644
--- a/packages/fuselage/src/components/Card/Card.styles.scss
+++ b/packages/fuselage/src/components/Card/Card.styles.scss
@@ -83,4 +83,7 @@ $card-hero-padding: lengths.padding(28);
     display: flex;
     align-items: center;
   }
+  &__controls{
+    flex-wrap: wrap;
+  }
 }

From 497f0dd62e2a8b85ec60110a9fcb6acde310162e Mon Sep 17 00:00:00 2001
From: Rahul Singh Thakur <rahulsthakur19@gmail.com>
Date: Tue, 3 Sep 2024 23:41:15 +0530
Subject: [PATCH 02/11] Changed Cardcontrol component to use Box for similar
 behaviour

---
 .../fuselage/src/components/Card/CardControls.tsx   | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/fuselage/src/components/Card/CardControls.tsx b/packages/fuselage/src/components/Card/CardControls.tsx
index 2346e05b41..4c5c0f2b9d 100644
--- a/packages/fuselage/src/components/Card/CardControls.tsx
+++ b/packages/fuselage/src/components/Card/CardControls.tsx
@@ -1,5 +1,12 @@
-const CardControls = ({ ...props }) => (
-  <div className='rcx-card__controls' {...props} />
-);
+import Box from '../Box/Box';
+
+const CardControls = ({...props }) => {
+  return (
+    <Box
+      rcx-card__controls
+      {...props}
+    />
+  )
+}
 
 export default CardControls;

From b2d67527980e39a798cbe99c51399d65cfa38916 Mon Sep 17 00:00:00 2001
From: Rahul Singh Thakur <rahulsthakur19@gmail.com>
Date: Tue, 3 Sep 2024 23:57:39 +0530
Subject: [PATCH 03/11] Added different behaviour for horizontal cards

Horizontal cards should have flex-wrap only for mobile view
---
 packages/fuselage/src/components/Card/Card.styles.scss | 6 ++++++
 packages/fuselage/src/components/Card/CardControls.tsx | 4 ++++
 2 files changed, 10 insertions(+)

diff --git a/packages/fuselage/src/components/Card/Card.styles.scss b/packages/fuselage/src/components/Card/Card.styles.scss
index 151dd7f818..a78d97c912 100644
--- a/packages/fuselage/src/components/Card/Card.styles.scss
+++ b/packages/fuselage/src/components/Card/Card.styles.scss
@@ -86,4 +86,10 @@ $card-hero-padding: lengths.padding(28);
   &__controls{
     flex-wrap: wrap;
   }
+  &__horizontal &__controls{
+    flex-wrap: nowrap;
+    &--wrap{
+      flex-wrap: wrap;
+    }
+  }
 }
diff --git a/packages/fuselage/src/components/Card/CardControls.tsx b/packages/fuselage/src/components/Card/CardControls.tsx
index 4c5c0f2b9d..3affe624c3 100644
--- a/packages/fuselage/src/components/Card/CardControls.tsx
+++ b/packages/fuselage/src/components/Card/CardControls.tsx
@@ -1,9 +1,13 @@
+import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
 import Box from '../Box/Box';
 
 const CardControls = ({...props }) => {
+  const breakpoints = useBreakpoints();
+  const isMobile = !breakpoints.includes('sm');
   return (
     <Box
       rcx-card__controls
+      rcx-card__controls--wrap={isMobile}
       {...props}
     />
   )

From c74faaa03c7499cdb719bc2b2335016a02a341ea Mon Sep 17 00:00:00 2001
From: Rahul Singh Thakur <rahulsthakur19@gmail.com>
Date: Wed, 18 Sep 2024 22:30:25 +0530
Subject: [PATCH 04/11] prettier and linting issues fixed

---
 .../fuselage/src/components/Card/Card.styles.scss   |  9 ++++++---
 .../fuselage/src/components/Card/CardControls.tsx   | 13 +++++--------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/fuselage/src/components/Card/Card.styles.scss b/packages/fuselage/src/components/Card/Card.styles.scss
index a78d97c912..85393f162c 100644
--- a/packages/fuselage/src/components/Card/Card.styles.scss
+++ b/packages/fuselage/src/components/Card/Card.styles.scss
@@ -83,12 +83,15 @@ $card-hero-padding: lengths.padding(28);
     display: flex;
     align-items: center;
   }
-  &__controls{
+
+  &__controls {
     flex-wrap: wrap;
   }
-  &__horizontal &__controls{
+
+  &__horizontal &__controls {
     flex-wrap: nowrap;
-    &--wrap{
+
+    &--wrap {
       flex-wrap: wrap;
     }
   }
diff --git a/packages/fuselage/src/components/Card/CardControls.tsx b/packages/fuselage/src/components/Card/CardControls.tsx
index 3affe624c3..f0f2745fba 100644
--- a/packages/fuselage/src/components/Card/CardControls.tsx
+++ b/packages/fuselage/src/components/Card/CardControls.tsx
@@ -1,16 +1,13 @@
 import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
+
 import Box from '../Box/Box';
 
-const CardControls = ({...props }) => {
+const CardControls = ({ ...props }) => {
   const breakpoints = useBreakpoints();
   const isMobile = !breakpoints.includes('sm');
   return (
-    <Box
-      rcx-card__controls
-      rcx-card__controls--wrap={isMobile}
-      {...props}
-    />
-  )
-}
+    <Box rcx-card__controls rcx-card__controls--wrap={isMobile} {...props} />
+  );
+};
 
 export default CardControls;

From 7d42b6aa12d166992cd35c45c4ebea9e04196c14 Mon Sep 17 00:00:00 2001
From: Rahul Singh Thakur <rahulsthakur19@gmail.com>
Date: Thu, 19 Sep 2024 01:12:30 +0530
Subject: [PATCH 05/11] Changeset added

---
 .changeset/purple-shirts-boil.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/purple-shirts-boil.md

diff --git a/.changeset/purple-shirts-boil.md b/.changeset/purple-shirts-boil.md
new file mode 100644
index 0000000000..227d387b19
--- /dev/null
+++ b/.changeset/purple-shirts-boil.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+Fixes the responsiveness of the card component by adding flex wrap to card controls such that it can accomodate multiple items without breaking the responsive behaviour

From c01c2db73241cdce1f3d8b09c38bd175fc29cb49 Mon Sep 17 00:00:00 2001
From: Rahul Singh Thakur <65606499+Barrylimarti@users.noreply.github.com>
Date: Thu, 19 Sep 2024 02:49:27 +0530
Subject: [PATCH 06/11] Removed the box implementation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Box is not needed. A better way would be to use the mixin for conditional css.

Co-authored-by: Henrique Guimarães Ribeiro <43561537+rique223@users.noreply.github.com>
---
 .../src/components/Card/CardControls.tsx      | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/fuselage/src/components/Card/CardControls.tsx b/packages/fuselage/src/components/Card/CardControls.tsx
index f0f2745fba..18e98408a8 100644
--- a/packages/fuselage/src/components/Card/CardControls.tsx
+++ b/packages/fuselage/src/components/Card/CardControls.tsx
@@ -1,13 +1,14 @@
-import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
+import type { ReactNode, MouseEvent } from 'react';
 
-import Box from '../Box/Box';
-
-const CardControls = ({ ...props }) => {
-  const breakpoints = useBreakpoints();
-  const isMobile = !breakpoints.includes('sm');
-  return (
-    <Box rcx-card__controls rcx-card__controls--wrap={isMobile} {...props} />
-  );
+type CardControlsProps = {
+  children?: ReactNode;
+  onClick?: (e?: MouseEvent<HTMLOrSVGElement>) => void;
 };
 
+const CardControls = ({ onClick, children }: CardControlsProps) => (
+  <div className='rcx-card__controls' onClick={onClick} children={children} />
+);
+
+export default CardControls;
+
 export default CardControls;

From 23a7cb42fedc47a72723f1afbf424671b7c3e9c5 Mon Sep 17 00:00:00 2001
From: Rahul Singh Thakur <65606499+Barrylimarti@users.noreply.github.com>
Date: Thu, 19 Sep 2024 02:50:01 +0530
Subject: [PATCH 07/11] Added conditional css using mixin
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Henrique Guimarães Ribeiro <43561537+rique223@users.noreply.github.com>
---
 packages/fuselage/src/components/Card/Card.styles.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/fuselage/src/components/Card/Card.styles.scss b/packages/fuselage/src/components/Card/Card.styles.scss
index 85393f162c..70f8debe2d 100644
--- a/packages/fuselage/src/components/Card/Card.styles.scss
+++ b/packages/fuselage/src/components/Card/Card.styles.scss
@@ -89,10 +89,10 @@ $card-hero-padding: lengths.padding(28);
   }
 
   &__horizontal &__controls {
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
 
-    &--wrap {
-      flex-wrap: wrap;
+    @include on-breakpoint(sm) {
+      flex-wrap: nowrap;
     }
   }
 }

From 6a4cdc304eb0b13d767d1ea06f6bab6d5e9f51bc Mon Sep 17 00:00:00 2001
From: Rahul Singh Thakur <rahulsthakur19@gmail.com>
Date: Thu, 19 Sep 2024 11:08:34 +0530
Subject: [PATCH 08/11] Merge bugs fixed

---
 packages/fuselage/src/components/Card/CardControls.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/fuselage/src/components/Card/CardControls.tsx b/packages/fuselage/src/components/Card/CardControls.tsx
index 18e98408a8..4b1e187d9c 100644
--- a/packages/fuselage/src/components/Card/CardControls.tsx
+++ b/packages/fuselage/src/components/Card/CardControls.tsx
@@ -10,5 +10,3 @@ const CardControls = ({ onClick, children }: CardControlsProps) => (
 );
 
 export default CardControls;
-
-export default CardControls;

From 606421d812485fd8ea0fe259cba5fb16dd897c5f Mon Sep 17 00:00:00 2001
From: Rahul Singh Thakur <rahulsthakur19@gmail.com>
Date: Thu, 19 Sep 2024 23:49:14 +0530
Subject: [PATCH 09/11] Mouse event handler type added

---
 packages/fuselage/src/components/Card/CardControls.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fuselage/src/components/Card/CardControls.tsx b/packages/fuselage/src/components/Card/CardControls.tsx
index 4b1e187d9c..eb7f7241c4 100644
--- a/packages/fuselage/src/components/Card/CardControls.tsx
+++ b/packages/fuselage/src/components/Card/CardControls.tsx
@@ -1,8 +1,8 @@
-import type { ReactNode, MouseEvent } from 'react';
+import type { ReactNode, MouseEventHandler } from 'react';
 
 type CardControlsProps = {
   children?: ReactNode;
-  onClick?: (e?: MouseEvent<HTMLOrSVGElement>) => void;
+  onClick?: MouseEventHandler<HTMLDivElement>;
 };
 
 const CardControls = ({ onClick, children }: CardControlsProps) => (

From f26cf397590c625fcdb53750ad64d2e0ba0291a3 Mon Sep 17 00:00:00 2001
From: Rahul Singh Thakur <65606499+Barrylimarti@users.noreply.github.com>
Date: Wed, 23 Oct 2024 01:07:11 +0530
Subject: [PATCH 10/11] Update .changeset/purple-shirts-boil.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Júlia Jaeger Foresti <60678893+juliajforesti@users.noreply.github.com>
---
 .changeset/purple-shirts-boil.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/purple-shirts-boil.md b/.changeset/purple-shirts-boil.md
index 227d387b19..952f8f5a50 100644
--- a/.changeset/purple-shirts-boil.md
+++ b/.changeset/purple-shirts-boil.md
@@ -2,4 +2,4 @@
 "@rocket.chat/fuselage": patch
 ---
 
-Fixes the responsiveness of the card component by adding flex wrap to card controls such that it can accomodate multiple items without breaking the responsive behaviour
+fix(fuselage): Responsive `CardControls`  

From e2a79ef1760a05970cf574811f9367b1437b96b3 Mon Sep 17 00:00:00 2001
From: Rahul Singh Thakur <65606499+Barrylimarti@users.noreply.github.com>
Date: Wed, 23 Oct 2024 01:18:19 +0530
Subject: [PATCH 11/11] Update
 packages/fuselage/src/components/Card/CardControls.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Júlia Jaeger Foresti <60678893+juliajforesti@users.noreply.github.com>
---
 .../fuselage/src/components/Card/CardControls.tsx     | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/fuselage/src/components/Card/CardControls.tsx b/packages/fuselage/src/components/Card/CardControls.tsx
index eb7f7241c4..705ee02167 100644
--- a/packages/fuselage/src/components/Card/CardControls.tsx
+++ b/packages/fuselage/src/components/Card/CardControls.tsx
@@ -1,12 +1,7 @@
-import type { ReactNode, MouseEventHandler } from 'react';
+import { AllHTMLAttributes } from 'react';
 
-type CardControlsProps = {
-  children?: ReactNode;
-  onClick?: MouseEventHandler<HTMLDivElement>;
-};
-
-const CardControls = ({ onClick, children }: CardControlsProps) => (
-  <div className='rcx-card__controls' onClick={onClick} children={children} />
+const CardControls = (props: AllHTMLAttributes<HTMLDivElement>) => (
+  <div className='rcx-card__controls' {...props} />
 );
 
 export default CardControls;