Migrate remaining design system constants to enums

[nazrul7711]

Explanation

Currently there are some remaining design system constants that need to be migrated to enums. This PR creates enums for the remaining constants. It also deprecates the constants in favour of the enums and points to a good first issue to encourage contributors to replace them.

• Enums for design system constants DISPLAY, FLEX_DIRECTION, FLEX_WRAP, BLOCK_SIZES, SEVERITIES have been created
• Box component, documentation and tests updated to favour enums but support constants through unit testing
• Deprecation JSDoc notices added so strike through appears in VS Code as well as good first issue to replace deprecated constants Replace deprecated constants with enums #18714 (Will add constants in the PR once it's merged)
• Fixes: Migrate remaning design system consts to enums #19130

Screenshots/Screencaps

Before

before.mov

After

after.mov

Manual Testing Steps

• Pull this branch
• Do a search of the code base for any of the deprecated constants DISPLAY, FLEX_DIRECTION, FLEX_WRAP, BLOCK_SIZES, SEVERITIES
• Ensure you have the correct VS Code settings enabled for deprecation indicators
• Check that each constant is deprecated according to JSDoc format

Pre-merge author checklist

• I've clearly explained:
  • What problem this PR is solving
  • How this problem was solved
  • How reviewers can test my changes
• Sufficient automated test coverage has been added

Pre-merge reviewer checklist

• Manual testing (e.g. pull and build branch, run in browser, test code being changed)
• PR is linked to the appropriate GitHub issue
• IF this PR fixes a bug in the release milestone, add this PR to the release milestone

If further QA is required (e.g. new feature, complex testing steps, large refactor), add the Extension QA Board label.

In this case, a QA Engineer approval will be be required.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[nazrul7711]

I have read the CLA Document and I hereby sign the CLA

[socket-security]

No dependency changes detected. Learn more about Socket for GitHub ↗︎

---

👍 No dependency changes detected in pull request

Pull request alert summary

Issue	Status
Critical CVE	✅ 0 issues
CVE	✅ 0 issues
Mild CVE	✅ 0 issues
Install scripts	✅ 0 issues
Native code	✅ 0 issues
Bin script confusion	✅ 0 issues
Bin script shell injection	✅ 0 issues
Filesystem access	✅ 0 issues
Network access	✅ 0 issues
Shell access	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
GitHub dependency	✅ 0 issues
No bug tracker	✅ 0 issues
No contributors or author data	✅ 0 issues
No README	✅ 0 issues
Deprecated	✅ 0 issues
New author	✅ 0 issues
Unstable ownership	✅ 0 issues
Non-existent author	✅ 0 issues
Unmaintained	✅ 0 issues
Unpublished package	✅ 0 issues
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues
AI detected security risk	✅ 0 issues
AI warning	✅ 0 issues

[georgewrmarshall]

Hey @nazrul7711, thanks for your contribution. This is looking really great! I've left a few small suggestions. It would also be great if you could update the PR description according to the template provided. This really helps with review.

I wasn't sure if we would have to update the box.d.ts file with a union type of the Display enum as well as the DISPLAY const? There doesn't seem to be any errors in the TypeScript files I was looking at which I found interesting I suppose because it is just looking for the string or an array of strings.

[nazrul7711]

hi @georgewrmarshall I have made the modifications , kindly review it.

[georgewrmarshall]

Hey @nazrul7711, I've updated the PR title and description so the PR is a little more clear. Some of it was still commented out. I've also realized that I missed SEVERITIES in the issue(now updated). Could you also create an enum for Severity. I don't think we need one for RESIZE as it's used for a single component that will likely be migrated to TypeScript and have it's own types.

[georgewrmarshall]

Hey @nazrul7711, I rebased this PR to remove the yarn.lock changes and made sure that the deprecated constants still work by keeping the unit tests for them. This was kind of blocking some other TS migration work so I really appreciate your timing on this and hope you don't mind my updates. LGMT 🔥

[codecov]

Codecov Report

Merging #19133 (7ade917) into develop (aa9ee8a) will decrease coverage by 0.01%.
The diff coverage is 100.00%.

@@             Coverage Diff             @@
##           develop   #19133      +/-   ##
===========================================
- Coverage    69.54%   69.53%   -0.01%     
===========================================
  Files          960      960              
  Lines        36583    36583              
  Branches      9493     9493              
===========================================
- Hits         25439    25437       -2     
- Misses       11144    11146       +2     

Impacted Files	Coverage Δ
ui/helpers/constants/design-system.ts	100.00% <ø> (ø)
ui/components/ui/box/box.js	98.68% <100.00%> (ø)

... and 2 files with indirect coverage changes