Modify the button of selectable component to fix the title overflow i…

…ssue Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com>
opensearch-project · Apr 15, 2024 · d1ddf0d · d1ddf0d
1 parent 476cffc
commit d1ddf0d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/plugins/data_source_management/public/components/button_title.scss b/src/plugins/data_source_management/public/components/button_title.scss
@@ -0,0 +1,7 @@
+.buttonTitle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: auto;
+  max-width: 16ch;
+}
diff --git a/...ata_source_management/public/components/data_source_selectable/data_source_selectable.tsx b/...ata_source_management/public/components/data_source_selectable/data_source_selectable.tsx
@@ -26,6 +26,7 @@ import { LocalCluster } from '../data_source_selector/data_source_selector';
 import { SavedObject } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
 import { DataSourceGroupLabelOption, DataSourceOption } from '../data_source_menu/types';
+import '../button_title.scss';
 
 interface DataSourceSelectableProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -237,6 +238,7 @@ export class DataSourceSelectable extends React.Component<
           iconSide="left"
           size="s"
           disabled={this.props.disabled || false}
+          textProps={{ className: 'buttonTitle' }}
         >
           {this.state.selectedOption &&
             this.state.selectedOption.length > 0 &&