feat(box): add support for the gap css property when component is displayed flex or inline-flex FE-5357

[edleeks87]

fix #5434

Proposed behaviour

Adds gap prop to the Box component. The prop accepts numbers from 0-8 or valid CSS strings. If a number is passed it will be multiplied by 8 to generate a px value. The prop only works when the component has display flex or inline-flex.

Current behaviour

No support for gap CSS property when Box is flex container

Checklist

• [x] Commits follow our style guide
• [x] Related issues linked in commit messages if required
• [x] Screenshots are included in the PR if useful
• [x] Unit tests added or updated if required
• [ ] Cypress automation tests added or updated if required
• [x] Storybook added or updated if required
• [x] 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].

https://codesandbox.io/s/romantic-jackson-wrt9no?file=/src/index.js

[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 217699f380288b97472732691865ffc5c4785bb3:

Sandbox	Source
carbon-quickstart	Configuration
carbon-quickstart-typescript	Configuration
carbon-quickstart	PR
focused-haze-fywlcr	PR

[cypress[bot]]

---

Test summary

3243 • 0 • 3 • 0 • 0

---

Run details

Project	carbon
Status	Passed
Commit	ba2cc148eb
Started	Oct 10, 2022 1:34 PM
Ended	Oct 10, 2022 1:41 PM
Duration	06:23 💡
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

[carbonci]

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

The release is available on:

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

Your semantic-release bot :package::rocket: