Merge pull request #1872 from sg00dwin/add-dropdown-full-width-to-non…

…-autocomplete-dropdowns Add ability to include dropDownClassName="dropdown--full-width"
openshift · Jul 1, 2019 · a7fcec9 · a7fcec9
2 parents 2c455bf + 4046bc2
commit a7fcec9
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/frontend/public/components/_dropdown.scss b/frontend/public/components/_dropdown.scss
@@ -20,6 +20,7 @@ $dropdown-background--hover: $color-pf-black-200; // pf-c-dropdown__menu-item--h
 .dropdown--full-width {
   &,
   .pf-c-dropdown__toggle {
+    justify-content: space-between;
     width: 100%;
   }
 }

diff --git a/frontend/public/components/source-to-image.tsx b/frontend/public/components/source-to-image.tsx
@@ -431,7 +431,13 @@ class BuildSource extends React.Component<BuildSourceProps, BuildSourceState> {
           </div>
           <div className="form-group">
             <label className="control-label co-required" htmlFor="tag">Version</label>
-            <Dropdown items={tagOptions} selectedKey={selectedTag} title={tagOptions[selectedTag]} onChange={this.onTagChange} id="tag" />
+            <Dropdown
+              dropDownClassName="dropdown--full-width"
+              items={tagOptions}
+              selectedKey={selectedTag}
+              title={tagOptions[selectedTag]}
+              onChange={this.onTagChange}
+              id="tag" />
           </div>
           <div className="form-group">
             <label className="control-label co-required" htmlFor="name">Name</label>

diff --git a/frontend/public/components/utils/dropdown.jsx b/frontend/public/components/utils/dropdown.jsx
@@ -401,7 +401,7 @@ export class Dropdown extends DropdownMixin {
 
     //pf4 markup
     return (<div className={className} ref={this.dropdownElement} style={this.props.style}>
-      <div className={classNames({'dropdown pf-c-dropdown': true, 'pf-m-expanded': this.state.active})}>
+      <div className={classNames({'dropdown pf-c-dropdown': true, 'pf-m-expanded': this.state.active}, dropDownClassName)}>
         <button aria-haspopup="true" aria-expanded={this.state.active} className={classNames('pf-c-dropdown__toggle', buttonClassName)} onClick={this.toggle} onKeyDown={this.onKeyDown} type="button" id={this.props.id} aria-describedby={describedBy} >
           <span className="pf-c-dropdown__toggle-text">
             {titlePrefix && <span className="btn-link__titlePrefix">{titlePrefix}: </span>}