@sproutsocial/racine 7.7.0-beta-collapsible.0 → 8.0.0-beta-dark-mode.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 7.6.0
+
+### Minor Changes
+
+- b69f92a: fix(token) hover styling for invalid tokens
+
 ## 7.5.0
 
 ### Minor Changes

package/__flow__/Badge/styles.js

@@ -16,7 +16,7 @@ const colors = {
 };
 
 const backgroundColors = {
-  primary: "colors.cta.primary",
+  primary: "colors.blue.700",
   secondary: "colors.yellow.500",
   passive: "colors.neutral.200",
   common: "colors.aqua.600",

package/__flow__/Banner/index.js

@@ -45,7 +45,8 @@ export default class Banner extends React.Component<TypeProps> {
     const { type, text, ...rest } = this.props;
     return (
       <Container
-        type={type}
+        // danger needs to be properly deprecated and removed DS-1094
+        type={type === "danger" ? "error" : type}
         data-qa-alert={""}
         data-qa-alert-type={type}
         data-qa-alert-text={text}

package/__flow__/Banner/styles.js

@@ -15,28 +15,31 @@ const Container: StyledComponent<TypeProps, TypeTheme, *> = styled.div(
     overflow: hidden;
     align-items: center;
     justify-content: space-between;
-    color: ${props.theme.colors.text.headline};
+    color: ${props.theme.colors.text.body};
     border-radius: ${props.theme.radii.outer};
     font-family: ${props.theme.fontFamily};
     ${props.theme.typography[200]}
     padding: ${props.theme.space[300]};
-    border: 1px solid ${props.theme.colors[props.type].border};
-    background-color: ${props.theme.colors[props.type].background};
+    border: 1px solid ${props.theme.colors.container.border[props.type]};
+    background-color: ${props.theme.colors.container.background[props.type]};
 
     .Icon {
       align-self: flex-start;
       margin-top: 3px;
       margin-right: ${props.theme.space[400]};
       min-width: 16px;
-      color: ${props.theme.colors[props.type].icon};
+      color: ${props.theme.colors.icon[props.type]};
     }
 
     a,
     button {
       font-weight: ${props.theme.fontWeights.semibold};
-      color: ${props.theme.colors.text.headline};
+      color: ${props.theme.colors.text.body};
       font-size: inherit;
-      text-decoration: underline;
+      &:hover {
+        color: ${props.theme.colors.text.body};
+        text-decoration: underline;
+      }
     }
 
     > span:not(.Icon) {

package/__flow__/Box/index.stories.js

@@ -3,7 +3,7 @@ import { css } from "styled-components";
 import { text } from "@storybook/addon-knobs";
 import Box from "./index";
 import useMeasure from "use-measure";
-import theme from "../utils/theme";
+import theme from "../themes/default/theme";
 
 export default {
   title: "Box",
@@ -67,7 +67,7 @@ export const Responsive = () => {
               top: 0;
               bottom: 0;
               width: 324px;
-              background: ${(p) => p.theme.colors.background.container};
+              background: ${(p) => p.theme.colors.container.background.base};
             }
 
             &:after {
@@ -78,7 +78,7 @@ export const Responsive = () => {
               bottom: 0;
               width: 64px;
               background: white;
-              border: 1px solid ${(p) => p.theme.colors.border};
+              border: 1px solid ${(p) => p.theme.colors.container.border.base};
             }
           `}
         >

package/__flow__/Box/styles.js

@@ -32,15 +32,15 @@ export type TypeContainerProps = $ReadOnly<{|
 
 type TypeBoxContainer = StyledComponent<TypeContainerProps, TypeTheme, *>;
 const Container: TypeBoxContainer = styled.div`
-    box-sizing: border-box;
-    font-family: ${({ theme }) => theme.fontFamily};
+  box-sizing: border-box;
+  font-family: ${({ theme }) => theme.fontFamily};
 
-    ${COMMON}
-    ${BORDER}
-    ${LAYOUT}
-    ${POSITION}
-    ${FLEXBOX}
-    ${GRID}
-  `;
+  ${COMMON}
+  ${BORDER}
+  ${LAYOUT}
+  ${POSITION}
+  ${FLEXBOX}
+  ${GRID}
+`;
 
 export default Container;

package/__flow__/Button/__snapshots__/index.test.js.snap

@@ -23,7 +23,7 @@ exports[`Racine Button should render in active state 1`] = `
   padding: 8px;
   font-size: 13px;
   color: #FFFFFF !important;
-  background: #364141 !important;
+  background: #273333 !important;
 }
 
 .c0:visited {
@@ -40,7 +40,7 @@ exports[`Racine Button should render in active state 1`] = `
 
 .c0:active {
   color: #FFFFFF;
-  background: #364141;
+  background: #273333;
   -webkit-transform: translateY(1px);
   -ms-transform: translateY(1px);
   transform: translateY(1px);
@@ -257,7 +257,7 @@ exports[`Racine Button should render in large size 1`] = `
 
 .c0:active {
   color: #FFFFFF;
-  background: #364141;
+  background: #273333;
   -webkit-transform: translateY(1px);
   -ms-transform: translateY(1px);
   transform: translateY(1px);
@@ -475,7 +475,7 @@ exports[`Racine Button should render in secondary style 1`] = `
 
 .c0:active {
   color: #FFFFFF;
-  background: #364141;
+  background: #273333;
   -webkit-transform: translateY(1px);
   -ms-transform: translateY(1px);
   transform: translateY(1px);

package/__flow__/Button/index.js

@@ -6,12 +6,14 @@ export type TypeProps = {
   /** If the button is being used as an anchor, this prop will cause the link to open in a new tab. */
   external?: boolean,
   size?: "large" | "default",
+  /** What the button looks like. "default" is deprecated in favor of "unstyled" */
   appearance?:
     | "primary"
     | "secondary"
     | "pill"
     | "destructive"
     | "default"
+    | "unstyled"
     | "placeholder",
   /** Set the button to display in its active state */
   active?: boolean,
@@ -33,7 +35,7 @@ export type TypeProps = {
 
 const Button = ({
   href,
-  appearance = "default",
+  appearance = "unstyled",
   active = false,
   disabled,
   external,
@@ -53,6 +55,9 @@ const Button = ({
     );
   }
 
+  // plans to properly deprecate captured in DS-1096
+  const appearanceCheck = appearance === "default" ? "unstyled" : appearance;
+
   return (
     <Container
       title={title}
@@ -65,7 +70,7 @@ const Button = ({
       aria-disabled={disabled ? disabled : undefined}
       disabled={disabled}
       buttonSize={size}
-      appearance={appearance}
+      appearance={appearanceCheck}
       ref={innerRef}
       onClick={onClick}
       data-qa-button={title || ""}

package/__flow__/Button/index.stories.js

@@ -9,7 +9,12 @@ export default {
 };
 
 export const defaultStory = () => (
-  <Button onClick={() => alert("Testing...")}>Default</Button>
+  <Button
+    appearance={text("appearance", "default")}
+    onClick={() => alert("Testing...")}
+  >
+    Default
+  </Button>
 );
 
 defaultStory.story = {

package/__flow__/Button/styles.js

@@ -12,12 +12,13 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
   text-align: center;
   font-family: ${(props) => props.theme.fontFamily};
   border: 1px solid
-    ${(props) => props.theme.colors.cta[props.appearance].borderColor};
+    ${(props) => props.theme.colors.button[props.appearance].border.base};
   border-radius: ${(props) => props.theme.radii[500]};
   border-style: ${(props) =>
     props.appearance === "placeholder" ? "dashed" : "solid"};
-  background: ${(props) => props.theme.colors.cta[props.appearance].background};
-  color: ${(props) => props.theme.colors.cta[props.appearance].color};
+  background: ${(props) =>
+    props.theme.colors.button[props.appearance].background.base};
+  color: ${(props) => props.theme.colors.button[props.appearance].text.base};
   cursor: pointer;
   text-decoration: none;
   /**
@@ -41,22 +42,22 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       : props.theme.typography[300].fontSize};
 
   &:visited {
-    color: ${(props) => props.theme.colors.cta[props.appearance].color};
+    color: ${(props) => props.theme.colors.button[props.appearance].text.base};
   }
 
   &:hover {
-    color: ${(props) => props.theme.colors.cta[props.appearance].hoverColor};
+    color: ${(props) => props.theme.colors.button[props.appearance].text.hover};
     background: ${(props) =>
-      props.theme.colors.cta[props.appearance].hoverBackground};
+      props.theme.colors.button[props.appearance].background.hover};
     text-decoration: none;
     box-shadow: ${(props) =>
       props.appearance === "placeholder" ? props.theme.shadows[100] : "none"};
   }
 
   &:active {
-    color: ${(props) => props.theme.colors.cta[props.appearance].hoverColor};
+    color: ${(props) => props.theme.colors.button[props.appearance].text.hover};
     background: ${(props) =>
-      props.theme.colors.cta[props.appearance].activeBackground};
+      props.theme.colors.button[props.appearance].background.active};
     transform: translateY(1px);
   }
 
@@ -71,9 +72,10 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
   ${(props) =>
     props.active &&
     css`
-      color: ${props.theme.colors.cta[props.appearance].hoverColor} !important;
-      background: ${props.theme.colors.cta[props.appearance]
-        .activeBackground} !important;
+      color: ${props.theme.colors.button[props.appearance].text
+        .hover} !important;
+      background: ${props.theme.colors.button[props.appearance].background
+        .active} !important;
     `}
 
   ${(props) => props.disabled && disabled}
@@ -84,7 +86,8 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      mix-blend-mode: multiply;
+      /* This solution is temporary. DS-1095 */
+      mix-blend-mode: ${props.theme.mode ? "screen" : "multiply"};
 
       ${pill}
     `}
@@ -98,3 +101,5 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
 `;
 
 export default Container;
+
+//${props.theme.mode === "dark" ? "screen" : "multiply"}

package/__flow__/Card/index.js

@@ -26,9 +26,9 @@ const Card = ({
   ariaLabel,
   buttonProps = {},
   border = 500,
-  borderColor = "border",
+  borderColor = "container.border.base",
   color = "text.body",
-  bg = "background.container",
+  bg = "container.background.base",
   ...rest
 }: TypeProps) => {
   return (

package/__flow__/CharacterCounter/styles.js

@@ -12,7 +12,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   font-variant-numeric: tabular-nums;
   color: ${(props) =>
     props.overlimit
-      ? props.theme.colors.error.color
+      ? props.theme.colors.text.error
       : props.theme.colors.text.subtext};
 
   ${(p) =>

package/__flow__/ChartLegend/styles.js

@@ -25,13 +25,13 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   ${(props) =>
     props.inline &&
     css`
-    display: flex;
-    justify-content: center;
+      display: flex;
+      justify-content: center;
 
-    ${Label} + ${Label} {
-      margin-left: ${(props) => props.theme.space[450]};
-    }
-  `}
+      ${Label} + ${Label} {
+        margin-left: ${(props) => props.theme.space[450]};
+      }
+    `}
 
   ${COMMON}
   ${LAYOUT}

package/__flow__/Checkbox/styles.js

@@ -34,11 +34,12 @@ export const InputWrapper = styled<typeof Box, TypeTheme, any>(Box)`
       background-color: transparent;
       transition: all ${(props) => props.theme.duration.fast}
         ${(props) => props.theme.easing.ease_inout};
-      mix-blend-mode: multiply;
+      /* This solution is temporary. DS-1095 */
+      mix-blend-mode: ${props.theme.mode ? "screen" : "multiply"};
       ${pill}
 
       &:hover {
-        background-color: ${props.theme.colors.background.app};
+        background-color: ${props.theme.colors.app.background.base};
       }
 
       ${PillInput} {
@@ -54,9 +55,9 @@ export const CheckboxBox: StyledComponent<{ ... }, TypeTheme, *> = styled.div`
   position: relative;
   width: ${(props) => props.theme.space[400]};
   height: ${(props) => props.theme.space[400]};
-  border: 1px solid ${(props) => props.theme.colors.forms.borderColor};
+  border: 1px solid ${(props) => props.theme.colors.form.border.base};
   border-radius: 4px;
-  background-color: ${(props) => props.theme.colors.background.container};
+  background-color: ${(props) => props.theme.colors.form.background.base};
   transition: border-color ${(props) => props.theme.duration.fast}
       ${(props) => props.theme.easing.ease_in},
     background-color ${(props) => props.theme.duration.fast}
@@ -116,7 +117,7 @@ export const PillInput: StyledComponent<any, TypeTheme, *> = styled.input`
       &:focus {
         ~ ${CheckboxBox} ${CheckIcon} {
           opacity: ${(props) => (props.disabled ? 0 : 1)};
-          color: ${props.theme.colors.forms.borderColor};
+          color: ${props.theme.colors.form.border.base};
         }
       }
     `}
@@ -125,8 +126,8 @@ export const PillInput: StyledComponent<any, TypeTheme, *> = styled.input`
     props.checked &&
     css`
       ~ ${CheckboxBox} {
-        border-color: ${props.theme.colors.selection.border};
-        background-color: ${props.theme.colors.selection.background};
+        border-color: ${props.theme.colors.form.border.selected};
+        background-color: ${props.theme.colors.form.background.selected};
       }
       ~ ${CheckboxBox} ${CheckIcon} {
         opacity: 1;
@@ -195,8 +196,8 @@ export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span
           props.indeterminate ? "indeterminate" : "check",
 
           props.checked
-            ? props.theme.colors.background.container
-            : props.theme.colors.forms.borderColor
+            ? props.theme.colors.form.background.base
+            : props.theme.colors.form.border.base
         )}");
         opacity: ${props.checked ? 1 : 0};
         position: absolute;
@@ -227,9 +228,9 @@ export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span
         padding: 0;
         width: ${props.theme.space[400]};
         height: ${props.theme.space[400]};
-        border: 1px solid ${props.theme.colors.forms.borderColor};
+        border: 1px solid ${props.theme.colors.form.border.base};
         border-radius: 4px;
-        background-color: ${props.theme.colors.background.container};
+        background-color: ${props.theme.colors.form.background.base};
         transition: all ${props.theme.duration.fast}
           ${props.theme.easing.ease_in};
         cursor: ${props.disabled ? "not-allowed" : "pointer"};
@@ -240,20 +241,21 @@ export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span
           css`
             border-color: ${props.theme.colors
               .neutral[300]} !important; /* We don't want the focus ring to remove the border */
-            background-color: ${props.theme.colors.background.container};
+            background-color: ${props.theme.colors.form.background.base};
           `}
         }
 
         &:checked {
-          border-color: ${props.theme.colors.selection.border};
-          background-color: ${props.theme.colors.selection.background};
+          border-color: ${props.theme.colors.form.border.selected};
+          background-color: ${props.theme.colors.form.background.selected};
         }
 
         ${props.indeterminate &&
         props.checked &&
         css`
-          border-color: ${props.theme.colors.selection.border} !important;
-          background-color: ${props.theme.colors.selection} !important;
+          border-color: ${props.theme.colors.form.border.selected} !important;
+          background-color: ${props.theme.colors.form.background
+            .selected} !important;
         `}
 
         &:focus {

package/__flow__/Collapsible/index.js

@@ -11,8 +11,6 @@ type TypeCollapsibleContext = $Shape<{
   isOpen: boolean,
   id: string,
   offset: number,
-  openHeight: number,
-  collapsedHeight: number,
 }>;
 
 const CollapsibleContext = React.createContext<TypeCollapsibleContext>({});
@@ -22,23 +20,13 @@ type TypeProps = {
   children: React.Node,
   /** If the children of the collapsible panel have a top or bottom margin, it will throw off the calculations for the height of the content. The total amount of vertical margin (in pixels) can be supplied to this prop to correct this. */
   offset?: number,
-  collapsedHeight?: number,
-  openHeight?: number,
 };
 
-const Collapsible = ({
-  children,
-  isOpen = false,
-  offset = 0,
-  collapsedHeight = 0,
-  openHeight,
-}: TypeProps) => {
+const Collapsible = ({ children, isOpen = false, offset = 0 }: TypeProps) => {
   const [id] = useState(`Racine-collapsible-${idCounter++}`);
 
   return (
-    <CollapsibleContext.Provider
-      value={{ isOpen, id, offset, collapsedHeight, openHeight }}
-    >
+    <CollapsibleContext.Provider value={{ isOpen, id, offset }}>
       {children}
     </CollapsibleContext.Provider>
   );
@@ -59,9 +47,7 @@ const Trigger = ({ children, ...rest }) => {
 };
 
 const Panel = ({ children, ...rest }) => {
-  const { isOpen, id, offset, collapsedHeight, openHeight } = useContext(
-    CollapsibleContext
-  );
+  const { isOpen, id, offset } = useContext(CollapsibleContext);
   const ref = useRef();
   const measurement = useMeasure(ref);
   const [isHidden, setIsHidden] = useState(undefined);
@@ -71,9 +57,7 @@ const Panel = ({ children, ...rest }) => {
   // This prevents an initial expansion animation if a component starts out open
   // There is no animation because css is not changing the maxHeight property after mount
   const maxHeight =
-    typeof openHeight !== "undefined"
-      ? openHeight
-      : measurement.height + offset;
+    isHidden === undefined ? undefined : measurement.height + offset;
 
   /* We use the "hidden" attribute to remove the contents of the panel from the tab order of the page, but it fucks with the animation. This logic sets a slight timeout on setting the prop so that the animation has time to complete before the attribute is set. */
   useEffect(() => {
@@ -92,16 +76,14 @@ const Panel = ({ children, ...rest }) => {
 
   return (
     <CollapsingBox
-      scrollable={isOpen}
-      maxHeight={isOpen ? maxHeight : collapsedHeight}
-      minHeight={collapsedHeight}
+      maxHeight={isOpen ? maxHeight : "0"}
       data-qa-collapsible={""}
       data-qa-collapsible-isopen={isOpen === true}
       {...rest}
     >
       <Box
         width="100%"
-        hidden={isHidden && collapsedHeight === 0}
+        hidden={isHidden}
         aria-hidden={!isOpen}
         id={id}
         ref={ref}

package/__flow__/Collapsible/index.stories.js

@@ -26,7 +26,7 @@ export default {
 
 export const defaultStory = () => (
   <StatefulCollapse>
-    <Box width="100%" height="200px" bg="neutral.200" p={400}>
+    <Box width="100%" height="200px" bg="container.background.base" p={400}>
       <Button appearance="secondary">A button</Button>
     </Box>
   </StatefulCollapse>
@@ -38,7 +38,7 @@ defaultStory.story = {
 
 export const initialIsOpen = () => (
   <StatefulCollapse initialIsOpen>
-    <Box width="100%" height="200px" bg="neutral.200" p={400}>
+    <Box width="100%" height="200px" bg="container.background.base" p={400}>
       <Button appearance="secondary">A button</Button>
     </Box>
   </StatefulCollapse>
@@ -50,7 +50,13 @@ initialIsOpen.story = {
 
 export const withOffset = () => (
   <StatefulCollapse offset={100}>
-    <Box width="100%" height="200px" bg="neutral.200" p={400} mt="100px">
+    <Box
+      width="100%"
+      height="200px"
+      bg="container.background.base"
+      p={400}
+      mt="100px"
+    >
       <Button appearance="secondary">A button</Button>
     </Box>
   </StatefulCollapse>
@@ -62,7 +68,7 @@ withOffset.story = {
 
 export const withShortContent = () => (
   <StatefulCollapse>
-    <Box width="15%" height="50px" bg="neutral.200" p={400}>
+    <Box width="15%" height="50px" bg="container.background.base" p={400}>
       Hello.
     </Box>
   </StatefulCollapse>
@@ -74,7 +80,7 @@ withShortContent.story = {
 
 export const withTallContent = () => (
   <StatefulCollapse>
-    <Box width="15%" height="200vh" bg="neutral.200" p={400}>
+    <Box width="15%" height="200vh" bg="container.background.base" p={400}>
       Hello.
     </Box>
   </StatefulCollapse>
@@ -83,80 +89,3 @@ export const withTallContent = () => (
 withTallContent.story = {
   name: "With tall content",
 };
-
-const StatefulCollapseWithMinHeight = ({
-  children,
-  offset = 0,
-  collapsedHeight = 0,
-  openHeight,
-}) => {
-  const [open, setOpen] = useState(false);
-  const toggle = () => setOpen(!open);
-
-  return (
-    <Collapsible
-      id="test-id-1"
-      isOpen={open}
-      offset={offset}
-      openHeight={openHeight}
-      collapsedHeight={collapsedHeight}
-    >
-      <Collapsible.Panel>{children}</Collapsible.Panel>
-      <Collapsible.Trigger>
-        <Button onClick={toggle}>{open ? "Show Less" : "Show More"}</Button>
-      </Collapsible.Trigger>
-    </Collapsible>
-  );
-};
-
-export const withCollapsedHeight = () => {
-  return (
-    <StatefulCollapseWithMinHeight collapsedHeight={100} openHeight={300}>
-      <Box width="500px" p={400}>
-        Threepio! Come in, Threepio! Threepio! Get to the top! I can’t Where
-        could he be? Threepio! Threepio, will you come in? They aren’t here!
-        Something must have happened to them. See if they’ve been captured.
-        Hurry! One thing’s for sure. We’re all going to be a lot thinner! Get on
-        top of it! I’m trying! Thank goodness, they haven’t found them! Where
-        could they be? Use the comlink? Oh, my! I forgot I turned it off! Are
-        you there, sir? Threepio! We’ve had some problems… Will you shut up and
-        listen to me? Shut down all garbage mashers on the detention level, will
-        you? Do you copy? Shut down all the garbage mashers on the detention
-        level. Shut down all the garbage mashers on the detention level. No.
-        Shut them all down! Hurry! Listen to them! They’re dying, Artoo! Curse
-        my metal body! I wasn’t fast enough. It’s all my fault! My poor master!
-        Threepio, we’re all right! We’re all right. You did great. Threepio!
-        Come in, Threepio! Threepio! Get to the top! I can’t Where could he be?
-        Threepio! Threepio, will you come in? They aren’t here! Something must
-        have happened to them. See if they’ve been captured. Hurry! One thing’s
-        for sure. We’re all going to be a lot thinner! Get on top of it! I’m
-        trying! Thank goodness, they haven’t found them! Where could they be?
-        Use the comlink? Oh, my! I forgot I turned it off! Are you there, sir?
-        Threepio! We’ve had some problems… Will you shut up and listen to me?
-        Shut down all garbage mashers on the detention level, will you? Do you
-        copy? Shut down all the garbage mashers on the detention level. Shut
-        down all the garbage mashers on the detention level. No. Shut them all
-        down! Hurry! Listen to them! They’re dying, Artoo! Curse my metal body!
-        I wasn’t fast enough. It’s all my fault! My poor master! Threepio, we’re
-        all right! We’re all right. You did great. Threepio! Come in, Threepio!
-        Threepio! Get to the top! I can’t Where could he be? Threepio! Threepio,
-        will you come in? They aren’t here! Something must have happened to
-        them. See if they’ve been captured. Hurry! One thing’s for sure. We’re
-        all going to be a lot thinner! Get on top of it! I’m trying! Thank
-        goodness, they haven’t found them! Where could they be? Use the comlink?
-        Oh, my! I forgot I turned it off! Are you there, sir? Threepio! We’ve
-        had some problems… Will you shut up and listen to me? Shut down all
-        garbage mashers on the detention level, will you? Do you copy? Shut down
-        all the garbage mashers on the detention level. Shut down all the
-        garbage mashers on the detention level. No. Shut them all down! Hurry!
-        Listen to them! They’re dying, Artoo! Curse my metal body! I wasn’t fast
-        enough. It’s all my fault! My poor master! Threepio, we’re all right!
-        We’re all right. You did great.
-      </Box>
-    </StatefulCollapseWithMinHeight>
-  );
-};
-
-withCollapsedHeight.story = {
-  name: "With collapsedHeight",
-};