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

V3 Select #222

Merged
merged 1 commit into from
Feb 23, 2024
Merged

V3 Select #222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion @stellar/design-system-website/docs/components/inputs/select.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ description: "Form input for selecting a single option from a list."

```tsx live
<PreviewBlock componentName="Select">
<Select fieldSize="md" id="select">
<Select fieldSize="sm" id="select">
<option>Option 1</option>
<option>Option 2</option>
</Select>
Expand Down
22 changes: 6 additions & 16 deletions @stellar/design-system-website/src/componentPreview/selectPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,17 @@ export const selectPreview: ComponentPreview = {
type: "select",
prop: "fieldSize",
options: [
{
value: "md",
label: "MD",
},
{
value: "sm",
label: "SM",
},
{
value: "xs",
label: "XS",
value: "md",
label: "MD",
},
{
value: "lg",
label: "LG",
},
],
},
Expand All @@ -45,21 +45,11 @@ export const selectPreview: ComponentPreview = {
prop: "isLabelUppercase",
label: "Uppercase label",
},
{
type: "checkbox",
prop: "isPill",
label: "Pill",
},
{
type: "checkbox",
prop: "isError",
label: "Error",
},
{
type: "checkbox",
prop: "isExtraPadding",
label: "Extra padding",
},
{
type: "select",
prop: "note",
Expand Down
16 changes: 2 additions & 14 deletions @stellar/design-system/src/components/Select/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export interface SelectProps {
id: string;
// Note: cannot use "size" here because it's input's native property
/** Size of the select */
fieldSize: "md" | "sm" | "xs";
fieldSize: "sm" | "md" | "lg";
/** Select options or optgroup with options */
children: React.ReactNode;
/** Label of the select */
Expand All @@ -21,12 +21,8 @@ export interface SelectProps {
error?: string | string;
/** Make label uppercase */
isLabelUppercase?: boolean;
/** Pill shaped select */
isPill?: boolean;
/** Select error without a message */
isError?: boolean;
/** Select with extra padding */
isExtraPadding?: boolean;
/** Use a specific select rather than a generic HTML select (useful for Formik or otherwise controlled selects) */
customSelect?: React.ReactElement;
}
Expand All @@ -49,18 +45,14 @@ export const Select: React.FC<Props> = ({
note,
error,
isLabelUppercase,
isPill,
isError,
isExtraPadding,
customSelect,
...props
}: Props) => {
const additionalClasses = [
`Select--${fieldSize}`,
...(props.disabled ? ["Select--disabled"] : []),
...(isError || error ? ["Select--error"] : []),
...(isPill ? ["Select--pill"] : []),
...(isExtraPadding ? ["Select--extra-padding"] : []),
].join(" ");

const baseSelectProps = {
Expand All @@ -71,11 +63,7 @@ export const Select: React.FC<Props> = ({
return (
<div className={`Select ${additionalClasses}`}>
{label && (
<Label
htmlFor={id}
isUppercase={isLabelUppercase}
size={fieldSize === "xs" ? "sm" : fieldSize}
>
<Label htmlFor={id} isUppercase={isLabelUppercase} size={fieldSize}>
{label}
</Label>
)}
Expand Down
132 changes: 51 additions & 81 deletions @stellar/design-system/src/components/Select/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,77 +8,46 @@
--Select-color-border-hover: var(--sds-clr-gray-06);
--Select-color-border-focus: var(--sds-clr-gray-06);
--Select-color-text: var(--sds-clr-gray-12);
--Select-color-icon: var(--sds-clr-gray-09);

// Size
--Select-font-size: #{pxToRem(16px)};
--Select-line-height: #{pxToRem(24px)};
--Select-padding-vertical: #{pxToRem(8px)};
--Select-padding-horizontal: #{pxToRem(12px)};
--Select-gap: #{pxToRem(8px)};
--Select-font-size: #{pxToRem(12px)};
--Select-line-height: #{pxToRem(18px)};
--Select-padding-vertical: #{pxToRem(4px)};
--Select-padding-horizontal: #{pxToRem(10px)};
--Select-gap: #{pxToRem(6px)};
--Select-border-radius: #{pxToRem(4px)};
--Select-note-font-size: #{pxToRem(14px)};
--Select-note-line-height: #{pxToRem(22px)};

--Select-box-shadow-size: 0;
--Select-box-shadow-color: var(--sds-input-box-shadow-color-default);

width: 100%;
display: flex;
flex-direction: column;
gap: var(--Select-gap);

&--md {
--Select-font-size: #{pxToRem(16px)};
--Select-line-height: #{pxToRem(24px)};
--Select-padding-vertical: #{pxToRem(8px)};
--Select-padding-horizontal: #{pxToRem(12px)};
--Select-gap: #{pxToRem(8px)};
--Select-note-font-size: #{pxToRem(14px)};
--Select-note-line-height: #{pxToRem(22px)};

&.Select--pill {
--Select-padding-horizontal: #{pxToRem(14px)};
}

&.Select--extra-padding {
--Select-padding-vertical: #{pxToRem(12px)};
--Select-padding-horizontal: #{pxToRem(16px)};
}
}

&--sm {
--Select-font-size: #{pxToRem(14px)};
--Select-line-height: #{pxToRem(22px)};
--Select-padding-vertical: #{pxToRem(6px)};
--Select-font-size: #{pxToRem(12px)};
--Select-line-height: #{pxToRem(18px)};
--Select-padding-vertical: #{pxToRem(4px)};
--Select-padding-horizontal: #{pxToRem(10px)};
--Select-gap: #{pxToRem(6px)};
--Select-note-font-size: #{pxToRem(14px)};
--Select-note-line-height: #{pxToRem(22px)};

&.Select--pill {
--Select-padding-horizontal: #{pxToRem(12px)};
}

&.Select--extra-padding {
--Select-padding-vertical: #{pxToRem(10px)};
--Select-padding-horizontal: #{pxToRem(14px)};
}
}

&--xs {
--Select-font-size: #{pxToRem(12px)};
&--md {
--Select-font-size: #{pxToRem(14px)};
--Select-line-height: #{pxToRem(20px)};
--Select-padding-vertical: #{pxToRem(4px)};
--Select-padding-horizontal: #{pxToRem(8px)};
--Select-gap: #{pxToRem(4px)};
--Select-note-font-size: #{pxToRem(12px)};
--Select-note-line-height: #{pxToRem(20px)};

&.Select--pill {
--Select-padding-horizontal: #{pxToRem(10px)};
}
--Select-padding-vertical: #{pxToRem(6px)};
--Select-padding-horizontal: #{pxToRem(12px)};
--Select-gap: #{pxToRem(6px)};
}

&.Select--extra-padding {
--Select-padding-vertical: #{pxToRem(8px)};
--Select-padding-horizontal: #{pxToRem(12px)};
}
&--lg {
--Select-font-size: #{pxToRem(16px)};
--Select-line-height: #{pxToRem(24px)};
--Select-padding-vertical: #{pxToRem(8px)};
--Select-padding-horizontal: #{pxToRem(14px)};
--Select-gap: #{pxToRem(8px)};
}

&__container {
Expand All @@ -88,7 +57,10 @@
border: 1px solid var(--Select-color-border);
color: var(--Select-color-text);
border-radius: var(--Select-border-radius);
transition: border-color var(--sds-anim-transition-default);
box-shadow: 0 0 0 var(--Select-box-shadow-size)
var(--Select-box-shadow-color);
transition: border-color var(--sds-anim-transition-default),
box-shadow var(--sds-anim-transition-default);

select {
appearance: none;
Expand All @@ -102,16 +74,16 @@
padding: var(--Select-padding-vertical) var(--Select-padding-horizontal);
font-size: var(--Select-font-size);
line-height: var(--Select-line-height);
font-weight: var(--sds-fw-regular);

option {
background-color: var(--Select-color-background-option);
color: var(--Select-color-text);
}
}

&:focus-visible {
outline: 1px solid var(--Select-color-border-focus);
border-color: transparent;
}
&:has(select:focus-visible) {
--Select-box-shadow-size: #{pxToRem(4px)};
}

@media (hover: hover) {
Expand All @@ -133,48 +105,46 @@
pointer-events: none;

svg {
stroke: currentColor;
stroke: var(--Select-color-icon);
width: 100%;
height: 100%;
}
}

&--error {
--Select-color-background: var(--sds-clr-gray-01);
--Select-color-border: var(--sds-clr-red-06);
--Select-color-text: var(--sds-clr-gray-11);
--Select-color-background: var(--sds-input-color-background-error);
--Select-color-border: var(--sds-input-color-border-error);
--Select-color-text: var(--sds-input-color-text-default);

.Select__container {
select {
&:focus-visible {
--Select-color-border-focus: var(--sds-clr-red-06);
}
&:has(select:focus-visible) {
--Select-color-border-focus: var(--sds-input-color-border-error-focus);
--Select-box-shadow-color: var(--sds-input-box-shadow-color-error);
}

@media (hover: hover) {
&:hover {
--Select-color-border-hover: var(--sds-clr-red-06);
--Select-color-border-hover: var(
--sds-input-color-border-error-hover
);
}
}
}
}

&--disabled {
--Select-color-background: var(--sds-clr-gray-02);
--Select-color-border: var(--sds-clr-gray-07);
--Select-color-text: var(--sds-clr-gray-11);
--Select-color-background: var(--sds-input-color-background-disabled);
--Select-color-border: var(--sds-input-color-border-disabled);
--Select-color-text: var(--sds-input-color-text-disabled);

select {
cursor: not-allowed;
}
}

&--pill {
--Select-border-radius: var(--Select-line-height);
}

.FieldNote {
font-size: var(--Select-note-font-size);
line-height: var(--Select-note-line-height);
@media (hover: hover) {
&:hover {
border-color: var(--sds-input-color-border-disabled);
}
}
}
}
}
2 changes: 1 addition & 1 deletion @stellar/design-system/src/components/Textarea/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
}

&:focus-visible {
--Textarea-box-shadow-size: #{pxToRem(2px)};
--Textarea-box-shadow-size: #{pxToRem(4px)};
}

&::placeholder {
Expand Down
Loading