Merge pull request #2834 from bryceosterhaus/2819

fix: adjust button displayType
liferay · Jan 10, 2020 · 67d6a79 · 67d6a79
2 parents 9276a70 + 26a9f12
commit 67d6a79
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 26 deletions.
diff --git a/packages/clay-drop-down/src/DropDown.tsx b/packages/clay-drop-down/src/DropDown.tsx
@@ -32,7 +32,7 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement | HTMLLIElement> {
 	/**
 	 * HTML element tag that the container should render.
 	 */
-	containerElement?: 'div' | 'li';
+	containerElement?: React.JSXElementConstructor<any> | 'div' | 'li';
 
 	/**
 	 * Flag to indicate if menu contains icon symbols on the right side.

diff --git a/packages/clay-management-toolbar/stories/index.tsx b/packages/clay-management-toolbar/stories/index.tsx
@@ -60,7 +60,7 @@ storiesOf('Components|ClayManagementToolbar', module).add(
 							trigger={
 								<ClayButton
 									className="nav-link"
-									displayType="unstyled"
+									displayType="link"
 								>
 									<span className="navbar-breakpoint-down-d-none">
 										<span className="navbar-text-truncate">
@@ -86,7 +86,7 @@ storiesOf('Components|ClayManagementToolbar', module).add(
 						<ClayManagementToolbar.Item>
 							<ClayButton
 								className="nav-link nav-link-monospaced order-arrow-down-active"
-								displayType="unstyled"
+								displayType="link"
 								onClick={() => {}}
 							>
 								<ClayIcon
@@ -142,7 +142,7 @@ storiesOf('Components|ClayManagementToolbar', module).add(
 						<ClayManagementToolbar.Item>
 							<ClayButton
 								className="nav-link nav-link-monospaced"
-								displayType="unstyled"
+								displayType="link"
 								onClick={() => {}}
 							>
 								<ClayIcon
@@ -152,27 +152,26 @@ storiesOf('Components|ClayManagementToolbar', module).add(
 							</ClayButton>
 						</ClayManagementToolbar.Item>
 
-						<ClayManagementToolbar.Item>
-							<ClayDropDownWithItems
-								items={viewTypes}
-								spritemap={spritemap}
-								trigger={
-									<ClayButton
-										className="nav-link nav-link-monospaced"
-										displayType="unstyled"
-									>
-										<ClayIcon
-											spritemap={spritemap}
-											symbol={
-												viewTypeActive
-													? (viewTypeActive.symbolLeft as string)
-													: ''
-											}
-										/>
-									</ClayButton>
-								}
-							/>
-						</ClayManagementToolbar.Item>
+						<ClayDropDownWithItems
+							containerElement={ClayManagementToolbar.Item}
+							items={viewTypes}
+							spritemap={spritemap}
+							trigger={
+								<ClayButton
+									className="nav-link nav-link-monospaced"
+									displayType="link"
+								>
+									<ClayIcon
+										spritemap={spritemap}
+										symbol={
+											viewTypeActive
+												? (viewTypeActive.symbolLeft as string)
+												: ''
+										}
+									/>
+								</ClayButton>
+							}
+						/>
 
 						<ClayManagementToolbar.Item>
 							<ClayButtonWithIcon
@@ -206,7 +205,7 @@ storiesOf('Components|ClayManagementToolbar', module).add(
 					<ClayResultsBar.Item>
 						<ClayButton
 							className="component-link tbar-link"
-							displayType="unstyled"
+							displayType="link"
 						>
 							{'Clear'}
 						</ClayButton>