decathlon / vitamin-compose Goto Github PK

Describe the bug
In VitaminTabs, if the list provided is empty, the exception 'NoSuchElementException' is thrown.

The behavior is the same for both composable (Fixed and Scrollable)

To Reproduce

VitaminTabs.Scrollable(
    tabItems = listOf(),
)

This will throw

java.util.NoSuchElementException: List is empty.
  at kotlin.collections.CollectionsKt___CollectionsKt.first(_Collections.kt:214)
  at com.decathlon.vitamin.compose.tabs.VitaminTabs.Scrollable-kKmfEb0(VitaminTabs.kt:77)

Describe the bug

Current behavior

Icon Button has not the right size
Large is actually 64.dp

Expected behavior

Large IconButton is 56.dp

Screenshots

Smartphone (please complete the following information):

• Device: all
• OS: all
• Version 0.2.0-alpha01

Describe the bug

Current behavior

Button has not the right size
Large is actually 64.dp

Expected behavior

Large Button is 56.dp

Screenshots

Smartphone (please complete the following information):

• Device: all
• OS: all
• Version 0.2.0-alpha01

Describe the solution you'd like
Write tests with paparazzi for quantity picker component for all variants & themes.

Additional context
FYI Buttons already have ones.

Describe the bug
See Decathlon/vitamin-design#90

Concerning

Decathlon.design link

https://www.decathlon.design/726f8c765/p/79685a-skeleton/b/122d98

Additional context

https://google.github.io/accompanist/placeholder/

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

We don't have homogeneous way to customize our components. We should unify this before the first official release!

Describe the solution you'd like

We should migrate all colors and sizes customization from function or something else to field approach.

Describe the solution you'd like
Write tests with paparazzi for radio button component for all variants & themes.

Additional context
FYI Buttons already have ones.

Describe the bug

The text input filled is not vitamin compliant, the row is too long.

To Reproduce

Expected behavior

https://www.decathlon.design/726f8c765/p/31121d-text-input/b/601da7
No margin is required.

Screenshots

Smartphone (please complete the following information):

• Device: [e.g. One Plus]
• OS: [e.g. Lollipop]
• Version [e.g. 21]

Decathlon.design link

https://www.decathlon.design/726f8c765/p/88fc2b-card-beta

Design update: We want only a card container with its specifications but NO content templates.

Material.io link

https://material.io/components/cards

Describe the bug

When you import Vitamin Compose in an Android app, you have auto completion for previews inside Vitamin Compose.
These components shouldn't be exposed.

To Reproduce

1. Import any Vitamin artifact with Preview functions
2. Try to access to the Preview function by its name

Expected behavior

Only show Vitamin<Component>s objects and their colors, sizes, etc.

Describe the bug
When using Talkback on radiobutton, there is several accessibility issue :

• We cannot focus on radiobutton when the element is alone (with no text)
• We don't have the status of the current selected radiobutton. It only says "RadioBox - Double tap to activate", but we don't not if the current state of the radiobutton is selected or unselected
• When we double tap to select or unselect a radiobutton, nothing is announce to the user even if something happen on the device.

To Reproduce

Expected behavior
We should :

