Giter Site home page Giter Site logo

decathlon / vitamin-design Goto Github PK

View Code? Open in Web Editor NEW
33.0 9.0 6.0 7.33 MB

Decathlon Design System - Design workflow management

Home Page: https://decathlon.design

License: Apache License 2.0

JavaScript 0.67% Handlebars 0.02% Kotlin 89.19% CSS 1.08% HTML 4.54% TypeScript 1.22% Swift 3.29%
design designsystem management styleguide uikit vitamin workflow

vitamin-design's Introduction

Important

This current version of Vitamin will no longer evolve and only accept bug fixes from now on. More details here.


Vitamin Decathlon Design System logo Vitamin Decathlon Design System logo

Vitamin Design

Decathlon Design System - Design workflow management

Website - Submit an issue - Board - Workflow documentation

Introduction

Decathlon Design System enable Decathlon’s digital ecosystem to build consistent and quality experiences while keeping a sustainable & global identity.

Getting Started

For information on how to get started with Decathlon Design System, take a look at our Getting Started guide.

Submitting Bugs or Icons/Assets Requests

Bugs or icons/assets requests should be submitted at our GitHub Issues section.

Board & Workflow

To manage work and track the progress of our tasks, we use GitHub Projects that allows us to create a kanban board to organize and prioritize our work.

GitHub teams

Decathlon has a number of teams on GitHub to manage the development of its design system. The following teams are responsible for the development and maintenance of the system. Here is the list.

Automations

In order to simplify the experience for designers and developers and to guarantee the relevance of the information shared between the different skills, we have implemented various automations. Here is the documentation.

Useful links

Special thanks

Thank you to the contributors involved on this product 💙

Thank you also Remix Icon, Vitamix Icons is the official Decathlon icon library based on their open-source icon library (Remix Design © 2020). This original library is under the license Apache 2.0 and has been modified by Decathlon. Learn more.

License

Copyright 2022 Decathlon.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

vitamin-design's People

Contributors

dependabot[bot] avatar github-actions[bot] avatar lauthieb avatar mackoj avatar manonpolle avatar mariedelattre avatar sabrinavigil avatar simonleclercq avatar thibault-mahe avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vitamin-design's Issues

Layout design tokens

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

Improve spacing and layout naming convention.
Rework foundation to get ready for design token.
Edit native margins to be compliant with Apple and Google conventions (from 16 to 20).

Examples 🌈

Spacing, Grids and Layouts

Layout - Polaris

Layout - Lightning Design System

Material Design

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

[Icon]: New icon add-circle

Duplicates ❌

  • I have searched the existing icons and requests.

Icon name

add-circle

Icon description

Action: Used to denote add action.
Wayfinding: Used to help users to add something.
Concept: Used to represent a plus.
Education: Used to give users more information about context ???????.

Add-icon (already available in Vitamin) is not relevant for selected state. So we propose this add-circle-icon, exemple :
image

Icon keywords

System

Icon author

Loïc Vieira

Icon SVG code

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Size=24px, Fill=False">
<path id="Shape" d="M11 11V7H13V11H17V13H13V17H11V13H7V11H11ZM12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20Z" fill="#001018"/>
</g>
</svg>


<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Size=24px, Fill=True">
<path id="Shape" d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM11 11H7V13H11V17H13V13H17V11H13V7H11V11Z" fill="#001018"/>
</g>
</svg>

Are there any other important details?

No response

Dropdown component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

A dropdown is a list of options that have an immediate effect like filter or sort content on a page.

Dependencies 📦

No response

Examples 🌈

No response

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Sizes in tag component are weird

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Vitamin Android UI Kit

Current behavior 😯

In Figma Android UI Kit project, the icon size is 13.33 and the padding between the icon and the text is 5.33. I guess they should be 16 and 6 or 8.

@GerardPaligot

Expected behavior 🤔

No response

Context 🔦

No response

Screenshots / Videos 📸

No response

[Card] Remove badge for "more items"

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Current behavior 😯

There is a badge as counter for "more items"

Expected behavior 🤔

Capture d’écran 2022-08-02 à 16 07 28

Context 🔦

No response

Screenshots / Videos 📸

No response

Add right informations in Dropdown

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Vitamin Web UI Kit

Summary 💡

