Skip to content

feat(docs): update example SVG usages #179

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

Closed
wants to merge 1 commit into from
Closed

feat(docs): update example SVG usages #179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions examples/nextjs/components/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ import { Menu, Item } from '@zendeskgarden/react-menus';
*/
import ZendeskIcon from '@zendeskgarden/svg-icons/src/26/zendesk.svg';
import HomeIcon from '@zendeskgarden/svg-icons/src/26/home-fill.svg';
import MenuTrayIcon from '@zendeskgarden/svg-icons/src/14/menu-tray.svg';
import PersonIcon from '@zendeskgarden/svg-icons/src/14/person.svg';
import MenuTrayIcon from '@zendeskgarden/svg-icons/src/16/panels-stroke.svg';
import PersonIcon from '@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg';

const PaddedMain = styled(Main)`
padding: 28px;
Expand Down
4 changes: 2 additions & 2 deletions packages/buttons/src/views/icon-button/IconButton.example.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
```jsx
const SettingsIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/settings.svg');
const AttachmentIcon = require('svg-react-loader?name=Attachment!@zendeskgarden/svg-icons/src/14/attachment.svg');
const SettingsIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/16/gear-stroke.svg');
const AttachmentIcon = require('svg-react-loader?name=Attachment!@zendeskgarden/svg-icons/src/16/paperclip.svg');

<Grid>
<Row>
Expand Down
5 changes: 2 additions & 3 deletions packages/chrome/src/views/Chrome.example.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,8 @@ const ListsIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-ico
const EmailIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/email-fill.svg');
const SettingsIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/settings-fill.svg');
const ZendeskIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/zendesk.svg');
const PlusIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/plus.svg');
const MenuTrayIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/menu-tray.svg');
const PersonIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/person.svg');
const MenuTrayIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/16/panels-stroke.svg');
const PersonIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg');

initialState = {
currentNavItem: 'home',
Expand Down
6 changes: 3 additions & 3 deletions packages/chrome/src/views/header/Header.example.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
```jsx
const { Toggle, Label } = require('@zendeskgarden/react-toggles/src');
const SupportIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/relationshape-support.svg');
const HelpIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/support.svg');
const MenuTrayIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/menu-tray.svg');
const PersonIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/person.svg');
const HelpIcon = require('svg-react-loader?name=Help!@zendeskgarden/svg-icons/src/16/lifesaver-stroke.svg');
Copy link
Member

@jzempel jzempel Oct 10, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A number of these modifications are premature as the component CSS styling hasn't yet been updated to properly accommodate 16px icons. As a result, the icons appear under-sized/weighted. We should probably schedule this PR to happen after the CSS updates.

Copy link
Contributor Author

@austingreendev austingreendev Oct 10, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@allisonacs and I came to the same conclusion yesterday as well (forgot to post an update).

Lets hold off on this until the CSS/React component side has been updated.

const MenuTrayIcon = require('svg-react-loader?name=Menu!@zendeskgarden/svg-icons/src/16/panels-stroke.svg');
const PersonIcon = require('svg-react-loader?name=Person!@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg');

initialState = {
standalone: true
Expand Down
6 changes: 3 additions & 3 deletions packages/chrome/src/views/nav/NavItem.example.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ const HomeIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icon
const ListsIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/customer-lists-fill.svg');
const EmailIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/email-fill.svg');
const SettingsIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/settings-fill.svg');
const PlusIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/plus.svg');
const MenuTrayIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/menu-tray.svg');
const PersonIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/person.svg');
const PlusIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/16/plus-stroke.svg');
const MenuTrayIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/16/panels-stroke.svg');
const PersonIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg');

const ProductNav = ({ title, icon, ...other }) => (
<Nav>
Expand Down
7 changes: 2 additions & 5 deletions packages/menus/src/containers/MenuContainer.example.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,6 @@ for (let x = 1; x <= 5; x++) {

```jsx
const { Button, Icon } = require('@zendeskgarden/react-buttons/src');
const SettingsIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/settings.svg');

initialState = {
selectedKey: 'Unknown'
Expand Down Expand Up @@ -240,9 +239,7 @@ initialState = {
placement="end"
onChange={selectedKey => setState({ selectedKey })}
trigger={({ getTriggerProps, triggerRef, isOpen }) => (
<button {...getTriggerProps({ ref: triggerRef, active: isOpen })}>
Heavily customized menu
</button>
<button {...getTriggerProps({ ref: triggerRef })}>Heavily customized menu</button>
)}
>
{({ getMenuProps, menuRef, placement, getItemProps, focusedKey }) => (
Expand Down Expand Up @@ -275,7 +272,7 @@ initialState = {
const { KEY_CODES } = require('@zendeskgarden/react-selection/src');
const { Button } = require('@zendeskgarden/react-buttons/src');
const { Input, FauxInput, MediaFigure } = require('@zendeskgarden/react-textfields/src');
const SearchIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/search.svg');
const SearchIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/16/search-stroke.svg');

const natoPhonetics = [
'Alfa',
Expand Down
2 changes: 1 addition & 1 deletion packages/menus/src/views/items/Item.example.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const InlineMenuView = styled(MenuView)`
### Types

```jsx
const GroupIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/group.svg');
const GroupIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/16/user-group-stroke.svg');

/**
* Only necessary to position within documentation
Expand Down
2 changes: 1 addition & 1 deletion packages/select/src/views/Dropdown.example.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const InlineSelectView = styled(Dropdown)`
### Types

```jsx
const GroupIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/group.svg');
const GroupIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/16/user-group-stroke.svg');

/**
* Only necessary to position within documentation
Expand Down
2 changes: 1 addition & 1 deletion packages/tags/src/views/Avatar.example.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ their styling to any element they are provided.
`Avatars` are hidden for small `Tags`.

```jsx
const PersonIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/person.svg');
const PersonIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg');

<Grid>
<Row>
Expand Down
4 changes: 2 additions & 2 deletions packages/textfields/src/views/MediaFigure.example.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ The `FauxInput[mediaLayout=true]` can be used with the `MediaFigure` component
to include icons within the input.

```jsx
const SearchIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/search.svg');
const SettingsIcon = require('svg-react-loader?name=Attachment!@zendeskgarden/svg-icons/src/14/settings.svg');
const SearchIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/16/search-stroke.svg');
const SettingsIcon = require('svg-react-loader?name=Attachment!@zendeskgarden/svg-icons/src/16/gear-stroke.svg');

<FauxInput mediaLayout>
<MediaFigure>
Expand Down