• make radiobutton focusable even when no label is associated to it
• announce radibutton state in stateDescription for example selected or unselected
• when state change (meaning when the user perform an action on the radiobutton), we should announce the updated states (this should be automatic if we use stateDescription as mention juste here ⬆️

Screenshots

Smartphone (please complete the following information):

• Device: ALL
• OS: ALL
• Version ALL

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

Now we have tests in our project, we should run them in our CI to avoid breaking tests in the future.

Describe the solution you'd like

Create a public Firebase project in Decathlon infrastructure to run our tests in Firebase Test Labs.

Describe the solution you'd like
Write tests with paparazzi for badges component for all variants & themes.

Additional context
FYI Buttons already have ones.

Describe the solution you'd like
Write tests with paparazzi for appbar component for all variants & themes.

Additional context
FYI Buttons already have ones.

Describe the solution you'd like
Write tests with paparazzi for modal component for all variants & themes.

Additional context
FYI Buttons already have ones.

Describe the bug

In the Figma specification, there isn't small size for the Button component.

To Reproduce

VitaminButtons.Primary(
  /* other parameters */
  sizes = VitaminButtonSizes.small()
)

Expected behavior

Only medium and large sizes available

Describe the bug
See Decathlon/vitamin-design#124

Describe the bug

When we try to upgrade Compose UI to 1.3.0, we encounter difficulties with Paparazzi.

Fork published here: chrisbanes/paparazzi#2

Probably fixed here: cashapp/paparazzi#640

Need to track a new version of Paparazzi with one of these fixes.

Expected behavior

Upgrade Compose version to 1.3.0

Decathlon.design link

https://www.decathlon.design/726f8c765/p/8008f8-button/b/58097e

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

Today, radius is based on the material component or are hard coded in the Vitamin component.

Describe the solution you'd like

Like colors or typography, we should add radius variants in foundation module and use them in all modules.

Additional context

Vitamin specification: https://www.decathlon.design/726f8c765/p/533f3d-radius/b/844ae0

Describe the bug

Icon put at the end of a Vitamin button can be hidden if the text is too long

To Reproduce

1. Declare a button with a long text and an icon at the end
2. Display it in a composable

Expected behavior

Icon should be displayed even if the text is too long

Screenshots

Describe the solution you'd like
Write tests with paparazzi for price component for all variants & themes.

Additional context
FYI Buttons already have ones.

Describe the bug

Colors under the icon in the BottomNavigation should use contentPrimary color.

To Reproduce
Start the sample and check the bottom navigation bar in the AppBars screen.

Expected behavior

Label should use the right color

Screenshots

Expected

We need to add new icons:

• add-circle-fill
• add-circle-line
• barcode-fill
• barcode-line
• customer-service-fill
• customer-service-line
• file-copy-fill
• file-copy-line
• kakao-talk-line
• kakao-talk-fill
• github-fill
• github-line
• line-line
• line-fill
• naver-line
• naver-fill
• pie-chart-fill
• pie-chart-line
• qr-scan-fill
• qr-scan-line
• rocket-line
• rocket-fill
• search-fill (design update)
• share-android-fill
• share-android-line
• share-ios-fill
• share-ios-line

Thanks!

Describe the bug

• If we want to use the bold version of Text styles, the developer need to declare the text style by themself.
• In Figma, Text styles are named Body instead of Text.

Expected behavior

We should add text styles for bold versions and declare new text styles for Text styles.
Think to deprecated previous text styles with this change!

Describe the bug
On modals, buttons are not aligned correctly.

To Reproduce
1. Go to Sample app in Modal screen
2. Add a modal with 1 button

Expected behavior

• the 1 or 2 right buttons are aligned on the right of the modal
• the third left button is aligned on the left of the modal

Functional specs

Decathlon.design link

https://www.decathlon.design/726f8c765/p/08dbe1-chip/b/10cbe3

Material.io link

https://material.io/components/chips

Decathlon.design link

https://www.decathlon.design/726f8c765/p/078570-list-beta/b/9115e7

Material.io link

https://material.io/components/lists

Decathlon.design link

https://www.decathlon.design/726f8c765/p/28ad9b-divider-beta/b/0602e5

Material.io link

https://material.io/components/dividers

Decathlon.design link

https://www.decathlon.design/726f8c765/p/465f7c-badge-beta/b/5496b9

Material.io link

https://material.io/develop/android/components/badging

Describe the solution you'd like
Write tests with paparazzi for rating component for all variants & themes.

Additional context
FYI Buttons already have ones.

Describe the solution you'd like
Write tests with paparazzi for menu component (dropdowns) for all variants & themes.

Additional context
FYI Buttons already have ones.

Is your feature request related to a problem? Please describe.
When writing automated test on compose screen using component like OutlinedDropdown the lack of testTag modifier on subComponent make those screen hard to test

Describe the solution you'd like
Add testTag on component with userInteraction, for example to trigger the click on the trailing Icon of the anchored Outlined of a OutlinedDropdown

Describe the bug

The conversion button text color is not correct in dark mode.

To Reproduce

1. Activate the dark mode
2. Open the vitamin-compose sample
3. Click on Buttons
4. See the conversion button with white text

Expected behavior

In dark mode, the conversion button text color must remain in the same color as light mode

@Composable
fun conversion(
        backgroundColor: Color = VitaminTheme.colors.vtmnBackgroundAccent,
        contentColor: Color = VitaminTheme.colors.vtmnContentPrimary,
        disabledBackgroundColor: Color = VitaminTheme.colors.vtmnBackgroundAccent
            .copy(alpha = VtmnStatesDisabled),
        disabledContentColor: Color = VitaminTheme.colors.vtmnContentPrimary
            .copy(alpha = VtmnStatesDisabled)
): ButtonColors = ButtonDefaults.buttonColors(
        backgroundColor = backgroundColor,
        contentColor = contentColor,
        disabledBackgroundColor = disabledBackgroundColor,
        disabledContentColor = disabledContentColor
)

Use vtmnContentAccent instead of vtmnContentPrimary

Screenshots

Smartphone (please complete the following information):

• Device: Pixel 6 Pro
• OS: Android 12
• Version: 32

Describe the bug

content description is hardcoded to null for icon buttons.

To Reproduce

1. Declare an icon buttons
2. Try to specify a content description

Expected behavior

New parameter on the component contentDescription: String?

Describe the solution you'd like
Write tests with paparazzi for checkbox component for all variants & themes.

Additional context
FYI Buttons already have ones.

Decathlon.design link

https://www.decathlon.design/726f8c765/p/798580-snackbar-beta/b/129609

Material.io link

https://material.io/components/snackbars

To do
Add a small size to the existing Tag component.
See design issue : Decathlon/vitamin-design#15

Decathlon.design link
Figma link

Additional context
Tag with Medium Size already exists

Describe the bug
I have the impression that ripples effect are not good since beta 2 before I was on alpha I did not test your develop branch and maybe it is already fixed.

Context

https://developer.android.com/develop/ui/views/touch-and-input/keyboard-input/navigation

TL;DR

"Android supports physical keyboards attached to the device. A keyboard offers not only a convenient mode for text input, but also offers a way for users to navigate and interact with your app. [...], tablets and similar devices are growing in popularity and many users like to attach keyboard accessories."

Describe the bug
The selected state of a button makes the text unreadable.

To Reproduce
Connect a physical keyboard to your device (usb C, or bluetooth).
Launch vitamin compose demo with your bare hands
Navigate to button demo
Now use the keyboard, press "tab" to go from one button to the other

Expected behavior
When a button is selected (or has the "keyboard focus") its text should be readable

Screenshots

^ primary

^ Ghost living up to his name

Smartphone (please complete the following information):
All

Describe the bug

When you declare a BottomNavigation with too much items and with a long text, the icon is over the text

To Reproduce

1. Declare a bottom navigation with 5 items
2. Use "Agenda", "Speakers", "Networking", "Partners" and "Info" as label for items
3. Configure a random icon for all these items

Expected behavior

Need to define a solution with the design team

Screenshots

Smartphone (please complete the following information):

• Device: One Plus 7T
• OS: Android 11
• Version 21

Describe the solution you'd like

See Decathlon/vitamin-design#33

Is your feature request related to a problem? Please describe.
I was needing to have the same functionality that AutoCompleteTextView but using Vitamin Compose. But I can't access to PopupProperties because it's not targetable using VitaminMenus.Dropdown.

Modify the PopupProperties will enables me to change the default properties from focusable to not focusable in order to continue to type text even if dropdown is appearing.

Describe the solution you'd like
I would like to have the possibility to define my own PopupProperties from VitaminMenus.Dropdown.

Describe the solution you'd like

Make fab full width possible & add it to the sample.
Design request : Decathlon/vitamin-design#128

Additional context

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

Because we don't have yet all radius defined in foundation module, we can have mistakes about radius in some components with old values.

Describe the solution you'd like

Declare all radius variants in foundation module and create a local (like colors or typography defined in VitaminTheme) to give an access in all components.

Describe the solution you'd like
Write tests with paparazzi for divider component for all variants & themes.

Additional context
FYI Buttons already have ones.

Is your feature request related to a problem? Please describe.
Error message has been added to Design Specificiations.

Describe the solution you'd like
Add optional error input param to add an error message under Quantity Picker.
Null Default value in order to have no breaking change to the component.

Additional context
Closes Decathlon/vitamin-design#30

Decathlon.design link

https://www.decathlon.design/726f8c765/p/207abd-quantity-beta/b/0602e5

Decathlon.design link

https://www.decathlon.design/726f8c765/p/8008f8-button/b/58097e/t/47f29a

Material.io link

https://m3.material.io/components/floating-action-button/overview
https://m3.material.io/components/extended-fab/overview

Additional context