Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

fix(plugins): use compiled dependency instead of css-expand-shorthand #1542

Merged
merged 5 commits into from
Jun 25, 2019
Merged

fix(plugins): use compiled dependency instead of css-expand-shorthand #1542

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
868b639
fix(plugins): use compiled dependency instead of `css-expand-shorthand`
layershifter Jun 25, 2019
ce0b1ce
Merge branches 'fix/ie11-dep' and 'master' of https://github.com/star…
layershifter Jun 25, 2019
3946336
polish snippet a bit more
layershifter Jun 25, 2019
c97db7e
update changelog
layershifter Jun 25, 2019
de55a11
Merge branches 'fix/ie11-dep' and 'master' of https://github.com/star…
layershifter Jun 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
22 changes: 6 additions & 16 deletions docs/src/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

core-js-bundle is bundled version of core-js which is a successor for @babel/polyfill:
https://babeljs.io/docs/en/babel-polyfill

<script src='https://cdn.jsdelivr.net/npm/whatwg-fetch/dist/fetch.umd.min.js'></script>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fetch() is not supported by IE11

<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"
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of 4 files unminified files from CDN we will require only minified one 🚤

></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>
Expand All @@ -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/[email protected]/themes/prism-tomorrow.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/react-vis@<%= htmlWebpackPlugin.options.versions.reactVis %>/dist/style.min.css" />
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also minified versions


<style>
html, body {
Expand Down
25 changes: 20 additions & 5 deletions packages/docs-components/src/CodeSnippet/CodeSnippetLabel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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',
Expand All @@ -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>}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Current icon looks ugly and there are no good replacement, so I decided to use SVGs.
Also it's not enough contrast, so change color to #ccc from PrismJS theme.

After

codesnippet-icons

</div>
)
)
Expand Down
1 change: 0 additions & 1 deletion packages/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading