feat(sidebar, drawer and dialogs): adjust background of modal headers to be white instead of grey

[ljemmo]

Proposed behaviour

Dialog, Drawer and Sidebar headers are now white in order to mirror the Design System Spec.

Current behaviour

Dialog, Drawer and Sidebar headers were gray.

Checklist

• [ ] Commits follow our style guide
• [ ] Related issues linked in commit messages if required
• [ ] Screenshots are included in the PR if useful
• [ ] All themes are supported if required
• [ ] Unit tests added or updated if required
• [ ] Cypress automation tests added or updated if required
• [ ] Storybook added or updated if required
• [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required
• [ ] Typescript d.ts file added or updated if required

QA

• [ ] Tested in CodeSandbox/storybook
• [ ] Add new Cypress test coverage if required
• [ ] Carbon implementation matches Design System/designs
• [ ] UI Tests GitHub check reviewed if required

Additional context

Testing instructions

The following CodeSandbox is an example of the broken behaviour. You can see the new behaviour by looking at the version in the comment by codesandbox[bot].

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit c808cce13c6e7f7bb07e09b7b6fd93f5af2334aa:

Sandbox	Source
carbon-quickstart	Configuration
carbon-quickstart-typescript	Configuration

[cypress[bot]]

---

Test summary

3146 • 0 • 3 • 0 • 0

---

Run details

Project	carbon
Status	Passed
Commit	c808cce13c
Started	Oct 7, 2022 12:23 PM
Ended	Oct 7, 2022 12:30 PM
Duration	07:02 💡
OS	Linux Debian - 11.4
Browser	Chrome 106

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[ljemmo]

@DipperTheDan this has now been actioned

[harpalsingh]

@ljemmo white I understand the reason for this on dialog, this could be a problem on Drawer and so we should hold merging or progressing with this PR until that has been discussed please.

[ljemmo]

@harpalsingh i've now removed the white header as discussed for the drawer.

[ljemmo]

@DipperTheDan any chance i could get a hand squashing my commits? I made a right pigs ear of it earlier and managed to pull in 34 file changes (from another branch). Had to redo the original work.

[ljemmo]

@edleeks87 or @Parsium - please can i get another review. Aparrently it needs your thumbs up before QA can pick it up.

[carbonci]

:tada: This PR is included in version 111.2.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: