Skip to content

Feature/icon breakapart #1856

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chandlerprall merged 17 commits into from
Apr 25, 2019
Merged

Feature/icon breakapart #1856

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
c386dbe
dynamic import
chandlerprall Mar 27, 2019
28f6d75
Make the icon kinda work
chandlerprall Apr 1, 2019
10d91b7
progress
chandlerprall Apr 2, 2019
c4daa43
generate tsx from svg
chandlerprall Apr 4, 2019
078ca3a
Build and commit icons TSX
chandlerprall Apr 5, 2019
31bc999
Updated Icon snapshots
chandlerprall Apr 5, 2019
dcf15a7
Updated EuiIcon build to again work in dependant projects
chandlerprall Apr 8, 2019
c4d27f6
Create a single eui.js build, bundling EuiIcon's dynamic import into …
chandlerprall Apr 8, 2019
8ffa605
Tests are passing
chandlerprall Apr 9, 2019
6a2531a
Add a loading class to EuiIcon
chandlerprall Apr 11, 2019
3ed79b4
Added -isLoaded and using animations for fading
Apr 15, 2019
f7fafc3
update snapshots
chandlerprall Apr 16, 2019
322e80d
Remove background color from isLoaded state
Apr 16, 2019
13bc043
Merge branch 'master' into feature/icon-breakapart
chandlerprall Apr 17, 2019
40a4e50
Merge branch 'feature/icon-breakapart' of github.com:chandlerprall/eu…
chandlerprall Apr 17, 2019
9cbde80
Merge branch 'feature/dynamic-euiicon' into feature/icon-breakapart
chandlerprall Apr 18, 2019
217966f
PR feedback
chandlerprall Apr 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
11 changes: 9 additions & 2 deletions .babelrc.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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