@ornikar/bumper 2.8.0 → 2.8.1-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0

package/src/system/content/typography/TypographyIcon.tsx

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import type { Except } from 'type-fest';
+import type { IconProps } from '../icon/Icon';
+import { Icon } from '../icon/Icon';
+import type { TypographyTextProps } from './Typography';
+import { TypographyView } from './TypographyView';
+import { useTypographyColor } from './utils/typographyContext';
+
+export interface TypographyIconProps extends Except<IconProps, 'color'> {
+  color?: TypographyTextProps['color'];
+}
+
+function TypographyIconInternal(props: TypographyIconProps): ReactNode {
+  return (
+    <TypographyView>
+      <Icon {...props} />
+    </TypographyView>
+  );
+}
+
+function TypographyIconInheritColor(props: TypographyIconProps): ReactNode {
+  const typographyColorAncestorValue = useTypographyColor();
+
+  return <TypographyIconInternal color={typographyColorAncestorValue || undefined} {...props} />;
+}
+
+export function TypographyIcon({ color, ...props }: TypographyIconProps): ReactNode {
+  if (color) {
+    return <TypographyIconInternal color={color} {...props} />;
+  }
+
+  return <TypographyIconInheritColor {...props} />;
+}

package/src/system/content/typography/TypographyView.tsx

@@ -0,0 +1,34 @@
+import type { GetProps } from '@tamagui/core';
+import { View, styled } from '@tamagui/core';
+import type { ReactNode } from 'react';
+import { useTypographyContext } from './utils/typographyContext';
+
+const InternalTypographyView = styled(View, {
+  name: 'TypographyView',
+});
+
+type TypographyViewProps = GetProps<typeof InternalTypographyView>;
+
+/**
+ *
+ * A wrapper component that applies typography styles to its children in order to maintain consistent style between web and native
+ * In native, it simply renders a View as it renders correctly by default
+ * In web, it ensures that the display is set to inline-flex when inside a Typography context
+ *
+ * React Native Web includes this implementation in its codebase
+ * but Tamagui does not use React Native Webview, we need to implement it ourselves
+ *
+ * Inside a Typography component, always use TypographyView to wrap external components like Icon or Svg
+ */
+export function TypographyView(props: TypographyViewProps): ReactNode {
+  const isInTypographyContext = useTypographyContext();
+
+  return (
+    <InternalTypographyView
+      {...props}
+      $platform-web={
+        isInTypographyContext ? { ...props['$platform-web'], display: 'inline-flex' } : props['$platform-web']
+      }
+    />
+  );
+}