Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • rtat.net/design.gitlab.com
  • michaelgusto14/design.gitlab.com
  • DylanGriffith/design.gitlab.com
  • gitlab-org/gitlab-services/design.gitlab.com
  • jellynina/design.gitlab.com
  • ynsmroztas/design.gitlab.com
  • gtsiolis/design.gitlab.com
  • jeaster121/design.gitlab.com
  • jjlorenzo/design.gitlab.com
  • b1n/design.gitlab.com
  • katokpara/design.gitlab.com
  • evhoffmann/design.gitlab.com
  • eysz7-x-x/design.gitlab.com
  • roufique/design.gitlab.com
  • michals2/design.gitlab.com
  • snegu/design.gitlab.com
  • tinahaibodi/design.gitlab.com
  • jagan.velpuri/design.gitlab.com
  • ndingding/design.gitlab.com
  • Kzai/design.gitlab.com
  • unaheidi/design.gitlab.com
  • jnwlkr/design.gitlab.com
  • Citizen_Drain/design.gitlab.com
  • Ali123123/design.gitlab.com
  • steve12312/design.gitlab.com
  • sarahill/design.gitlab.com
  • ms_bandral/design.gitlab.com
  • tmorehouse/design.gitlab.com
  • xeious/design.gitlab.com
  • siddheshpalande/design.gitlab.com
  • allenl/design.gitlab.com
  • gtrohel/design.gitlab.com
  • dyna-dot/design.gitlab.com
  • cmarinos/design.gitlab.com
  • jeanche/design.gitlab.com
  • splattael/design.gitlab.com
  • sarakhatri/design.gitlab.com
  • deuley/design.gitlab.com
  • davo3/design.gitlab.com
  • leetickett/design.gitlab.com
  • georgibakken/design.gitlab.com
  • veethika/design.gitlab.com
  • keviyne/design.gitlab.com
  • gitlab-renovate-forks/design.gitlab.com
  • FARESELLELL/design.gitlab.com
  • rastogi_saurav/design.gitlab.com
  • usApp-stAck/design.gitlab.com
  • WebDevAdminAlpha/design.gitlab.com
  • khalidhussain/design.gitlab.com
  • joe115/design.gitlab.com
  • mtrontz/design.gitlab.com
  • GregSong/design.gitlab.com
  • pintukumarkathrotiya/design.gitlab.com
  • ajish.kbn/design.gitlab.com
  • Jokerwin/design.gitlab.com
  • marvinrr322/design.gitlab.com
  • flayestelijah/design.gitlab.com
  • englotpiotr/design.gitlab.com
  • adithyaakrishna/design.gitlab.com
  • globat190/design.gitlab.com
  • techguy.plugins/design.gitlab.com
  • yashmaheshwari/design.gitlab.com
  • yasen2/design.gitlab.com
  • mikegreiling/design.gitlab.com
  • gdoyle/design.gitlab.com
  • monica_galletto/design.gitlab.com
  • tserkes/design.gitlab.com
  • NajahSoft/design.gitlab.com
  • Monthakan/design.gitlab.com
  • zillemarco/design.gitlab.com
  • mrgrafista/design.gitlab.com
  • francescosommella980/design.gitlab.com
  • ghostshell202/design.gitlab.com
  • roperera/design.gitlab.com
  • ropereralk/design.gitlab.com
  • JiannaMasmila/design.gitlab.com
  • shubhamahuja_/design.gitlab.com
  • nova44056/design.gitlab.com
  • xuweilong321/design.gitlab.com
  • raphaellandas/design.gitlab.com
  • armbiant/gitlab-pajamas-design-system
  • ondrejkonec/design.gitlab.com
  • arpitBhalla/design.gitlab.com
  • mirosss/design.gitlab.com
  • alejandro/design.gitlab.com
  • catinbag/design.gitlab.com
  • dediacc/design.gitlab.com
  • deerajhackerone/design.gitlab.com
  • joetakata/design.gitlab.com
  • nraj0408/design.gitlab.com
  • abeldmente/design.gitlab.com
  • mle/design
  • mle/pajamas-design-system-2
  • vakzz-h1/design.gitlab.com
  • gerwitz/design.gitlab.com
  • sahadat-sk/design.gitlab.com
  • M00njuic3/pahjamjams
  • ale3oula/design.gitlab.com
  • jamesrushford/pajamas-design-system-temp
  • wriozumi/design.gitlab.com
  • bucoleary/design.gitlab.com
  • interohm/design.gitlab.com
  • Garrybrayn/design.gitlab.com
  • SimoParashi/design.gitlab.com
  • Scmili/dycf-uh
  • paula.beatty1/design.gitlab.com
  • gitlab-community/gitlab-services/design.gitlab.com
  • Mohammadreza-Sarvari/design.gitlab.com
  • ollevche/design.gitlab.com
  • jendowns/design.gitlab.com
  • omarfyi/design.gitlab.com
