Merge release/1.33.0 into main branch (#709)

* change Select option color to $ux-gray-900 (#707)

* text-decoration none on DropdownItem hover (#706)

* add unstyled variant to DropdownToggle (#704)

Author: github-actions[bot]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "1.32.5",
+  "version": "1.33.0",
   "dependencies": {
     "react-bootstrap": "^2.0.2",
     "react-router-dom": "^5.2.0",

spec/__snapshots__/Storyshots.test.js.snap

@@ -5149,6 +5149,92 @@ exports[`Storyshots Components/Dropdown Sizes 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/Dropdown Unstyled Toggle 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <div
+    className="Dropdown dropdown"
+  >
+    <button
+      aria-expanded={false}
+      aria-label="dropdown-toggle"
+      className="DropdownToggle DropdownToggle--unstyled DropdownToggle--no-caret btn btn-primary"
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      <div
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#444444",
+            "display": "flex",
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+            "padding": "12px",
+            "width": "200px",
+          }
+        }
+      >
+        <div>
+          <div
+            style={
+              Object {
+                "fontSize": "18px",
+                "fontWeight": "700",
+              }
+            }
+          >
+            Team A
+          </div>
+          <div
+            style={
+              Object {
+                "backgroundColor": "#444444",
+                "fontSize": "12px",
+                "fontWeight": "400",
+              }
+            }
+          >
+            Organization
+          </div>
+        </div>
+        <div
+          style={
+            Object {
+              "marginRight": "4px",
+            }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="svg-inline--fa fa-chevron-down fa-w-14 "
+            data-icon="chevron-down"
+            data-prefix="fas"
+            focusable="false"
+            role="img"
+            style={Object {}}
+            viewBox="0 0 448 512"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"
+              fill="currentColor"
+              style={Object {}}
+            />
+          </svg>
+        </div>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/Form Default 1`] = `
 <div
   style={

src/Dropdown/Dropdown.mdx

@@ -57,6 +57,13 @@ Avoid the Dropdown component if:
   <Story id="components-dropdown--icon-swap" />
 </Canvas>
 
+### Unstyled Toggle
+- Use the `unstyled` and `removeCaret` prop on `DropdownToggle` to remove default styling.
+
+<Canvas>
+  <Story id="components-dropdown--unstyled-toggle" />
+</Canvas>
+
 
 ## Formatting
 
@@ -66,6 +73,7 @@ Avoid the Dropdown component if:
 
 ## Best practices
 
+
 ### General
 The Dropdown component should:
 

src/Dropdown/Dropdown.stories.jsx

@@ -3,7 +3,8 @@ 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 +102,33 @@ export const IconSwap = () => (
     </Dropdown>
   </>
 );
+
+export const UnstyledToggle = () => (
+  <Dropdown>
+    <DropdownToggle removeCaret unstyled>
+      <div style={{
+        padding: '12px',
+        backgroundColor: '#444444',
+        width: '200px',
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        }}
+      >
+        <div>
+          <div style={{ fontSize: '18px', fontWeight: '700' }}>Team A</div>
+          <div style={{ fontSize: '12px', fontWeight: '400', backgroundColor: '#444444' }}>Organization</div>
+        </div>
+        <div style={{ marginRight: '4px' }}>
+          <FontAwesomeIcon icon={faChevronDown} />
+        </div>
+      </div>
+    </DropdownToggle>
+    <DropdownMenu>
+      <DropdownItem href="#">Team A</DropdownItem>
+      <DropdownItem href="#">Team B</DropdownItem>
+      <DropdownItem href="#">Team C</DropdownItem>
+    </DropdownMenu>
+  </Dropdown>
+);

src/Dropdown/DropdownItem.scss

@@ -5,7 +5,8 @@
   color: $ux-gray-900;
 
   &:hover {
-    background-color: $ux-blue-100;
+    background-color: $ux-blue-200;
+    text-decoration: none;
   }
 
   &:focus {

src/Dropdown/DropdownToggle.jsx

@@ -18,21 +18,26 @@ const DropdownToggle = ({
   id,
   leadingIcon,
   removeCaret,
+  unstyled,
   ...props
 }) => (
   <RBDropdown.Toggle
     aria-label={ariaLabel}
     as={as}
     bsPrefix={removeCaret ? 'DropdownToggle--no-caret' : bsPrefix}
     childBsPrefix={childBsPrefix}
-    className={classNames('DropdownToggle', className)}
+    className={classNames(
+        'DropdownToggle',
+        className,
+        { 'DropdownToggle--unstyled': unstyled },
+      )}
     id={id}
     {...props}
   >
     { leadingIcon && (<FontAwesomeIcon className="icon-left" icon={leadingIcon} />)}
     { children }
   </RBDropdown.Toggle>
-  );
+);
 
 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;

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;

src/Select/styles.js

@@ -91,7 +91,7 @@ const defaultStyles = ({ size }) => ({
     }) => ({
         ...styles,
         backgroundColor: isSelected ? systemColors.UX_BLUE_200 : styles.backgroundColor,
-        color: systemColors.UX_BLACK,
+        color: systemColors.UX_GRAY_900,
         fontWeight: fontWeights.light,
         fontSize: '0.875rem',
         cursor: 'pointer',