fix(loader): incorect text size for loading text inside buttons

[mihai-albu-sage]

Proposed behaviour

This PR fixes the Loader text size when it's used inside Button components.

• Created a new ButtonContext in order to be able to determine if the Loader is inside a button or not.
• Updated the ring Loader behavior when used in buttons so it automatically uses the correct inline layout and sizing.
• Updated the label styling to use the appropriate font token when the Loader is rendered inside a button.
• Updated the stories and Skills documentation to use isInsideButton.

Current behaviour

When the loader is used inside a button the incorrect font size is used.

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
• Playwright 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
• Related docs have been updated if required

QA

• Tested in provided StackBlitz sandbox/Storybook
• Add new Playwright test coverage if required
• Carbon implementation matches Design System/designs
• UI Tests GitHub check reviewed if required

Additional context

Testing instructions

[tomdavies73]

question: is this something we want to surface on the public API for the component?

Could we not instead create/use some sort of internal context which will set this to true internally without any consumer input

[carbonci]

🎉 This PR is included in version 161.0.1 🎉

The release is available on:

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

Your semantic-release bot 📦🚀