Coding conventions

To make it easier to contribute and for ourselves to have a consistent codebase, we should document some of our coding conventions.

• Always provide ref through forwardRef (unless exposing a Context)
• Always check props naming conventions on other components for consistency
• Add all HTML props through React.{TagName}HTMLAttributes<HTML{TagName}Element>
• Add the HTML attributes on the outermost element
• Avoid custom use of native HTML attributes (i.e. className should always work as expected)
• Avoid invalid states (i.e. both successText and errorText at the same time)
• Avoid creating multiple components when they can be just variant or compound with same functionality
• Avoid reassigning CSS custom properties: ❌ :--bg: var(--bg-hover) vs ✅: background: var(--bg-hover)
• Use useId() when if needed for accessibility
• Use @media(hover: hover) and (pointer: fine) around :hover to avoid :hover on touch-devices
• Use compound components pattern instead of many props on single component
• Use lowercase boolean props (i.e. hidden instead of isHidden)
• Use :focus-visible to style focus state
• Use ReactNode type for props instead of string (unless it has to be string)
• Use useEffect if manipulating DOM directly to ensure server compatibility
• Use Component as name of the outermost HTML element rendering the component
• Use Component.Context as a wrapper (and Component.Trigger) if a component has context and trigger
• Use Context as name of internal, non-exposed Context
• Use import of specific React typescript types, instead of depending on global React.*
• Use Component.List when listing multiple items
• Use background and not background-color in tokens to allow setting advanced values like linear-gradient
• Use &:not([hidden]) { display: } around display to support hidden attribute
• Use --dsc prefix for component tokens/variables
• Use CSS property name in component tokens its applied to (ie --dsc-button-padding-block)