Add ability to customise Timeline row CSS

[thyhjwb6]

Having recently looked at an issue: #1998. Once I thought about documenting this, I was wondering if there was a better way.

I experimented with different ideas in a spike https://github.com/Royal-Navy/design-system/commits/spike/timeline-row-height

Browsing through each commit is best.

Option 1

More conventional styled components approach but the downside is that it would mean exposing our partials and effectively give us a larger contract with the consumers which could mean there are more breaking changes

Option 2

Props specifically for CSS of nested components. The downside here is that it is CSS props only and something I have been thinking about is that we allow arbitrary props (eg data-testid) to be drilled into components but maybe it would help to have more granular control over these

Option 3

Props drilled to relevant component which gives the most flexibility

It is felt that option 3 will be the most appropriate for the Timeline as we have provided the framework with minimal styling. Going forward it might be that we provide more styling out-of-the-box and there is less need for customising but this is not the case now.

All feedback is welcome.

[jpveooys]

Our exemplar app uses some custom styling at the moment (using the legacy CSS classes) so it may be worth having a look at how that would fit in as well.

One thing I'd highlight (for option 1 in particular) is that some components like TimelineHeaderRow are used in different contexts (i.e. the months row, days row etc.) and you may need to differentiate between them (e.g. if you want to change the height of the months row in particular).

It looks like this is accounted for in option 2 and 3, but the other thing that comes to mind the DOM hierarchy is a bit complex in some places (e.g. StyledHeaderRow > StyledRowContent > StyledMonths). In our app we have some custom styles on StyledMonths (set using CSS selectors) but a height is set on StyledHeaderRow so we also need to override that to change the height of the months row.

[thyhjwb6]

Many thanks for the feedback @jpveooys

Based on option 3, the component could be composed as:

<TimelineMonths
  css={css`
    height: 150px;
  `}
  contentProps={{
    css: css`
      background-color: lightblue;
    `,
  }}
  contentProps={{
    css: css`
      background-color: lightcoral;
    `,
  }}
/>

Because TimelineMonths is effectively a TimelineRow, this would allow you to modify the row and then the header (what shows if hasSide is true) and content (where the months are) of that row.

Does this satisfy your requirement?

[jpveooys]

Yes, I think it would 🙂 (For rows, that is – we have some other style overrides as well...)