Experiment with global css styles

onaio · Apr 26, 2024 · 18b3cdf · 18b3cdf
1 parent e472a7a
commit 18b3cdf
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 2 deletions.
diff --git a/packages/fhir-keycloak-user-management/src/components/UserList/ListView/index.tsx b/packages/fhir-keycloak-user-management/src/components/UserList/ListView/index.tsx
@@ -72,6 +72,7 @@ export const UserList = (props: OrganizationListProps) => {
   const columns = getTableColumns(keycloakBaseURL, fhirBaseURL, extraData, t, userRole, history);
 
   const searchFormProps = {
+    wrapperClassName: 'long-search-bar',
     defaultValue: getQueryParams(location)[searchQuery],
     onChangeHandler: function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
       const searchText = event.target.value;

diff --git a/packages/keycloak-user-management/src/components/UserList/index.tsx b/packages/keycloak-user-management/src/components/UserList/index.tsx
@@ -186,6 +186,7 @@ const UserList = (props: UserListTypes): JSX.Element => {
         <Col className="main-content" span={openDetails ? 19 : 24}>
           <div className="main-content__header">
             <SearchForm
+              wrapperClassName="long-search-bar"
               defaultValue={getQueryParams(props.location)[SEARCH_QUERY_PARAM]}
               onChange={createChangeHandler(SEARCH_QUERY_PARAM, props)}
               size={'middle'}

diff --git a/packages/react-utils/src/components/CommonStyles/index.css b/packages/react-utils/src/components/CommonStyles/index.css
@@ -23,3 +23,7 @@
 .flex-grow-1 {
   flex-grow: 1;
 }
+
+.long-search-bar {
+  width: 55%;
+}
diff --git a/packages/react-utils/src/components/Search/index.tsx b/packages/react-utils/src/components/Search/index.tsx
@@ -11,6 +11,7 @@ import { useTranslation } from '../../mls';
  */
 export interface SearchFormProps extends InputProps {
   onChangeHandler: OnChangeType;
+  wrapperClassName?: string;
 }
 
 const defaultPrefix = <SearchOutlined style={{ fontSize: '16px', fontWeight: 'bold' }} />;
@@ -31,7 +32,7 @@ export const defaultSearchProps: SearchFormProps = {
  * @param props - the component's props
  */
 const SearchForm = (props: SearchFormProps) => {
-  const { onChangeHandler, ...passedOnProps } = props;
+  const { onChangeHandler, wrapperClassName, ...passedOnProps } = props;
   // HACK to preserve defaultProps back compatibility
   const { t } = useTranslation();
   passedOnProps['placeholder'] = props.placeholder ?? t('Search');
@@ -51,7 +52,7 @@ const SearchForm = (props: SearchFormProps) => {
   };
 
   return (
-    <div className="search-input-wrapper">
+    <div className={`search-input-wrapper ${wrapperClassName ? wrapperClassName : ''}`}>
       <Input onChange={debouncedOnChangeHandler} {...passedOnProps}></Input>
     </div>
   );

diff --git a/packages/react-utils/src/hooks/useSimpleTabularView.ts b/packages/react-utils/src/hooks/useSimpleTabularView.ts
@@ -93,6 +93,7 @@ export function useSimpleTabularView<T extends Resource>(
   const { data, ...restQueryValues } = useQuery(rQuery);
 
   const searchFormProps = {
+    wrapperClassName: 'long-search-bar',
     defaultValue: getQueryParams(location)[searchQuery],
     onChangeHandler: function onChangeHandler(event: ChangeEvent<HTMLInputElement>) {
       const nextUrl = getNextUrlOnSearch(event, location, match);