Standardize Component Source-Code

[ritikamotwani]

When you want to style the component according to the prop (different themes/variants will have different styles for the UI component):

• Pass the prop to the styled component and then in the styled component decide the stylings that have to be rendered according to the prop. Example:

<BadgeContainer
       variant={variant}
       {...defaultProps}
>
       <span>{label}</span>
</BadgeContainer>

const BadgeContainer = styled.div<BadgeContainerProps>`
 color: ${Greyscale.white};
 ${({ variant }) => {
   switch (variant) {
     case BadgeVariant.BLUE:
       return `
         background: ${SecondaryColor.actionblue};
       `;
     case BadgeVariant.DIMMED:
       return `
         background: ${Greyscale.devilsgrey};
       `;
     case BadgeVariant.WHITE:
       return `
         background: ${Greyscale.white};
         color: ${SecondaryColor.actionblue};
       `;
     default:
       return `
         background: #ed9300;
       `;
   }
 }}
`;

• Do not use dynamic classNames for styling as the code gets unreadable, it's harder to maintain if there are more variants added.

Example:

<TabsContainer
      className={classNames(`${alignment}-aries-tabs`, 'aries-tabs', className)}
>
</TabsContainer>

Flow for adding a new prop to any UI component

1. Write the correct types in the Prop interface for that particular prop and destructure the props and use a default value there so that the storybook has the correct control types and the default value in the documentation table.

Prop types

type BadgeType = 'dimmed' | 'default' | 'white' | 'blue';

interface Props
  extends React.ComponentPropsWithoutRef<typeof BadgeContainer> {
  /** Sets the label of Badge. */
  label: string | number;
  /** Sets the variant of the Badge. */
  variant?: BadgeType;
}

Destructuring Props in the component

Badge: React.FunctionComponent<Props> = ({
  label,
  variant = BadgeVariant.DEFAULT,
  className,
  ...defaultProps
}) => (
)

2. Add an example of the prop in the component.stories file so that it's available to be viewed easily in the storybook doc.
3. Add test cases for the prop so that the test coverage of the component is maintained.

[westwood846]

Pass the prop to the styled component and then in the styled component decide the stylings that have to be rendered according to the prop.

What about using attribute selectors instead? Like [aria-extended] or [data-variant]. I like that style more now

[westwood846]

Flow for adding a new prop to any UI component

https://glints.slack.com/archives/CNX1CEB7A/p1616490370031600

I can see Francis' point here. Not sure if React.FC is the right way to go. TBH at the moment I'm at a complete loss as to how to type a component or its props.