remove revert minWidth from examples, add minWidth to props

Author: kmcfaul

packages/react-core/src/components/Dropdown/Dropdown.tsx

@@ -31,6 +31,8 @@ export interface DropdownProps extends React.HTMLProps<HTMLDivElement>, OUIAProp
   };
   /** Display menu above or below dropdown toggle */
   direction?: DropdownDirection | 'up' | 'down';
+  /** Minimum width of the dropdown menu. If set to "trigger", the minimum width will be set to the toggle width. */
+  minWidth?: string | 'trigger';
   /** The container to append the menu to. Defaults to 'inline'.
    * If your menu is being cut off you can append it to an element higher up the DOM tree.
    * Some examples:
@@ -72,14 +74,15 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   ouiaSafe,
   alignments,
   contextProps,
+  minWidth,
   menuAppendTo = 'inline',
   isFlipEnabled = true,
   zIndex = 9999,
   ...props
 }: DropdownProps) => (
   <DropdownContext.Provider
     value={{
-      onSelect: event => onSelect && onSelect(event),
+      onSelect: (event) => onSelect && onSelect(event),
       toggleTextClass: styles.dropdownToggleText,
       toggleIconClass: styles.dropdownToggleImage,
       toggleIndicatorClass: styles.dropdownToggleIcon,
@@ -104,6 +107,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
       menuAppendTo={menuAppendTo}
       isFlipEnabled={isFlipEnabled}
       zIndex={zIndex}
+      minWidth={minWidth}
       {...props}
     />
   </DropdownContext.Provider>

packages/react-core/src/components/Dropdown/DropdownWithContext.tsx

@@ -75,6 +75,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
       position,
       toggle,
       autoFocus,
+      minWidth,
       menuAppendTo,
       isFlipEnabled,
       zIndex,
@@ -175,7 +176,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
               appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
               isVisible={isOpen}
               zIndex={zIndex}
-              minWidth="revert"
+              minWidth={minWidth !== undefined ? minWidth : 'revert'}
             />
           );
         }}

packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddDropdown.tsx

@@ -114,7 +114,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
         categoryName="Label group 1"
         numLabels={5}
         isEditable
-        addLabelControl={<Popper trigger={toggle} popper={menu} isVisible={isOpen} minWidth="revert" />}
+        addLabelControl={<Popper trigger={toggle} popper={menu} isVisible={isOpen} />}
       >
         {labels.map((label, index) => (
           <Label

packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx

@@ -287,7 +287,6 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
                 popper={colorMenu}
                 appendTo={colorContainerRef.current as HTMLElement}
                 isVisible={isColorOpen}
-                minWidth="revert"
               />
             </div>
           </FormGroup>
@@ -298,7 +297,6 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
                 popper={iconMenu}
                 appendTo={iconContainerRef.current as HTMLElement}
                 isVisible={isIconOpen}
-                minWidth="revert"
               />
             </div>
           </FormGroup>

packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -16,6 +16,8 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   isDisabled?: boolean;
   /** Menu will open up or open down from the options menu toggle. */
   dropDirection?: 'up' | 'down';
+  /** Minimum width of the pagination options menu. If set to "trigger", the minimum width will be set to the toggle width. */
+  minWidth?: string | 'trigger';
   /** Array of titles and values which will be the options on the options menu dropdown. */
   perPageOptions?: PerPageOptions[];
   /** The title of the pagination options menu. */
@@ -58,6 +60,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   page: pageProp,
   itemCount,
   isDisabled = false,
+  minWidth,
   dropDirection = 'down',
   perPageOptions = [] as PerPageOptions[],
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -204,7 +207,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
         isVisible={isOpen}
         direction={dropDirection}
         appendTo={containerRef.current || undefined}
-        minWidth="revert"
+        minWidth={minWidth !== undefined ? minWidth : 'revert'}
       />
     </div>
   );

packages/react-core/src/components/Tooltip/Tooltip.tsx

@@ -92,6 +92,8 @@ export interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'con
         | 'right-start'
         | 'right-end'
       )[];
+  /** Minimum width of the tooltip. If set to "trigger", the minimum width will be set to the reference element width. */
+  minWidth?: string | 'trigger';
   /** Maximum width of the tooltip (default 18.75rem) */
   maxWidth?: string;
   /** Callback when tooltip's hide transition has finished executing */
@@ -150,6 +152,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   exitDelay = 300,
   appendTo = () => document.body,
   zIndex = 9999,
+  minWidth,
   maxWidth = tooltipMaxWidth.value,
   distance = 15,
   aria = 'describedby',
@@ -317,7 +320,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
       trigger={aria !== 'none' && visible ? addAriaToTrigger() : children}
       reference={reference}
       popper={content}
-      minWidth="revert"
+      minWidth={minWidth !== undefined ? minWidth : 'revert'}
       appendTo={appendTo}
       isVisible={visible}
       positionModifiers={positionModifiers}

packages/react-core/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx

@@ -122,5 +122,5 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
     </Menu>
   );
 
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} minWidth="revert" />;
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
 };

packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx

@@ -265,5 +265,5 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} minWidth="revert" />;
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
 };

packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx

@@ -198,5 +198,5 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
       </MenuFooter>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} minWidth="revert" />;
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
 };

packages/react-core/src/demos/ComposableMenu/examples/ComposableDateSelect.tsx

@@ -109,5 +109,5 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} minWidth="revert" />;
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
 };