Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(chip): Add lightweight styling to Chip style and add Fluent theme for Chip and ChipGroup #612

Merged
merged 1 commit into from
Jun 22, 2023

Conversation

nguyeenvy
Copy link
Contributor

closes #561
closes #597

GitHub Issue (If applicable): #561 #597

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Refactoring (no functional changes, no api changes)

Description

Current behavior:
image

Overridden behavior:
image

Overridden with:

<Page.Resources>
    <x:Double x:Key="ChipCheckGlyphSize">38</x:Double>
    <x:Double x:Key="ChipContentMinHeight">40</x:Double>

    <x:Double x:Key="ChipElevation">14</x:Double>
    <x:Double x:Key="ChipHeight">38</x:Double>
    <x:Double x:Key="ChipIconSize">38</x:Double>
    <x:Double x:Key="ChipSize">40</x:Double>

    <CornerRadius x:Key="ChipCornerRadius">0</CornerRadius>
    <Thickness x:Key="ChipBorderThickness">5</Thickness>
    <Thickness x:Key="ChipContentMargin">16,4</Thickness>
    <Thickness x:Key="ChipPadding">16,4</Thickness>

    <!--  Brushes  -->
    <SolidColorBrush x:Key="ChipBackground" Color="Red" />
    <SolidColorBrush x:Key="ChipBackgroundPointerOver" Color="Orange" />
    <SolidColorBrush x:Key="ChipBackgroundPressed" Color="Yellow" />
    <SolidColorBrush x:Key="ChipBackgroundDisabled" Color="Green" />
    <SolidColorBrush x:Key="ChipBackgroundChecked" Color="Blue" />
    <SolidColorBrush x:Key="ChipBackgroundCheckedPointerOver" Color="Indigo" />
    <SolidColorBrush x:Key="ChipBackgroundCheckedPressed" Color="Pink" />

    <SolidColorBrush x:Key="ChipForeground" Color="Red" />
    <SolidColorBrush x:Key="ChipForegroundPointerOver" Color="Orange" />
    <SolidColorBrush x:Key="ChipForegroundPressed" Color="Yellow" />
    <SolidColorBrush x:Key="ChipForegroundDisabled" Color="Green" />
    <SolidColorBrush x:Key="ChipForegroundChecked" Color="Blue" />
    <SolidColorBrush x:Key="ChipForegroundCheckedPointerOver" Color="Indigo" />
    <SolidColorBrush x:Key="ChipForegroundCheckedPressed" Color="Pink" />

    <SolidColorBrush x:Key="ChipDeleteIconBackground" Color="Red" />
    <SolidColorBrush x:Key="ChipDeleteIconForeground" Color="Orange" />

    <SolidColorBrush x:Key="ChipIconForeground" Color="Yellow" />
    <SolidColorBrush x:Key="ChipIconForegroundPointerOver" Color="Green" />
    <SolidColorBrush x:Key="ChipIconForegroundPressed" Color="Blue" />
    <SolidColorBrush x:Key="ChipIconForegroundDisabled" Color="Indigo" />
    <SolidColorBrush x:Key="ChipIconForegroundChecked" Color="Pink" />
    <SolidColorBrush x:Key="ChipIconForegroundCheckedPointerOver" Color="Red" />
    <SolidColorBrush x:Key="ChipIconForegroundCheckedPressed" Color="Orange" />


    <SolidColorBrush x:Key="ChipBorderBrush" Color="Yellow" />
    <SolidColorBrush x:Key="ChipBorderBrushPointerOver" Color="Green" />
    <SolidColorBrush x:Key="ChipBorderBrushPressed" Color="Blue" />
    <SolidColorBrush x:Key="ChipBorderBrushDisabled" Color="Indigo" />
    <SolidColorBrush x:Key="ChipBorderBrushChecked" Color="Pink" />
    <SolidColorBrush x:Key="ChipBorderBrushCheckedPointerOver" Color="Red" />
    <SolidColorBrush x:Key="ChipBorderBrushCheckedPressed" Color="Orange" />

    <SolidColorBrush x:Key="ChipStateOverlay" Color="Yellow" />
    <SolidColorBrush x:Key="ChipStateOverlayPointerOver" Color="Green" />
    <SolidColorBrush x:Key="ChipStateOverlayPressed" Color="Blue" />
    <SolidColorBrush x:Key="ChipStateOverlayDisabled" Color="Indigo" />
    <SolidColorBrush x:Key="ChipStateOverlayChecked" Color="Pink" />
    <SolidColorBrush x:Key="ChipStateOverlayCheckedPointerOver" Color="Red" />
    <SolidColorBrush x:Key="ChipStateOverlayCheckedPressed" Color="Orange" />
</Page.Resources>

PR Checklist

Other information

A Chip.xaml and a ChipGroup.xaml have been added to the style of Fluent in the Uno.Toolkit.UI project. However, the designs of the Fluent styles for Chip and ChipGround aren't available yet, so the content inside Chip.xaml and ChipGroup.xaml is just the base for future Fluent designs.

@nguyeenvy nguyeenvy self-assigned this Jun 14, 2023
@nguyeenvy nguyeenvy removed the request for review from agneszitte June 14, 2023 18:31
@nguyeenvy nguyeenvy force-pushed the dev/vyng/Lightweight-Styling-Chip-ChipGroup-Styles branch from 425161f to 2b9ad1f Compare June 19, 2023 21:36
@kazo0 kazo0 merged commit 3b192b9 into main Jun 22, 2023
31 checks passed
@kazo0 kazo0 deleted the dev/vyng/Lightweight-Styling-Chip-ChipGroup-Styles branch June 22, 2023 19:11
@welcome
Copy link

welcome bot commented Jun 22, 2023

Congrats on your first pull-request! We ❤ the people who are involved in this project, and we'd love to pay it forward by sending you some swag. If you have any feedback (or ideas on how to improve the Uno Toolkit as an open-source project) please open a feedback issue.
giphy
Merci beaucoup 👋

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants