Styling layout ux polish part 1

src/components/button/__snapshots__/button.test.js.snap

@@ -44,7 +44,8 @@ exports[`Borderless Button renders 1`] = `
   fill: #00CD51;
 }
 
-.c0.c0:active {
+.c0.c0:active,
+.c0.c0[aria-expanded="true"] {
   border-color: rgba(255,255,255,0.0);
   background-color: rgba(255,255,255,0.0);
   color: #00CD51;
@@ -104,7 +105,7 @@ exports[`Button states renders loading icon 1`] = `
   padding: 4px 12px;
   transition: all 150ms;
   background-color: #00AB44;
-  color: #F6F7F7;
+  color: #FFFFFF;
   border-width: 1px;
   border-style: solid;
   border-color: #00AB44;
@@ -125,18 +126,19 @@ exports[`Button states renders loading icon 1`] = `
 .c0.c0:hover {
   border-color: #42B861;
   background-color: #42B861;
-  color: #F6F7F7;
+  color: #FFFFFF;
   text-decoration: none;
 }
 
 .c0.c0:hover .button-icon {
-  fill: #F6F7F7;
+  fill: #FFFFFF;
 }
 
-.c0.c0:active {
+.c0.c0:active,
+.c0.c0[aria-expanded="true"] {
   border-color: #00CD51;
   background-color: #00CD51;
-  color: #F6F7F7;
+  color: #FFFFFF;
   box-shadow: inset 0 4px 4px rgba(0,0,0,0.25);
 }
 
@@ -147,7 +149,7 @@ exports[`Button states renders loading icon 1`] = `
 .c0.c0 .button-icon {
   height: 14px;
   width: 14px;
-  fill: #F6F7F7;
+  fill: #FFFFFF;
 }
 
 .c0.c0 .ntd-spinner {
@@ -156,12 +158,12 @@ exports[`Button states renders loading icon 1`] = `
   stroke-dasharray: 100;
   stroke-dashoffset: 100;
   animation: ntd-draw 1s linear infinite;
-  stroke: #F6F7F7;
+  stroke: #FFFFFF;
   width: 24px;
 }
 
 .c0.c0 .path {
-  stroke: #F6F7F7;
+  stroke: #FFFFFF;
 }
 
 .c1 {
@@ -255,7 +257,8 @@ exports[`Button states renders only icon 1`] = `
   fill: #00AB44;
 }
 
-.c0.c0:active {
+.c0.c0:active,
+.c0.c0[aria-expanded="true"] {
   border-color: #00AB44;
   background-color: #DDFFEB;
   color: #00AB44;
@@ -376,7 +379,8 @@ exports[`Button states renders smaller only icon 1`] = `
   fill: #00AB44;
 }
 
-.c0.c0:active {
+.c0.c0:active,
+.c0.c0[aria-expanded="true"] {
   border-color: #00AB44;
   background-color: #DDFFEB;
   color: #00AB44;
@@ -468,7 +472,7 @@ exports[`Default Button renders 1`] = `
   padding: 4px 12px;
   transition: all 150ms;
   background-color: #00AB44;
-  color: #F6F7F7;
+  color: #FFFFFF;
   border-width: 1px;
   border-style: solid;
   border-color: #00AB44;
@@ -485,18 +489,19 @@ exports[`Default Button renders 1`] = `
 .c0.c0:hover {
   border-color: #42B861;
   background-color: #42B861;
-  color: #F6F7F7;
+  color: #FFFFFF;
   text-decoration: none;
 }
 
 .c0.c0:hover .button-icon {
-  fill: #F6F7F7;
+  fill: #FFFFFF;
 }
 
-.c0.c0:active {
+.c0.c0:active,
+.c0.c0[aria-expanded="true"] {
   border-color: #00CD51;
   background-color: #00CD51;
-  color: #F6F7F7;
+  color: #FFFFFF;
   box-shadow: inset 0 4px 4px rgba(0,0,0,0.25);
 }
 
@@ -507,7 +512,7 @@ exports[`Default Button renders 1`] = `
 .c0.c0 .button-icon {
   height: 14px;
   width: 14px;
-  fill: #F6F7F7;
+  fill: #FFFFFF;
 }
 
 .c0.c0 .ntd-spinner {
@@ -516,12 +521,12 @@ exports[`Default Button renders 1`] = `
   stroke-dasharray: 100;
   stroke-dashoffset: 100;
   animation: ntd-draw 1s linear infinite;
-  stroke: #F6F7F7;
+  stroke: #FFFFFF;
   width: 24px;
 }
 
 .c0.c0 .path {
-  stroke: #F6F7F7;
+  stroke: #FFFFFF;
 }
 
 <button
@@ -581,7 +586,8 @@ exports[`Hollow Button renders 1`] = `
   fill: #00AB44;
 }
 
-.c0.c0:active {
+.c0.c0:active,
+.c0.c0[aria-expanded="true"] {
   border-color: #00AB44;
   background-color: #DDFFEB;
   color: #00AB44;

src/components/button/button.test.js

@@ -123,6 +123,20 @@ describe("Button states", () => {
     expect(button).toMatchSnapshot()
   })
 
+  it("renders active styles when active", () => {
+    const { container } = renderWithProviders(<Button label="Test" active />)
+    expect(container.firstChild).toHaveStyleRule("box-shadow", "inset 0 4px 4px rgba(0,0,0,0.25)", {
+      modifier: "&&",
+    })
+  })
+
+  it("renders active styles while its dropdown is expanded", () => {
+    const { container } = renderWithProviders(<Button label="Test" aria-expanded />)
+    expect(container.firstChild).toHaveStyleRule("box-shadow", "inset 0 4px 4px rgba(0,0,0,0.25)", {
+      modifier: '&&[aria-expanded="true"]',
+    })
+  })
+
   it("renders loading icon", () => {
     const { container, getByText, queryByTitle } = renderWithProviders(
       <Button label="Test prop text" icon="plus" isLoading />
@@ -158,7 +172,7 @@ describe("Default Button", () => {
     expect(button).toHaveStyleRule("border-color", "#00AB44", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("color", "#F6F7F7", {
+    expect(button).toHaveStyleRule("color", "#FFFFFF", {
       modifier: "&&",
     })
 
@@ -176,21 +190,21 @@ describe("Default Button", () => {
     expect(button).toHaveStyleRule("border-color", "#DB162F", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("color", "#F6F7F7", {
+    expect(button).toHaveStyleRule("color", "#FFFFFF", {
       modifier: "&&",
     })
   })
 
   it("renders for warning", () => {
     const { container } = renderWithProviders(<Button label="Test prop text" warning />)
     const button = container.firstChild
-    expect(button).toHaveStyleRule("background-color", "#FF9700", {
+    expect(button).toHaveStyleRule("background-color", "#DF8400", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("border-color", "#FF9700", {
+    expect(button).toHaveStyleRule("border-color", "#DF8400", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("color", "#F6F7F7", {
+    expect(button).toHaveStyleRule("color", "#FFFFFF", {
       modifier: "&&",
     })
   })
@@ -204,7 +218,7 @@ describe("Default Button", () => {
     expect(button).toHaveStyleRule("border-color", "#526161", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("color", "#F6F7F7", {
+    expect(button).toHaveStyleRule("color", "#FFFFFF", {
       modifier: "&&",
     })
   })
@@ -259,10 +273,10 @@ describe("Hollow Button", () => {
     expect(button).toHaveStyleRule("background-color", "rgba(255,255,255,0.0)", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("border-color", "#FF9700", {
+    expect(button).toHaveStyleRule("border-color", "#DF8400", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("color", "#FF9700", {
+    expect(button).toHaveStyleRule("color", "#DF8400", {
       modifier: "&&",
     })
   })
@@ -336,7 +350,7 @@ describe("Borderless Button", () => {
     expect(button).toHaveStyleRule("border-color", "rgba(255,255,255,0.0)", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("color", "#FF9700", {
+    expect(button).toHaveStyleRule("color", "#DF8400", {
       modifier: "&&",
     })
   })

src/components/button/styled.js

@@ -48,6 +48,8 @@ const getTextColor = props =>
   props.neutral
     ? getColor(props.flavour === HOLLOW ? "text" : "mainBackground")(props)
     : getColor(props.flavour === HOLLOW ? "secondaryColor" : "mainBackground")(props)
+const getBorderHoverColor = props =>
+  props.neutral ? getColor("inputBorderHover")(props) : getColor("primary")(props)
 const getHoverColor = props =>
   props.neutral ? getColor("generic")(props) : getColor("accent")(props)
 
@@ -100,8 +102,8 @@ const colorsByFlavour = ({ flavour = DEFAULT, danger, warning, iconColor, color
       bgHover: getAccentColor,
       bgActive: getAccentColor,
       border: getSpecialColor || getBorderColor,
-      borderHover: getSpecialColorHover || getPrimaryColor,
-      borderActive: getSpecialColorActive || getPrimaryColor,
+      borderHover: getSpecialColorHover || getBorderHoverColor,
+      borderActive: getSpecialColorActive || getBorderHoverColor,
       iconColor: specialIconColor || getSpecialColor || getPrimaryColor,
     },
     [BORDER_LESS]: {
@@ -190,14 +192,11 @@ export const StyledButton = styled.button.attrs(
       }
     }
 
-    &:active {
+    &:active,
+    &[aria-expanded="true"] {
       ${activeStyles}
     }
-    ${props =>
-      props.active &&
-      `
-      ${activeStyles}
-    `}
+    ${props => props.active && activeStyles}
 
     &:focus {
       outline: none;

src/components/drops/drop/index.js

@@ -8,6 +8,7 @@ import useForwardRef from "@/hooks/useForwardRef"
 import useDimensionChange from "./useDimensionChange"
 import useMakeUpdatePosition from "./useMakeUpdatePosition"
 import Container from "./container"
+import { withDropdownDefaults } from "../dropdownStyles"
 import backdropBlur from "@/components/templates/layer/mixins/backdropBlur"
 import styled from "styled-components"
 
@@ -39,8 +40,10 @@ const Drop = ({
   dataDrop = "drop-content",
   ref: parentRef,
   backdropProps = {},
-  ...rest
+  ...props
 }) => {
+  const rest = withDropdownDefaults(props)
+
   const [ref, setRef] = useForwardRef(parentRef)
 
   const updatePosition = useMakeUpdatePosition(

src/components/drops/dropdownStyles.js

@@ -0,0 +1,12 @@
+export const dropdownBorder = { side: "all", size: "1px", type: "solid", color: "border" }
+
+export const dropdownRound = 1
+
+export const withDropdownDefaults = props =>
+  props.background === "dropdown"
+    ? {
+        ...props,
+        border: props.border === undefined ? dropdownBorder : props.border,
+        round: props.round === undefined ? dropdownRound : props.round,
+      }
+    : props

src/components/drops/dropdownStyles.test.js

@@ -0,0 +1,25 @@
+import { dropdownBorder, dropdownRound, withDropdownDefaults } from "./dropdownStyles"
+
+describe("withDropdownDefaults", () => {
+  it("adds the dropdown border and radius to dropdown backgrounds", () => {
+    expect(withDropdownDefaults({ background: "dropdown", padding: [2] })).toEqual({
+      background: "dropdown",
+      padding: [2],
+      border: dropdownBorder,
+      round: dropdownRound,
+    })
+  })
+
+  it("keeps explicit border and radius overrides", () => {
+    expect(withDropdownDefaults({ background: "dropdown", border: false, round: 2 })).toEqual({
+      background: "dropdown",
+      border: false,
+      round: 2,
+    })
+  })
+
+  it("leaves other backgrounds untouched", () => {
+    const props = { background: "tooltip" }
+    expect(withDropdownDefaults(props)).toBe(props)
+  })
+})

src/components/drops/menu/dropdown.js

@@ -6,6 +6,7 @@ import { Text } from "@/components/typography"
 import Search from "@/components/search"
 import Box from "@/components/templates/box"
 import { mergeRefs } from "@/utils"
+import { dropdownBorder, dropdownRound } from "../dropdownStyles"
 
 const Container = styled(Flex)`
   ${({ hideShadow }) =>
@@ -79,6 +80,8 @@ const Dropdown = ({
       as="ul"
       role="listbox"
       background="dropdown"
+      border={dropdownBorder}
+      round={dropdownRound}
       hideShadow={hideShadow}
       padding={[0]}
       margin={[1, 0]}