Merge pull request #498 from primer/release-11.0.0

Major release 11.0.0

.travis.yml

@@ -12,6 +12,7 @@ env:
 script:
   - npm test
   - script/check-versions
+  - script/selector-diff-report
 
 before_deploy:
   # this will short-circuit the publish step if it fails to interpolate $NPM_API_KEY

CHANGELOG.md

@@ -1,3 +1,34 @@
+# 11.0.0
+
+#### :boom: Breaking Change
+* [#438](https://github.com/primer/primer/pull/438) Remove `primer-page-sections` package. ([@sophshep](https://github.com/sophshep))
+* [#439](https://github.com/primer/primer/pull/439) Remove `primer-page-headers` package. ([@sophshep](https://github.com/sophshep))
+* [#440](https://github.com/primer/primer/pull/440) Remove `primer-tables` package. ([@sophshep](https://github.com/sophshep))
+* [#459](https://github.com/primer/primer/pull/459) Move responsive position utilities from marketing to core. ([@sophshep](https://github.com/sophshep))
+* [#656](https://github.com/primer/primer/pull/656) Remove colorizeTooltip mixin. ([@shawnbot](https://github.com/shawnbot))
+* [#657](https://github.com/primer/primer/pull/657) Remove `BtnGroup-form` class. ([@shawnbot](https://github.com/shawnbot))
+* [#658](https://github.com/primer/primer/pull/658) Remove `.avatar-stack` in favor of `.AvatarStack`. ([@shawnbot](https://github.com/shawnbot))
+
+#### :rocket: Enhancement
+* [#583](https://github.com/primer/primer/pull/583) Updates to Marketing Typography. ([@sophshep](https://github.com/sophshep))
+* [#660](https://github.com/primer/primer/pull/660) Add `$marketing-font-path`. ([@shawnbot](https://github.com/shawnbot))
+* [#661](https://github.com/primer/primer/pull/661) Spacer variable refactor. ([@shawnbot](https://github.com/shawnbot))
+* [#663](https://github.com/primer/primer/pull/663) Add deprecation warning for column grid classes and add `container-sm` utility class. ([@jonrohan](https://github.com/jonrohan))
+
+#### :bug: Bug Fix
+* [#654](https://github.com/primer/primer/pull/654) Fix typo ("Chroma") in `primer-base` comment. ([@Jiang-Xuan](https://github.com/Jiang-Xuan))
+* [#655](https://github.com/primer/primer/pull/655) Fix typo ("conditonally") in `docs/src/SideNav.js` comment. ([@0xflotus](https://github.com/0xflotus))
+
+### :house: Internal
+* [#659](https://github.com/primer/primer/pull/659) Generate CSS selector diff report on Travis. ([@shawnbot](https://github.com/shawnbot))
+
+#### Committers: 4
+- 0xflotus ([0xflotus](https://github.com/0xflotus))
+- Jiang-Xuan ([Jiang-Xuan](https://github.com/Jiang-Xuan))
+- Jon Rohan ([jonrohan](https://github.com/jonrohan))
+- Shawn Allen ([shawnbot](https://github.com/shawnbot))
+- Sophie Shepherd ([sophshep](https://github.com/sophshep))
+
 # 10.10.5
 
 #### :bug: Bug Fix

docs/package.json

@@ -48,7 +48,7 @@
     "next-compose-plugins": "2.1.1",
     "node-sass": "^4.10.0",
     "now": "^12.1.8",
-    "primer": "10.10.5",
+    "primer": "11.0.0",
     "primer-colors": "^1.0.1",
     "prism-github": "^1.1.0",
     "prop-types": "^15.6.2",

docs/pages/css/index.md

@@ -17,10 +17,10 @@ export const Hero = () => (
         <Heading color="blue.4" fontSize={7} pb={3} m={0}>
           Primer CSS
         </Heading>
-        <Text as="div" color="blue.2" fontSize={2} mb={4}>
+        <Text is="div" color="blue.2" fontSize={2} mb={4}>
           v{version}
         </Text>
-        <Box as={HeaderImage} mb={6} />
+        <Box is={HeaderImage} mb={6} />
       </Box>
     </Box>
   </Box>

docs/src/CodeExample.js

@@ -46,7 +46,7 @@ export default function CodeExample(props) {
               <ClipboardCopy value={source} />
             </Absolute>
             <Text
-              as={LiveError}
+              is={LiveError}
               fontFamily="mono"
               style={{
                 overflow: 'auto',

docs/src/Header.js

@@ -28,7 +28,7 @@ const Header = props => (
             <NavLink href="/css/getting-started" />
             <NavLink href="/css/principles" />
             <NavLink href="/css/tools" />
-            <NavLink as={Link} href="https://github.com/primer/primer/releases">
+            <NavLink is={Link} href="https://github.com/primer/primer/releases">
               Releases
             </NavLink>
           </HeaderText>

docs/src/Outline.js

@@ -4,7 +4,7 @@ import {Box} from '@primer/components'
 export default function Outline({outline, ...rest}) {
   if (outline && outline.length) {
     return (
-      <Box as="details" mb={4}>
+      <Box is="details" mb={4}>
         <summary>Table of contents</summary>
         <OutlineList items={outline} {...rest} />
       </Box>

docs/src/PackageHeader.js

@@ -38,8 +38,8 @@ export default function PackageHeader(props) {
 
   return (
     <Flex justifyContent="space-between" mb={4} {...rest}>
-      <Text as="div" fontSize={1}>
-        {status ? <StatusLabel status={status} as="a" href="/css/status-key" mr={2} /> : null}
+      <Text is="div" fontSize={1}>
+        {status ? <StatusLabel status={status} is="a" href="/css/status-key" mr={2} /> : null}
         {info}
       </Text>
       <Box>

docs/src/SideNav.js

@@ -7,7 +7,7 @@ import {rootPage} from './utils'
 
 export default function SideNav(props) {
   return (
-    <Relative as="nav">
+    <Relative is="nav">
       <Box id="sidenav" {...props}>
         <Flex flexDirection="column" alignItems="start">
           <Router>
@@ -111,7 +111,7 @@ const Router = withRouter(({router, children}) => {
 })
 
 /**
- * <RouteMatch> is just a way to conditonally render content without a wrapper
+ * <RouteMatch> is just a way to conditionally render content without a wrapper
  * element when contained directly in a <Router>:
  *
  * ```jsx

docs/src/color-system.js

@@ -42,15 +42,15 @@ export function ColorVariables(props) {
       <Flex flexWrap="wrap" {...props}>
         <FadeVariables id="black" hue="black" bg="black" color="white">
           <BorderBox border={0} borderRadius={0} borderTop={1} borderColor="gray.5" mt={1}>
-            <Text as="div" fontSize={2} pt={3} mb={0}>
+            <Text is="div" fontSize={2} pt={3} mb={0}>
               Black fades apply alpha transparency to the <Var>$black</Var> variable. The black color value has a slight
               blue hue to match our grays.
             </Text>
           </BorderBox>
         </FadeVariables>
         <FadeVariables id="white" hue="white" over={BLACK}>
           <BorderBox border={0} borderRadius={0} borderTop={1} mt={1}>
-            <Text as="div" fontSize={2} pt={3} mb={0}>
+            <Text is="div" fontSize={2} pt={3} mb={0}>
               White fades apply alpha transparency to the <Var>$white</Var> variable, below these are shown overlaid on
               a dark gray background.
             </Text>
@@ -64,14 +64,14 @@ export function ColorVariables(props) {
 export function ColorVariable({hue, ...rest}) {
   const values = colors[hue]
   return (
-    <Flex.Item as={Box} pr={4} mb={6} className="col-6 markdown-no-margin" {...rest}>
-      {/* <Heading as="div">{titleCase(hue)}</Heading> */}
+    <Flex.Item is={Box} pr={4} mb={6} className="col-6 markdown-no-margin" {...rest}>
+      {/* <Heading is="div">{titleCase(hue)}</Heading> */}
       <Box bg={`${hue}.5`} my={2} p={3} color="white">
-        <Heading as="div" pb={3} fontSize={56} fontWeight="light">
+        <Heading is="div" pb={3} fontSize={56} fontWeight="light">
           {titleCase(hue)}
         </Heading>
         <Flex justifyContent="space-between">
-          <Flex.Item flex="1 1 auto" as={Var}>
+          <Flex.Item flex="1 1 auto" is={Var}>
             ${hue}-500
           </Flex.Item>
           <Text fontFamily="mono">{values[5]}</Text>
@@ -103,14 +103,14 @@ export function FadeVariables({hue, color, bg, over, children, ...rest}) {
   })
   const boxProps = {color, bg}
   return (
-    <Flex.Item as={Box} pr={4} mb={6} width={1 / 2} className="markdown-no-margin" {...rest}>
-      {/* <Heading as="div">{titleCase(hue)}</Heading> */}
+    <Flex.Item is={Box} pr={4} mb={6} width={1 / 2} className="markdown-no-margin" {...rest}>
+      {/* <Heading is="div">{titleCase(hue)}</Heading> */}
       <Box my={2} p={3} {...boxProps}>
-        <Heading as="div" pb={3} fontSize={56} fontWeight="light">
+        <Heading is="div" pb={3} fontSize={56} fontWeight="light">
           {titleCase(hue)}
         </Heading>
         <Flex justifyContent="space-between">
-          <Flex.Item flex="1 1 auto" as={Var}>
+          <Flex.Item flex="1 1 auto" is={Var}>
             ${hue}
           </Flex.Item>
           <Text fontFamily="mono">
@@ -141,7 +141,7 @@ function Swatch(props) {
   const {name, value, textColor = overlayColor(value), ...rest} = props
   return (
     <Box bg={value} color={textColor} {...rest}>
-      <Text as={Flex} fontSize={1} justifyContent="space-between">
+      <Text is={Flex} fontSize={1} justifyContent="space-between">
         <Box p={3}>
           <Var>${name}</Var>
         </Box>
@@ -161,7 +161,7 @@ Swatch.propTypes = {
 
 function Var(props) {
   // FIXME: fontStyle should be a prop, right?
-  return <Text as="var" fontWeight="bold" fontFamily="mono" style={{fontStyle: 'normal'}} {...props} />
+  return <Text is="var" fontWeight="bold" fontFamily="mono" style={{fontStyle: 'normal'}} {...props} />
 }
 
 function overlayColor(bg) {

docs/src/landing/index.js

@@ -10,7 +10,7 @@ import ColorImage from './ColorImage.svg'
 
 export {default as HeaderImage} from './HeaderImage.svg'
 
-const OverviewTitle = props => <Heading fontSize={3} fontWeight="normal" as="div" {...props} />
+const OverviewTitle = props => <Heading fontSize={3} fontWeight="normal" is="div" {...props} />
 const OverviewText = props => <Text fontSize={1} {...props} />
 
 export function StylesOverview(props) {
@@ -34,7 +34,7 @@ export function StylesOverview(props) {
   return (
     <Flex {...props}>
       {styleTypes.map(({name, desc, image}) => (
-        <Flex.Item as={Text} textAlign="center" mx={4} key={name}>
+        <Flex.Item is={Text} textAlign="center" mx={4} key={name}>
           <Image src={image} height={90} mb={2} />
           <OverviewTitle>{name}</OverviewTitle>
           <OverviewText>{desc}</OverviewText>
@@ -103,9 +103,9 @@ function Image(props) {
   const {src, ...rest} = props
   switch (typeof src) {
     case 'string':
-      return <Box as="img" width="100%" alt="" {...props} />
+      return <Box is="img" width="100%" alt="" {...props} />
     case 'function':
-      return <Box as={src} {...rest} />
+      return <Box is={src} {...rest} />
     default:
       throw new Error(`Unrecognized Image.src type: "${typeof src}"`)
   }
@@ -127,7 +127,7 @@ export function PrimerPackageBox({data = {}, count, ...rest}) {
           </Link>
         </Flex>
         {count ? (
-          <Text as="div" textAlign="center">
+          <Text is="div" textAlign="center">
             This package includes all {count} Primer modules.
           </Text>
         ) : null}
@@ -139,9 +139,9 @@ export function PrimerPackageBox({data = {}, count, ...rest}) {
 export function MetaPackageBox({children, data = {}, title, ...rest}) {
   const deps = data.dependencies || []
   return (
-    <Flex.Item as={BorderBox} bg="white" maxWidth={220} {...rest}>
+    <Flex.Item is={BorderBox} bg="white" maxWidth={220} {...rest}>
       <BorderBox bg="gray.1" border={0} borderBottom={1} borderRadius={0} px={3} py={2}>
-        <Heading as="div" fontSize={2}>
+        <Heading is="div" fontSize={2}>
           <Link href={packageSourceURL(data.name)} color="inherit">
             {title}
           </Link>{' '}

modules/primer-alerts/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.13",
+  "version": "2.0.0",
   "name": "primer-alerts",
   "description": "Flash messages, or alerts, inform users of successful or pending actions.",
   "homepage": "http://primer.github.io/",
@@ -33,7 +33,7 @@
     "postpublish": "../../script/notify success"
   },
   "dependencies": {
-    "primer-support": "4.7.2"
+    "primer-support": "5.0.0"
   },
   "keywords": [
     "alerts",