fix: update align prop value across various components

[Shankar-CodeJunkie]

Closes #17585

Support the newly added properties like bottom-end, bottom-start, left-end, left-start in , and components.

Changelog

Changed

top
bottom
left
right
top-start
top-end
bottom-start
bottom-end
left-end
left-start
right-end
right-start

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	31327ba
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/671ca4b5a1867b0008e5ea63
😎 Deploy Preview	https://deploy-preview-17834--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	0c8bacf
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6717ee8d6096ce0008a47890
😎 Deploy Preview	https://deploy-preview-17834--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	0c8bacf
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/6717ee8d549783000711631d
😎 Deploy Preview	https://deploy-preview-17834--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	31327ba
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/671ca4b58380330008f077c7
😎 Deploy Preview	https://deploy-preview-17834--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	31327ba
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/671ca4b57f31b400084256e3
😎 Deploy Preview	https://deploy-preview-17834--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

Attention: Patch coverage is 77.77778% with 4 lines in your changes missing coverage. Please review.

Project coverage is 80.44%. Comparing base (f4f3dfe) to head (31327ba).
Report is 47 commits behind head on main.

Files with missing lines	Patch %	Lines
...s/react/src/components/CodeSnippet/CodeSnippet.tsx	33.33%	2 Missing ⚠️
...s/react/src/components/OverflowMenu/next/index.tsx	33.33%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #17834      +/-   ##
==========================================
- Coverage   80.45%   80.44%   -0.01%     
==========================================
  Files         406      406              
  Lines       14041    14059      +18     
  Branches     4347     4399      +52     
==========================================
+ Hits        11296    11310      +14     
- Misses       2579     2582       +3     
- Partials      166      167       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[tay1orjones]

Thanks for taking a look at this! The old values must remain for backwards compatibility. I think you could mirror the approach taken in popover

carbon/packages/react/src/components/Popover/index.tsx

Lines 50 to 79 in 4b4fe02

	/**
	* Deprecated popover alignment values.
	* @deprecated Use NewPopoverAlignment instead.
	*/
	export type DeprecatedPopoverAlignment =
	| 'top-left'
	| 'top-right'
	| 'bottom-left'
	| 'bottom-right'
	| 'left-bottom'
	| 'left-top'
	| 'right-bottom'
	| 'right-top';
	export type NewPopoverAlignment =
	| 'top'
	| 'bottom'
	| 'left'
	| 'right'
	| 'top-start'
	| 'top-end'
	| 'bottom-start'
	| 'bottom-end'
	| 'left-end'
	| 'left-start'
	| 'right-end'
	| 'right-start';
	export type PopoverAlignment = DeprecatedPopoverAlignment | NewPopoverAlignment;

The proptypes use a helper to distinguish them as deprecated

carbon/packages/react/src/components/Popover/index.tsx

Lines 457 to 465 in 4b4fe02

	align: deprecateValuesWithin(
	PropTypes.oneOf([
	'top',
	'top-left', // deprecated use top-start instead
	'top-right', // deprecated use top-end instead
	'bottom',
	'bottom-left', // deprecated use bottom-start instead
	'bottom-right', // deprecated use bottom-end instead

If align is actually used anywhere other than passed through to the child component you can use the prop mapper function to help handle the new values. This might not apply to these components though, I'm not sure.

carbon/packages/react/src/components/Popover/index.tsx

Lines 81 to 93 in 4b4fe02

	const propMappingFunction = (deprecatedValue) => {
	const mapping = {
	'top-left': 'top-start',
	'top-right': 'top-end',
	'bottom-left': 'bottom-start',
	'bottom-right': 'bottom-end',
	'left-bottom': 'left-end',
	'left-top': 'left-start',
	'right-bottom': 'right-end',
	'right-top': 'right-start',
	};
	return mapping[deprecatedValue];
	};

[Shankar-CodeJunkie]

Hi @tay1orjones :
I have pushed the changes to the PR. I have refactored the files by taking similar changes done on popover component.

[emyarod]

looks good to me!

[tay1orjones]

Thanks, sorry for the delay!