fix(definition-list): fix dl focused elements outline cut by "overflo…

…w: hidden"
Sage · Apr 26, 2021 · f7ca1d3 · f7ca1d3
1 parent 5c29bbc
commit f7ca1d3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/components/definition-list/definition-list.spec.js b/src/components/definition-list/definition-list.spec.js
@@ -31,14 +31,20 @@ describe("DefinitionList", () => {
     );
   };
 
-  testStyledSystemSpacing((props) => (
-    <ThemeProvider theme={mintTheme}>
-      <Dl {...props}>
-        <Dt>Description</Dt>
-        <Dd>This is a test</Dd>
-      </Dl>
-    </ThemeProvider>
-  ));
+  testStyledSystemSpacing(
+    (props) => (
+      <ThemeProvider theme={mintTheme}>
+        <Dl {...props}>
+          <Dt>Description</Dt>
+          <Dd>This is a test</Dd>
+        </Dl>
+      </ThemeProvider>
+    ),
+    {
+      px: "3px",
+      mx: "-3px",
+    }
+  );
 
   describe("dt", () => {
     testStyledSystemSpacing(

diff --git a/src/components/definition-list/dl.component.js b/src/components/definition-list/dl.component.js
@@ -10,6 +10,8 @@ const Dl = ({
   w = 50,
   dtTextAlign = "right",
   ddTextAlign = "left",
+  px = "3px",
+  mx = "-3px",
   ...props
 }) => {
   const dlComponent = [];
@@ -57,7 +59,7 @@ const Dl = ({
   };
 
   return (
-    <StyledDl w={w} data-component="dl" {...props}>
+    <StyledDl w={w} px={px} mx={mx} data-component="dl" {...props}>
       {composeDlComponent(listChildren)}
     </StyledDl>
   );