fix(plugins): use compiled dependency instead of `css-expand-shorthan…

…d` (#1542) * fix(plugins): use compiled dependency instead of `css-expand-shorthand` * polish snippet a bit more * update changelog
microsoft · Jun 25, 2019 · 21a5a50 · 21a5a50
1 parent 0a9e616
commit 21a5a50
Show file tree

Hide file tree

Showing 7 changed files with 943 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -31,6 +31,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `RadioGroup` first item should be tabbable by default when none of the items selected @sophieH29 ([#1515](https://github.com/stardust-ui/react/pull/1515))
 - Export all accessibility behaviors @jurokapsiar ([#1538](https://github.com/stardust-ui/react/pull/1538))
 - Fix `FocusTrapZone` sets focus into zone correctly for lazy loaded content @sophieH29 ([#1505](https://github.com/stardust-ui/react/pull/1505))
+- Replace `css-shorthand-expand` with bundled version to make it work in IE11 @layershifter ([#1542](https://github.com/stardust-ui/react/pull/1542))
 
 ### Features
 - Add 'poll' and 'to-do-list' icons to Teams theme @natashamayurshah ([#1498](https://github.com/stardust-ui/react/pull/1498))

diff --git a/docs/src/index.ejs b/docs/src/index.ejs
@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/brands.css" integrity="sha384-1KLgFVb/gHrlDGLFPgMbeedi6tQBLcWvyNUN+YKXbD7ZFbjX6BLpMDf0PJ32XJfX" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://unpkg.com/react-vis@<%= htmlWebpackPlugin.options.versions.reactVis %>/dist/style.css" />
   <link rel="shortcut icon" type="image/x-icon" href='<%= __BASENAME__ + 'logo.png' %>'/>
   <title>Stardust</title>
   <script>
@@ -32,24 +31,14 @@
   </style>
 </head>
 <body>
-  <script src="https://cdn.jsdelivr.net/npm/@babel/polyfill@7/dist/polyfill.min.js"></script>
+  <script src='https://cdn.jsdelivr.net/npm/core-js-bundle/minified.js'></script>
+  <script src='https://cdn.jsdelivr.net/npm/whatwg-fetch/dist/fetch.umd.min.js'></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.1/anchor.min.js"></script>
   <script
     crossOrigin="anonymous"
-    src="https://unpkg.com/prettier@<%= htmlWebpackPlugin.options.versions.prettier %>/standalone.js"
-  ></script>
-  <script
-    crossOrigin="anonymous"
-    src="https://unpkg.com/prettier@<%= htmlWebpackPlugin.options.versions.prettier %>/parser-babylon.js"
-  ></script>
-  <script
-    crossOrigin="anonymous"
-    src="https://unpkg.com/prettier@<%= htmlWebpackPlugin.options.versions.prettier %>/parser-html.js"
-  ></script>
-  <script
-    crossOrigin="anonymous"
-    src="https://unpkg.com/prettier@<%= htmlWebpackPlugin.options.versions.prettier %>/parser-typescript.js"
+    src="https://cdn.jsdelivr.net/combine/npm/prettier@<%= htmlWebpackPlugin.options.versions.prettier %>/standalone.min.js,npm/prettier@<%= htmlWebpackPlugin.options.versions.prettier %>/parser-babylon.min.js,npm/prettier@<%= htmlWebpackPlugin.options.versions.prettier %>/parser-html.min.js,npm/prettier@<%= htmlWebpackPlugin.options.versions.prettier %>/parser-typescript.min.js"
   ></script>
+
   <!-- Use unminified React when not in production so we get errors and warnings -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/<%= htmlWebpackPlugin.options.versions.propTypes %>/prop-types<%= __PROD__ ? '.min' : '' %>.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/<%= htmlWebpackPlugin.options.versions.react %>/umd/react<%= __PROD__ ? '.production.min' : '.development' %>.js"></script>
@@ -62,7 +51,8 @@
 
   <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@<%= htmlWebpackPlugin.options.versions.babelStandalone %>/babel.min.js"></script>
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.16.0/themes/prism-tomorrow.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.16.0/themes/prism-tomorrow.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/react-vis@<%= htmlWebpackPlugin.options.versions.reactVis %>/dist/style.min.css" />
 
   <style>
     html, body {

diff --git a/packages/docs-components/src/CodeSnippet/CodeSnippetLabel.tsx b/packages/docs-components/src/CodeSnippet/CodeSnippetLabel.tsx
@@ -7,6 +7,21 @@ type CopySnippetLabelProps = Pick<CodeSnippetProps, 'copyable' | 'label' | 'mode
   value: string
 }
 
+const checkIcon = (
+  <svg height="0.7rem" viewBox="0 0 512 512">
+    <path
+      fill="currentColor"
+      d="M461.6,109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4c-2.4,0-4.6,1-6.3,2.5L194.5,323c0,0-78.5-75.5-80.7-77.7  c-2.2-2.2-5.1-5.9-9.5-5.9c-4.4,0-6.4,3.1-8.7,5.4c-1.7,1.8-29.7,31.2-43.5,45.8c-0.8,0.9-1.3,1.4-2,2.1c-1.2,1.7-2,3.6-2,5.7  c0,2.2,0.8,4,2,5.7l2.8,2.6c0,0,139.3,133.8,141.6,136.1c2.3,2.3,5.1,5.2,9.2,5.2c4,0,7.3-4.3,9.2-6.2L462,121.8  c1.2-1.7,2-3.6,2-5.8C464,113.5,463,111.4,461.6,109.6z"
+    />
+  </svg>
+)
+
+const copyIcon = (
+  <svg height="0.7rem" viewBox="0 0 16 16">
+    <path d="M2,0v1v2H0v13h13v-2h2h1V1V0H3H2z M15,1v12h-2V3H3V1H15z" fill="currentColor " />
+  </svg>
+)
+
 const CodeSnippetLabel: React.FunctionComponent<CopySnippetLabelProps> = props => {
   const { copyable, label, mode, value } = props
   const hasLabel = label !== false
@@ -18,8 +33,8 @@ const CodeSnippetLabel: React.FunctionComponent<CopySnippetLabelProps> = props =
       <div
         onClick={copyable ? onCopy : undefined}
         style={{
-          border: '1px solid #566',
-          color: '#899',
+          border: '1px solid #ccc',
+          color: '#ccc',
           cursor: copyable ? 'pointer' : 'default',
           display: 'grid',
           gridTemplateColumns: 'auto auto',
@@ -28,14 +43,14 @@ const CodeSnippetLabel: React.FunctionComponent<CopySnippetLabelProps> = props =
           lineHeight: 1,
           padding: '0.2rem 0.35rem',
           position: 'absolute',
-          right: '1rem',
-          top: '1rem',
+          right: '0.8rem',
+          top: '0.8rem',
           zIndex: 100,
         }}
         title={copyable ? 'Copy' : undefined}
       >
         <div>{label || mode}</div>
-        {copyable && <div style={{ marginLeft: '5px' }}>{active ? '✔ ' : '⎘'}</div>}
+        {copyable && <div style={{ marginLeft: '5px' }}>{active ? checkIcon : copyIcon}</div>}
       </div>
     )
   )

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -11,7 +11,6 @@
     "@stardust-ui/react-component-ref": "^0.33.0",
     "@stardust-ui/react-proptypes": "^0.33.0",
     "classnames": "^2.2.5",
-    "css-shorthand-expand": "^1.2.0",
     "downshift": "^3.2.10",
     "fast-memoize": "^2.5.1",
     "fela": "^10.5.0",