Hello, on Decathlon website, on the product list, we have a dropdown which I can see the availability of the product and the size. Today, this feature doesn't exist. It is possible to discuss to be integrated on the design? Thanks

Originally posted by @Tlahey

Examples 🌈

No response

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

[Icon]: customer-service

Duplicates ❌

  • I have searched the existing icons and requests.

Icon name

customer-service

Icon description

Used to represent customer support by Decathlon

customer-service-2-fill
customer-service-2-line

Icon keywords

No response

Icon author

No response

Icon SVG code

<svg>...</svg>

Are there any other important details?

No response

Add a variant that works with background secondary for Skeleton component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

Add a skeleton variation for background secondary

image

Examples 🌈

No response

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Problem with hover on Accordion component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Vitamin Web UI Kit

Current behavior 😯

Hello, there is a problem with the accordion hover on the web UI Kit: a gray appears before the blue, which makes interactions and tests not very qualitative.

Contact @benjamin.hayez

Expected behavior 🤔

No response

Context 🔦

No response

Screenshots / Videos 📸

No response

Add a new icon <hourglass>

Duplicates ❌

  • I have searched the existing icons and requests.

Icon name

Hourglass

Icon description

Used for pending status

Icon keywords

No response

Icon author

No response

Icon SVG code

<svg>...</svg>

Are there any other important details?

No response

Shadows design tokens

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

Improve "shadow". Rework foundation to get ready for design token.

Examples 🌈

https://polaris.shopify.com/tokens/depth

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

UI Issue - Hight is not same of the product box

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Vitamin Web UI Kit

Current behavior 😯

No response

Expected behavior 🤔

No response

Context 🔦

No response

Screenshots / Videos 📸

ui-issue

[Icon]: New icon barcode-scan

Duplicates ❌

  • I have searched the existing icons and requests.

Icon name

barcode-scan

Icon description

The icon would be used to represent the action of scanning, or displaying a barcode

image

Icon keywords

barcode, scan, scanner

Icon author

No response

Icon SVG code

<svg width="22" height="19" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd"
          d="M.786 0A.789.789 0 0 0 0 .792v3.166c0 .438.352.792.786.792a.789.789 0 0 0 .785-.792V1.583H3.93a.789.789 0 0 0 .785-.791A.789.789 0 0 0 3.93 0H.786Zm3.992 3C4.348 3 4 3.364 4 3.812v11.375c0 .45.348.813.778.813.43 0 .778-.364.778-.813V3.812c0-.448-.349-.812-.778-.812Zm3.111 0c-.43 0-.778.364-.778.812v8.938c0 .449.349.812.778.812.43 0 .778-.363.778-.812V3.812c0-.448-.348-.812-.778-.812Zm2.333.812c0-.448.348-.812.778-.812.43 0 .777.364.777.812v8.938c0 .449-.348.812-.777.812-.43 0-.778-.363-.778-.812V3.812Zm7-.812c-.43 0-.778.364-.778.812v8.938c0 .449.349.812.778.812.43 0 .778-.363.778-.812V3.812c0-.448-.348-.812-.778-.812Zm-3.888.812c0-.448.348-.812.777-.812.43 0 .778.364.778.812v11.375c0 .45-.348.813-.777.813-.43 0-.778-.364-.778-.813V3.812ZM9 15a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM20.43 1.583h-2.358a.789.789 0 0 1-.786-.791c0-.438.352-.792.786-.792h3.143c.435 0 .786.354.786.792v3.166a.789.789 0 0 1-.785.792.789.789 0 0 1-.786-.792V1.583ZM18 15a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm4 3.208a.789.789 0 0 1-.786.792h-3.143a.789.789 0 0 1-.785-.792c0-.437.351-.791.785-.791h2.358v-2.375c0-.438.352-.792.785-.792.434 0 .786.354.786.792v3.166Zm-22 0c0 .438.352.792.786.792h3.143a.789.789 0 0 0 .785-.792.789.789 0 0 0-.785-.791H1.57v-2.375a.789.789 0 0 0-.785-.792.789.789 0 0 0-.786.792v3.166Z"
          fill="#00689D"/>
</svg>

Are there any other important details?

No response

Add a usage for Breadcrumb component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

We need to write a guideline for the breadcrumb component for its behavior in web mobile.

