[Bug]: CodeSnippet suggests align value that isn't available yet

[ev-codes]

The problem

I currently use the component <CodeSnippet> with align property "bottom-right".

However, during test runs, <CodeSnippet> logs a console warning to use align property "bottom-end" instead. However, <CodeSnippet> does not currently support this align property.

Unnecessary/unaddressable warnings make it harder to see fixable errors and slow down CI workflows.

The solution

Either:

• Support the "bottom-end" property in <CodeSnippet>
• Do not log the warning until <CodeSnippet> supports "bottom-end"

Examples

Code sample:

<CodeSnippet
        wrapText
        align="bottom-right"
        type="multi"
        onClick={() => {
          copyDetail(value);
        }}
      >
        {value}
      </CodeSnippet>

Logs from test running this code:

console.warn
    Warning: "bottom-right" is a deprecated value for the "align" prop on the "Popover" component. Use "bottom-end" instead. "bottom-right" will be removed in the next major release.

Application/PAL

No response

Business priority

None

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[sstrubberg]

Can we get a repo using stackblitz?

[alisonjoseph]

I'm unable to reproduce the error, the correct prop to use is bottom-end and it appears to be working as intended here.

[ev-codes]

Thanks for your responses! And I'm glad to see this works in the stackblitz.

In the CodeSnippetProps, I don't see bottom-end as an option for the align property.

Since CodeSnippet supports bottom-end, may you please update the interface to reflect this? Or perhaps I'm missing something 🤔

Thank you 😄

[sstrubberg]

Add bottom-end to the align prop, as suggested.

[tay1orjones]

We'll need to make sure all the options for align are updated to the new values. This is really similar to what we had to do for DefinitionTooltip #16810

[Shankar-CodeJunkie]

@tay1orjones : Can you assign this issue to me ? Thank you

[Shankar-CodeJunkie]

@tay1orjones : I've updated the packages/react/src/components/CodeSnippet/CodeSnippet.tsx align props with the new values. However the yarn build command asked me to update the similar changes in the below files as well. The CodeSnippet inturn uses the Copy and CopyButton components, where I need to replicate the similar changes.

        modified:   packages/react/src/components/CodeSnippet/CodeSnippet.tsx
	modified:   packages/react/src/components/ComboButton/index.tsx
	modified:   packages/react/src/components/Copy/Copy.tsx
	modified:   packages/react/src/components/CopyButton/CopyButton.tsx
	modified:   packages/react/src/components/IconButton/index.tsx
	modified:   packages/react/src/components/OverflowMenu/next/index.tsx
	modified:   packages/react/src/components/Pagination/Pagination.tsx