Skip to content

Commit

Permalink
feat: completely deprecate FontAwesome (#2327)
Browse files Browse the repository at this point in the history
* feat: finished FontAwesome deprecation

* refactor: deleted fonawesom packages

* refactor: after review
  • Loading branch information
PKulkoRaccoonGang committed Aug 1, 2024
1 parent f41e747 commit 871a68e
Show file tree
Hide file tree
Showing 6 changed files with 22 additions and 103 deletions.
53 changes: 10 additions & 43 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 0 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,16 +51,13 @@
"replace-variables-definition-with-css": "node tokens/replace-variables.js -p src -t definition"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
"@popperjs/core": "^2.11.4",
"bootstrap": "^4.6.2",
"chroma-js": "^2.4.2",
"classnames": "^2.3.1",
"commander": "^9.4.1",
"email-prop-type": "^3.0.0",
"file-selector": "^0.6.0",
"font-awesome": "^4.7.0",
"glob": "^8.0.3",
"lodash.uniqby": "^4.7.0",
"mailto-link": "^2.0.0",
Expand Down
16 changes: 1 addition & 15 deletions src/IconButton/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ notes: ''
return (
<div className="d-flex flex-wrap">
{variants.map((variant) => (
<IconButton key={variant} src={Close} iconAs={Icon} alt="Close" onClick={() => {}} variant={variant} className="mr-2" />
<IconButton key={variant} src={Close} alt="Close" onClick={() => {}} variant={variant} className="mr-2" />
))}
</div>
);
Expand All @@ -40,7 +40,6 @@ notes: ''
tooltipPlacement='top'
tooltipContent={<div>a nice tooltip of {variant}!</div>}
src={Close}
iconAs={Icon}
alt="Close"
onClick={() => {}}
variant={variant}
Expand All @@ -64,7 +63,6 @@ notes: ''
isActive
key={variant}
src={Close}
iconAs={Icon}
alt="Close"
onClick={() => {}}
variant={variant}
Expand All @@ -89,7 +87,6 @@ notes: ''
isActive
key={variant}
src={Close}
iconAs={Icon}
alt="Close"
onClick={() => {}}
variant={variant}
Expand All @@ -109,7 +106,6 @@ notes: ''
<div className="p-1 bg-brand">
<IconButton
src={MenuIcon}
iconAs={Icon}
alt="Menu"
onClick={() => console.log("You clicked the menu button")}
variant="brand"
Expand All @@ -119,7 +115,6 @@ notes: ''
<div className="p-1 bg-primary">
<IconButton
src={MenuIcon}
iconAs={Icon}
alt="Menu"
onClick={() => console.log("You clicked the menu button")}
variant="primary"
Expand All @@ -129,7 +124,6 @@ notes: ''
<div className="p-1 bg-secondary">
<IconButton
src={MenuIcon}
iconAs={Icon}
alt="Menu"
onClick={() => console.log("You clicked the menu button")}
variant="secondary"
Expand All @@ -139,7 +133,6 @@ notes: ''
<div className="p-1 bg-success">
<IconButton
src={MenuIcon}
iconAs={Icon}
alt="Menu"
onClick={() => console.log("You clicked the menu button")}
variant="success"
Expand All @@ -149,7 +142,6 @@ notes: ''
<div className="p-1 bg-warning">
<IconButton
src={MenuIcon}
iconAs={Icon}
alt="Menu"
onClick={() => console.log("You clicked the menu button")}
variant="warning"
Expand All @@ -159,7 +151,6 @@ notes: ''
<div className="p-1 bg-danger">
<IconButton
src={MenuIcon}
iconAs={Icon}
alt="Menu"
onClick={() => console.log("You clicked the menu button")}
variant="danger"
Expand All @@ -169,7 +160,6 @@ notes: ''
<div className="p-1 bg-light">
<IconButton
src={MenuIcon}
iconAs={Icon}
alt="Menu"
onClick={() => console.log("You clicked the menu button")}
variant="light"
Expand All @@ -179,7 +169,6 @@ notes: ''
<div className="p-1" style={{ background: "black" }}>
<IconButton
src={MenuIcon}
iconAs={Icon}
alt="Menu"
onClick={() => console.log("You clicked the menu button")}
variant="black"
Expand All @@ -197,7 +186,6 @@ notes: ''
Small
<IconButton
src={MenuIcon}
iconAs={Icon}
alt="Menu"
onClick={() => {}}
variant="primary"
Expand All @@ -208,7 +196,6 @@ notes: ''
Inline:
<IconButton
src={MenuIcon}
iconAs={Icon}
alt="Menu"
onClick={() => {}}
variant="primary"
Expand All @@ -220,7 +207,6 @@ notes: ''
For example, applying className="x-small" will make the Icon Button look like this:
<IconButton
src={Favorite}
iconAs={Icon}
alt="Favorite"
onClick={() => {}}
variant="primary"
Expand Down
33 changes: 5 additions & 28 deletions src/IconButton/__snapshots__/IconButton.test.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -10,34 +10,11 @@ exports[`<IconButton /> renders with required props 1`] = `
<span
className="btn-icon__icon-container"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-InfoOutlineIcon btn-icon__icon"
data-icon="InfoOutlineIcon"
data-prefix="pgn"
focusable="false"
role="img"
src={null}
style={Object {}}
viewBox="0 0 function SvgInfoOutline(props) {
return /*#__PURE__*/React.createElement(\\"svg\\", _extends({
width: 24,
height: 24,
viewBox: \\"0 0 24 24\\",
fill: \\"none\\",
xmlns: \\"http://www.w3.org/2000/svg\\"
}, props), /*#__PURE__*/React.createElement(\\"path\\", {
d: \\"M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\\",
fill: \\"currentColor\\"
}));
} undefined"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="currentColor"
style={Object {}}
/>
</svg>
<span
aria-hidden={true}
className="btn-icon__icon"
id="Icon1"
/>
</span>
</button>
`;
19 changes: 6 additions & 13 deletions src/IconButton/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Icon from '../Icon';
import { OverlayTrigger } from '../Overlay';
import Tooltip from '../Tooltip';

Expand All @@ -22,14 +22,8 @@ const IconButton = React.forwardRef(({
}, ref) => {
const invert = invertColors ? 'inverse-' : '';
const activeStyle = isActive ? `${variant}-` : '';
if (!iconAs && process.env.NODE_ENV === 'development' && console) {
const msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and '
+ 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon '
+ 'as Paragon is moving away from FontAwesome, please use Paragon\'s icons instead.';
// eslint-disable-next-line no-console
console.warn(msg);
}
const IconComponent = iconAs || FontAwesomeIcon;
const IconComponent = iconAs;

return (
<button
aria-label={alt}
Expand Down Expand Up @@ -59,7 +53,7 @@ const IconButton = React.forwardRef(({
});

IconButton.defaultProps = {
iconAs: undefined,
iconAs: Icon,
src: null,
icon: undefined,
iconClassNames: undefined,
Expand All @@ -74,8 +68,7 @@ IconButton.defaultProps = {
IconButton.propTypes = {
/** A custom class name. */
className: PropTypes.string,
/** Component that renders the icon, currently defaults to `FontAwesomeIcon`,
* but is going to be deprecated soon, please use Paragon's icons instead. */
/** Component that renders the icon, currently defaults to `Icon` */
iconAs: PropTypes.elementType,
/** An icon component to render. Example import of a Paragon icon component:
* `import { Check } from '@edx/paragon/dist/icon';`
Expand All @@ -87,7 +80,7 @@ IconButton.propTypes = {
alt: PropTypes.string.isRequired,
/** Changes icon styles for dark background */
invertColors: PropTypes.bool,
/** Accepts a React fontawesome icon. https://fontawesome.com/how-to-use/on-the-web/using-with/react */
/** Accepts a [Paragon icon](https://paragon-openedx.netlify.app/foundations/icons) */
icon: PropTypes.shape({
prefix: PropTypes.string,
iconName: PropTypes.string,
Expand Down
1 change: 0 additions & 1 deletion www/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
"@docsearch/react": "^3.1.0",
"@edx/brand-edx.org": "^2.1.2",
"@edx/brand-openedx": "^1.1.0",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@mdx-js/mdx": "^1.6.22",
"@mdx-js/react": "^1.6.22",
"analytics-node": "^6.0.0",
Expand Down

0 comments on commit 871a68e

Please sign in to comment.