Skip to content

Commit

Permalink
Feature/icon breakapart (#1856)
Browse files Browse the repository at this point in the history
* dynamic import

* Make the icon kinda work

* progress

* generate tsx from svg

* Build and commit icons TSX

* Updated Icon snapshots

* Updated EuiIcon build to again work in dependant projects

* Create a single eui.js build, bundling EuiIcon's dynamic import into the build

* Tests are passing

* Add a loading class to EuiIcon

* Added -isLoaded and using animations for fading

* update snapshots

* Remove background color from isLoaded state

* PR feedback
  • Loading branch information
chandlerprall authored Apr 25, 2019
1 parent 1246f8c commit f2ad01c
Show file tree
Hide file tree
Showing 357 changed files with 3,528 additions and 3,023 deletions.
11 changes: 9 additions & 2 deletions .babelrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ module.exports = {
"@babel/react"
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"pegjs-inline-precompile",
"./scripts/babel/proptypes-from-ts-props",
"add-module-exports",
Expand All @@ -39,6 +40,12 @@ module.exports = {
]
}
}
]
]
],
],

"env": {
"test": {
"plugins": ["dynamic-import-node"]
}
}
};
9 changes: 7 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,12 @@
"sync-docs": "node ./scripts/docs-sync.js",
"build-docs": "NODE_ENV=production webpack --config=src-docs/webpack.config.js",
"build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && node ./scripts/compile-scss.js $npm_package_name",
"compile-icons": "node ./scripts/compile-icons.js",
"extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings",
"lint": "yarn lint-es && yarn lint-ts && yarn lint-sass && yarn lint-framer",
"lint-fix": "yarn lint-es-fix && yarn lint-ts-fix",
"lint-es": "eslint --cache --ignore-pattern \"**/*.snap.js\" \"src/**/*.js\" \"src-docs/**/*.js\"",
"lint-es-fix": "eslint --fix --cache --ignore-pattern \"**/*.snap.js\" \"src/**/*.js\" \"src-docs/**/*.js\"",
"lint-es": "eslint --cache --ignore-pattern \"**/*.snap.js\", --ignore-pattern \"**/assets/**/*.js\" \"src/**/*.js\" \"src-docs/**/*.js\"",
"lint-es-fix": "eslint --fix --cache --ignore-pattern \"**/*.snap.js\", \"**/assets/**/*.js\" \"src/**/*.js\" \"src-docs/**/*.js\"",
"lint-sass": "sass-lint -v --max-warnings 0",
"lint-sass-fix": "sass-lint-auto-fix -c ./.sass-lint-fix.yml",
"lint-ts": "tsc -p ./tsconfig.json --noEmit && tslint -c ./tslint.yaml -p ./tsconfig.json",
Expand Down Expand Up @@ -72,12 +73,15 @@
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.1.0",
"@elastic/datemath": "^5.0.2",
"@elastic/eslint-config-kibana": "^0.15.0",
"@svgr/core": "^4.1.0",
"@svgr/plugin-svgo": "^4.0.3",
"@types/classnames": "^2.2.6",
"@types/enzyme": "^3.1.13",
"@types/jest": "^24.0.6",
Expand All @@ -92,6 +96,7 @@
"babel-jest": "^24.1.0",
"babel-loader": "^8.0.4",
"babel-plugin-add-module-exports": "^1.0.0",
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-plugin-inline-react-svg": "^1.0.1",
"babel-plugin-pegjs-inline-precompile": "^0.1.0",
"babel-plugin-react-docgen": "^2.0.0",
Expand Down
3 changes: 2 additions & 1 deletion scripts/babel/proptypes-from-ts-props/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ function stripTypeScript(filename, ast) {
{
filename: filename,
babelrc: false,
presets: ['@babel/typescript']
presets: ['@babel/typescript'],
plugins: ['@babel/plugin-syntax-dynamic-import'],
}
).code;
}
Expand Down
70 changes: 70 additions & 0 deletions scripts/compile-icons.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
const glob = require('glob');
const svgr = require('@svgr/core').default;
const path = require('path');
const fs = require('fs');

const rootDir = path.resolve(__dirname, '..');
const srcDir = path.resolve(rootDir, 'src');
const iconsDir = path.resolve(srcDir, 'components', 'icon', 'assets');

function pascalCase(x) {
return x.replace(/^(.)|[^a-zA-Z]([a-zA-Z])/g, (match, char1, char2) => (char1 || char2).toUpperCase());
}

const iconFiles = glob.sync(
'**/*.svg',
{ cwd: iconsDir, realpath: true }
);

function defaultTemplate({
template
}, opts, {
imports,
componentName,
props,
jsx,
exports
}) {
return template.ast`${imports}
const ${componentName} = (${props}) => ${jsx}
${exports}
`;
}

