**Breaking:** Remove deprecated constants

src/AvatarGroup/AvatarGroup.tsx

@@ -9,9 +9,9 @@ export interface AvatarItem {
 }
 
 export interface AvatarGroupProps extends DefaultProps {
-  children?: React.ReactNode
+  children?: never
   /** Avatars list */
-  avatars?: AvatarItem[]
+  avatars: AvatarItem[]
   /** Maximum number of avatars to display */
   maximumToDisplay?: number
   /** More button handler */
@@ -29,9 +29,7 @@ const GroupedAvatar = styled(Avatar)({
 })
 
 const AvatarGroup: React.SFC<AvatarGroupProps> = ({ avatars, size, onMoreClick, ...props }) => {
-  const avatarsToDisplay = avatars
-    ? avatars.map((avatar, i) => <GroupedAvatar addBorder size={size} key={i} {...avatar} />)
-    : props.children
+  const avatarsToDisplay = avatars.map((avatar, i) => <GroupedAvatar addBorder size={size} key={i} {...avatar} />)
   const count = React.Children.count(avatarsToDisplay)
   const mustSlice = props.maximumToDisplay! < count
 

src/AvatarGroup/README.md

@@ -94,24 +94,3 @@ const avatars = [
   <AvatarGroup avatars={avatars} maximumToDisplay={8} />
 </>
 ```
-
-### Should also work with the old API
-
-```jsx
-const avatars = [
-  {
-    name: "Peter Pan",
-    photo: "https://www.robots-and-dragons.de/sites/default/files/field/image/preview/disney-peter_pan.jpg",
-  },
-  { name: "Wendy Darling" },
-  { name: "John Darling" },
-  { name: "Micheal Darling" },
-  { name: "George Darling" },
-  { name: "Tiger Lily" },
-  { name: "Tinker Bell" },
-  { name: "The Crocodile" },
-  { name: "Captain Hook" },
-  { name: "Mr. Smee" },
-]
-;<AvatarGroup>{avatars.map(({ name, photo }, i) => <Avatar key={i} name={name} photo={photo} />)}</AvatarGroup>
-```

src/Breadcrumbs/Breadcrumbs.tsx

@@ -20,8 +20,8 @@ const Container = styled("div")({
 
 const Slash = styled("span")(({ theme }) => ({
   display: "inline-block",
-  margin: `0 ${theme.deprecated.spacing / 2}px`,
-  color: theme.deprecated.colors.gray,
+  margin: `0 ${theme.space.medium}px`,
+  color: theme.color.text.lightest,
   ":first-child": {
     marginLeft: 0,
   },

src/Breadcrumbs/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap

@@ -5,13 +5,13 @@ exports[`Breadcrumbs Component Should initialize properly 1`] = `
   class="css-ftf61z"
 >
   <div
-    class="css-16holpz-Messages"
+    class="css-p29iif"
   />
   <div
     class="css-1cv420n-breadcrumbs"
   >
     <span
-      class="css-udjxb6"
+      class="css-rgflzp"
     >
       /
     </span>
@@ -29,7 +29,7 @@ exports[`Breadcrumbs Component Should initialize properly 1`] = `
       </span>
     </span>
     <span
-      class="css-udjxb6"
+      class="css-rgflzp"
     >
       /
     </span>

src/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Button Component Should initialize properly 1`] = `
   class="css-ftf61z"
 >
   <div
-    class="css-16holpz-Messages"
+    class="css-p29iif"
   />
   <button
     class="css-1po5ksq"

src/ButtonGroup/__tests__/__snapshots__/ButtonGroup.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`ButtonGroup Component Should initialize properly 1`] = `
   class="css-ftf61z"
 >
   <div
-    class="css-16holpz-Messages"
+    class="css-p29iif"
   />
   <div
     class="css-f3sa0o-buttongroup"

src/Card/README.md

@@ -72,7 +72,7 @@ const myData = {
     repo: val => val.split(".com")[1],
     status: val => (
       <div>
-        <Status success={val === "deployed"} />
+        <Status state={val === "deployed" ? "success" : undefined} />
         {val}
       </div>
     ),

src/Card/__tests__/__snapshots__/Card.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Card Should render 1`] = `
   class="css-ftf61z"
 >
   <div
-    class="css-16holpz-Messages"
+    class="css-p29iif"
   />
   <div
     class="css-1wstrtr"

src/CardColumns/README.md

@@ -7,10 +7,7 @@ The `CardColumns` component is used as a wrapper around groups of `CardColumn` c
   <p>Here is the information available about this bundle.</p>
   <CardColumns>
     <CardColumn title="Contributors">
-      <AvatarGroup>
-        <Avatar name="Alice Bernoulli" />
-        <Avatar name="Clarence Dermot" />
-      </AvatarGroup>
+      <AvatarGroup avatars={[{ name: "Alice Bernoulli" }, { name: "Clarence Dermot" }]} />
     </CardColumn>
     <CardColumn title="Tags">
       <Chip>agent-view</Chip>
@@ -28,10 +25,7 @@ The `CardColumns` component is used as a wrapper around groups of `CardColumn` c
     <p>Here is the information available about this bundle.</p>
     <CardColumns>
       <CardColumn title="Contributors">
-        <AvatarGroup>
-          <Avatar name="Alice Bernoulli" />
-          <Avatar name="Clarence Dermot" />
-        </AvatarGroup>
+        <AvatarGroup avatars={[{ name: "Alice Bernoulli" }, { name: "Clarence Dermot" }]} />
       </CardColumn>
       <CardColumn title="Tags">
         <Chip>agent-view</Chip>
@@ -96,15 +90,22 @@ The `CardColumns` component is used as a wrapper around groups of `CardColumn` c
 
 ### With an exact number of columns
 
+Change the following to `columns={4}` on line 3 to see the columns shift.
+
 ```jsx
 <Card title="Bundle information">
   <p>Here is the information available about this bundle.</p>
   <CardColumns columns={3}>
     <CardColumn title="Contributors">
-      <AvatarGroup>
-        <Avatar name="Alice Bernoulli" />
-        <Avatar name="Clarence Dermot" />
-      </AvatarGroup>
+      <AvatarGroup avatars={[{ name: "Alice Bernoulli" }, { name: "Clarence Dermot" }]} />
+    </CardColumn>
+    <CardColumn title="Tags">
+      <Chip>agent-view</Chip>
+      <Chip>production</Chip>
+    </CardColumn>
+    <CardColumn title="Tags">
+      <Chip>agent-view</Chip>
+      <Chip>production</Chip>
     </CardColumn>
     <CardColumn title="Tags">
       <Chip>agent-view</Chip>
@@ -121,10 +122,7 @@ Columns will always wrap and overflow if their containing element is not wide en
   <p>Here is the information available about this bundle.</p>
   <CardColumns columns={3} style={{ width: "200px" }}>
     <CardColumn title="Contributors">
-      <AvatarGroup>
-        <Avatar name="Alice Bernoulli" />
-        <Avatar name="Clarence Dermot" />
-      </AvatarGroup>
+      <AvatarGroup avatars={[{ name: "Alice Bernoulli" }, { name: "Clarence Dermot" }]} />
     </CardColumn>
     <CardColumn title="Tags">
       <Chip>agent-view</Chip>

src/Chip/__tests__/__snapshots__/Chip.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Chip Should render 1`] = `
   class="css-ftf61z"
 >
   <div
-    class="css-16holpz-Messages"
+    class="css-p29iif"
   />
   <div
     class="css-5qy0rm-chip"

src/Code/Code.tsx

@@ -108,7 +108,7 @@ const defaultCodeTheme = {
   base0E: "#2aa198",
 
   /**
-   * Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?>
+   * Opening/Closing Embedded Language Tags, e.g. <?php ?>
    */
   base0F: "#268bd2",
 }

src/Code/__tests__/__snapshots__/Code.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Code Should render 1`] = `
   class="css-ftf61z"
 >
   <div
-    class="css-16holpz-Messages"
+    class="css-p29iif"
   />
   <div
     class="css-1e9yps6"

src/ContextMenu/__tests__/__snapshots__/ContextMenu.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`ContextMenu Component Should render 1`] = `
   class="css-ftf61z"
 >
   <div
-    class="css-16holpz-Messages"
+    class="css-p29iif"
   />
   <div
     class="css-lra4z2-contextmenu"

src/DatePicker/DatePicker.styles.ts

@@ -24,17 +24,16 @@ export const DatePickerCard = styled("div")<{ isExpanded: boolean }>(
     left: 0,
   },
   ({ theme, isExpanded }) => ({
-    backgroundColor: theme.deprecated.colors.white,
+    backgroundColor: theme.color.white,
     display: isExpanded ? "block" : "none",
-    boxShadow: theme.deprecated.shadows.popup,
-    borderRadius: theme.deprecated.borderRadius,
+    boxShadow: theme.shadows.popup,
+    borderRadius: theme.borderRadius,
     // Push down the card to the bottom of the input field,
     // plus the twice the size of the outside focus shadow.
     top: inputHeight + 6,
-    padding: `${(theme.deprecated.spacing * 3) / 4}px ${theme.deprecated.spacing}px ${(theme.deprecated.spacing * 4) /
-      3}px`,
+    padding: theme.space.content,
     width: inputDefaultWidth,
-    zIndex: theme.deprecated.baseZIndex + 1000,
+    zIndex: theme.zIndex.selectOptions,
   }),
 )
 
@@ -43,24 +42,23 @@ export const Toggle = styled("div")(({ theme }) => ({
   cursor: "pointer",
   top: 1,
   right: 1,
-  borderTopRightRadius: theme.deprecated.borderRadius,
-  borderBottomRightRadius: theme.deprecated.borderRadius,
+  borderTopRightRadius: theme.borderRadius,
+  borderBottomRightRadius: theme.borderRadius,
   width: inputHeight - 2,
   height: inputHeight - 2,
-  fontSize: 10,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  zIndex: theme.deprecated.baseZIndex + 1000,
-  color: theme.deprecated.colors.inputBorder,
+  zIndex: theme.zIndex.selectOptions,
+  color: theme.color.text.default,
   borderLeft: "1px solid",
-  borderColor: theme.deprecated.colors.inputBorder,
+  borderColor: theme.color.border.default,
   "& svg": {
     position: "relative",
     pointerEvents: "none",
   },
   ":hover": {
-    backgroundColor: theme.deprecated.colors.lighterBackground,
+    backgroundColor: theme.color.background.lighter,
   },
 }))
 
@@ -73,7 +71,6 @@ export const MonthNav = styled("div")(({ theme }) => ({
     display: "inline-block",
   },
   "& > span": {
-    ...theme.deprecated.typography.body,
     userSelect: "none",
     width: 120,
     textAlign: "center",
@@ -135,7 +132,7 @@ const BaseDay = styled("div")(({ theme }) => ({
   borderRadius: "50%",
   backgroundClip: "content-box",
   fontSize: theme.font.size.body,
-  fontWeght: theme.font.weight.regular,
+  fontWeight: theme.font.weight.regular,
 }))
 
 export const Day = styled(BaseDay)<{
@@ -162,16 +159,16 @@ export const DayOfWeek = styled(BaseDay)`
 `
 
 export const Input = styled("input")<{ isExpanded: boolean }>(({ theme, isExpanded }) => ({
-  ...theme.deprecated.typography.body,
   userSelect: "none",
-  borderRadius: theme.deprecated.borderRadius,
-  padding: (theme.deprecated.spacing * 2) / 3,
+  borderRadius: theme.borderRadius,
+  padding: theme.space.element / 3,
   height: inputHeight,
   cursor: "pointer",
   border: "1px solid",
   borderColor: "rgb(208, 217, 229)",
   width: "100%",
   position: "relative",
+  fontSize: theme.font.size.small,
   "&:focus": mixins.inputFocus({
     theme,
   }),
@@ -194,11 +191,11 @@ export const ClearButton = styled("div")(({ theme }) => ({
   right: -inputHeight + 1,
   opacity: 0.3,
   textAlign: "center",
-  zIndex: theme.deprecated.baseZIndex + 100,
+  zIndex: theme.zIndex.selectOptions,
   "&:hover": {
     opacity: 1,
     "& svg": {
-      stroke: theme.deprecated.colors.warning,
+      stroke: theme.color.warning,
     },
   },
 }))