Atom components extend their base DOM properties

[phess101]

There are a bunch of properties on atom components that are either duplicates, or forced to be named differently from their base DOM element because they share the same property names. It would be a lot easier to extend the base element's properties and add any new additions rather than duplicating, inevitably properties will be missed and needed for a future use case.

An example of this is the anchor.tsx component. Instead of duplicating properties like we currently are

export interface AnchorProps {
    ariaLabel?: string;
    children?: any;
    cssClassName?: string;
    external?: boolean;
    id?: string;
    onClick?: (e: React.MouseEvent<HTMLElement>, value?: any) => void;
    onKeyDown?: (e: React.KeyboardEvent<HTMLAnchorElement>) => void;
    ref?: React.Ref<HTMLAnchorElement>;
    target?: string;
    title?: string;
}

we could update the interface to inherit base Link properties, and add our custom properties on top of it

export interface AnchorProps extends LinkProps {
    external?: boolean;
}

I'd also like to discuss how we could handle renaming & property changes, as there will be some properties that are different in the base DOM component.

[brandongregoryscott]

I'm all for interface extensions, but we also want to be careful to not just do it blindly - if we aren't actually doing anything with props from either an intrinsic HTML element, or some other component used for composition, we should be leveraging the Typescript utility interfaces like Pick, Omit, etc: https://www.typescriptlang.org/docs/handbook/utility-types.html to narrow down the properties as needed.