Add pointer event none to disabled cards to avoid click event (#510)

ClickHouse · Dec 19, 2024 · 7ac5a19 · 7ac5a19
1 parent 00ff977
commit 7ac5a19
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 0 deletions.
diff --git a/src/components/CardHorizontal/CardHorizontal.tsx b/src/components/CardHorizontal/CardHorizontal.tsx
@@ -85,6 +85,7 @@ const Wrapper = styled.div<{
     ${
       $disabled
         ? `
+          pointer-events: none;
           &,
           &:hover,
           &:active, &:focus, &:focus-within {

diff --git a/src/components/CardPrimary/CardPrimary.tsx b/src/components/CardPrimary/CardPrimary.tsx
@@ -70,6 +70,7 @@ const Wrapper = styled.div<{
   &[aria-disabled="true"]:hover,
   &[aria-disabled="true"]:focus,
   &[aria-disabled="true"]:active {
+    pointer-events: none;
     ${({ theme }) => `
     background-color: ${theme.click.card.primary.color.background.disabled};
     color: ${theme.click.card.primary.color.title.disabled};

diff --git a/src/components/CardSecondary/CardSecondary.tsx b/src/components/CardSecondary/CardSecondary.tsx
@@ -105,6 +105,7 @@ const Wrapper = styled.div<{
   &[aria-disabled="true"]:hover,
   &[aria-disabled="true"]:focus,
   &[aria-disabled="true"]:active {
+    pointer-events: none;
     ${({ theme }) => `
       background-color: ${theme.click.card.secondary.color.background.disabled};
       color: ${theme.click.card.secondary.color.title.disabled};