Transfer/update existing Iconography documentation within the Styles section #18

Closed A783270 closed 2 years ago

In GitLab by @tauriedavis on Jan 5, 2018, 02:32

Include relevant documentation from the UX guide docs regarding icons
Include documentation from brand.ai getting started section on Icons
Include documentation from design repo icon issues https://gitlab.com/gitlab-org/gitlab-design/issues/63
Include documentation regarding the size of icons and designing as if they were glyphs in a font https://gitlab.com/gitlab-org/gitlab-design/issues/102

The default bounding box size of icons is 16x16px. Inside of that bounding box, some icons are larger, others are smaller, depending on their design. It's possible to enlarge or shrink the icons (i.e. their bounding box) according to our measure’s scale: 8px, 16px, 24px, 32px, …

https://gitlab.slack.com/archives/C03MSG8B7/p1520850827000447?thread_ts=1520699277.000131&cid=C03MSG8B7

16 x 16 px is the default size and we allow the minimum size to be 8 x 8 px
Include documentation regarding creating icon svgs
Include documentation for usage of specific icons

In GitLab by @tauriedavis on Jan 5, 2018, 02:32

added to epic gitlab-org&30

In GitLab by @hazelyang on Feb 9, 2018, 04:12

assigned to @hazelyang

In GitLab by @tauriedavis on Feb 21, 2018, 01:06

changed the description

In GitLab by @dimitrieh on Mar 12, 2018, 17:41

@hazelyang Copying the information from slack here in this thread: https://gitlab.slack.com/archives/C03MSG8B7/p1520699277000131

that is a good question and I don't know if we have dedicated documentation on that. What they should adhere to however is make them all align to the 8px grid: 16, 24, 32 px. I think that is as large as icons should become generally used throughout the UI and those are the only sizes I know of used within the current patterns defined.

The default bounding box size of icon SVGs is 16x16px — inside of that bounding box, some icons are larger, others are smaller, depending on their design. We can then enlarge or shrink the icons according to our measure’s scale: 8px, 16px, 24px, 32px, …

@pedroms @hazelyang do we need the 8px? Would we use that one (I suspect icons might become too small)

In GitLab by @hazelyang on Mar 13, 2018, 05:03

I think 8px would be too small for some complicated icons.

In GitLab by @sarrahvesselov on Mar 23, 2018, 05:54

assigned to @sarrahvesselov and unassigned @hazelyang

In GitLab by @pedroms on Mar 29, 2018, 23:28

@dimitrieh @hazelyang I don't think we use very small (close to 8px) icons anywhere in the product today, so we can start the scale from 16px

In GitLab by @tauriedavis on Mar 30, 2018, 24:46

Chevrons for breadcrumbs are currently 8px. One option is to start the scale at 16px and have a chevron-right--small. The artboard would be 16px and the icon would be smaller within that artboard. Or we can start the scale at 8px

In GitLab by @dimitrieh on Mar 30, 2018, 03:47

@pedroms I believe there is currently also the use case for 12px in the web ide (displaying icons inside the tabs).

We can have smaller icon sizes, we just need to be mindful about which icons can be used in those sizes. Perhaps this would be wise to add to the documentation @hazelyang ? We would need some way to define that with the icons on https://gitlab.com/gitlab-org/gitlab-svgs wdyt?

In GitLab by @tauriedavis on Mar 30, 2018, 03:58

Can you share the 12px example, @dimitrieh? 12px is only an outlier measure that should only be used for right and left padding of horizontal tabs, buttons, and inputs. It should no be used for icon sizes

In GitLab by @dimitrieh on Mar 30, 2018, 05:46

@tauriedavis looking at it again, they can use 16px in those designs. nvm!

In GitLab by @tauriedavis on Mar 30, 2018, 05:48

Awesome!

In GitLab by @pedroms on Apr 4, 2018, 21:20

@tauriedavis you're right, the breadcrumbs use scaled chevrons, so the scale can go down as far as 8px. Maybe we can set 16px as the default and allow the minimum size to be 8px (which works just for some icons, but that's ok). WDYT?

In GitLab by @tauriedavis on Apr 4, 2018, 22:30

Yep, I think that works @pedroms :+1:

In GitLab by @pedroms on Apr 16, 2018, 23:03

changed the description

In GitLab by @pedroms on Apr 16, 2018, 23:03

Cool, thanks @tauriedavis. Added that note to the description.

In GitLab by @sarrahvesselov on Apr 23, 2018, 24:46

mentioned in merge request !60

In GitLab by @tauriedavis on May 4, 2018, 20:30

closed via commit d48265e328f7426ae83bf8824fe999b7cbc8de33

In GitLab by @tauriedavis on May 4, 2018, 20:30

closed via merge request !60

In GitLab by @tauriedavis on Jun 12, 2018, 18:44

mentioned in commit d48265e328f7426ae83bf8824fe999b7cbc8de33

KI-SSC-TEST / design.gitlab

Transfer/update existing Iconography documentation within the Styles section #18