fix(reset): Refine reset for Legend and provide css classNames for downstream extension as-needed (#2341)

Author: Luke Bowerman

packages/components-providers/src/StyleDefender.tsx

@@ -46,7 +46,9 @@ export const styleDefenderCSS = css`
   }
 `
 
-export const StyleDefender = styled.div`
+export const StyleDefender = styled.div.attrs(
+  ({ className = 'looker-components-reset' }) => ({ className })
+)`
   background: ${({ theme }) => theme.colors.background};
 
   ${styleDefenderCSS}

packages/components/src/Form/Legend/Legend.tsx

@@ -59,7 +59,13 @@ export const Legend = styled.legend
     })
   )<LegendProps>`
   ${reset}
+  border: none;
   ${color}
   ${space}
   ${typography}
 `
+
+/**
+ * `border: none;` override is a product-targeted fix
+ * @TODO - Remove targeted fix when mitigated downstream
+ **/

packages/components/src/Portal/Portal.tsx

@@ -98,7 +98,9 @@ Portal.displayName = 'Portal'
  * DOM-output so it re-injects `styleDefenderCSS` to do a light-weight
  * "CSS reset"
  */
-const InvisiBox = styled.div<PortalPlacementProps>`
+const InvisiBox = styled.div.attrs(
+  ({ className = 'looker-components-reset' }) => ({ className })
+)<PortalPlacementProps>`
   ${styleDefenderCSS}
 
   align-items: ${({ vertical }) =>