fix(ts): add $style prop to block component (uber#5038)

* fix(ts): add $style prop to block component

* fix(ts): add regression test for typeography wrapper around block

* test(vrt): update visual snapshots for 7e6712d (uber#5039)

Co-authored-by: UberOpenSourceBot <[email protected]>

* fix(block): apply dollar prefix ref in types

Co-authored-by: UberOpenSourceBot <[email protected]>
Co-authored-by: UberOpenSourceBot <[email protected]>

src/block/__tests__/block.scenario.tsx

@@ -0,0 +1,18 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+
+import { Block } from '../index';
+
+export function Scenario() {
+  return (
+    <div>
+      <Block $style={{ color: 'blue' }}>hello</Block>
+      <Block overrides={{ Block: { style: { color: 'green' } } }}>world</Block>
+    </div>
+  );
+}

src/block/__tests__/block.stories.tsx

@@ -0,0 +1,11 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import React from 'react';
+
+import { Scenario as BlockScenario } from './block.scenario';
+
+export const Block = () => <BlockScenario />;

src/block/types.ts

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 
 import type { ElementType, ReactNode } from 'react';
+import type { StyleObject } from 'styletron-standard';
 import type { Override } from '../helpers/overrides';
 import * as React from 'react';
 
@@ -403,11 +404,17 @@ export type StyledBlockProps = {
   $whiteSpace?: Responsive<WhiteSpace>;
 };
 
+type BaseProps<P extends {}> = P & {
+  $style?: StyleObject | ((props: P) => StyleObject);
+  className?: string;
+};
+
+type AddStyletronRef<P extends { ref: any }> = P extends { ref: infer R } ? P & { $ref?: R } : P;
+
+type OverrideProps<D extends React.ElementType, P extends {}> = BaseProps<P> &
+  Omit<AddStyletronRef<React.ComponentProps<D>>, keyof BaseProps<P>>;
+
 export interface BlockComponentType<D extends React.ElementType> {
-  <C extends React.ElementType = D>(
-    props: BlockProps<C> &
-      (React.ComponentProps<C> extends { ref?: infer R } ? { ref?: R } : {}) &
-      Omit<StyledBlockProps & React.ComponentProps<C>, keyof BlockProps>
-  ): JSX.Element;
+  <C extends React.ElementType = D>(props: OverrideProps<C, BlockProps<C>>): JSX.Element;
   displayName?: string;
 }

src/typography/__tests__/typography-display.scenario.tsx

@@ -7,8 +7,15 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import { DisplayLarge } from '..';
+import { DisplayLarge, DisplayMedium, DisplaySmall, DisplayXSmall } from '..';
 
 export function Scenario() {
-  return <DisplayLarge>We ignite opportunity by setting the world in motion.</DisplayLarge>;
+  return (
+    <div>
+      <DisplayLarge>We ignite opportunity by setting the world in motion.</DisplayLarge>
+      <DisplayMedium>We ignite opportunity by setting the world in motion.</DisplayMedium>
+      <DisplaySmall>We ignite opportunity by setting the world in motion.</DisplaySmall>
+      <DisplayXSmall>We ignite opportunity by setting the world in motion.</DisplayXSmall>
+    </div>
+  );
 }

src/typography/__tests__/typography-overrides.scenario.tsx

@@ -0,0 +1,20 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+import * as React from 'react';
+
+import { DisplayLarge, DisplayMedium, DisplaySmall, DisplayXSmall } from '..';
+
+export function Scenario() {
+  return (
+    <div>
+      <DisplayLarge $style={{ color: 'blue' }}>
+        We ignite opportunity by setting the world in motion.
+      </DisplayLarge>
+    </div>
+  );
+}

src/typography/__tests__/typography.stories.tsx

@@ -10,9 +10,11 @@ import { Scenario as TypographyDisplay } from './typography-display.scenario';
 import { Scenario as TypographyHeading } from './typography-heading.scenario';
 import { Scenario as TypographyMonoStyletron } from './typography-mono-styletron.scenario';
 import { Scenario as TypographyMono } from './typography-mono.scenario';
+import { Scenario as TypographyOverrides } from './typography-overrides.scenario';
 
 export const Body = () => <TypographyBody />;
 export const Display = () => <TypographyDisplay />;
 export const Heading = () => <TypographyHeading />;
 export const MonoStyletron = () => <TypographyMonoStyletron />;
 export const Mono = () => <TypographyMono />;
+export const Overrides = () => <TypographyOverrides />;