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.

Sign up for GitHub

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

feat: update select styles add migration guide #1999

Closed
wants to merge 3 commits into from
Closed

feat: update select styles add migration guide #1999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7607665
add padding to top and bottom of menu
jose-costa-frontify Aug 8, 2024
6fe0cc1
add status (copied from textinput)
jose-costa-frontify Aug 8, 2024
ff452e5
add changeset
jose-costa-frontify Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/sharp-fireants-know.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@frontify/fondue-components": patch
---

feat: update styles and add migration guide
24 changes: 22 additions & 2 deletions packages/components/src/components/Select/Combobox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* (c) Copyright Frontify Ltd., all rights reserved. */

import { IconCaretDown } from '@frontify/fondue-icons';
import { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';
import * as RadixPopover from '@radix-ui/react-popover';
import { Slot as RadixSlot } from '@radix-ui/react-slot';
import { useCombobox } from 'downshift';
Expand Down Expand Up @@ -31,6 +31,11 @@ export type ComboboxProps = {
* The placeholder in the combobox component.
*/
placeholder?: string;
/**
* Status of the text input
* @default "neutral"
*/
status?: 'neutral' | 'success' | 'error' | 'loading';
/**
* Disables the combobox component.
*/
Expand All @@ -52,6 +57,7 @@ export const SelectCombobox = (
value,
defaultValue,
placeholder = '',
status = 'neutral',
disabled,
'aria-label': ariaLabel,
'data-test-id': dataTestId = 'fondue-select-combobox',
Expand Down Expand Up @@ -96,7 +102,7 @@ export const SelectCombobox = (
return (
<RadixPopover.Root open={isOpen}>
<RadixPopover.Anchor asChild>
<div ref={forwardedRef} className={styles.root} data-error={valueInvalid}>
<div ref={forwardedRef} className={styles.root} data-status={status} data-error={valueInvalid}>
<input
onMouseDown={(mouseEvent) => {
wasClicked.current = true;
Expand Down Expand Up @@ -146,6 +152,20 @@ export const SelectCombobox = (
>
<IconCaretDown size={16} className={styles.caret} />
</button>
{status === 'success' ? (
<IconCheckMark
size={16}
className={styles.iconSuccess}
data-test-id={`${dataTestId}-success-icon`}
/>
) : null}
{status === 'error' ? (
<IconExclamationMarkTriangle
size={16}
className={styles.iconError}
data-test-id={`${dataTestId}-error-icon`}
/>
) : null}
</div>
</RadixPopover.Anchor>

Expand Down
23 changes: 22 additions & 1 deletion packages/components/src/components/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* (c) Copyright Frontify Ltd., all rights reserved. */

import { IconCaretDown } from '@frontify/fondue-icons';
import { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';
import * as RadixPopover from '@radix-ui/react-popover';
import { Slot as RadixSlot } from '@radix-ui/react-slot';
import { useSelect } from 'downshift';
Expand Down Expand Up @@ -34,6 +34,11 @@ export type SelectComponentProps = {
* The placeholder in the select component.
*/
placeholder?: string;
/**
* Status of the text input
* @default "neutral"
*/
status?: 'neutral' | 'success' | 'error' | 'loading';
/**
* Disables the select component.
*/
Expand All @@ -55,6 +60,7 @@ export const SelectInput = (
value,
defaultValue,
placeholder = '',
status = 'neutral',
disabled,
'aria-label': ariaLabel,
'data-test-id': dataTestId = 'fondue-select',
Expand Down Expand Up @@ -82,6 +88,7 @@ export const SelectInput = (
<RadixPopover.Anchor asChild>
<div
className={styles.root}
data-status={status}
data-disabled={disabled}
data-empty={!selectedItem}
data-test-id={dataTestId}
Expand All @@ -107,6 +114,20 @@ export const SelectInput = (
)}
<div>
<IconCaretDown size={16} className={styles.caret} />
{status === 'success' ? (
<IconCheckMark
size={16}
className={styles.iconSuccess}
data-test-id={`${dataTestId}-success-icon`}
/>
) : null}
{status === 'error' ? (
<IconExclamationMarkTriangle
size={16}
className={styles.iconError}
data-test-id={`${dataTestId}-error-icon`}
/>
) : null}
</div>
</div>
</RadixPopover.Anchor>
Expand Down
49 changes: 49 additions & 0 deletions packages/components/src/components/Select/styles/select.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,10 @@
border-color: var(--text-color-negative);
}

&[data-status='success'] {
border-color: var(--text-color-positive);
}

&[data-empty='true'] {
color: var(--text-color-x-weak);
}
Expand Down Expand Up @@ -177,6 +181,7 @@
border: var(--line-width) solid var(--line-color-strong);
width: var(--radix-popover-trigger-width);
overflow: auto;
padding: sizeToken(2) 0;

&:has(li[role='option']) {
display: block;
Expand Down Expand Up @@ -210,3 +215,47 @@
border-bottom: var(--line-width) solid var(--line-color-strong);
}
}

.iconSuccess {
display: flex;
align-items: center;
height: 100%;
margin-left: sizeToken(3);
color: var(--text-color-positive);
}

.iconError {
display: flex;
align-items: center;
height: 100%;
margin-left: sizeToken(3);
color: var(--text-color-negative);
}

.loadingStatus {
display: flex;
position: absolute;
width: sizeToken(6);
height: sizeToken(6);
top: sizeToken(-3);
right: sizeToken(-3);
pointer-events: none;
align-items: center;
justify-content: center;
background-color: var(--base-color);
border: var(--line-width) solid var(--line-color-strong);
border-radius: 9999px;

&::before {
content: '';
display: flex;
align-items: center;
justify-content: center;
width: sizeToken(4);
height: sizeToken(4);
border: var(--line-width) solid var(--text-color-interactive);
border-top-color: transparent;
border-radius: 9999px;
animation: spin 1s linear infinite;
}
}
Loading