From f959f8f71a16f2de1b0ead1a87877e3dc56cfacb Mon Sep 17 00:00:00 2001 From: brooke Date: Thu, 9 Jan 2025 10:29:49 -0500 Subject: [PATCH] adds Circle glyph --- .changeset/spicy-beds-give.md | 5 ++++ packages/icon/README.md | 14 ++++----- packages/icon/src/generated/Circle.tsx | 39 ++++++++++++++++++++++++++ packages/icon/src/generated/Coin.tsx | 2 +- packages/icon/src/glyphs/Circle.svg | 3 ++ packages/icon/src/glyphs/Coin.svg | 2 +- packages/icon/src/glyphs/index.ts | 2 ++ 7 files changed, 58 insertions(+), 9 deletions(-) create mode 100644 .changeset/spicy-beds-give.md create mode 100644 packages/icon/src/generated/Circle.tsx create mode 100644 packages/icon/src/glyphs/Circle.svg diff --git a/.changeset/spicy-beds-give.md b/.changeset/spicy-beds-give.md new file mode 100644 index 0000000000..a1bcaec73d --- /dev/null +++ b/.changeset/spicy-beds-give.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/icon': minor +--- + +Adds Circle to glyph set. diff --git a/packages/icon/README.md b/packages/icon/README.md index 6fe9063bfd..a938af94fb 100644 --- a/packages/icon/README.md +++ b/packages/icon/README.md @@ -47,13 +47,13 @@ const SomeComponent = () => ; ## Properties -| Prop | Type | Description | Default | -| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `glyph` (Required) | `'ActivityFeed'`, `'AddFile'`, `'AllProducts'`, `'Apps'`, `'Array'`, `'ArrowDown'`, `'ArrowLeft'`, `'ArrowRight'`, `'ArrowUp'`, `'Beaker'`, `'Bell'`, `'Biometric'`, `'Boolean'`, `'Building'`, `'Bulb'`, `'Calendar'`, `'Camera'`, `'Cap'`, `'CaretDown'`, `'CaretLeft'`, `'CaretRight'`, `'CaretUp'`, `'ChartFilled'`, `'Charts'`, `'Checkmark'`, `'CheckmarkWithCircle'`, `'ChevronDown'`,, `'ChevronLeft'` `'ChevronRight'`,`'ChevronUp'`, `'Clock'`,`'ClockWithArrow'`, `'Clone'`, `'Cloud'`, `'Code'`, `'CodeBlock'`,`'Coin'`, `'Colon'`, `'Connect'`,`'Copy'`,`'CreditCard'`, `'CurlyBraces'`, `'Dashboard'`, `'Database'`, `'Diagram'`, `'Diagram2'`, `'Diagram3'`, `'Disconnect'`, `'Download'`, `'Drag'`, `'Edit'`, `'Ellipsis'`, `'Email'`, `'Eraser'`, `'Escalation'`, `'Export'`, `'Favorite'`, `'Federation'`, `'File'`, `'Filter'`,`'Folder'`, `'Format'`, `'FullScreenEnter'`, `'FullScreenExit'`, `'Guage'`, `'GlobeAmericas'`, `'GovernmentBuilding'`, `'Hash'`, `'Highlight'`, `'Home'`, `'HorizontalDrag'`, `'Import'`, `'ImportantWithCircle'`, `'InfoWithCircle'`, `'InternalEmployee'`, `'InviteUser'`, `'Key'`, `'Laptop'`, `'LightningBolt'`, `'Link'`, `'List'`, `'Lock'`, `'LogIn'`, `'LogOut'`, `'MagnifyingGlass'`, `'Megaphone'`, `'Menu'`, `'Minus'`, `'Mobile'`, `'Moon'`, `'MultiDirectionArrow'`, `'MultiLayers'`, `'NavCollapse'`, `'NavExpand'`, `'NoFilter'`, `'NotAllowed'`, `'Note'`, `'OpenNewTab'`, `'Pause'`, `'Pending'`, `'Person'`, `'PersonGroup'`, `'PersonWithLock'`, `'Pin'`, `'Play'`, `'Plus'`, `'PlusWithCircle'`, `'Primary'`, `'Project'`, `'QuestionMarkWithCircle'`, `'Read'`, `'Recommended'`, `'Redo'`, `'Refresh'`,`'Relationship'`, `'ReplicaSet'`,`'Resize'`, `'Return'`, `'Revert'`, `'Save'`, `'SearchIndex'`, `'Secondary'`, `'Serverless'`, `'Settings'`, `'ShardedCluster'`, `'Shell'`, `'SMS'`,`'SortAscending'`, `'SortDescending'`, `'SortHorizontal'`, `'SortVertical'`,`'Sparkle'`, `'SplitHorizontal'`, `'SplitVertical'`, `'Stitch'`, `'Stop'`, `'String'`, `'Sun'`, `'Support'`, `'Sweep'`, `'Table'`, `'Tag'`, `'ThumbsDown'`, `'ThumbsUp'`, `'TimeSeries'`, `'TimeSeriesCollection'`, `'Trash'`, `'Undo'`, `'University'`, `'Unlock'`, `'Unsorted'`, `'UpDownCarets'`, `'Upload'`, `'VerticalEllipsis'`, `'Visibility'`, `'VisibilityOff'`, `'Warning'`, `'Wizard'`, `'Wrench'`, `'Write'`,`'X'`, `'XWithCircle'` | Specifies the glyph to use. | | -| `size` | `'small'`, `'default'`, `'large'`, `'xlarge'`, `number` | The height and width of the glyph's viewBox. This can be any `number` or one of the following `'small'`, `'default'`, `'large'`, `'xlarge'` | `'default'` | -| `fill` | `string` | The fill color that is passed to the glyph. By default, the glyph will inherit its fill from the CSS color property of its nearest ancestor. | | -| `title` | `string`, `boolean`, `null` | Renders a title tag with the passed string within the SVG element for screen reader accessibility. Setting this value to `false` will entirely unset the title.
If title is `undefined` or `null`, a human-readable title will be generated based on the glyph's name. | | -| ... | `SVGR.ComponentProps` | All other props will be spread on the `svg` element | | +| Prop | Type | Description | Default | +| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `glyph` (Required) | `'ActivityFeed'`, `'AddFile'`, `'AllProducts'`, `'Apps'`, `'Array'`, `'ArrowDown'`, `'ArrowLeft'`, `'ArrowRight'`, `'ArrowUp'`, `'Beaker'`, `'Bell'`, `'Biometric'`, `'Boolean'`, `'Building'`, `'Bulb'`, `'Calendar'`, `'Camera'`, `'Cap'`, `'CaretDown'`, `'CaretLeft'`, `'CaretRight'`, `'CaretUp'`, `'ChartFilled'`, `'Charts'`, `'Checkmark'`, `'CheckmarkWithCircle'`, `'ChevronDown'`,, `'ChevronLeft'` `'ChevronRight'`,`'ChevronUp'`, `'Circle'`, `'Clock'`,`'ClockWithArrow'`, `'Clone'`, `'Cloud'`, `'Code'`, `'CodeBlock'`,`'Coin'`, `'Colon'`, `'Connect'`,`'Copy'`,`'CreditCard'`, `'CurlyBraces'`, `'Dashboard'`, `'Database'`, `'Diagram'`, `'Diagram2'`, `'Diagram3'`, `'Disconnect'`, `'Download'`, `'Drag'`, `'Edit'`, `'Ellipsis'`, `'Email'`, `'Eraser'`, `'Escalation'`, `'Export'`, `'Favorite'`, `'Federation'`, `'File'`, `'Filter'`,`'Folder'`, `'Format'`, `'FullScreenEnter'`, `'FullScreenExit'`, `'Guage'`, `'GlobeAmericas'`, `'GovernmentBuilding'`, `'Hash'`, `'Highlight'`, `'Home'`, `'HorizontalDrag'`, `'Import'`, `'ImportantWithCircle'`, `'InfoWithCircle'`, `'InternalEmployee'`, `'InviteUser'`, `'Key'`, `'Laptop'`, `'LightningBolt'`, `'Link'`, `'List'`, `'Lock'`, `'LogIn'`, `'LogOut'`, `'MagnifyingGlass'`, `'Megaphone'`, `'Menu'`, `'Minus'`, `'Mobile'`, `'Moon'`, `'MultiDirectionArrow'`, `'MultiLayers'`, `'NavCollapse'`, `'NavExpand'`, `'NoFilter'`, `'NotAllowed'`, `'Note'`, `'OpenNewTab'`, `'Pause'`, `'Pending'`, `'Person'`, `'PersonGroup'`, `'PersonWithLock'`, `'Pin'`, `'Play'`, `'Plus'`, `'PlusWithCircle'`, `'Primary'`, `'Project'`, `'QuestionMarkWithCircle'`, `'Read'`, `'Recommended'`, `'Redo'`, `'Refresh'`,`'Relationship'`, `'ReplicaSet'`,`'Resize'`, `'Return'`, `'Revert'`, `'Save'`, `'SearchIndex'`, `'Secondary'`, `'Serverless'`, `'Settings'`, `'ShardedCluster'`, `'Shell'`, `'SMS'`,`'SortAscending'`, `'SortDescending'`, `'SortHorizontal'`, `'SortVertical'`,`'Sparkle'`, `'SplitHorizontal'`, `'SplitVertical'`, `'Stitch'`, `'Stop'`, `'String'`, `'Sun'`, `'Support'`, `'Sweep'`, `'Table'`, `'Tag'`, `'ThumbsDown'`, `'ThumbsUp'`, `'TimeSeries'`, `'TimeSeriesCollection'`, `'Trash'`, `'Undo'`, `'University'`, `'Unlock'`, `'Unsorted'`, `'UpDownCarets'`, `'Upload'`, `'VerticalEllipsis'`, `'Visibility'`, `'VisibilityOff'`, `'Warning'`, `'Wizard'`, `'Wrench'`, `'Write'`,`'X'`, `'XWithCircle'` | Specifies the glyph to use. | | +| `size` | `'small'`, `'default'`, `'large'`, `'xlarge'`, `number` | The height and width of the glyph's viewBox. This can be any `number` or one of the following `'small'`, `'default'`, `'large'`, `'xlarge'` | `'default'` | +| `fill` | `string` | The fill color that is passed to the glyph. By default, the glyph will inherit its fill from the CSS color property of its nearest ancestor. | | +| `title` | `string`, `boolean`, `null` | Renders a title tag with the passed string within the SVG element for screen reader accessibility. Setting this value to `false` will entirely unset the title.
If title is `undefined` or `null`, a human-readable title will be generated based on the glyph's name. | | +| ... | `SVGR.ComponentProps` | All other props will be spread on the `svg` element | | # createIconComponent diff --git a/packages/icon/src/generated/Circle.tsx b/packages/icon/src/generated/Circle.tsx new file mode 100644 index 0000000000..8d9df44530 --- /dev/null +++ b/packages/icon/src/generated/Circle.tsx @@ -0,0 +1,39 @@ +/** +* This is a generated file. Do not modify it manually. +* +* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts +* @checksum 141253d9beef012bb559cc8f4bf78319 +*/ +import * as React from "react"; +import { css, cx } from '@leafygreen-ui/emotion'; +import { generateAccessibleProps, sizeMap } from '../glyphCommon'; +import { LGGlyph } from '../types'; +export interface CircleProps extends LGGlyph.ComponentProps {} +const Circle = ({ + className, + size = 16, + title, + ['aria-label']: ariaLabel, + ['aria-labelledby']: ariaLabelledby, + fill, + role = 'img', + ...props +}: CircleProps) => { + const fillStyle = css` + color: ${fill}; + `; + const noFlexShrink = css` + flex-shrink: 0; + `; + const accessibleProps = generateAccessibleProps(role, 'Circle', { + title, + ['aria-label']: ariaLabel, + ['aria-labelledby']: ariaLabelledby + }); + return ; +}; +Circle.displayName = 'Circle'; +Circle.isGlyph = true; +export default Circle; \ No newline at end of file diff --git a/packages/icon/src/generated/Coin.tsx b/packages/icon/src/generated/Coin.tsx index d3e1f86903..89483ee9f7 100644 --- a/packages/icon/src/generated/Coin.tsx +++ b/packages/icon/src/generated/Coin.tsx @@ -2,7 +2,7 @@ * This is a generated file. Do not modify it manually. * * @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts -* @checksum 6c70aa33e840391f2f9f4c48d64d747a +* @checksum e6d0e724cd09b019697d2b1159ac3b73 */ import * as React from "react"; import { css, cx } from '@leafygreen-ui/emotion'; diff --git a/packages/icon/src/glyphs/Circle.svg b/packages/icon/src/glyphs/Circle.svg new file mode 100644 index 0000000000..5332ad9f11 --- /dev/null +++ b/packages/icon/src/glyphs/Circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icon/src/glyphs/Coin.svg b/packages/icon/src/glyphs/Coin.svg index cbc20ccff7..299bd25b09 100644 --- a/packages/icon/src/glyphs/Coin.svg +++ b/packages/icon/src/glyphs/Coin.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/icon/src/glyphs/index.ts b/packages/icon/src/glyphs/index.ts index ed8f55a062..1abbd6a0bb 100644 --- a/packages/icon/src/glyphs/index.ts +++ b/packages/icon/src/glyphs/index.ts @@ -32,6 +32,7 @@ import ChevronDown from './ChevronDown.svg'; import ChevronLeft from './ChevronLeft.svg'; import ChevronRight from './ChevronRight.svg'; import ChevronUp from './ChevronUp.svg'; +import Circle from './Circle.svg'; import Clock from './Clock.svg'; import ClockWithArrow from './ClockWithArrow.svg'; import Clone from './Clone.svg'; @@ -197,6 +198,7 @@ const _glyphs = { ChevronLeft, ChevronRight, ChevronUp, + Circle, Clock, ClockWithArrow, Clone,