Enable Label and Description overrides

Author: kraenhansen

packages/typography/src/Description/Description.spec.tsx

@@ -1,18 +1,10 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { render } from '@testing-library/react';
 
-import { PolymorphicAs } from '@leafygreen-ui/polymorphic';
-
 import Description from './Description';
 
-const renderDescription = ({
-  as,
-  children = 'Test description',
-}: {
-  as?: PolymorphicAs;
-  children?: ReactNode;
-}) => {
-  return render(<Description as={as}>{children}</Description>);
+const renderDescription = (props: React.ComponentProps<typeof Description>) => {
+  return render(<Description {...props} />);
 };
 
 describe('Description Component', () => {
@@ -37,4 +29,23 @@ describe('Description Component', () => {
     });
     expect(container.querySelector('div')).toBeInTheDocument();
   });
+
+  test('renders with a default data-lgid', () => {
+    const { container } = renderDescription({ children: 'Test description' });
+    expect(container.querySelector('p')).toHaveAttribute(
+      'data-lgid',
+      'lg-typography-description',
+    );
+  });
+
+  test('renders with a custom data-lgid', () => {
+    const { container } = renderDescription({
+      children: 'Test description',
+      'data-lgid': 'lg-custom-lgid',
+    });
+    expect(container.querySelector('p')).toHaveAttribute(
+      'data-lgid',
+      'lg-custom-lgid',
+    );
+  });
 });

packages/typography/src/Description/Description.tsx

@@ -33,10 +33,12 @@ export const Description = Polymorphic<DescriptionProps>(
     const as = asProp ?? asDerivedFromChildren;
     const { Component } = usePolymorphic(as);
 
+    const lgIds = getLgIds(dataLgId ?? getLgIds().description);
+
     return (
       <Component
-        data-lgid={getLgIds(dataLgId).description}
-        data-testid={getLgIds(dataLgId).description}
+        data-lgid={lgIds.root}
+        data-testid={lgIds.root}
         className={cx(
           getDescriptionStyle(theme),
           descriptionTypeScaleStyles[baseFontSize],

packages/typography/src/Label/Label.tsx

@@ -33,10 +33,12 @@ export const Label = Polymorphic<BaseLabelProps>(
     const baseFontSize = useUpdatedBaseFontSize(baseFontSizeOverride);
     const { Component } = usePolymorphic(as);
 
+    const lgIds = getLgIds(dataLgId ?? getLgIds().label);
+
     return (
       <Component
-        data-lgid={getLgIds(dataLgId).label}
-        data-testid={getLgIds(dataLgId).label}
+        data-lgid={lgIds.root}
+        data-testid={lgIds.root}
         className={cx(
           getLabelStyles(theme),
           labelTypeScaleStyles[baseFontSize],