Originally posted by Valentin Bourgeois.

Examples 🌈

No response

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Add file-copy icon to Vitamix

Duplicates ❌

  • I have searched the existing icons and requests.

Icon name

file-copy

Icon description

Concept: Used to copy to clipboard

Icon keywords

copy, file, clipboard

Icon author

Remix

Icon SVG code

RemixIcon_SVG_2207211001.zip

Are there any other important details?

No response

Development issues

[Icon]: New icon ic_vtmn_qrcode

Duplicates ❌

  • I have searched the existing icons and requests.

How will these icons be used?

Start a qrcode scanner

Icon name

ic_qrcode (ic_vtmn_qrcode for android)

Icon description

Action: Used to scan a qrcode or barcode

Icon keywords

qrcode, scan, camera, barcode

Icon author

No response

Icon SVG code

<svg>...</svg>

Are there any other important details?

No response

Select component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

A select is a form input that allow users to choose an option from a list.

Dependencies 📦

No response

Examples 🌈

No response

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Carousel component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

Contact @alexandre.marquesdasilva

Examples 🌈

image
https://ant.design/components/carousel/
https://developer.apple.com/design/human-interface-guidelines/components/presentation/page-controls/
https://www.figma.com/community/file/1047907758163889748

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Alert component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

A way of informing the user of important changes in a prominent way. With different status/degree of importance.

Examples 🌈

Banner component.
Alert gallery

image
image

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Radius design tokens

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

Improve radius naming convention.
Rework foundation to get ready for design token.

Examples 🌈

https://polaris.shopify.com/tokens/shape
https://spectrum.adobe.com/page/object-styles/
https://m3.material.io/styles/shape/overview

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Design tokens

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

Improve our color naming convention.
Rework our foundation to get ready for design token.

Examples 🌈

No response

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

[Tags] Add ellipsis text possibility

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Vitamin Android UI Kit

Summary 💡

When creating a Tags in an Android application, UX and developers should choose if the Tag is expendable or if the text inside could be ellipsis. It allows to have a fix dimension in the design and works with all languages (even if the text is bigger than the Tag )

Dependencies 📦

  • Vitamin Android
  • Vitamin Compose

Examples 🌈

https://www.figma.com/file/0CBXURfZjxvChaO6bZXNav/%5B01.-Alarm%5D-New-Design?node-id=0%3A1

Motivation 🔦

For security application in Decathlon store, RFID Alarms shows a label of the type of detection (read, stolen, forced, ...) at the RFID gate. To be sure the provide the same design with all languages, we need to ellipsis the text.

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Text input component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

A text input is a field that allows users to enter text into.

Dependencies 📦

No response

Examples 🌈

No response

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Accessibility statement in our documentation

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Current behavior 😯

Update the Accessibility statement in Figma Community

Expected behavior 🤔

No response

Context 🔦

No response

Screenshots / Videos 📸

No response

Add a new icon <ic_vtmn_report>

Duplicates ❌

  • I have searched the existing icons and requests.

How will these icons be used?

Wayfinding: Used to help users to report undesirable behavior

Icon name

ic_report (android ic_vtmn_report)

Icon description

Wayfinding: Used to help users to report undesirable behavior

Icon keywords

report, undesirable behavior

Icon author

No response

Icon SVG code

<svg>...</svg>

Are there any other important details?

No response

Merge Android toast & snackbar

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Vitamin Android UI Kit

Summary 💡

Merge Android toast and snackbar (48)

image

Examples 🌈

No response

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Modal has incorrect radius

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Vitamin Android UI Kit

Current behavior 😯

On vitamin-android library and on material, modals have a radius (see Dialogs / Theming)

Expected behavior 🤔

We should have the same visual aspect on both design and implementation libraries

Context 🔦

We don't have same component in design and vitamin-android library

Screenshots / Videos 📸

Material specs :
Capture d’écran 2022-08-18 à 15 55 31

Screenshot of figma component :
Capture d’écran 2022-08-18 à 15 57 30

Screenshot of vitamin-android sample :
Screenshot_2022-08-18-15-35-54-86_5718ac90fb9fac1e0ff66814035ae4fb

Add a small size for Tag component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

Add a small variation to tag with 12 font
@alexandre.kassem

Examples 🌈

