Skip to content

Commit

Permalink
fix(inputsearch): fix intent and useInput styles (#618)
Browse files Browse the repository at this point in the history 
* fix(inputsearch): fix intent and useInput styles

* fix(inputtext): fix missing class selector in styles
  • Loading branch information
@masoudmanson
masoudmanson authored Oct 3, 2023
1 parent 0d17408 commit 11430c1
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 23 deletions.
2 changes: 1 addition & 1 deletion packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap
View file
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
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
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
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)}
`;
}}
`;

0 comments on commit 11430c1

Please sign in to comment.