GitLab Design issueshttps://gitlab.com/gitlab-org/gitlab-design/-/issues2018-03-09T18:15:35Zhttps://gitlab.com/gitlab-org/gitlab-design/-/issues/58Design Pattern Library - Add Activity Dashboard2018-03-09T18:15:35ZSarrah Vesselovsvesselov@gitlab.comDesign Pattern Library - Add Activity Dashboard## Add activity dashboard to brand.ai
### Example(s)
(Image of the pattern you are adding to the library)
### Usage
(When do you use this pattern? And how? This is being collected for design.gitlab)
#### Dos and Dont's
(Use this ta...## Add activity dashboard to brand.ai
### Example(s)
(Image of the pattern you are adding to the library)
### Usage
(When do you use this pattern? And how? This is being collected for design.gitlab)
#### Dos and Dont's
(Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)
| :white_check_mark: Do | :stop_sign: Don’t |
|------------------------|-------------------|
| | |
### Related patterns
(List any related or similar solutions. If none, write: No related patterns)
### Links / references
### Pattern checklist
Make sure these are completed before closing the issue,
with a link to the relevant commit, if applicable.
1. [ ] Ensure that you have broken things down into atoms, molecules, and organisms.
1. [ ] Check that you have not created a duplicate of an existing pattern.
1. [ ] Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
1. [ ] Make sure that text is created using text styles. When applicable used shared styles for colors.
1. [ ] QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)Pedro Moreira da SilvaPedro Moreira da Silva2017-12-29https://gitlab.com/gitlab-org/gitlab-design/-/issues/56Design Pattern Library - Add Issue / mr / todos dashboards2018-03-09T18:16:05ZSarrah Vesselovsvesselov@gitlab.comDesign Pattern Library - Add Issue / mr / todos dashboards## Add issue/mr/todos dashboards to brand.ai library.
### Example(s)
(Image of the pattern you are adding to the library)
### Usage
(When do you use this pattern? And how? This is being collected for design.gitlab)
#### Dos and Dont...## Add issue/mr/todos dashboards to brand.ai library.
### Example(s)
(Image of the pattern you are adding to the library)
### Usage
(When do you use this pattern? And how? This is being collected for design.gitlab)
#### Dos and Dont's
(Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)
| :white_check_mark: Do | :stop_sign: Don’t |
|------------------------|-------------------|
| | |
### Related patterns
(List any related or similar solutions. If none, write: No related patterns)
### Links / references
### Pattern checklist
Make sure these are completed before closing the issue,
with a link to the relevant commit, if applicable.
1. [ ] Ensure that you have broken things down into atoms, molecules, and organisms.
1. [ ] Check that you have not created a duplicate of an existing pattern.
1. [ ] Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
1. [ ] Make sure that text is created using text styles. When applicable used shared styles for colors.
1. [ ] QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)Pedro Moreira da SilvaPedro Moreira da Silva2017-12-29https://gitlab.com/gitlab-org/gitlab-design/-/issues/129Design Pattern Library - General Box elements2018-03-09T19:46:52ZDimitrie HoekstraDesign Pattern Library - General Box elements### Problem
We currently have no box element to use for widgets and mobile tables.
### Solution
(What’s the solution? Why is it like that? What are the benefits?)
### Example(s)
![image](/uploads/a45b0fe8cecb084c0c055fdc363fa594/ima...### Problem
We currently have no box element to use for widgets and mobile tables.
### Solution
(What’s the solution? Why is it like that? What are the benefits?)
### Example(s)
![image](/uploads/a45b0fe8cecb084c0c055fdc363fa594/image.png)
### Usage
This is a symbol to be used in patterns, not a pattern on itself.
### Related patterns
- https://gitlab.com/gitlab-org/gitlab-design/issues/60#note_55156481
- https://gitlab.com/gitlab-org/gitlab-design/issues/89
### Links / references
-
### Pattern checklist
Make sure these are completed before closing the issue,
with a link to the relevant commit, if applicable.
1. [x] Check that you have not created a duplicate of an existing pattern.
1. [x] QA check by another UXer
1. [x] Add changes to gitlab-elements.sketch
/cc @cperessini @dimitrieh @hazelyang @jkarthik @pedroms @sarrahvesselov @sarahod @tauriedavisDimitrie HoekstraChris PeressiniDimitrie Hoekstrahttps://gitlab.com/gitlab-org/gitlab-design/-/issues/54Design Pattern Library - Add Group / Project home2018-03-20T04:46:25ZSarrah Vesselovsvesselov@gitlab.comDesign Pattern Library - Add Group / Project home## Add group/project home to the brand.ai library
### Example(s)
| Project | Group |
| ------- | ----- |
| ![Project](/uploads/d50e75ce731c149fa21f1b1b074543e0/Project.png) | ![Group](/uploads/95080d803da88c5fa99751483f498e68/Group.png...## Add group/project home to the brand.ai library
### Example(s)
| Project | Group |
| ------- | ----- |
| ![Project](/uploads/d50e75ce731c149fa21f1b1b074543e0/Project.png) | ![Group](/uploads/95080d803da88c5fa99751483f498e68/Group.png) |
### Usage
(When do you use this pattern? And how? This is being collected for design.gitlab)
#### Dos and Dont's
(Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)
| :white_check_mark: Do | :stop_sign: Don’t |
|------------------------|-------------------|
| | |
### Related patterns
(List any related or similar solutions. If none, write: No related patterns)
### Links / references
### Pattern checklist
Make sure these are completed before closing the issue,
with a link to the relevant commit, if applicable.
1. [x] Ensure that you have broken things down into atoms, molecules, and organisms.
1. [x] Check that you have not created a duplicate of an existing pattern.
1. [x] Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
1. [x] Make sure that text is created using text styles. When applicable used shared styles for colors.
1. [x] QA check by another UXer (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)Taurie DavisChris PeressiniTaurie Davis2017-12-29https://gitlab.com/gitlab-org/gitlab-design/-/issues/133Alignment of rows in group page is off2018-03-20T14:23:51ZChris PeressiniAlignment of rows in group page is offThe alignment of rows with a description is off in the group page tree:
![screen_shot_2018-03-20_at_14.07.57](/uploads/c2526f5750e96a9016ac0714ea303c52/screen_shot_2018-03-20_at_14.07.57.png)
cc. @filipaThe alignment of rows with a description is off in the group page tree:
![screen_shot_2018-03-20_at_14.07.57](/uploads/c2526f5750e96a9016ac0714ea303c52/screen_shot_2018-03-20_at_14.07.57.png)
cc. @filipahttps://gitlab.com/gitlab-org/gitlab-design/-/issues/93Design Pattern Library - Update design of related issues to reflect newest de...2018-03-20T19:41:00ZTaurie DavisDesign Pattern Library - Update design of related issues to reflect newest designsThe design of related issues changed in 10.2 but the design library wasn't updated. This issue to update the designs in the design library and add documentation about the widget where applicable.
### Example(s)
![Issuables](/uploads/60...The design of related issues changed in 10.2 but the design library wasn't updated. This issue to update the designs in the design library and add documentation about the widget where applicable.
### Example(s)
![Issuables](/uploads/605380317f6d88706a659a7f3e5c15cd/Issuables.png)
### Usage
This pattern is used for related issues list.
### Pattern checklist
Make sure these are completed before closing the issue,
with a link to the relevant commit, if applicable.
1. [x] Ensure that you have broken things down into atoms, molecules, and organisms.
1. [x] Check that you have not created a duplicate of an existing pattern.
1. [x] Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
1. [x] Make sure that text is created using text styles. When applicable used shared styles for colors.
1. [x] QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)
1. [x] Added to gitlab-elements.sketch
1. [ ] Add to the [UX Guide](https://docs.gitlab.com/ce/development/ux_guide/) and/or add to the GitLab Design Library
1. [ ] Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)
/cc @cperessini @dimitrieh @hazelyang @pedroms @sarrahvesselov @sarahod @tauriedavisDimitrie HoekstraJeethu KarthikDimitrie Hoekstrahttps://gitlab.com/gitlab-org/gitlab-design/-/issues/128Icons > checkmark and close2018-03-23T02:21:47ZTaurie DavisIcons > checkmark and closeI was updating the icons used in toggles to use our icons:
|Previous version|Current version|
|--|--|
|![Screen_Shot_2018-03-08_at_4.28.22_PM](/uploads/3636225818c302536bfc8876fd513d0a/Screen_Shot_2018-03-08_at_4.28.22_PM.png) | ![Scree...I was updating the icons used in toggles to use our icons:
|Previous version|Current version|
|--|--|
|![Screen_Shot_2018-03-08_at_4.28.22_PM](/uploads/3636225818c302536bfc8876fd513d0a/Screen_Shot_2018-03-08_at_4.28.22_PM.png) | ![Screen_Shot_2018-03-08_at_4.26.29_PM](/uploads/456b5d53fae7866498ada5cac4b7fc0b/Screen_Shot_2018-03-08_at_4.26.29_PM.png)
|
The checkmark looks a lot larger. I wanted to make sure this is intentional.
#### New design
![image](/uploads/86259e8f85580c7cfda57d7f69518a94/image.png)Hazel YangHazel Yanghttps://gitlab.com/gitlab-org/gitlab-design/-/issues/134Create symbols out of gitlab-element pages2018-03-29T02:50:21ZChris PeressiniCreate symbols out of gitlab-element pagesAs a part of our move to Sketch libraries, our first step will be to create symbols out of the Global and Page components artboards. This will provide an easy way to add organisms as well as shared styles to the library. By detaching the...As a part of our move to Sketch libraries, our first step will be to create symbols out of the Global and Page components artboards. This will provide an easy way to add organisms as well as shared styles to the library. By detaching these artboards from their symbols, we will be able to use the organisms and styles contained inside.
A second (future) step will be to create symbols out of the individual organisms in these artboards. As part of that process, each organism will need to include `/organism/` element in its name.
cc. @dimitrieh @hazelyang @jkarthik @pedroms @sarrahvesselov @tauriedavisChris PeressiniChris Peressinihttps://gitlab.com/gitlab-org/gitlab-design/-/issues/101Design Pattern Library - Add issuable page system notes2018-03-29T21:19:52ZTaurie DavisDesign Pattern Library - Add issuable page system notes## Update the brand.ai library to contain the most up-to-date design specs for issuable comments.
### Example(s)
![issuable__system-notes](/uploads/a2939884fe0f1c967a3b0993d31c2b3b/issuable__system-notes.png)
### Usage
Issuable discu...## Update the brand.ai library to contain the most up-to-date design specs for issuable comments.
### Example(s)
![issuable__system-notes](/uploads/a2939884fe0f1c967a3b0993d31c2b3b/issuable__system-notes.png)
### Usage
Issuable discussion sections
#### Dos and Dont's
(Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)
| :white_check_mark: Do | :stop_sign: Don’t |
|------------------------|-------------------|
| | |
### Related patterns
n/a
### Links / references
### Pattern checklist
Make sure these are completed before closing the issue,
with a link to the relevant commit, if applicable.
1. [x] Ensure that you have broken things down into atoms, molecules, and organisms.
1. [x] Check that you have not created a duplicate of an existing pattern.
1. [x] Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
1. [x] Make sure that text is created using text styles. When applicable used shared styles for colors.
1. [ ] QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)Chris PeressiniPedro Moreira da SilvaChris Peressinihttps://gitlab.com/gitlab-org/gitlab-design/-/issues/57Design Pattern Library - Add Issue Boards2018-03-30T00:12:34ZSarrah Vesselovsvesselov@gitlab.comDesign Pattern Library - Add Issue Boards## Add issue boards to brand.ai.
### Example(s)
![Issue_Boards](/uploads/6534151a5f6670599d46c31ed4362d04/Issue_Boards.png)
### Usage
(When do you use this pattern? And how? This is being collected for design.gitlab)
#### Dos and Do...## Add issue boards to brand.ai.
### Example(s)
![Issue_Boards](/uploads/6534151a5f6670599d46c31ed4362d04/Issue_Boards.png)
### Usage
(When do you use this pattern? And how? This is being collected for design.gitlab)
#### Dos and Dont's
(Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)
| :white_check_mark: Do | :stop_sign: Don’t |
|------------------------|-------------------|
| | |
### Related patterns
(List any related or similar solutions. If none, write: No related patterns)
### Links / references
### Pattern checklist
Make sure these are completed before closing the issue,
with a link to the relevant commit, if applicable.
1. [x] Ensure that you have broken things down into atoms, molecules, and organisms.
1. [x] Check that you have not created a duplicate of an existing pattern.
1. [x] Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
1. [x] Make sure that text is created using text styles. When applicable used shared styles for colors.
1. [x] QA check by another UXer (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)Dimitrie HoekstraChris PeressiniDimitrie Hoekstra2017-12-29https://gitlab.com/gitlab-org/gitlab-design/-/issues/55Design Pattern Library - Add dashboard template2018-03-30T00:21:02ZSarrah Vesselovsvesselov@gitlab.comDesign Pattern Library - Add dashboard template## Add group and project dashboards to brand.ai
### Example(s)
![image](/uploads/71884a7b94f6c1047a332dd594c68e05/image.png)
### Usage
(When do you use this pattern? And how? This is being collected for design.gitlab)
#### Dos and D...## Add group and project dashboards to brand.ai
### Example(s)
![image](/uploads/71884a7b94f6c1047a332dd594c68e05/image.png)
### Usage
(When do you use this pattern? And how? This is being collected for design.gitlab)
#### Dos and Dont's
(Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)
| :white_check_mark: Do | :stop_sign: Don’t |
|------------------------|-------------------|
| | |
### Related patterns
(List any related or similar solutions. If none, write: No related patterns)
### Links / references
### Pattern checklist
Make sure these are completed before closing the issue,
with a link to the relevant commit, if applicable.
1. [x] Ensure that you have broken things down into atoms, molecules, and organisms.
1. [x] Check that you have not created a duplicate of an existing pattern.
1. [x] Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
1. [x] Make sure that text is created using text styles. When applicable used shared styles for colors.
1. [x] QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)Chris PeressiniPedro Moreira da SilvaChris Peressini2017-12-29https://gitlab.com/gitlab-org/gitlab-design/-/issues/98Design Pattern Library - Add issuable page rows2018-03-30T09:55:58ZTaurie DavisDesign Pattern Library - Add issuable page rows## Update the brand.ai library to contain the most up-to-date design specs for issuable comments.
### Example(s)
![issuable__rows](/uploads/314f9ffef668f8f40a14a15bb942580e/issuable__rows.png)
### Usage
Issuable headers including:
*...## Update the brand.ai library to contain the most up-to-date design specs for issuable comments.
### Example(s)
![issuable__rows](/uploads/314f9ffef668f8f40a14a15bb942580e/issuable__rows.png)
### Usage
Issuable headers including:
* Open issues
* Closed issues
* Open merge requests
* Closed merge requests
* Merged merge requests
#### Dos and Dont's
(Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)
| :white_check_mark: Do | :stop_sign: Don’t |
|------------------------|-------------------|
| | |
### Related patterns
[Object list rows](https://gitlab.com/gitlab-org/gitlab-design/issues/69)
### Links / references
### Pattern checklist
Make sure these are completed before closing the issue,
with a link to the relevant commit, if applicable.
1. [x] Ensure that you have broken things down into atoms, molecules, and organisms.
1. [x] Check that you have not created a duplicate of an existing pattern.
1. [x] Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
1. [x] Make sure that text is created using text styles. When applicable used shared styles for colors.
1. [ ] QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)Chris PeressiniJeethu KarthikChris Peressinihttps://gitlab.com/gitlab-org/gitlab-design/-/issues/86Design Pattern Library - Add Geo table2018-05-02T00:06:03ZHazel YangDesign Pattern Library - Add Geo table### Example(s)
![geo-table](/uploads/d8c935b4ce63ba1e6467ce2212de92dd/geo-table.png)
### Usage
> (When do you use this pattern? And how? This is being collected for design.gitlab)
Geo table is only used on "Geo Nodes" page ([http://l...### Example(s)
![geo-table](/uploads/d8c935b4ce63ba1e6467ce2212de92dd/geo-table.png)
### Usage
> (When do you use this pattern? And how? This is being collected for design.gitlab)
Geo table is only used on "Geo Nodes" page ([http://localhost:3001/admin/geo_nodes]()). It usually has two nodes in the table. One is "Primary node", another one is "Secondary node".
The "Health staus" has 3 different types:
| Healthy | Unhealthy | Offline |
| --------------- | ---------------------- | ----------- |
| ![healthy](/uploads/3220f58fedd362be80db86e650ff0ed7/healthy.png) | ![unhealthy](/uploads/6d56d2bdcb04731973ff47fefa5053d0/unhealthy.png) | ![offline](/uploads/265828a50fc70f92329515ba22459382/offline.png) |
The "Last event info" has 3 different states:
| Up to 5 minutes | 5 minutes up to 1 hour | Over 1 hour |
| --------------- | ---------------------- | ----------- |
| ![sync-settings--up-to-5-mins](/uploads/b272e68bd8fa0eddcfee8cf19ec90640/sync-settings--up-to-5-mins.png) | ![sync-settings--5mins-to-1-hour](/uploads/674cb5d9419db83827c01f6e14cab4cf/sync-settings--5mins-to-1-hour.png) | ![sync-settings--over-1-hour](/uploads/bf0cc6cd7d50f15f8b789a0c080d3be8/sync-settings--over-1-hour.png) |
#### Dos and Dont's
> (Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)
| :white_check_mark: Do | :stop_sign: Don’t |
|------------------------|-------------------|
| ![01-geo-table-dos](/uploads/4d15e1363418967536f614055059de27/01-geo-table-dos.png) | ![01-geo-table-donts](/uploads/0ea218b5eb6ec956789909a96edc4600/01-geo-table-donts.png) |
| The label and the text should be in the different lines. | Don't put the label and the text in the same line. |
### Related patterns
> (List any related or similar solutions. If none, write: No related patterns)
### Links / references
### Pattern checklist
Make sure these are completed before closing the issue,
with a link to the relevant commit, if applicable.
- [x] Ensure that you have broken things down into atoms, molecules, and organisms.
- [x] Check that you have not created a duplicate of an existing pattern.
- [x] Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
- [x] Make sure that text is created using text styles. When applicable used shared styles for colors.
- [ ] QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)
- [x] Added to gitlab-elements.sketch
- [ ] Add to the [UX Guide](https://docs.gitlab.com/ce/development/ux_guide/) and/or add to the GitLab Design Library
- [ ] Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)10.8Taurie DavisHazel YangTaurie Davishttps://gitlab.com/gitlab-org/gitlab-design/-/issues/149Add common mouse cursors to the pattern library file2018-05-03T08:02:06ZMatej LatinAdd common mouse cursors to the pattern library fileSometimes we need to demonstrate the details of an interaction which may go to such details as what cursor needs to be used. Would be good to have the most common mouse cursors as symbols.Sometimes we need to demonstrate the details of an interaction which may go to such details as what cursor needs to be used. Would be good to have the most common mouse cursors as symbols.Matej LatinMatej Latinhttps://gitlab.com/gitlab-org/gitlab-design/-/issues/147Change the color of the quote text so it passes the accessibility standard2018-05-03T11:59:22ZMatej LatinChange the color of the quote text so it passes the accessibility standardThe current color of the quoted text in issues [doesn't have enough contrast](https://webaim.org/resources/contrastchecker/?fcolor=7F8FA4&bcolor=FFFFFF) against the white background. The current contrast ratio is **3.3:1** but should be ...The current color of the quoted text in issues [doesn't have enough contrast](https://webaim.org/resources/contrastchecker/?fcolor=7F8FA4&bcolor=FFFFFF) against the white background. The current contrast ratio is **3.3:1** but should be at least **4.5:1** for small text. It makes it harder to read especially for people with impaired vision, color blindness etc.
I suggest we change the text color to `#687792` which keeps the shade of the colour but darkens it.
**Suggested:**
![image](/uploads/5ffd917c10dd9fea17436dce5f226d24/image.png)
**Current:**
![image](/uploads/550211ea388b4867d101bb5a2dc78cee/image.png)Matej LatinMatej Latinhttps://gitlab.com/gitlab-org/gitlab-design/-/issues/92Design Pattern Library - Add updated issuable discussion designs2018-05-09T22:33:04ZTaurie DavisDesign Pattern Library - Add updated issuable discussion designsIssuable discussions are changing with https://gitlab.com/gitlab-org/gitlab-ce/issues/30299 https://gitlab.com/gitlab-org/gitlab-ce/issues/32451 https://gitlab.com/gitlab-org/gitlab-ce/issues/32452
Update the designs within design libra...Issuable discussions are changing with https://gitlab.com/gitlab-org/gitlab-ce/issues/30299 https://gitlab.com/gitlab-org/gitlab-ce/issues/32451 https://gitlab.com/gitlab-org/gitlab-ce/issues/32452
Update the designs within design library to reflect these changes.
### Example(s)
##### Merge reuqest
| 01 | 02 | 03 |
| -- | -- | -- |
| ![merge-request_replies--expand-with-comment-form](/uploads/e2299fe791d46c3d194c888295638dd1/merge-request_replies--expand-with-comment-form.png) | ![merge-request_replies-expand](/uploads/f888787a995bac72da0745f82db03404/merge-request_replies-expand.png) |![merge-request_replies--collapse](/uploads/9fe23ca46c149b3dc1f1780b84e865c7/merge-request_replies--collapse.png) |
##### Issue
| 01 | 02 |
| -- | -- |
| ![issuable_replies--comment-form](/uploads/034214aa2e323486f421510653bf3d3d/issuable_replies--comment-form.png) | ![issuable_replies--expand](/uploads/af42f12bba470c6c35c50144fdf5c604/issuable_replies--expand.png) |
### Usage
Issuable discussions are used for the discussions on issue page and merge request page. It has three states:
- The discussion is collapsed. In this state, it has the avatars in the bar to indicates who joined this discussion. It also indicates the number of replies.
- The discussion is expanded but the comment form is collapsed.
- The discussion is expanded and the comment form is expanded as well.
#### Dos and dont's
(Use this table to add images and text describing what’s ok and not ok.)
| :white_check_mark: Do | :stop_sign: Don’t |
|------------------------|-------------------|
| | |
### Related patterns
https://gitlab.com/gitlab-org/gitlab-design/issues/52
### Links / references
### Pattern checklist
Make sure these are completed before closing the issue,
with a link to the relevant commit, if applicable.
1. [x] Ensure that you have broken things down into atoms, molecules, and organisms.
1. [x] Check that you have not created a duplicate of an existing pattern.
1. [x] Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
1. [x] Make sure that text is created using text styles. When applicable used shared styles for colors.
1. [ ] QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)
1. [ ] Added to gitlab-elements.sketch
1. [ ] Add to the [UX Guide](https://docs.gitlab.com/ce/development/ux_guide/) and/or add to the GitLab Design Library
1. [ ] Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)
/cc @cperessini @dimitrieh @hazelyang @pedroms @sarrahvesselov @sarahod @tauriedavis10.8Dimitrie HoekstraHazel YangDimitrie Hoekstrahttps://gitlab.com/gitlab-org/gitlab-design/-/issues/153Design Pattern Library - Content capitalization2018-05-11T19:49:16ZAndreas KämmerleDesign Pattern Library - Content capitalization### Problem
From my experience, capitalization is not defined at GitLab product/design system level.
There have been a couple of issues mentioning this, but no clear output.
### Solution
Add a specific `Content/Capitalization...### Problem
From my experience, capitalization is not defined at GitLab product/design system level.
There have been a couple of issues mentioning this, but no clear output.
### Solution
Add a specific `Content/Capitalization` page in our design system to cover capitalization rules for product, documentation, handbook and web (ideally).
From my experience this affects (any type of) headlines and named entities.
As so often, there are different opinions. I feel that we have to define and stick to a set of rules consistently.
### Example(s)
- **1.A**: This Is A Headline
- **1.B**: This is a headline
---
- **2.A**: This Is A Headline With A Named Entitiy
- **2.B**: This is a headline with a Named Entity
- **2.C**: This is a headline with a Named entity
- **2.D**: This is a headline with a named entity
### Usage
- Product copy, documentation, handbook and web
#### Dos and dont's
*Needs to be defined once we agree on rules.*
| :white_check_mark: Do | :stop_sign: Don’t |
|------------------------|-------------------|
| | |
### References
![Screen_Shot_2018-05-11_at_8.20.33_PM](/uploads/216285cddd5c1d18e4bba2d4a7299057/Screen_Shot_2018-05-11_at_8.20.33_PM.png)
![Screen_Shot_2018-05-11_at_8.21.38_PM](/uploads/f1ea3e7e5a8a966e5636054cee1b16e4/Screen_Shot_2018-05-11_at_8.21.38_PM.png)https://gitlab.com/gitlab-org/gitlab-design/-/issues/20GitLab Design twitter handle2018-05-25T16:36:28ZAllison WhildenGitLab Design twitter handle##### Updated Proposal
Use the `gitlab` twitter handle to post design updates to twitter.
##### Goals
- Share our work in a more public way for people who aren’t living in GitLab
- Posting to Dribbble is something, but Dribbble is ...##### Updated Proposal
Use the `gitlab` twitter handle to post design updates to twitter.
##### Goals
- Share our work in a more public way for people who aren’t living in GitLab
- Posting to Dribbble is something, but Dribbble is limited to only designers
- Is a channel outside of GitLab
- Today we use blog, issues, but we don’t have any other way to allow us to say we are doing this in terms of design
- 1-way direction to community in order to funnel them and their feedback into GitLab, capturing their attention, share what we are doing, and encouraging people to come to GitLab to provide feedback
- Today people are very vocal about performance and user experience -- increase the transparency of the work we are doing, demonstrate our commitment
- Official channel to share out UX research surveys, and engage UX research community as well
##### Original Proposal
Create a GitLab design twitter handle
##### Concerns
- We as GitLab want to give a consistent experience across all our social media outlets.
- This means, that if we start a GitLab design twitter, it will become a support channel as well, next to that it will need to have a constant stream of information. In other words, we should be thoughtful in how and who is going to manage this.https://gitlab.com/gitlab-org/gitlab-design/-/issues/37Asynchronous design critiques2018-06-03T13:32:02ZChris PeressiniAsynchronous design critiquesWe review each other's designs quite often in issues, but in those situations the focus is usually on the feature rather than the designs and processes behind them. I think that analyzing each other's work from time to time would be grea...We review each other's designs quite often in issues, but in those situations the focus is usually on the feature rather than the designs and processes behind them. I think that analyzing each other's work from time to time would be great for GitLab to become more robust and for us to grow individually as designers.
In the past we have attempted conducting design critiques during the UX Team Call. Those efforts didn't succeed because of different reasons, but I think the main ones were:
- The UX Team Call doesn't offer a lot of time. We have enough stuff to fill up the calls as is
- Setting up separate calls is a burden and doesn't work well with our remote model
- People had to go out of their way to present a design for the next team call, and they may not have time to prepare for that
A more asynchronous approach could work better for us. Here are some ideas on how to make it work:
- When a designer wants to have some work critiqued, they open an issue in the GitLab Design project and add a detailed description, which can include the reasoning behind the decisions they made, the background data or research they used, etc.
- The designer pings the rest of the team and actively seeks their comments. We all have a lot of stuff to do so it's easy
for this kind of stuff to be put in the back of our minds. It should be okay to remind other designers to give their opinion because it will be appreciated
- We can aid ourselves with 'interactive' tools:
- We can record screencasts where we go over designs and comment on them. This gives us more freedom than typing out an analysis and it can be done asynchronously
- Tools like InVision can be used to comment on specific points of a design
- Freehand can be used to add annotations on exports
What do the rest of the UXers think? Is this something you would find valuable? cc. @hazelyang @dimitrieh @tauriedavis @pedroms @sarrahvesselovhttps://gitlab.com/gitlab-org/gitlab-design/-/issues/144Tackling Degradation of UX ready issues2018-06-06T15:49:25ZDimitrie HoekstraTackling Degradation of UX ready issues### Problem
Currently, we have quite a lot of issues with the ~"UX ready" label. Our current process involves assigning yourself to such issues and staying assigned. The problem is that over time these issues' solutions can become outda...### Problem
Currently, we have quite a lot of issues with the ~"UX ready" label. Our current process involves assigning yourself to such issues and staying assigned. The problem is that over time these issues' solutions can become outdated. There is a lack in the feedback loop here :thinking:
### Proposal
Consider a way to relabel those issues with ~UX automatically if their age (since labeling ~"UX ready") goes over X time.
cc: @sarrahvesselovDimitrie HoekstraDimitrie Hoekstra