No response

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Tasks

  1. community 👥 enhancement 🚀
    charlottemougenot
  2. enhancement 🚀 run 💨
    GerardPaligot
  3. CSS 🎨 React 🔵 Svelte 🟠 Vue 🟢 enhancement 🚀 run 💨
  4. SwiftUI UIKit community 👥 enhancement 🚀

Problem when resizing a circle Skeleton component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Vitamin Web UI Kit

Current behavior 😯

When we resize the circle skeleton, the circle is deformed

Expected behavior 🤔

No response

Context 🔦

No response

Screenshots / Videos 📸

No response

Bar documentation gif

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Current behavior 😯

Add the gif for the web nav bar on this page of Decathlon.design

Expected behavior 🤔

No response

Context 🔦

No response

Screenshots / Videos 📸

image

Refactoring the Progressbar component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

Design/Doc:

  • Rework progress bar anatomy to add the image variant.
  • Add explicit indications on when AND where the progress indicator must be displayed.
  • Add explicit indications on the accessibility issues that face the component if the progress indicator is missing in its implementation.

Development:

  • Remove the two showcases with progress bar determinate without a progress indicator.
  • Add an example of a determinate progress bar with an image. Add a phrase to indicate that is it not accessible without a progress indicator. Add a link to the documentation.

Examples 🌈

No response

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Bug text input helper text web

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Vitamin Web UI Kit

Current behavior 😯

On text input the helper text “saute” when we change state from default to hover

Expected behavior 🤔

No response

Context 🔦

No response

Screenshots / Videos 📸

No response

[Icon]: Modified the fill version of the search icon

Duplicates ❌

  • I have searched the existing icons and requests.

Icon name

Search

Icon description

Capture d’écran 2022-09-27 à 12 17 25

Icon keywords

No response

Icon author

No response

Icon SVG code

<svg>...</svg>

Are there any other important details?

No response

Button component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

Improve button with properties and tokens.
Add a "is loading" variation.
Rework paddings on “with icon” variant (make it pixel, perfect).
Add missing reversed variation.

Examples 🌈

https://www.figma.com/community/file/1117085093344345579
https://www.figma.com/community/file/1115858697474114875
https://www.figma.com/community/file/1111717810979847533

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Link component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Vitamin Web UI Kit

Summary 💡

Improve component with properties and token.
Apply specific text style.

Examples 🌈

