Skip to content

chore: use emotion for styling (pt. 4) #10149

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

Merged
merged 25 commits into from
Oct 10, 2023
Merged

chore: use emotion for styling (pt. 4) #10149

Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
95e9688
emotion: `TemplateScheduleForm`
aslilac Oct 9, 2023
b0cdf3f
emotion: `Form` & `FormFooter`
aslilac Oct 9, 2023
a7343f0
emotion: `LastUsed`
aslilac Oct 9, 2023
4407eda
emotion: `OptionsTable`
aslilac Oct 9, 2023
c824abc
emotion: `Dialog`
aslilac Oct 9, 2023
ae5c50d
emotion: `Expander`
aslilac Oct 9, 2023
8f28843
emotion: `Margins`
aslilac Oct 9, 2023
f2d257c
emotion: `WorkspaceOutdatedTooltip`
aslilac Oct 9, 2023
65cf2a5
emotion: `ExternalAuth`
aslilac Oct 9, 2023
3bab8b2
emotion: `CreateTokenForm`
aslilac Oct 9, 2023
4e48356
emotion: `AgentVersion`
aslilac Oct 9, 2023
d597c7b
emotion: `Typography`
aslilac Oct 9, 2023
e48ec94
emotion: `UserOrGroupAutocomplete`
aslilac Oct 9, 2023
4d96e15
emotion: `SetupPageView`
aslilac Oct 9, 2023
2d7fd61
emotion: `TemplateSchedulePageView`
aslilac Oct 9, 2023
2373c01
emotion: `TemplateSettingsPageView`
aslilac Oct 9, 2023
be3657f
emotion: `TemplateSchedulePageView`
aslilac Oct 9, 2023
da73bc8
🧹
aslilac Oct 9, 2023
9ce12e8
emotion: `ChangeVersionDialog`
aslilac Oct 9, 2023
d621d05
emotion: `TemplatePermissionsPageView`
aslilac Oct 9, 2023
6b3d6e0
🧹
aslilac Oct 9, 2023
81ed84a
emotion: `FullScreenLoader`
aslilac Oct 9, 2023
a672222
🧹
aslilac Oct 10, 2023
11b9307
Merge branch 'main' into emotional-damage-4
aslilac Oct 10, 2023
050a336
Merge branch 'main' into emotional-damage-4
aslilac Oct 10, 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
Prev Previous commit
Next Next commit
emotion: UserOrGroupAutocomplete
  • Loading branch information
@aslilac
aslilac committed Oct 9, 2023
commit e48ec94ac38f9b4faba65da835c71206437f96ed
39 changes: 17 additions & 22 deletions site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import CircularProgress from "@mui/material/CircularProgress";
import { makeStyles } from "@mui/styles";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import { useMachine } from "@xstate/react";
import { Group, User } from "api/typesGenerated";
import Box from "@mui/material/Box";
import { type ChangeEvent, useState } from "react";
import { css } from "@emotion/css";
import type { Group, User } from "api/typesGenerated";
import { AvatarData } from "components/AvatarData/AvatarData";
import { ChangeEvent, useState } from "react";
import { getGroupSubtitle } from "utils/groups";
import { searchUsersAndGroupsMachine } from "xServices/template/searchUsersAndGroupsXService";
import Box from "@mui/material/Box";
import { useDebouncedFunction } from "hooks/debounce";

export type UserOrGroupAutocompleteValue = User | Group | null;
Expand All @@ -25,10 +25,21 @@ export type UserOrGroupAutocompleteProps = {
exclude: UserOrGroupAutocompleteValue[];
};

const autoCompleteStyles = css`
width: 300px;

& .MuiFormControl-root {
width: 100%;
}

& .MuiInputBase-root {
width: 100%;
}
`;

export const UserOrGroupAutocomplete: React.FC<
UserOrGroupAutocompleteProps
> = ({ value, onChange, organizationId, templateID, exclude }) => {
const styles = useStyles();
const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false);
const [searchState, sendSearch] = useMachine(searchUsersAndGroupsMachine, {
context: {
Expand Down Expand Up @@ -92,7 +103,7 @@ export const UserOrGroupAutocomplete: React.FC<
}}
options={options}
loading={searchState.matches("searching")}
className={styles.autocomplete}
css={autoCompleteStyles}
renderInput={(params) => (
<>
<TextField
Expand All @@ -118,19 +129,3 @@ export const UserOrGroupAutocomplete: React.FC<
/>
);
};

export const useStyles = makeStyles(() => {
return {
autocomplete: {
width: "300px",

"& .MuiFormControl-root": {
width: "100%",
},

"& .MuiInputBase-root": {
width: "100%",
},
},
};
});