111 results
Show changes
Commits on Source (11)
Showing
with 72 additions and 41 deletions
# [2.151.0](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/compare/v2.150.0...v2.151.0) (2023-02-20)
### Bug Fixes
* **deps:** update dependency @gitlab/ui to v55.3.1 ([97c51c7](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/97c51c70cf59cbb837f3ffe3684b233d7f6c7063))
* Add missing "Contribute" tabs ([0fbce90](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/0fbce90ccde6de11a2f761382a57f8d0cfe0ed30))
* **deps:** update dependency nuxt to v2.16.1 ([a225056](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/a225056184466d859dc355c17b926fcdb73749a4))
* Add figure-img component ([b9b2a33](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/b9b2a33cb10f701f377781cace2d799b4152828d))
* Update or remove broken links ([0593427](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/0593427580639de9f38882e9ba64899e8192b40c))
### Features
* **BrandMotion:** Embed video samples ([05b61d7](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/05b61d7c32958f078a39da4add9854b1885ef969))
* **Link:** include truncation reference ([8878cfa](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/8878cfaa24da6a544012749673faa33fe5e230bc))
* **Modal:** specify dropdown usage in modal window version two ([56d4092](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/56d40929dea05644785fa3b4e2d83ce9b9dd2313))
* **Tooltip:** Add tooltip structure diagram ([fb6f50a](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/fb6f50a0f7a54b74c36f4d705dc54dc8c8f9d813))
# [2.150.0](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/compare/v2.149.0...v2.150.0) (2023-02-13)
......
---
name: Checkbox
description: A checkbox form element represents a boolean option.
componentLabel: form-checkbox
stories:
- base-form-form-checkbox--default
related:
......
---
name: Color picker
description: A color picker allows users to customize a component by choosing a color option. It is only available in instances where a user is adding bespoke content that needs to be differentiated.
componentLabel: form-color-picker
---
## Examples
......
---
name: Date picker
description: The date picker allows a user to choose and/or input a date by using a calendar dropdown or by typing the date into a text field.
componentLabel: form-date-picker
stories:
- base-datepicker--default
- base-daterange-picker--default
......
---
name: Dropdown overview
componentLabel: false
---
In general terms, a "dropdown" is a combination of a trigger that opens a panel. A dropdown can mean many things while not being specific to any particular implementation. For that reason we've specified two distinct components and included variants where necessary. While the UI is nearly identical for each, there are important considerations related to a user's task and underlying semantics.
......
---
name: File uploader
description: A file uploader is used to upload files from a computer or device to the application.
componentLabel: form-file-uploader
docs: in-progress
---
......
---
name: Filter
description: Filters allow a user to narrow down content by taking an existing list and removing items based on criteria that matches or doesn’t.
componentLabel: form-filter
stories:
- base-filtered-search--default
related:
......
......@@ -72,10 +72,7 @@ Clicking the "edit" button places a user in an "edit mode" for this row, which u
- When modal content extends below the viewport, the viewport remains scrollable.
- If modal content exceeding the height of the viewport impedes a user’s ability to maintain context or see important actions, the content within the modal is scrollable.
- On small screens where content requires scrolling, consider opening the content in a new page instead.
- When dropdowns are present in modals, take care to ensure the dropdown is visible by:
- Allowing dropdowns to extend outside the boundary of the modal if needed.
- Positioning the dropdown above rather than below the trigger if it keeps the dropdown within the viewport.
- If keeping the modal and dropdown inside the viewport is not possible, allow the modal overlay to scroll rather than the modal itself. Leave space between the bottom of the dropdown and the edge of the viewport where possible.
- Avoid making the modal content area scrollable. This allows dropdowns and similar popups to extend outside the boundary of the modal when necessary and to re-position as needed depending on available space.
### Content
......
---
name: Radio button
description: A radio button typically represents a single option in a group of related choices.
componentLabel: form-radio-button
stories:
- base-form-form-radio--default
related:
......
---
name: Search
description: Search patterns enable users to find certain information by adding criteria that match their query.
componentLabel: form-search
stories:
- base-search-box-by-click--default
- base-search-box-by-type--default
......
---
name: Select
description:
description: An HTML element, typically used in a form.
componentLabel: form-select
---
## Examples
......
---
name: Text input
description:
description: A component for the HTML input type="text" element.
componentLabel: form-text-input
---
## Examples
......
---
name: Textarea
description:
description: A component for the HTML textarea element.
componentLabel: form-textarea
---
## Examples
......
---
name: Token
description: A token represents a keyword used to add or filter objects.
componentLabel: form-token
stories:
- base-token--default
related:
......
......@@ -62,38 +62,41 @@ export default {
if (section !== 'components') {
return null;
}
if (this.page.componentLabel !== undefined) {
return this.page.componentLabel;
}
return componentNameToLabelMap[slug] || slug;
},
hasStories() {
return Boolean(this.page?.stories?.length);
},
showTabs() {
return this.hasStories || Boolean(this.page?.tabs?.length);
return Boolean(this.tabs.length);
},
tabs() {
let { tabs = [] } = this.page;
tabs = [
{
route: 'section-slug',
title: 'Usage',
},
...tabs,
];
if (this.componentLabel) {
tabs = [
{
route: 'section-slug',
title: 'Usage',
},
...tabs,
];
if (this.hasStories) {
tabs.push({
route: 'section-slug-code',
title: 'Implementation (Vue.js)',
});
}
if (this.hasStories) {
tabs.push({
route: 'section-slug-code',
title: 'Implementation (Vue.js)',
});
tabs.push({
route: 'section-slug-lookbook',
title: 'Implementation (Rails)',
});
tabs.push({
route: 'section-slug-lookbook',
title: 'Implementation (Rails)',
});
}
if (this.componentLabel) {
tabs.push({
route: 'section-slug-contribute',
title: 'Contribute',
......
......@@ -1202,10 +1202,10 @@
resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-3.20.0.tgz#4ee4f2f24304d13ccce58f82c2ecd87e556f35b4"
integrity sha512-nYTF4j5kon4XbBr/sAzuubgxjIne9+RTZLmSrSaL9FL4eyuv9aa7YMCcOrlIbYX5jlSYlcD+ck2F2M1sqXXOBA==
 
"@gitlab/ui@55.2.0":
version "55.2.0"
resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-55.2.0.tgz#0cd24310a4ebbd08c1fcf4281b8cc60709fde0da"
integrity sha512-iEbW3OvgyLcT7c0Sd2LcB3eo4kuxIRoqkM4xCZwgIxVLOeGsQfbaBHMCSG9Ekt/OYoesq7B7pX6AqrV9UBuwKw==
"@gitlab/ui@55.3.1":
version "55.3.1"
resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-55.3.1.tgz#b8c7186595beed4997a96b334e5f6f4f43a3947e"
integrity sha512-HgtPDtFre9CCkNi+tmBhOUAfmTpvbPTf6n/zbh4zerqkgEo+0nBaNxnPjgC7n1/7GR3mFlc4m05CaRzMIQ9e8Q==
dependencies:
"@popperjs/core" "^2.11.2"
bootstrap-vue "2.20.1"
......@@ -5682,10 +5682,10 @@ eslint-visitor-keys@^3.3.0:
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
eslint@8.33.0:
version "8.33.0"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.33.0.tgz#02f110f32998cb598c6461f24f4d306e41ca33d7"
integrity sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==
eslint@8.34.0:
version "8.34.0"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.34.0.tgz#fe0ab0ef478104c1f9ebc5537e303d25a8fb22d6"
integrity sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==
dependencies:
"@eslint/eslintrc" "^1.4.1"
"@humanwhocodes/config-array" "^0.11.8"
......@@ -11333,10 +11333,10 @@ stackframe@^1.0.4:
resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.0.4.tgz#357b24a992f9427cba6b545d96a14ed2cbca187b"
integrity sha512-to7oADIniaYwS3MhtCa/sQhrxidCCQiF/qp4/m5iN3ipf0Y7Xlri0f6eG29r08aL7JYl8n32AF3Q5GYBZ7K8vw==
 
start-server-and-test@^1.15.3:
version "1.15.3"
resolved "https://registry.yarnpkg.com/start-server-and-test/-/start-server-and-test-1.15.3.tgz#33bb6465ff4d5e3a476337512a7e0d737a5ef026"
integrity sha512-4GqkqghvUR9cJ8buvtgkyT0AHgVwCJ5EN8eDEhe9grTChGwWUxGm2nqfSeE9+0PZkLRdFqcwTwxVHe1y3ViutQ==
start-server-and-test@^1.15.4:
version "1.15.4"
resolved "https://registry.yarnpkg.com/start-server-and-test/-/start-server-and-test-1.15.4.tgz#8dd7c695c2c1f7e6e024843ca2224ee7d58d9a02"
integrity sha512-ucQtp5+UCr0m4aHlY+aEV2JSYNTiMZKdSKK/bsIr6AlmwAWDYDnV7uGlWWEtWa7T4XvRI5cPYcPcQgeLqpz+Tg==
dependencies:
arg "^5.0.2"
bluebird "3.7.2"
......