[Link – Carbon Design System (https://www.carbondesignsystem.com/components/link/usage/)
Photon Design System

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Usage section is missing for quantity component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Current behavior 😯

When we go in quantity component page, we can see Overview, Web, Android and iOS sections but not "Usage" section which describe advanced common specification accros all platforms.

That can be cool to add this section and add some do/don't usage of this component.

@GerardPaligot

Expected behavior 🤔

No response

Context 🔦

No response

Screenshots / Videos 📸

No response

Badge component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

A badge is used to emphasize a numerical characteristic of an object or the number of unread items.

Dependencies 📦

No response

Examples 🌈

No response

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

[Icon]: New icon ic_vtmn_github

Duplicates ❌

  • I have searched the existing icons and requests.

Icon name

ic_github (ic_vtmn_github)

Icon description

Concept: Used to represent GitHub platform.

Icon keywords

github, git, social, code

Icon author

No response

Icon SVG code

<svg>...</svg>

Are there any other important details?

No response

Does the Quantity component have an helper text?

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Vitamin Android UI Kit

Current behavior 😯

In Figma, the quantity component have 3 different states for the text input : normal, focus and error. In the specification, the quantity component doesn't have an helper text (in any state) but in Vitamin Web, an helper text appears when the state is in error.

Can we know if we should add too an helper text? And if we could add this helper text for all states or not?

Originally posted by @GerardPaligot.

Expected behavior 🤔

No response

Context 🔦

No response

Screenshots / Videos 📸

No response

Tasks

  1. community 👥 enhancement 🚀
    corentin-stamper

Wrong standard practice of no review products

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Current behavior 😯

image

Expected behavior 🤔

Modify the guideline, this is a don’t ---> when no review, add a sentence “No review”

Context 🔦

No response

Screenshots / Videos 📸

No response

Problem with Snackbar component size

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Vitamin Android UI Kit

Current behavior 😯

Android Snackbar height size in Figma library is 36.
The right height size is 48

Expected behavior 🤔

No response

Context 🔦

No response

Screenshots / Videos 📸

No response

Decathlon favicon has a transparent background

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Vitamin Assets

Current behavior 😯

Hi Design system team.

I noticed that the decathlon favicon has a transparent background. That leads to some weird logo :
image
Is it possible to force a white background?

Thanks ;)

Expected behavior 🤔

No response

Context 🔦

No response

Screenshots / Videos 📸

No response

Contribution companion pages are redirecting to our old Jira board instead of our GitHub project board

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Current behavior 😯

when I read the contribution documentation, I'm redirect to the Design System Backlog. The problem is that it directs me to Jira (not up-to-date and not accessible from outside)

Expected behavior 🤔

As a user, I would like to be redirect to Decathlon Design System Board for all our Design files. Then, republish them to Figma Community (Open Source).

Context 🔦

I wanted to check what the team is working on.

Screenshots / Videos 📸

issue-screen-shot

Adapt the line heights to display correctly Thai

Hello, I'm the Product Manager of My Account (account.decahtlon.com). We are consuming a lot of elements of Vitamin and recently we received feedbacks regarding the line heights of the texts. Actually, the line heights are not enough for Thailand users, as several Thai characters are cropped. There might be more countries / languages concerned.

Do you have a solution for us and for them please ?

User feedback: Right now we can't see the whole word for example  ซ้ำ is showing ซำ 
image (39)

Add a small size for Progressbar component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Vitamin Android UI Kit

Summary 💡

Let's add a 48x48 size for Vitamin-progressBar

Examples 🌈

Based on material.io, circular indicator need to be available in smaller formats than existing today in Vitamin Android Ui Kit

Motivation 🔦

Following some feedbacks, some products need a smaller version of the component

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

[Icon]: New Flags for Kiosk

Duplicates ❌

  • I have searched the existing icons and requests.

How will these icons be used?

Is your feature request related to a problem? Please describe.

We are going to use the Vitamin flags in the CubeInStore application and there are 5 flags missing.

Describe the solution you'd like

Below are the 5 flags to add with their associated ISO code.

  • Martinique -> Code ISO : MQ
    flag_MQ

  • Reunion -> Code ISO : RE
    flag_RE

  • Guadeloupe -> Code ISO : GP
    flag_GP

  • Guyane française -> Code ISO : GF
    flag_GF

  • Nouvelle-Calédonie -> Code ISO : NC
    flag_NC

Additional context

Icon name

See below

Icon description

See below

Icon keywords

See below

Icon author

No response

Icon SVG code

<svg>...</svg>

Are there any other important details?

No response

Typography design tokens

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

Improve typography naming convention. Add missing typography style (like link).
Rework foundation to get ready for design token.

Dependencies 📦

-[ ] Breakpoints (to replace when issue is created)

Examples 🌈

Material Design

Polaris
Polaris figma

Base web - Uber

Typography – Carbon Design System

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Colors design tokens

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Vitamin Core theme (Light mode)

Summary 💡

Improve our color naming convention.
Rework our foundation to get ready for design token.

Examples 🌈

Material Design 2
Material Design 3
Atlassian Design

Motivation 🔦

No response

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Card component

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

Card refacto with Nathan Curtis method of sub components.

Examples 🌈

https://medium.com/eightshapes-llc/subcomponents-753ce9f6600a

Motivation 🔦

All the possible combinations with the current card are quite obscure.

New 🆕

  • Validated in a grooming session

Backlog 📋

  • Has a good summary
  • Has example link(s)

Design in progress 🏗

  • Analysis (functional & technical)
  • Design refinement
  • Dev qualification (properties, breakpoints, tokens etc.)
  • Documentation refinement (inside the Figma branch)

Design review 👀

  • Figma branch merged
  • Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

  • Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

  • All issues are resolved (to replace with issues links)

Unknown text styles applied on badge variants

Duplicates ❌

  • I have searched the existing issues

Which Figma library is concerned?

Vitamin Android UI Kit

Current behavior 😯

There aren't any Vitamin text style applied on badge variants. We should link these texts to a typography from Vitamin foundation.

Originally posted by @GerardPaligot.

Expected behavior 🤔

No response

Context 🔦

No response

Screenshots / Videos 📸

No response

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.