fix: export HTMLCoralProps

wwsun · Jan 11, 2022 · 06a1d8c · 06a1d8c
1 parent f8072a6
commit 06a1d8c
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 11 deletions.
diff --git a/docs/box.stories.tsx b/docs/box.stories.tsx
@@ -9,8 +9,8 @@ export default {
 
 /**
  * 必须加 args 参数才能在 docs 中展示 codes，参考 https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
- * @param args 
- * @returns 
+ * @param args
+ * @returns
  */
 export const Basic = (args: any) => (
   <Box as="button" bg="#FF0000" color="#FFFFFF" fontSize="14px" px="12px" py="4px" border="0" borderRadius="99px">
@@ -42,6 +42,12 @@ export const As = (args: any) => (
   </Box>
 );
 
+export const Link = (args: any) => (
+  <Box as="a" href="https://www.163.com" target="_blank">
+    open 163.com
+  </Box>
+);
+
 const injectStyle = css`
   background: red;
   color: white;

diff --git a/src/components/flex.tsx b/src/components/flex.tsx
@@ -4,9 +4,9 @@ import { Box } from './box';
 import { space, toPercent, toNumber } from '../helpers';
 import { useSystem } from '../provider';
 import { forwardRef } from '../forwad-ref';
-import type { StringOrNumber, CoralProps } from '../types';
+import type { StringOrNumber, CoralProps, HTMLCoralProps } from '../types';
 
-export interface FlexProps extends CoralProps {
+export interface FlexProps extends HTMLCoralProps<'div'> {
   /**
    * 间距
    */
@@ -61,7 +61,7 @@ export const Flex = forwardRef<FlexProps, 'div'>((props, ref) => {
   );
 });
 
-export interface FlexItemProps extends CoralProps {
+export interface FlexItemProps extends HTMLCoralProps<'div'> {
   span?: StringOrNumber | 'auto';
 }
 

diff --git a/src/components/grid.tsx b/src/components/grid.tsx
@@ -3,9 +3,9 @@ import { Box } from './box';
 import { isNumber, space } from '../helpers';
 import { useSystem } from '../provider';
 import { forwardRef } from '../forwad-ref';
-import type { StringOrNumber, CoralProps } from '../types';
+import type { StringOrNumber, CoralProps, HTMLCoralProps } from '../types';
 
-export interface GridProps extends CoralProps {
+export interface GridProps extends HTMLCoralProps<'div'> {
   /**
    * 列数
    */
@@ -70,7 +70,7 @@ export const Grid = forwardRef<GridProps, 'div'>((props, ref) => {
   );
 });
 
-export interface GridItemProps extends CoralProps {
+export interface GridItemProps extends HTMLCoralProps<'div'> {
   colSpan?: StringOrNumber;
   colStart?: CoralProps['gridColumnStart'];
   colEnd?: CoralProps['gridColumnEnd'];

diff --git a/src/components/group.tsx b/src/components/group.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { css } from 'styled-components';
-import { CoralProps, StringOrNumber } from '../types';
+import { HTMLCoralProps, StringOrNumber } from '../types';
 import { space } from '../helpers';
 import { Box } from './box';
 import { useSystem } from '../provider';
@@ -33,7 +33,7 @@ const normalStyle = css<any>`
   }
 `;
 
-export interface GroupProps extends CoralProps {
+export interface GroupProps extends HTMLCoralProps<'div'> {
   /**
    * 是否吸附在一起
    */

diff --git a/src/components/text.tsx b/src/components/text.tsx
@@ -39,7 +39,6 @@ export interface TextProps {
 
 export const Text = coral<As, TextProps>('span', textStyle, {
   attrs: (props) => ({
-    color: 'text.normal',
     textAlign: props.align,
     $truncated: props.truncated,
     $lineClamp: props.lineClamp,

diff --git a/src/types/system.ts b/src/types/system.ts
@@ -186,6 +186,12 @@ export interface CoralProps extends SystemProps {
   css?: Interpolation<any>;
 }
 
+export type HTMLCoralProps<T extends As> = Omit<
+  PropsOf<T>,
+  T extends 'svg' ? 'ref' | 'children' | keyof SystemProps : 'ref' | keyof SystemProps
+> &
+  CoralProps & { as?: As };
+
 export type OmitCommonProps<Target, OmitAdditionalProps extends keyof any = never> = Omit<
   Target,
   'transition' | 'as' | 'color' | OmitAdditionalProps