feat: fix bg color and border radius on focus

gluestack · Dec 18, 2023 · fa09dba · fa09dba
1 parent 3610bf7
commit fa09dba
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 9 deletions.
diff --git a/example/storybook/src/ui/components/Disclosure/Accordion/AccordionCustomisedBackground.tsx b/example/storybook/src/ui/components/Disclosure/Accordion/AccordionCustomisedBackground.tsx
@@ -13,10 +13,21 @@ import React from 'react';
 
 const AccordionCustomisedBackground = ({ ...props }: any) => {
   return (
-    <Accordion {...props} size={'md'} shadowColor="transparent">
+    <Accordion
+      {...props}
+      size={'md'}
+      shadowColor="transparent"
+      bg="transparent"
+    >
       <AccordionItem value="item-1" borderRadius="$lg">
         <AccordionHeader>
-          <AccordionTrigger>
+          <AccordionTrigger
+            sx={{
+              ':focusVisible': {
+                borderRadius: '$lg',
+              },
+            }}
+          >
             {({ isExpanded }: { isExpanded: boolean }) => {
               return (
                 <>
@@ -43,7 +54,13 @@ const AccordionCustomisedBackground = ({ ...props }: any) => {
       </AccordionItem>
       <AccordionItem value="item-2" mt="$5" borderRadius="$lg">
         <AccordionHeader>
-          <AccordionTrigger>
+          <AccordionTrigger
+            sx={{
+              ':focusVisible': {
+                borderRadius: '$lg',
+              },
+            }}
+          >
             {({ isExpanded }: { isExpanded: boolean }) => {
               return (
                 <>

diff --git a/example/storybook/src/ui/components/Disclosure/Accordion/AccordionRoundedCorner.tsx b/example/storybook/src/ui/components/Disclosure/Accordion/AccordionRoundedCorner.tsx
@@ -13,10 +13,21 @@ import React from 'react';
 
 const AccordionRoundedCorners = ({ ...props }: any) => {
   return (
-    <Accordion {...props} size={'md'} shadowColor="transparent">
+    <Accordion
+      {...props}
+      size={'md'}
+      shadowColor="transparent"
+      bg="transparent"
+    >
       <AccordionItem value="item-1" borderRadius="$lg">
         <AccordionHeader>
-          <AccordionTrigger>
+          <AccordionTrigger
+            sx={{
+              ':focusVisible': {
+                borderRadius: '$lg',
+              },
+            }}
+          >
             {({ isExpanded }: { isExpanded: boolean }) => {
               return (
                 <>
@@ -43,7 +54,13 @@ const AccordionRoundedCorners = ({ ...props }: any) => {
       </AccordionItem>
       <AccordionItem value="item-2" mt="$5" borderRadius="$lg">
         <AccordionHeader>
-          <AccordionTrigger>
+          <AccordionTrigger
+            sx={{
+              ':focusVisible': {
+                borderRadius: '$lg',
+              },
+            }}
+          >
             {({ isExpanded }: { isExpanded: boolean }) => {
               return (
                 <>

diff --git a/example/storybook/src/ui/components/Disclosure/Accordion/index.stories.mdx b/example/storybook/src/ui/components/Disclosure/Accordion/index.stories.mdx
@@ -703,10 +703,14 @@ The borderRadius prop can be used to create rounded corners for both the Accordi
       code: `
 function App(){
     return (
-          <Accordion m="$5" width="80%" maxWidth={640} shadowColor="transparent">
+          <Accordion m="$5" width="80%" maxWidth={640} shadowColor="transparent" bg="transparent">
       <AccordionItem value="item-1" borderRadius="$lg">
         <AccordionHeader>
-          <AccordionTrigger>
+          <AccordionTrigger sx={{
+              ':focusVisible': {
+                borderRadius: '$lg',
+              },
+            }}>
             {({ isExpanded }) => {
               return (
                 <>
@@ -733,7 +737,11 @@ function App(){
       </AccordionItem>
       <AccordionItem value="item-2" mt="$5" borderRadius="$lg">
         <AccordionHeader>
-          <AccordionTrigger>
+          <AccordionTrigger sx={{
+              ':focusVisible': {
+                borderRadius: '$lg',
+              },
+            }}>
             {({ isExpanded }) => {
               return (
                 <>