diff --git a/CHANGELOG.md b/CHANGELOG.md index 126f7b172f..206936fb5b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add missing Button styles @levithomason ([#82](https://github.com/stardust-ui/react/pulls/82)) ### Features +- Add Icon `circular` and `bordered` props @kuzhelov [#85](https://github.com/stardust-ui/react/pull/85) - Add Divider `type` and `important` props @mnajdova ([#67](https://github.com/stardust-ui/react/pulls/67)) - Add Avatar component @mnajdova ([#75](https://github.com/stardust-ui/react/pull/75)) - Add Menu `shape` property for describing the shape of the component, instead using the type property @mnajdova ([#68](https://github.com/stardust-ui/react/pull/68)) diff --git a/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx b/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx index 25db7bc100..2733e83f23 100644 --- a/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx +++ b/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx @@ -1,25 +1,23 @@ import React from 'react' import { Icon } from 'stardust' -const examples = [ - 'chess rock', - 'ordered list', - 'unordered list', - 'book', - 'circle', - 'closed captioning', - 'compress', - 'expand', - 'play', - 'stop', - 'calendar alternate outline', - 'coffee', - 'compass outline', - 'area chart', -] - const IconExample = () => ( -
{examples.map(type => )}
+
+ + + + + + + + + + + + + + +
) export default IconExample diff --git a/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx new file mode 100644 index 0000000000..904b3e32c1 --- /dev/null +++ b/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { Icon } from 'stardust' + +const IconExampleBordered = () => ( +
+ + + + + + + + + +
+) + +export default IconExampleBordered diff --git a/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx new file mode 100644 index 0000000000..1f7ef9005f --- /dev/null +++ b/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { Icon } from 'stardust' + +const IconExampleCircular = () => ( +
+ + + + + + + + + +
+) + +export default IconExampleCircular diff --git a/docs/src/examples/components/Icon/Variations/index.tsx b/docs/src/examples/components/Icon/Variations/index.tsx index f82454f2a2..5d7a16fc9c 100644 --- a/docs/src/examples/components/Icon/Variations/index.tsx +++ b/docs/src/examples/components/Icon/Variations/index.tsx @@ -14,6 +14,16 @@ const Variations = () => ( description="An icon can be formatted with different colors." examplePath="components/Icon/Variations/IconExampleColored" /> + + ) diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 532fd93361..93b0d2c1dd 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -3,16 +3,25 @@ import PropTypes from 'prop-types' import { customPropTypes, UIComponent, SUI } from '../../lib' import iconRules from './iconRules' +import iconVariables from './iconVariables' class Icon extends UIComponent { static className = 'ui-icon' static displayName = 'Icon' + static variables = iconVariables + static propTypes = { /** An element type to render as (string or function). */ as: customPropTypes.as, + /** Icon can appear with rectangular border. */ + bordered: PropTypes.bool, + + /** Icon can appear as circular. */ + circular: PropTypes.bool, + /** Additional classes. */ className: PropTypes.string, @@ -44,7 +53,7 @@ class Icon extends UIComponent { size: PropTypes.oneOf(['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']), } - static handledProps = ['as', 'className', 'color', 'kind', 'name', 'size'] + static handledProps = ['as', 'bordered', 'circular', 'className', 'color', 'kind', 'name', 'size'] static defaultProps = { as: 'i', diff --git a/src/components/Icon/iconRules.ts b/src/components/Icon/iconRules.ts index f3519d50e2..7d7510a044 100644 --- a/src/components/Icon/iconRules.ts +++ b/src/components/Icon/iconRules.ts @@ -28,12 +28,23 @@ const getIcon = (kind, name) => { const getSize = size => `${sizes.get(size)}em` || '1em' +const getBorderedStyles = (circular, borderColor, color) => ({ + lineHeight: '1', + padding: '0.5em 0', + boxShadow: `0 0 0 0.1em ${borderColor || color || 'black'} inset`, + width: '2em', + height: '2em', + ...(circular ? { borderRadius: '50%' } : { verticalAlign: 'baseline' }), +}) + const iconRules = { - root: ({ props: { color, kind, name, size } }) => { + root: ({ props: { color, kind, name, size, bordered, circular }, variables: v }) => { const { fontFamily, content } = getIcon(kind, name) + const iconColor = color || v.color + return { fontFamily, - color, + color: iconColor, display: 'inline-block', opacity: 1, margin: '0 0.25em 0 0', @@ -45,7 +56,7 @@ const iconRules = { textDecoration: 'inherit', textAlign: 'center', speak: 'none', - fontSmoothing: 'antialiased', + '-webkit-font-smoothing': 'antialiased', '-moz-osx-font-smoothing': 'grayscale', backfaceVisibility: 'hidden', verticalAlign: 'middle', @@ -56,6 +67,8 @@ const iconRules = { boxSizing: 'inherit', background: '0 0', }, + + ...((bordered || circular) && getBorderedStyles(circular, v.borderColor, iconColor)), } }, } diff --git a/src/components/Icon/iconVariables.ts b/src/components/Icon/iconVariables.ts new file mode 100644 index 0000000000..6fbc4c85f7 --- /dev/null +++ b/src/components/Icon/iconVariables.ts @@ -0,0 +1,4 @@ +export default () => ({ + color: 'black', + borderColor: undefined, +})