Skip to content

Add "alarm", "copy", and "hook" icons #238

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
merged 7 commits into from
Mar 24, 2020
Merged

Add "alarm", "copy", and "hook" icons #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9f3d447
Add hook icon
vine77 Mar 24, 2020
4a29bf9
Add alarm icon
vine77 Mar 24, 2020
bc96409
Add copy icon
vine77 Mar 24, 2020
d579236
Update icon contribution instructions
vine77 Mar 24, 2020
d24a476
Update CHANGELOG.md
vine77 Mar 24, 2020
4937f4b
Fix lint errors
vine77 Mar 24, 2020
7adc66e
Fix for wide tab panels pushing container too wide
vine77 Mar 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/react-components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# [Unreleased](https://github.com/puppetlabs/design-system/compare/@puppet/[email protected])

- [Icon] Add "alarm", "copy", and "hook" icons (by [@vine77](https://github.com/vine77) in [#238](https://github.com/puppetlabs/design-system/pull/238))

# [5.19.2](https://github.com/puppetlabs/design-system/compare/@puppet/[email protected]...@puppet/[email protected]) (2020-03-23)

- [Toolbar] Add `height` prop to Toolbar (by [@vine77](https://github.com/vine77) in [#237](https://github.com/puppetlabs/design-system/pull/237))
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/source/react/library/icon/Icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ const Renderer = () => {
1. _Design_: Create a new icon following the checklist and naming conventions on the [Iconography](#/Foundations/Iconography) Foundations page.
2. _Engineering_: Run the SVG through [svgo](https://github.com/svg/svgo) to minify and remove redundant data.
3. _Engineering_: Strip out the wrapping `svg` element, usually (but not always) leaving just a `path`.
4. _Engineering_: Remove all instances of the `fill` attribute so that icons can be styled with CSS.
4. _Engineering_: Remove all instances of the `fill` attribute so that icons can be styled with CSS. You may also remove `clip-rule` attributes.
5. _Engineering_: Add the icon to [icons.js](https://github.com/puppetlabs/design-system/blob/master/packages/react-components/source/react/library/icon/icons.js), specifying the icon name and native SVG sizes (usually "medium" for 16px but optionally also "tiny" for 8px, "small" for 12px, or "large" for 24px).

## Related
Expand Down
32 changes: 32 additions & 0 deletions packages/react-components/source/react/library/icon/icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,18 @@ const icons = {
),
},

alarm: {
medium: (
<>
<path d="M3.447 1.895a1 1 0 00-.894-1.79C1.607.58.908 1.279.332 1.856l-.04.038a1 1 0 001.415 1.414c.616-.616 1.108-1.096 1.74-1.412zM11.447.106a1 1 0 10-.894 1.789c.632.316 1.124.796 1.74 1.412a1 1 0 101.414-1.414l-.039-.039c-.576-.576-1.275-1.275-2.22-1.748zM6 4.9v2.764l-.895 1.79 1.79.894L8 8.136V4.9H6z" />
<path
fillRule="evenodd"
d="M1 7.9a6 6 0 1110.445 4.03l1.262 1.263-1.414 1.415-1.432-1.432A5.973 5.973 0 017 13.9a5.973 5.973 0 01-2.86-.724l-1.433 1.432-1.414-1.415 1.262-1.262A5.978 5.978 0 011 7.901zm6-4a4 4 0 100 8 4 4 0 000-8z"
/>
</>
),
},

alert: {
medium: (
<path
Expand Down Expand Up @@ -342,6 +354,15 @@ const icons = {
),
},

copy: {
medium: (
<path
fillRule="evenodd"
d="M11 12v3a1 1 0 01-1 1H2a1 1 0 01-1-1V5a1 1 0 011-1h3V1a1 1 0 011-1h8a1 1 0 011 1v10a1 1 0 01-1 1h-3zm0-2h2V2H7v2h3a1 1 0 011 1v5zM9 6H3v8h6V6z"
/>
),
},

csv: {
medium: (
<path
Expand Down Expand Up @@ -589,6 +610,17 @@ const icons = {
),
},

hook: {
medium: (
<>
<path
fillRule="evenodd"
d="M10.5 0C9.041 0 7.585.6 6.593 1.593L4.886 3.3H9v-.969c.463-.21.982-.331 1.5-.331 2.185 0 3.884 2.034 3.422 4.19l-.005.023-.003.023c-.224 1.34-1.356 2.432-2.758 2.674-.647.077-1.354-.012-1.862-.23l-.026-.01-.026-.01c-1.413-.514-3.037-.28-4.149.833l-.8.8a3 3 0 101.414 1.414l.8-.8c.483-.483 1.25-.65 2.029-.375.881.37 1.95.477 2.888.36l.02-.002.02-.004c2.182-.363 4.034-2.057 4.419-4.299C16.604 3.153 13.908 0 10.5 0zM4 13a1 1 0 11-2 0 1 1 0 012 0z"
/>
</>
),
},

hourglass: {
medium: (
<path
Expand Down
1 change: 1 addition & 0 deletions packages/react-components/source/scss/library/components/_tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
flex: 1;
flex-direction: column;
margin-top: $puppet-common-spacing-base * 4;
max-width: 100%;
}

.rc-tabs-list {
Expand Down