Modify the button of selectable component to fix the title overflow issue

[zhyuanqi]

Description

Modify the button of selectable component to fix the title overflow issue

Screenshot

Testing the changes

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 55.58%. Comparing base (e785fd3) to head (75445e7).
Report is 13 commits behind head on main.

❗ Current head 75445e7 differs from pull request most recent head 79c435b. Consider uploading reports for the commit 79c435b to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6465      +/-   ##
==========================================
+ Coverage   49.55%   55.58%   +6.02%     
==========================================
  Files        2670     1200    -1470     
  Lines       54290    24271   -30019     
  Branches     8878     4094    -4784     
==========================================
- Hits        26906    13490   -13416     
+ Misses      25720    10137   -15583     
+ Partials     1664      644    -1020     

Flag	Coverage Δ
Windows_1	?
Windows_2	55.58% <ø> (?)
Windows_3	?

Flags with carried forward coverage won't be shown. Click here to find out more.

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

[BionIT]

what's the difference of text props vs className? Can we be more specific about the class name?

[zhyuanqi]

So the test props is "Object of props passed to the wrapping the content's text/children only (not icon)" based on the oui document. Not much difference from className. Let me move to className.

[opensearch-trigger-bot]

The backport to 2.x failed:

The process '/usr/bin/git' failed with exit code 1

To backport manually, run these commands in your terminal:

# Navigate to the root of your repository
cd $(git rev-parse --show-toplevel)
# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add ../.worktrees/OpenSearch-Dashboards/backport-2.x 2.x
# Navigate to the new working tree
pushd ../.worktrees/OpenSearch-Dashboards/backport-2.x
# Create a new branch
git switch --create backport/backport-6465-to-2.x
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 b619ccb5fea8b23a748d74ba3dec21aabb1a7765
# Push it to GitHub
git push --set-upstream origin backport/backport-6465-to-2.x
# Go back to the original working tree
popd
# Delete the working tree
git worktree remove ../.worktrees/OpenSearch-Dashboards/backport-2.x

Then, create a pull request where the base branch is 2.x and the compare/head branch is backport/backport-6465-to-2.x.

[opensearch-trigger-bot]

The backport to 2.x failed:

The process '/usr/bin/git' failed with exit code 1

To backport manually, run these commands in your terminal:

# Navigate to the root of your repository
cd $(git rev-parse --show-toplevel)
# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add ../.worktrees/OpenSearch-Dashboards/backport-2.x 2.x
# Navigate to the new working tree
pushd ../.worktrees/OpenSearch-Dashboards/backport-2.x
# Create a new branch
git switch --create backport/backport-6465-to-2.x
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 b619ccb5fea8b23a748d74ba3dec21aabb1a7765
# Push it to GitHub
git push --set-upstream origin backport/backport-6465-to-2.x
# Go back to the original working tree
popd
# Delete the working tree
git worktree remove ../.worktrees/OpenSearch-Dashboards/backport-2.x

Then, create a pull request where the base branch is 2.x and the compare/head branch is backport/backport-6465-to-2.x.