OLMIS-4026: Change Table Styles


FEOLMIS-2618 0

Keyboard shortcuts  
  • Summarize the review outcomes (optional)


    Warning: no files are visible, they have all been filtered.
    Participant Role Time Spent Comments Latest Comment
    Total   0m 0  


    Our current table styles don't leave much room for color variation to meaning. The following changes are meant to improve readability and allow for more complexity in OpenLMIS tables.

    Change Reasons

    • Zebra stripes generally aid readability on printed forms, but give OpenLMIS forms lots of visual noise because of the amount of text
      • Adding a mouseover/focus highlight to a table row will help with visual styling more
    • Using secondary colors for semantic meaning allows for more intuitive designs
      • Currently, there are implementations of tables that have "parent and child" relationships in the same table — those relationships need a stronger visual relationship
      • Creating CSS classes to undo zebra striping for tables that don't need it will be harder to maintain

    Acceptance Criteria

    • Remove zebra stripes
      • Default tables are white
    • Add Styleguide page and Sass mixin for gray table style
    • Add mouse over highlight
      • Highlight should be based on $brand-primary...

    Branches in review


    Issues Raised From Comments

    Key Summary State Assignee

    General Comments

    There are no general comments on this review.
    /src/common/button.mixins.scss Changed
    /src/common/variables.scss Changed
    /src/openlmis-table/tables.scss Changed

    Review updated: Reload | Ignore | Collapse

    You cannot reload the review while writing a comment.

    Log time