diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap
index 0af4bfbe..f1c07dcb 100644
--- a/spec/__snapshots__/Storyshots.test.js.snap
+++ b/spec/__snapshots__/Storyshots.test.js.snap
@@ -5149,6 +5149,92 @@ exports[`Storyshots Components/Dropdown Sizes 1`] = `
`;
+exports[`Storyshots Components/Dropdown Unstyled Toggle 1`] = `
+
+
+
+
+
+`;
+
exports[`Storyshots Components/Form Default 1`] = `
+### Unstyled Toggle
+- Use the `unstyled` and `removeCaret` prop on `DropdownToggle` to remove default styling.
+
+
+
## Formatting
diff --git a/src/Dropdown/Dropdown.stories.jsx b/src/Dropdown/Dropdown.stories.jsx
index 73af32a4..52a8331c 100644
--- a/src/Dropdown/Dropdown.stories.jsx
+++ b/src/Dropdown/Dropdown.stories.jsx
@@ -3,7 +3,7 @@ import React from 'react';
import {
Dropdown, DropdownToggle, DropdownItem, DropdownMenu,
} from 'src/Dropdown';
-import { faEllipsisV, faFileAlt } from '@fortawesome/pro-solid-svg-icons';
+import { faEllipsisV, faFileAlt, faChevronDown } from '@fortawesome/pro-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import mdx from './Dropdown.mdx';
@@ -101,3 +101,33 @@ export const IconSwap = () => (
>
);
+
+export const UnstyledToggle = () => (
+
+
+
+
+
Team A
+
Organization
+
+
+
+
+
+
+
+ Team A
+ Team B
+ Team C
+
+
+);
diff --git a/src/Dropdown/DropdownItem.scss b/src/Dropdown/DropdownItem.scss
index 73173363..6e0efeea 100644
--- a/src/Dropdown/DropdownItem.scss
+++ b/src/Dropdown/DropdownItem.scss
@@ -5,7 +5,7 @@
color: $ux-gray-900;
&:hover {
- background-color: $ux-blue-100;
+ background-color: $ux-blue-200;
text-decoration: none;
}
diff --git a/src/Dropdown/DropdownToggle.jsx b/src/Dropdown/DropdownToggle.jsx
index 7d714dc2..691850ce 100644
--- a/src/Dropdown/DropdownToggle.jsx
+++ b/src/Dropdown/DropdownToggle.jsx
@@ -18,6 +18,7 @@ const DropdownToggle = ({
id,
leadingIcon,
removeCaret,
+ unstyled,
...props
}) => (
{ leadingIcon && ()}
{ children }
- );
+);
DropdownToggle.propTypes = {
/**
@@ -64,6 +69,10 @@ DropdownToggle.propTypes = {
This allows you to use a different icon of your choice.
*/
removeCaret: PropTypes.bool,
+ /**
+ If true, it removes all styling from toggle button. Use for full custom DropdownToggle styling.
+ */
+ unstyled: PropTypes.bool,
};
DropdownToggle.defaultProps = {
@@ -75,6 +84,7 @@ DropdownToggle.defaultProps = {
id: undefined,
leadingIcon: undefined,
removeCaret: undefined,
+ unstyled: undefined,
};
export default DropdownToggle;
diff --git a/src/Dropdown/DropdownToggle.scss b/src/Dropdown/DropdownToggle.scss
index 924f0120..1bc53b31 100644
--- a/src/Dropdown/DropdownToggle.scss
+++ b/src/Dropdown/DropdownToggle.scss
@@ -7,6 +7,10 @@ $warning: $ux-yellow-400;
.DropdownToggle {
@include font-type-30--bold;
+ &--unstyled {
+ all: unset;
+ }
+
i, svg {
&.icon-left {
margin-right: $ux-spacing-20;