From d0f448089b91687841914829bdecd3bf21e1a787 Mon Sep 17 00:00:00 2001 From: Brooke Yalof Date: Thu, 21 May 2020 13:19:39 -0400 Subject: [PATCH 1/3] Adds ImportantWithCircle glyph to Icon lib --- .changeset/angry-clocks-fry.md | 5 +++++ packages/icon/README.md | 12 ++++++------ packages/icon/src/glyphs/ImportantWithCircle.svg | 8 ++++++++ packages/icon/src/glyphs/index.ts | 2 ++ 4 files changed, 21 insertions(+), 6 deletions(-) create mode 100644 .changeset/angry-clocks-fry.md create mode 100644 packages/icon/src/glyphs/ImportantWithCircle.svg diff --git a/.changeset/angry-clocks-fry.md b/.changeset/angry-clocks-fry.md new file mode 100644 index 0000000000..945c314643 --- /dev/null +++ b/.changeset/angry-clocks-fry.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/icon': minor +--- + +Adds ImportantWithCircle glyph to Icon library diff --git a/packages/icon/README.md b/packages/icon/README.md index 26d3fb04e2..c6439c89df 100644 --- a/packages/icon/README.md +++ b/packages/icon/README.md @@ -35,12 +35,12 @@ const SomeComponent = () => ; ## Properties -| Prop | Type | Description | Default | -| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `glyph` | **Required**: `'ActivityFeed'`, `'ArrowDown'`, `'ArrowLeft'`, `'ArrowRight'`, `'ArrowUp'`, `'Copy'`, `'Bell'`, `'Building'`, `'CaretUp'`, `'CaretDown'`, `'CaretRight'`, `'CaretLeft'`, `'Checkmark'`, `'CheckmarkWithCircle'`, `'ChevronUp'`, `'ChevronDown'`, `'ChevronRight'`, `'ChevronLeft'`, `'Charts'`, `'Cloud'`, `'CreditCard'`, `'Edit'`, `'Ellipsis'`, `'Folder'`, `'InfoWithCircle'`, `'InviteUser'`, `'Laptop'`, `'Lock'`, `'MagnifyingGlass'`, `'Megaphone'`, `'Menu'`, `'NotAllowed'`, `'Person'`, `'PersonWithLock'`, `'Plus'`, `'PlusWithCircle'`, `'QuestionMarkWithCircle'`, `'Refresh'`, `'Save'`, `'Settings'`, `'SortAscending'`, `'SortDescending'`, `'Stitch'`, `'Support'`, `'Trash'`, `'University'`, `'Unsorted'`, `'UpDownCarets'`, `'VerticalEllipsis'` `'Warning'`, `'X'`, `'XWithCircle'` | Specifies the glyph to use. | | -| `size` | `string` or `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` or `boolean` or `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. | | +| Prop | Type | Description | Default | +| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `glyph` | **Required**: `'ActivityFeed'`, `'ArrowDown'`, `'ArrowLeft'`, `'ArrowRight'`, `'ArrowUp'`, `'Copy'`, `'Bell'`, `'Building'`, `'CaretUp'`, `'CaretDown'`, `'CaretRight'`, `'CaretLeft'`, `'Checkmark'`, `'CheckmarkWithCircle'`, `'ChevronUp'`, `'ChevronDown'`, `'ChevronRight'`, `'ChevronLeft'`, `'Charts'`, `'Cloud'`, `'CreditCard'`, `'Edit'`, `'Ellipsis'`, `'Folder'`, `'ImportantWithCircle'`, `'InfoWithCircle'`, `'InviteUser'`, `'Laptop'`, `'Lock'`, `'MagnifyingGlass'`, `'Megaphone'`, `'Menu'`, `'NotAllowed'`, `'Person'`, `'PersonWithLock'`, `'Plus'`, `'PlusWithCircle'`, `'QuestionMarkWithCircle'`, `'Refresh'`, `'Save'`, `'Settings'`, `'SortAscending'`, `'SortDescending'`, `'Stitch'`, `'Support'`, `'Trash'`, `'University'`, `'Unsorted'`, `'UpDownCarets'`, `'VerticalEllipsis'` `'Warning'`, `'X'`, `'XWithCircle'` | Specifies the glyph to use. | | +| `size` | `string` or `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` or `boolean` or `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. | | ## Advanced Usage (Registering custom icon sets) diff --git a/packages/icon/src/glyphs/ImportantWithCircle.svg b/packages/icon/src/glyphs/ImportantWithCircle.svg new file mode 100644 index 0000000000..3ffe696d3e --- /dev/null +++ b/packages/icon/src/glyphs/ImportantWithCircle.svg @@ -0,0 +1,8 @@ + + + Important With Circle + Created with Sketch. + + + + diff --git a/packages/icon/src/glyphs/index.ts b/packages/icon/src/glyphs/index.ts index aa882205e4..426e81d4b6 100644 --- a/packages/icon/src/glyphs/index.ts +++ b/packages/icon/src/glyphs/index.ts @@ -26,6 +26,7 @@ import CreditCard from './CreditCard.svg'; import Edit from './Edit.svg'; import Ellipsis from './Ellipsis.svg'; import Folder from './Folder.svg'; +import ImportantWithCircle from './ImportantWithCircle.svg'; import InfoWithCircle from './InfoWithCircle.svg'; import InviteUser from './InviteUser.svg'; import Laptop from './Laptop.svg'; @@ -80,6 +81,7 @@ const glyphs = { Edit, Ellipsis, Folder, + ImportantWithCircle, InfoWithCircle, InviteUser, Laptop, From 882708f8f69d801f3a68ea5ad5edf53236980259 Mon Sep 17 00:00:00 2001 From: Brooke Yalof Date: Thu, 21 May 2020 13:30:18 -0400 Subject: [PATCH 2/3] fixed failing test --- packages/icon/src/glyphs/Folder.svg | 2 +- packages/icon/src/glyphs/ImportantWithCircle.svg | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/icon/src/glyphs/Folder.svg b/packages/icon/src/glyphs/Folder.svg index 3017a97699..07203e48e1 100644 --- a/packages/icon/src/glyphs/Folder.svg +++ b/packages/icon/src/glyphs/Folder.svg @@ -6,4 +6,4 @@ - \ No newline at end of file + diff --git a/packages/icon/src/glyphs/ImportantWithCircle.svg b/packages/icon/src/glyphs/ImportantWithCircle.svg index 3ffe696d3e..ad63e707cf 100644 --- a/packages/icon/src/glyphs/ImportantWithCircle.svg +++ b/packages/icon/src/glyphs/ImportantWithCircle.svg @@ -2,7 +2,5 @@ Important With Circle Created with Sketch. - - - + From 6ada8f628274bd0d7e6906677350daccf6efe42d Mon Sep 17 00:00:00 2001 From: Brooke Yalof Date: Thu, 21 May 2020 13:33:25 -0400 Subject: [PATCH 3/3] readd g tag --- packages/icon/src/glyphs/ImportantWithCircle.svg | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/icon/src/glyphs/ImportantWithCircle.svg b/packages/icon/src/glyphs/ImportantWithCircle.svg index ad63e707cf..521c31a9cf 100644 --- a/packages/icon/src/glyphs/ImportantWithCircle.svg +++ b/packages/icon/src/glyphs/ImportantWithCircle.svg @@ -2,5 +2,7 @@ Important With Circle Created with Sketch. - + + +