profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/vdepizzol/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
Vinicius Depizzol vdepizzol GitHub San Francisco, CA https://viniciusdepizzol.com/ Designer at @github. Before @microsoft, @xamarinhq.

github/renaming 2123

Guidance for changing the default branch name for GitHub repositories

vdepizzol/jquery-tokeninput 52

This is my own flavor of original Tokeninput jQuery plugin created by James Smith (http://loopj.com/).

vdepizzol/gnome-shell-extension-overlay-icons 17

Easily discover which application to select by viewing the app icons in the windows overview. Forked from sustmi to display big centered icons.

vdepizzol/gnome-grass 9

GNOME Grass WordPress theme

magcius/sweettooth 7

AMO, but more GNOME-y

vdepizzol/WPPO 6

Gettext layer for WordPress content

dvdsgl/confetti 2

Confetti. In Swift.

vdepizzol/damned-lies 1

new template for damned-lies

vdepizzol/gridrr 1

A Responsive, Fluid and Remixed CSS Grid System done in LESS

startedcitra-emu/citra

started time in 2 days

issue commentprimer/react

Make clear ActionList.Item's `trailingIcon` can be a component

@six7 @dusave @colebemis I took the permission to rename this issue to address the API naming specifically, since custom components are already supported. ✨

Some background on current props and behaviors:

  1. Currently we have leadingVisual to represent the left-aligned section. So far we only support 16px visuals, being icons or avatars or other custom visuals. Originally this was also scoped to support 20px, with planned support for more custom sizes in the future. In terms of naming, I think "visual" works here since it's always referring to a compact, icon-like square area.

  2. For the right-aligned section, as documented in the design specs, we can have icons, counters, custom-styled text, and keyboard shortcuts being applied here. In the API right now we have both trailingIcon and trailingText, the first supporting any component, and the latter only accepting strings.

  3. In theory both trailingIcon and trailingText can be used together (I could picture a case of an actionList item with a right arrow on the right-most corner, with a trailing text on its side describing a selected value). Testing that quickly shows that there's no spacing between the two elements, though.

Options

We could adopt trailingVisual for the right-aligned component, making it obvious that side area can be used for more components than just icons. That's also how we refer to it in the design docs, even though they are not exactly the same as leadingVisual in terms of behavior (one being always in a square container, the other supporting flexible widths).

If we think there's a need to make it more accurate, we could name it to something more generic, like trailingArea or simply trailing, but I think that could be even more confusing as having visual to the prop may help identifying what it ultimately does :v:.

@jfuchs @colebemis @six7 thoughts?

A draft of tasks discussed above

  • [ ] Rename trailingIcon to trailingVisual
  • [ ] Fix horizontal spacing when using trailingVisual and trailingText are used in tandem (8px as usual)
  • [ ] How to support multiple different leadingVisual sizes? (at least add support for 20px avatars to start besides our current 16px icons)
six7

comment created time in 4 days

startedLorp/samsa

started time in 7 days

startedawwbees/BespokeSynth

started time in 10 days

Pull request review commentprimer/css

Improve font stack on Windows

 $lh-condensed: 1.25 !default; $lh-default: 1.5 !default;  // Font stacks-// stylelint-disable no-eol-whitespace

@simurai Is this no-eol-whitespace stylelint issue no longer a problem with this custom stack of fonts?

simurai

comment created time in 17 days

PullRequestReviewEvent
PullRequestReviewEvent

Pull request review commentprimer/css

Improve font stack on Windows

 $lh-condensed: 1.25 !default; $lh-default: 1.5 !default;  // Font stacks-// stylelint-disable no-eol-whitespace $body-font:   // Apple OSs   -apple-system,   BlinkMacSystemFont,-  +   // Windows   // Note this should be prioritized over `system-ui` to avoid legacy fonts.   // See https://infinnie.github.io/blog/2017/systemui.html-  "Segoe UI Variable",+  "Segoe UI Variable Text",   "Segoe UI",-  +  "Meiryo",

Maybe add a little comment/link explaining the decision behind this?

simurai

comment created time in 17 days

PullRequestReviewEvent

startedradix-ui/primitives

started time in 17 days

create barnchvdepizzol/vdepizzol

branch : main

created branch time in 22 days

delete branch vdepizzol/vdepizzol

delete branch : master

delete time in 22 days

push eventvdepizzol/vdepizzol

Vinicius Depizzol

commit sha 6d7e98150e05745c6689ee93fe71b1027f939bf5

Update README.md

view details

push time in 22 days

started11ty/eleventy

started time in 22 days

issue commentprimer/react

Buttons have incorrect sizes

@mperrotti we're trying to stick with a 4 or 8px grid for component sizes, to make sure that components can work well together. I guess that's another thing we should document in our interface guidelines 😄.

vdepizzol

comment created time in a month

Pull request review commentprimer/contribute

add component-lifecyle content

 title: Component lifecycle --- -_TODO_+These milestones summarize the maturity lifecycle of UI components in Primer. Components must meet all criteria _before_ proceeding to a given milestone. +## Experimental++Proof-of-concept built outside of Primer.++- The component exists as a proof-of-concept built outside of Primer, often in a GitHub application such as GitHub.com.++## Alpha++The component is ready for preliminary usage, with breaking changes expected.++- The component does not have external dependencies. This could be external libraries or dependencies on libraries in an application (like GitHub.com)+- The component is compatible with color modes and can adapt to different themes. The component does not reference any hard-coded static values and uses functional variables. Any temporary or app-level variables have been removed. Theme values (such as a new brand scheme) can be swapped out without touching the public API of the component.

Opened a PR here: https://github.com/primer/contribute/pull/2/files

joelhawksley

comment created time in a month

PullRequestReviewEvent

PR opened primer/contribute

Reviewers
Add responsive requirements to component lifecycle

From this original conversation: https://github.com/primer/contribute/pull/1/files#r694381929

Related: https://github.com/primer/contribute/pull/1

+2 -1

0 comment

1 changed file

pr created time in a month

create barnchprimer/contribute

branch : responsive-lifecycle

created branch time in a month

push eventprimer/design

Vinicius Depizzol

commit sha 0e84f88154fbcdcf5aa3f466ce4a96a80fb9ea01

cleanup

view details

push time in a month

Pull request review commentprimer/design

[Draft] Overlay docs

+---+title: Overlay+status: Alpha+---++import {Grid, Flex, Box, Button, ButtonOutline, Heading, Label, LabelGroup, Link} from '@primer/components'++<Box sx={{fontSize: 3}} class="lead" as="p">+    An overlay is a flexible floating surface, used to display transient content such as menus, selection options, dialogs, and more. Overlays use shadows to express elevation, and may include a backdrop that dims the rest of the screen for focus. +</Box>++<LabelGroup display="block" mb={4}>+    <Label as="a" href="https://primer.style/components/ActionList" variant="xl" color="text.success" outline style="text-decoration: none; line-height: 20px;">+        <img width="20" height="20" alt=" " src="https://user-images.githubusercontent.com/293280/123878374-ce9d4d00-d8f3-11eb-8adf-1a160292ff53.png" style="vertical-align: middle; margin-right: 4px;" />+        React+    </Label>+    <Label as="a" href="https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=1927%3A0" variant="xl" outline style="text-decoration: none; line-height: 20px;">+        <img width="20" height="20" alt=" " src="https://user-images.githubusercontent.com/293280/123878720-80d51480-d8f4-11eb-9b10-d02a1cb606f8.png" style="vertical-align: middle; margin-right: 4px;" />+        Figma+    </Label>+</LabelGroup>++<!--+<Label as="a" href="/components/ActionList" variant="xl" outline style="text-decoration: none">ViewComponent</Label>++-->++<img src="https://user-images.githubusercontent.com/293280/125706076-b16bb3d4-800f-4310-a082-f576e215e6c8.png" alt="Overlay examples" />++## Overview++Overlays can streamline the interface by allowing extra options to be displayed as needed. Overlays present a new context to the user, and can facilitate the completion of individual tasks. They are also useful for data-manipulation, providing a dedicated surface for selecting or editing options.++**Keep overlays simple**. Overlays are meant to be interacted with quickly, so they're better suited for clear experiences. Avoid creating a whole page inside an overlay. Prefer single-column layouts that convey a clear goal the moment it's opened.++**Overlays can be fully interacted with a keyboard**. Keyboard navigation should be limited to the elements of the active overlay. If the overlay contains a list, let users navigate using keyboard arrows. Pressing Escape should dismiss the overlay. When an overlay is dismissed, focus generally returns to the element that opened it.++**Overlay contents should work well on any device**. Overlays may adapt to bottom sheets or full-screen on mobile devices. Make sure the overlay contents work with all supported sizes and input methods.+++## Anatomy++Overlays may include a header to provide context, and footer to host actions. Its main area can support any content inside, and it may be scrollabe. For interactive lists, use [Action lists](/components/action-list).++Overlays have a **safe area** of 16px. This is not a strict padding, but a guide to let the overlay boundaries free of text and heavy visual elements. Interactive elements may still be 8px away from the edge, as long as their main visual elements are within the safe area. For example, the **Close** button has its padding outside the safe area, but its octicon is distant enough.++<ImageContainer>+  <img+    width="636"+    src="https://user-images.githubusercontent.com/293280/125708874-bdb83c2b-e215-450f-b888-542b16c23dad.png"+    alt="Overlay anatomy"+    style="background: none"+  />+</ImageContainer>++### Overlay header++An overlay header may be used to provide context to the user by displaying title, description, and offering an easy-to-escape route with a **Close** button. Overlay headers may also provide ways for the user to interact with items through search and tabs.++Avoid using a description if the title already conveys the same information. Don't be verbose.++Reserve confirmation actions such as **Save**, **Apply**, and **Done** to the overlay footer, not the header.++A divider between the header and content area is optional if there's no overflow scrolling.++<ImageContainer>+  <img+    width="600"+    src="https://user-images.githubusercontent.com/293280/125709255-7d0f199d-9ea9-46ac-ae5a-c6e60d97b289.png"+    alt=" "+    style="background: none"+  />+</ImageContainer>+<Caption>Overlay header with search field.</Caption>++<ImageContainer>+  <img+    width="600"+    src="https://user-images.githubusercontent.com/293280/125709258-c542e916-69c3-4b37-9f7d-c118d9e704bd.png"+    alt=" "+    style="background: none"+  />+</ImageContainer>+<Caption>Overlay header with larger title and description.</Caption>++### Overlay footer++Use an overlay footer to show confirmation actions, navigation links or other important elements that should appear at the bottom. Footers are shown outside of the scrolling area, and are always visible to the user.++A divider between the footer and content area is optional if there's no overflow scrolling.++<Grid gridTemplateColumns={['1fr', null, null, null, '1fr 1fr']} gridGap={5}>+    <Box>+        <img+            width="464"+            alt="Overlay footer"+            src="https://user-images.githubusercontent.com/293280/125710928-020030c9-ac72-486a-905d-521d6b879517.png"+        />+        <Caption>Use buttons in a footer to let the user finish the task.</Caption>+    </Box>+    <Box>+        <img+            width="464"+            alt="Overlay footer"+            src="https://user-images.githubusercontent.com/293280/125710210-feb2e37e-aa45-4f67-984f-09d50fde0c26.png"+        />+        <Caption>Use a link in a footer to provide access to a related page.</Caption>+    </Box>+</Grid>+++## Behaviors++### Opening++Overlays appear in the page after a direct user interaction, i.e. on click, tap, press, etc.++On desktops and other devices with a fine pointer, overlays may also be triggered by a delayed `hover` event (GitHub calls these _hovercards_). Since this behavior doesn't work on touch devices, consider whether tapping on the source element should open the overlay or take the user to its destination directly. For example, a delayed hover on a **@username** may present a _hovercard_ on desktop, while a tap on the username would open a bottom sheet with a link to the user's profile page.++Don't show overlays on page load. For that, prefer in-page messages and flash banners.+++### Closing++Users may always click outside or press Escape to close an overlay. Some overlays may provide a close button as an easy escape route. Close buttons are useful in larger overlays, and when the overlay is no longer visually connected to the source that triggered it. Always use close buttons in dialogs.++Closing an overlay may apply changes right away (as seen in selection panels). If the overlay contains changes that are not immediately applied (such as in a form), offer footer buttons such as **Save**, **Apply**, or **Done**. If the user closes the overlay without saving, offer a [`beforeUnload`](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload) prompt to the browser so the user can avoid losing changes. The same confirmation should appear if the user tries to close the browser tab.++The user should also be able to press the browser's back button to close the overlay. This is particularly useful on mobile devices.+++### Width and height

Eventually, I think that's a good goal. I tested something around that in the past while looking at https://github.com/github/primer/issues/41. Let's sync on this later!

vdepizzol

comment created time in a month

PullRequestReviewEvent

push eventprimer/design

Vinicius Depizzol

commit sha 93ff5affc35bfe9622f3ced8933a35419d0f0e39

overlay closing copy

view details

push time in a month

Pull request review commentprimer/design

[Draft] Overlay docs

+---+title: Overlay+status: Alpha+---++import {Grid, Flex, Box, Button, ButtonOutline, Heading, Label, LabelGroup, Link} from '@primer/components'++<Box sx={{fontSize: 3}} class="lead" as="p">+    An overlay is a flexible floating surface, used to display transient content such as menus, selection options, dialogs, and more. Overlays use shadows to express elevation, and may include a backdrop that dims the rest of the screen for focus. +</Box>++<LabelGroup display="block" mb={4}>+    <Label as="a" href="https://primer.style/components/ActionList" variant="xl" color="text.success" outline style="text-decoration: none; line-height: 20px;">+        <img width="20" height="20" alt=" " src="https://user-images.githubusercontent.com/293280/123878374-ce9d4d00-d8f3-11eb-8adf-1a160292ff53.png" style="vertical-align: middle; margin-right: 4px;" />+        React+    </Label>+    <Label as="a" href="https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=1927%3A0" variant="xl" outline style="text-decoration: none; line-height: 20px;">+        <img width="20" height="20" alt=" " src="https://user-images.githubusercontent.com/293280/123878720-80d51480-d8f4-11eb-9b10-d02a1cb606f8.png" style="vertical-align: middle; margin-right: 4px;" />+        Figma+    </Label>+</LabelGroup>++<!--+<Label as="a" href="/components/ActionList" variant="xl" outline style="text-decoration: none">ViewComponent</Label>++-->++<img src="https://user-images.githubusercontent.com/293280/125706076-b16bb3d4-800f-4310-a082-f576e215e6c8.png" alt="Overlay examples" />++## Overview++Overlays can streamline the interface by allowing extra options to be displayed as needed. Overlays present a new context to the user, and can facilitate the completion of individual tasks. They are also useful for data-manipulation, providing a dedicated surface for selecting or editing options.++**Keep overlays simple**. Overlays are meant to be interacted with quickly, so they're better suited for clear experiences. Avoid creating a whole page inside an overlay. Prefer single-column layouts that convey a clear goal the moment it's opened.++**Overlays can be fully interacted with a keyboard**. Keyboard navigation should be limited to the elements of the active overlay. If the overlay contains a list, let users navigate using keyboard arrows. Pressing Escape should dismiss the overlay. When an overlay is dismissed, focus generally returns to the element that opened it.++**Overlay contents should work well on any device**. Overlays may adapt to bottom sheets or full-screen on mobile devices. Make sure the overlay contents work with all supported sizes and input methods.+++## Anatomy++Overlays may include a header to provide context, and footer to host actions. Its main area can support any content inside, and it may be scrollabe. For interactive lists, use [Action lists](/components/action-list).++Overlays have a **safe area** of 16px. This is not a strict padding, but a guide to let the overlay boundaries free of text and heavy visual elements. Interactive elements may still be 8px away from the edge, as long as their main visual elements are within the safe area. For example, the **Close** button has its padding outside the safe area, but its octicon is distant enough.++<ImageContainer>+  <img+    width="636"+    src="https://user-images.githubusercontent.com/293280/125708874-bdb83c2b-e215-450f-b888-542b16c23dad.png"+    alt="Overlay anatomy"+    style="background: none"+  />+</ImageContainer>++### Overlay header++An overlay header may be used to provide context to the user by displaying title, description, and offering an easy-to-escape route with a **Close** button. Overlay headers may also provide ways for the user to interact with items through search and tabs.++Avoid using a description if the title already conveys the same information. Don't be verbose.++Reserve confirmation actions such as **Save**, **Apply**, and **Done** to the overlay footer, not the header.++A divider between the header and content area is optional if there's no overflow scrolling.++<ImageContainer>+  <img+    width="600"+    src="https://user-images.githubusercontent.com/293280/125709255-7d0f199d-9ea9-46ac-ae5a-c6e60d97b289.png"+    alt=" "+    style="background: none"+  />+</ImageContainer>+<Caption>Overlay header with search field.</Caption>++<ImageContainer>+  <img+    width="600"+    src="https://user-images.githubusercontent.com/293280/125709258-c542e916-69c3-4b37-9f7d-c118d9e704bd.png"+    alt=" "+    style="background: none"+  />+</ImageContainer>+<Caption>Overlay header with larger title and description.</Caption>++### Overlay footer++Use an overlay footer to show confirmation actions, navigation links or other important elements that should appear at the bottom. Footers are shown outside of the scrolling area, and are always visible to the user.++A divider between the footer and content area is optional if there's no overflow scrolling.++<Grid gridTemplateColumns={['1fr', null, null, null, '1fr 1fr']} gridGap={5}>+    <Box>+        <img+            width="464"+            alt="Overlay footer"+            src="https://user-images.githubusercontent.com/293280/125710928-020030c9-ac72-486a-905d-521d6b879517.png"+        />+        <Caption>Use buttons in a footer to let the user finish the task.</Caption>+    </Box>+    <Box>+        <img+            width="464"+            alt="Overlay footer"+            src="https://user-images.githubusercontent.com/293280/125710210-feb2e37e-aa45-4f67-984f-09d50fde0c26.png"+        />+        <Caption>Use a link in a footer to provide access to a related page.</Caption>+    </Box>+</Grid>+++## Behaviors++### Opening++Overlays appear in the page after a direct user interaction, i.e. on click, tap, press, etc.++On desktops and other devices with a fine pointer, overlays may also be triggered by a delayed `hover` event (GitHub calls these _hovercards_). Since this behavior doesn't work on touch devices, consider whether tapping on the source element should open the overlay or take the user to its destination directly. For example, a delayed hover on a **@username** may present a _hovercard_ on desktop, while a tap on the username would open a bottom sheet with a link to the user's profile page.

Hovercards are not mentioned anywhere in primery.style 😳. We should definitely have guidance on it at some point.

vdepizzol

comment created time in a month

PullRequestReviewEvent
PullRequestReviewEvent

Pull request review commentprimer/design

[Draft] Overlay docs

+---+title: Overlay+status: Alpha+---++import {Grid, Flex, Box, Button, ButtonOutline, Heading, Label, LabelGroup, Link} from '@primer/components'++<Box sx={{fontSize: 3}} class="lead" as="p">+    An overlay is a flexible floating surface, used to display transient content such as menus, selection options, dialogs, and more. Overlays use shadows to express elevation, and may include a backdrop that dims the rest of the screen for focus. +</Box>++<LabelGroup display="block" mb={4}>+    <Label as="a" href="https://primer.style/components/ActionList" variant="xl" color="text.success" outline style="text-decoration: none; line-height: 20px;">+        <img width="20" height="20" alt=" " src="https://user-images.githubusercontent.com/293280/123878374-ce9d4d00-d8f3-11eb-8adf-1a160292ff53.png" style="vertical-align: middle; margin-right: 4px;" />+        React+    </Label>+    <Label as="a" href="https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=1927%3A0" variant="xl" outline style="text-decoration: none; line-height: 20px;">+        <img width="20" height="20" alt=" " src="https://user-images.githubusercontent.com/293280/123878720-80d51480-d8f4-11eb-9b10-d02a1cb606f8.png" style="vertical-align: middle; margin-right: 4px;" />+        Figma+    </Label>+</LabelGroup>++<!--+<Label as="a" href="/components/ActionList" variant="xl" outline style="text-decoration: none">ViewComponent</Label>++-->++<img src="https://user-images.githubusercontent.com/293280/125706076-b16bb3d4-800f-4310-a082-f576e215e6c8.png" alt="Overlay examples" />++## Overview++Overlays can streamline the interface by allowing extra options to be displayed as needed. Overlays present a new context to the user, and can facilitate the completion of individual tasks. They are also useful for data-manipulation, providing a dedicated surface for selecting or editing options.++**Keep overlays simple**. Overlays are meant to be interacted with quickly, so they're better suited for clear experiences. Avoid creating a whole page inside an overlay. Prefer single-column layouts that convey a clear goal the moment it's opened.++**Overlays can be fully interacted with a keyboard**. Keyboard navigation should be limited to the elements of the active overlay. If the overlay contains a list, let users navigate using keyboard arrows. Pressing Escape should dismiss the overlay. When an overlay is dismissed, focus generally returns to the element that opened it.++**Overlay contents should work well on any device**. Overlays may adapt to bottom sheets or full-screen on mobile devices. Make sure the overlay contents work with all supported sizes and input methods.+++## Anatomy++Overlays may include a header to provide context, and footer to host actions. Its main area can support any content inside, and it may be scrollabe. For interactive lists, use [Action lists](/components/action-list).++Overlays have a **safe area** of 16px. This is not a strict padding, but a guide to let the overlay boundaries free of text and heavy visual elements. Interactive elements may still be 8px away from the edge, as long as their main visual elements are within the safe area. For example, the **Close** button has its padding outside the safe area, but its octicon is distant enough.++<ImageContainer>+  <img+    width="636"+    src="https://user-images.githubusercontent.com/293280/125708874-bdb83c2b-e215-450f-b888-542b16c23dad.png"+    alt="Overlay anatomy"+    style="background: none"+  />+</ImageContainer>++### Overlay header++An overlay header may be used to provide context to the user by displaying title, description, and offering an easy-to-escape route with a **Close** button. Overlay headers may also provide ways for the user to interact with items through search and tabs.++Avoid using a description if the title already conveys the same information. Don't be verbose.++Reserve confirmation actions such as **Save**, **Apply**, and **Done** to the overlay footer, not the header.++A divider between the header and content area is optional if there's no overflow scrolling.++<ImageContainer>+  <img+    width="600"+    src="https://user-images.githubusercontent.com/293280/125709255-7d0f199d-9ea9-46ac-ae5a-c6e60d97b289.png"+    alt=" "+    style="background: none"+  />+</ImageContainer>+<Caption>Overlay header with search field.</Caption>++<ImageContainer>+  <img+    width="600"+    src="https://user-images.githubusercontent.com/293280/125709258-c542e916-69c3-4b37-9f7d-c118d9e704bd.png"+    alt=" "+    style="background: none"+  />+</ImageContainer>+<Caption>Overlay header with larger title and description.</Caption>++### Overlay footer++Use an overlay footer to show confirmation actions, navigation links or other important elements that should appear at the bottom. Footers are shown outside of the scrolling area, and are always visible to the user.++A divider between the footer and content area is optional if there's no overflow scrolling.++<Grid gridTemplateColumns={['1fr', null, null, null, '1fr 1fr']} gridGap={5}>

I think those are just different components? I with we can only achieve the multi-column with Grid...

vdepizzol

comment created time in a month

push eventprimer/design

Vinicius Depizzol

commit sha 40570c88ad2bb35ec42e0ae71ad7edcba1d546e7

copy

view details

Vinicius Depizzol

commit sha 6c181289a9b81fd56af37951fa432a845457f986

Merge branch 'overlay' of https://github.com/primer/design into overlay

view details

push time in a month

push eventprimer/design

Vinicius Depizzol

commit sha e1a407bf52ce803d5ec8e02726544bd18af91b88

Apply @mperrotti suggestions Co-authored-by: Mike Perrotti <mperrotti@github.com>

view details

push time in a month

PullRequestReviewEvent