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

fix(inputsearch): fix intent and useInput styles #618

Merged
merged 2 commits into from
Oct 3, 2023
Merged

fix(inputsearch): fix intent and useInput styles #618

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
266d246
fix(inputsearch): fix intent and useInput styles
masoudmanson Oct 3, 2023
a0607e4
fix(inputtext): fix missing class selector in styles
masoudmanson Oct 3, 2023
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 packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
Search by label
</label>
<div
class="MuiFormControl-root MuiTextField-root css-1rjsjzb-MuiFormControl-root-MuiTextField-root"
class="MuiFormControl-root MuiTextField-root css-1gkuvuu-MuiFormControl-root-MuiTextField-root"
>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root"
Expand Down
89 changes: 82 additions & 7 deletions packages/components/src/core/InputSearch/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const rounded = (props: InputSearchExtraProps): SerializedStyles => {
const borders = getBorders(props);

return css`
.${outlinedInputClasses.notchedOutline} {
.${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
border-radius: ${corners?.l}px;
border: ${borders?.gray[400]};
}
Expand All @@ -42,21 +42,89 @@ const rounded = (props: InputSearchExtraProps): SerializedStyles => {

const error = (props: InputSearchExtraProps): SerializedStyles => {
const borders = getBorders(props);
const colors = getColors(props);

return css`
.${outlinedInputClasses.notchedOutline} {
.${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
border: ${borders?.error[400]};
}

.${outlinedInputClasses.root}:hover
.${outlinedInputClasses.notchedOutline} {
border: ${borders?.error[400]};
}

.${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
.${outlinedInputClasses.notchedOutline} {
border: ${borders?.error[400]};
}

.${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
cursor: default;
svg {
color: ${colors?.gray[500]};
}
}
}
`;
};

const warning = (props: InputSearchExtraProps): SerializedStyles => {
const borders = getBorders(props);
const colors = getColors(props);

return css`
.${outlinedInputClasses.notchedOutline} {
.${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
border: ${borders?.warning[400]};
}

.${outlinedInputClasses.root}:hover
.${outlinedInputClasses.notchedOutline} {
border: ${borders?.warning[400]};
}

.${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
.${outlinedInputClasses.notchedOutline} {
border: ${borders?.warning[400]};
}

.${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
cursor: default;
svg {
color: ${colors?.gray[500]};
}
}
}
`;
};

const userInput = (props: InputSearchExtraProps): SerializedStyles => {
const { intent } = props;
const colors = getColors(props);
const borders = getBorders(props);

const border =
intent === "error"
? borders?.error[400]
: intent === "warning"
? borders?.warning[400]
: borders?.primary[400];

const color = intent === "default" ? colors?.primary[400] : colors?.gray[500];

return css`
.${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
border: ${border};
}

.${outlinedInputClasses.root}:hover
.${outlinedInputClasses.notchedOutline} {
border: ${border};
}

.${inputAdornmentClasses.root} svg {
color: ${color};
}
`;
};

Expand All @@ -65,18 +133,23 @@ const disabledStyled = (props: InputSearchExtraProps): SerializedStyles => {
const colors = getColors(props);

return css`
.Mui-disabled {
.${outlinedInputClasses.disabled} {
.${outlinedInputClasses.notchedOutline} {
border: ${borders?.gray[300]};
}

.MuiInputAdornment-root svg {
.${inputAdornmentClasses.root} svg {
color: ${colors?.gray[300]};
}

&:hover .${outlinedInputClasses.notchedOutline} {
border: ${borders?.gray[300]};
}

&::placeholder {
color: ${colors?.gray[300]};
opacity: 1;
}
}
`;
};
Expand All @@ -86,6 +159,7 @@ export const StyledLabel = styled("label")`
${(props) => {
const typography = getTypography(props);
const spacings = getSpaces(props);

return `
font-family: ${typography?.fontFamily};
margin-bottom: ${spacings?.xxs}px;
Expand All @@ -107,7 +181,7 @@ export const StyledSearchBase = styled(TextField, {
},
})`
${(props: InputSearchExtraProps) => {
const { intent, disabled, sdsStyle, value } = props;
const { intent, disabled, sdsStyle, sdsStage, value } = props;
const spacings = getSpaces(props);
const borders = getBorders(props);
const colors = getColors(props);
Expand Down Expand Up @@ -152,7 +226,7 @@ export const StyledSearchBase = styled(TextField, {
border: ${borders?.gray[500]};
}

.${outlinedInputClasses.root}.Mui-focused {
.${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
.${outlinedInputClasses.notchedOutline} {
border: ${borders?.primary[400]};
}
Expand All @@ -169,6 +243,7 @@ export const StyledSearchBase = styled(TextField, {
${intent === "error" && error(props)}
${intent === "warning" && warning(props)}
${disabled && disabledStyled(props)}
${sdsStage === "userInput" && userInput(props)}
`;
}}
`;
Expand Down
14 changes: 12 additions & 2 deletions packages/components/src/core/InputText/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,28 @@ import React from "react";
import RawInputText from "./index";

const InputText = (props: Args): JSX.Element => {
const { id, intent, disabled, hideLabel, placeholder, label, sdsType } =
props;
const {
id,
intent,
disabled,
hideLabel,
placeholder,
label,
sdsType,
sdsStage,
} = props;
return (
<RawInputText
id={id}
sdsType={sdsType}
sdsStage={sdsStage}
label={label}
placeholder={placeholder}
intent={intent}
hideLabel={hideLabel}
disabled={disabled}
name="input-text-name"
autoComplete="off"
/>
);
};
Expand Down
108 changes: 95 additions & 13 deletions packages/components/src/core/InputText/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import { css, SerializedStyles } from "@emotion/react";
import { TextField } from "@mui/material";
import {
buttonBaseClasses,
inputAdornmentClasses,
outlinedInputClasses,
TextField,
} from "@mui/material";
import { styled } from "@mui/material/styles";
import {
CommonThemeProps,
fontBodyS,
getBorders,
getColors,
getCorners,
getSpaces,
getTypography,
Expand All @@ -22,52 +28,124 @@ const sdsPropNames = ["sdsStyle", "sdsStage", "sdsType", "intent", "hideLabel"];

const error = (props: InputTextExtraProps): SerializedStyles => {
const borders = getBorders(props);
const colors = getColors(props);

return css`
.MuiOutlinedInput-notchedOutline {
.${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
border: ${borders?.error[400]};
}

.${outlinedInputClasses.root}:hover
.${outlinedInputClasses.notchedOutline} {
border: ${borders?.error[400]};
}

.${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
.${outlinedInputClasses.notchedOutline} {
border: ${borders?.error[400]};
}

.${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
cursor: default;
svg {
color: ${colors?.gray[500]};
}
}
}
`;
};

const warning = (props: InputTextExtraProps): SerializedStyles => {
const borders = getBorders(props);
const colors = getColors(props);

return css`
.MuiOutlinedInput-notchedOutline {
.${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
border: ${borders?.warning[400]};
}

.${outlinedInputClasses.root}:hover
.${outlinedInputClasses.notchedOutline} {
border: ${borders?.warning[400]};
}

.${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
.${outlinedInputClasses.notchedOutline} {
border: ${borders?.warning[400]};
}

.${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
cursor: default;
svg {
color: ${colors?.gray[500]};
}
}
}
`;
};

const disabledStyled = (props: InputTextExtraProps): SerializedStyles => {
const borders = getBorders(props);
const colors = getColors(props);

return css`
.Mui-disabled {
.MuiOutlinedInput-notchedOutline {
.${outlinedInputClasses.disabled} {
.${outlinedInputClasses.notchedOutline} {
border: ${borders?.gray[300]};
}
&:hover .MuiOutlinedInput-notchedOutline {

&:hover .${outlinedInputClasses.notchedOutline} {
border: ${borders?.gray[300]};
}

&::placeholder {
color: ${colors?.gray[300]};
opacity: 1;
}
}
`;
};

const textArea = (props: InputTextExtraProps): SerializedStyles => {
const spacings = getSpaces(props);
console.log(outlinedInputClasses.multiline);
console.log(outlinedInputClasses.inputMultiline);

return css`
.MuiInputBase-multiline {
.${outlinedInputClasses.multiline} {
padding: ${spacings?.xxs}px;
> .MuiInputBase-inputMultiline {

> .${outlinedInputClasses.inputMultiline} {
padding: ${spacings?.xxs}px ${spacings?.m}px ${spacings?.m}px;
resize: both;
}
}
`;
};

const userInput = (props: InputTextExtraProps): SerializedStyles => {
const { intent } = props;
const borders = getBorders(props);

const border =
intent === "error"
? borders?.error[400]
: intent === "warning"
? borders?.warning[400]
: borders?.primary[400];

return css`
.${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
border: ${border};
}

.${outlinedInputClasses.root}:hover
.${outlinedInputClasses.notchedOutline} {
border: ${border};
}
`;
};

export const StyledLabel = styled("label")`
display: block;
${fontBodyS}
Expand All @@ -89,7 +167,8 @@ export const StyledInputBase = styled(TextField, {
},
})`
${(props: InputTextExtraProps) => {
const { intent, sdsType, disabled } = props;
const { intent, sdsType, sdsStage, disabled } = props;

const spacings = getSpaces(props);
const borders = getBorders(props);
const corners = getCorners(props);
Expand All @@ -100,30 +179,33 @@ export const StyledInputBase = styled(TextField, {
min-width: 160px;
display: block;

.MuiInputBase-inputSizeSmall {
.${outlinedInputClasses.inputSizeSmall} {
padding: ${spacings?.xs}px ${spacings?.l}px;
height: 34px;
box-sizing: border-box;
background-color: #fff;

.MuiOutlinedInput-notchedOutline {
.${outlinedInputClasses.notchedOutline} {
border-radius: ${corners?.m}px;
border: ${borders?.gray[400]};
}
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
.${outlinedInputClasses.root}:hover
.${outlinedInputClasses.notchedOutline} {
border: ${borders?.gray[500]};
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
.${outlinedInputClasses.root}.${outlinedInputClasses.focused}
.${outlinedInputClasses.notchedOutline} {
border: ${borders?.primary[400]};
}

${sdsType === "textArea" && textArea(props)}
${intent === "error" && error(props)}
${intent === "warning" && warning(props)}
${disabled && disabledStyled(props)}
${sdsStage === "userInput" && userInput(props)}
`;
}}
`;
Loading