Coding guidelines

What We Do for Our Users

Flexible Components

• User Story: As a developer using the Solid Design System, I want to build diverse apps for B2B and B2C customers without always asking the Solid team for help.
• Actions:
  • Provide flexibility to reduce dependencies on the Solid team.
  • Use slots, parts, and our event system to customize components as needed.

Avoid Future Breaking Changes

• User Story: As a developer, I want to trust Solid's updates and have less manual work when updating.
• Actions:
  • We commit to careful planning to avoid future breaking changes.
  • Ensure stable and reliable updates that align with semantic versioning.

Ensuring Icon Availability

• User Story: As a developer, I want to be sure that icons, like the 'chevron-up' in sd-accordion, always show up.
• Actions:
  • Ensure all necessary icons are included in icons.system.ts.
  • Compress icons and remove fills for consistency and ease of styling.

Stay Updated with Shoelace

• User Story: As a developer, I want to get improvements for our components.
• Actions:
  • Keep track of Shoelace updates for accessibility and best practices.
  • Integrate the latest component versions from Shoelace.

Emphasize Testing

• User Story: As a developer, I want to ensure that components don't break.
• Actions:
  • Regularly write and update end-to-end tests.
  • Create visual stories to detect and fix any visual issues.

Monitor Performance

• User Story: As a developer, I want a low bundle size and high performance.
• Actions:
  • Continuously monitor and optimize the performance and bundle size.
  • Make feature and component decisions with performance in mind.

Ensure Accessibility

• User Story: As a developer, I want to ensure components are accessible.
• Actions:
  • Implement tests and create 'mouseless' stories to ensure keyboard accessibility.

What We Do for Ourselves

Maintainability Focus

• User Story: As a maintainer of the Solid Design System, I want our codebase and output to stay maintainable.
• Actions:
  • Focus on enabling users to easily build features themselves.
  • Provide powerful customization options like slots, events, and parts.

Use Only TailwindCSS or "Solid Styles"

• User Story: As a maintainer of the Solid Design System, I want to have a common style for writing CSS.
• Actions:
  • Use TailwindCSS for all Solid components.
  • Convert BEM-style CSS to TailwindCSS utility classes where possible.
  • Utilize IDs or part selectors for any custom CSS needs.