iconFiles.forEach(async filePath => {
const svgSource = fs.readFileSync(filePath);

try {
const jsxSource = (await svgr(
svgSource,
{
plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
svgoConfig: {
plugins: [
{ cleanupIDs: false },
{ prefixIds: false },
{ removeViewBox: false },
],
},
svgProps: {
xmlns: 'http://www.w3.org/2000/svg'
},
template: ({ template }, opts, { imports, componentName, props, jsx }) => template.ast`
${imports}
const ${componentName} = (${props}) => ${jsx}
export const icon = ${componentName};
`
},
{
componentName: `EuiIcon${pascalCase(path.basename(filePath, '.svg'))}`
}
));

const outputFilePath = filePath.replace(/\.svg$/, '.js');
fs.writeFileSync(outputFilePath, jsxSource);
} catch (e) {
console.error(`Error processing ${filePath}`);
console.error(e);
process.exit(1);
}
});
147 changes: 24 additions & 123 deletions src/components/accordion/__snapshots__/accordion.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -46,39 +46,21 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
size="m"
type="arrowRight"
>
<arrowRight
className="euiIcon euiIcon--medium"
<EuiIconEmpty
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height="16"
style={null}
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<svg
className="euiIcon euiIcon--medium"
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height="16"
height={16}
style={null}
viewBox="0 0 16 16"
width="16"
width={16}
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<defs>
<path
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
id="arrow_right-a"
/>
</defs>
<use
fillRule="nonzero"
transform="matrix(0 1 1 0 0 0)"
xlinkHref="#arrow_right-a"
/>
</svg>
</arrowRight>
/>
</EuiIconEmpty>
</EuiIcon>
</div>
</EuiFlexItem>
Expand Down Expand Up @@ -166,38 +148,21 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
size="m"
type="arrowDown"
>
<arrowDown
className="euiIcon euiIcon--medium"
<EuiIconEmpty
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height="16"
style={null}
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<svg
className="euiIcon euiIcon--medium"
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height="16"
height={16}
style={null}
viewBox="0 0 16 16"
width="16"
width={16}
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<defs>
<path
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
id="arrow_down-a"
/>
</defs>
<use
fillRule="nonzero"
xlinkHref="#arrow_down-a"
/>
</svg>
</arrowDown>
/>
</EuiIconEmpty>
</EuiIcon>
</div>
</EuiFlexItem>
Expand Down Expand Up @@ -264,26 +229,13 @@ exports[`EuiAccordion is rendered 1`] = `
class="euiFlexItem euiFlexItem--flexGrowZero euiAccordion__iconWrapper"
>
<svg
class="euiIcon euiIcon--medium"
class="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<path
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
id="arrow_right-a"
/>
</defs>
<use
fill-rule="nonzero"
href="#arrow_right-a"
transform="matrix(0 1 1 0 0 0)"
/>
</svg>
/>
</div>
<div
class="euiFlexItem euiAccordion__buttonContent"
Expand Down Expand Up @@ -328,26 +280,13 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
class="euiFlexItem euiFlexItem--flexGrowZero euiAccordion__iconWrapper"
>
<svg
class="euiIcon euiIcon--medium"
class="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<path
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
id="arrow_right-a"
/>
</defs>
<use
fill-rule="nonzero"
href="#arrow_right-a"
transform="matrix(0 1 1 0 0 0)"
/>
</svg>
/>
</div>
<div
class="euiFlexItem euiAccordion__buttonContent"
Expand Down Expand Up @@ -396,26 +335,13 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
class="euiFlexItem euiFlexItem--flexGrowZero euiAccordion__iconWrapper"
>
<svg
class="euiIcon euiIcon--medium"
class="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<path
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
id="arrow_right-a"
/>
</defs>
<use
fill-rule="nonzero"
href="#arrow_right-a"
transform="matrix(0 1 1 0 0 0)"
/>
</svg>
/>
</div>
<div
class="euiFlexItem euiAccordion__buttonContent button content class name"
Expand Down Expand Up @@ -460,26 +386,13 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
class="euiFlexItem euiFlexItem--flexGrowZero euiAccordion__iconWrapper"
>
<svg
class="euiIcon euiIcon--medium"
class="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<path
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
id="arrow_right-a"
/>
</defs>
<use
fill-rule="nonzero"
href="#arrow_right-a"
transform="matrix(0 1 1 0 0 0)"
/>
</svg>
/>
</div>
<div
class="euiFlexItem euiAccordion__buttonContent"
Expand Down Expand Up @@ -531,25 +444,13 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
class="euiFlexItem euiFlexItem--flexGrowZero euiAccordion__iconWrapper"
>
<svg
class="euiIcon euiIcon--medium"
class="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<path
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
id="arrow_down-a"
/>
</defs>
<use
fill-rule="nonzero"
href="#arrow_down-a"
/>
</svg>
/>
</div>
<div
class="euiFlexItem euiAccordion__buttonContent"
Expand Down
Loading

0 comments on commit f2ad01c

Please sign in to comment.