Fix compact radio button in selector (#496)

* fix: 🐛 added cache to garden meta * feat: ✨ change default state to open. store state in localstorage * fix: 🐛 use scroll to colum start when removing subgroup * feat: 💄 styling * test: 🧪 updated test * fix: 🧪 await * chore: 📦 bump * style: 💄 compact radio button * bump
equinor · Oct 12, 2023 · 30a69bf · 30a69bf
1 parent 4d0fc41
commit 30a69bf
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 75 deletions.
diff --git a/packages/garden/package.json b/packages/garden/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-garden",
-  "version": "5.1.3",
+  "version": "5.1.4",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

diff --git a/packages/garden/src/lib/components/GroupingSelector/GroupingSelector.tsx b/packages/garden/src/lib/components/GroupingSelector/GroupingSelector.tsx
@@ -1,4 +1,4 @@
-import { Autocomplete, Divider, Label, Radio } from '@equinor/eds-core-react';
+import { Autocomplete, Divider, EdsProvider, Label, Radio } from '@equinor/eds-core-react';
 import { useQuery } from '@tanstack/react-query';
 import { Fragment, useRef } from 'react';
 import { GroupingOption } from '../../types';
@@ -83,79 +83,81 @@ export function GroupingSelector<TContext>({
   }
 
   return (
-    <SelectorBody>
-      <StyledGroupHeader>Groups</StyledGroupHeader>
-      <Divider />
-      <StyledAutoCompleteWrapper>
-        <Autocomplete
-          ref={selectorRef}
-          key={groupingKeys[0]}
-          options={data.allGroupingOptions.map((option: GroupingOption) => option.groupingKey)}
-          label={'Group by'}
-          hideClearButton
-          multiple={false}
-          selectedOptions={[groupingKeys[0]]}
-          onOptionsChange={(changes) => handleGardenKeyChange(changes.selectedItems[0])}
-        />
-        <Autocomplete
-          options={data.validGroupingOptions}
-          label={'Then Group by'}
-          selectedOptions={[groupingKeys.at(1)]}
-          onOptionsChange={(changes) => handleExistingSelectionChange(changes.selectedItems[0])}
-        />
-      </StyledAutoCompleteWrapper>
+    <EdsProvider density="compact">
+      <SelectorBody>
+        <StyledGroupHeader>Groups</StyledGroupHeader>
+        <Divider />
+        <StyledAutoCompleteWrapper>
+          <Autocomplete
+            ref={selectorRef}
+            key={groupingKeys[0]}
+            options={data.allGroupingOptions.map((option: GroupingOption) => option.groupingKey)}
+            label={'Group by'}
+            hideClearButton
+            multiple={false}
+            selectedOptions={[groupingKeys[0]]}
+            onOptionsChange={(changes) => handleGardenKeyChange(changes.selectedItems[0])}
+          />
+          <Autocomplete
+            options={data.validGroupingOptions}
+            label={'Then Group by'}
+            selectedOptions={[groupingKeys.at(1)]}
+            onOptionsChange={(changes) => handleExistingSelectionChange(changes.selectedItems[0])}
+          />
+        </StyledAutoCompleteWrapper>
 
-      {data.allGroupingOptions.map((groupingOption) => {
-        // Check if dateVariant or timeInterval is defined
-        const hasDateVariant = !!groupingOption.dateVariant;
-        const hasTimeInterval = !!groupingOption.timeInterval;
+        {data.allGroupingOptions.map((groupingOption) => {
+          // Check if dateVariant or timeInterval is defined
+          const hasDateVariant = !!groupingOption.dateVariant;
+          const hasTimeInterval = !!groupingOption.timeInterval;
 
-        if (!hasDateVariant && !hasTimeInterval) return null;
+          if (!hasDateVariant && !hasTimeInterval) return null;
 
-        return (
-          groupingOption.groupingKey === groupingKeys[0] && (
-            <Fragment key={groupingOption.groupingKey}>
-              <StyledGroupHeader>Views</StyledGroupHeader>
-              <Divider />
-              <RadioWrapper>
-                <StyledSubGroupHeader>Date Fields:</StyledSubGroupHeader>
-                <RadioCategoryWrapper>
-                  {hasDateVariant &&
-                    groupingOption.dateVariant?.map((typ) => (
-                      <RadioButtonWrapper key={typ}>
-                        <Radio
-                          id={typ}
-                          key={typ}
-                          value={typ}
-                          name="dateVariant"
-                          checked={dateVariant?.trim().toLowerCase() === typ.trim().toLowerCase()}
-                          onChange={(e) => onChangeDateVarient(e.target.value)}
-                        />
-                        <Label htmlFor={typ} label={typ} style={{ fontSize: '14' }} />
-                      </RadioButtonWrapper>
-                    ))}
-                </RadioCategoryWrapper>
-                <StyledSubGroupHeader>Time Intervals:</StyledSubGroupHeader>
-                <RadioCategoryWrapper>
-                  {hasTimeInterval &&
-                    groupingOption.timeInterval?.map((dim) => (
-                      <RadioButtonWrapper key={dim}>
-                        <Radio
-                          key={dim}
-                          value={dim}
-                          name="timeInterval"
-                          checked={timeInterval?.trim().toLowerCase() === dim.trim().toLowerCase()}
-                          onChange={(e) => onChangeTimeInterval(e.target.value)}
-                        />
-                        <Label htmlFor={dim} label={dim} style={{ fontSize: '14' }} />
-                      </RadioButtonWrapper>
-                    ))}
-                </RadioCategoryWrapper>
-              </RadioWrapper>
-            </Fragment>
-          )
-        );
-      })}
-    </SelectorBody>
+          return (
+            groupingOption.groupingKey === groupingKeys[0] && (
+              <Fragment key={groupingOption.groupingKey}>
+                <StyledGroupHeader>Views</StyledGroupHeader>
+                <Divider />
+                <RadioWrapper>
+                  <StyledSubGroupHeader>Date Fields:</StyledSubGroupHeader>
+                  <RadioCategoryWrapper>
+                    {hasDateVariant &&
+                      groupingOption.dateVariant?.map((typ) => (
+                        <RadioButtonWrapper key={typ}>
+                          <Radio
+                            id={typ}
+                            key={typ}
+                            value={typ}
+                            name="dateVariant"
+                            checked={dateVariant?.trim().toLowerCase() === typ.trim().toLowerCase()}
+                            onChange={(e) => onChangeDateVarient(e.target.value)}
+                          />
+                          <Label htmlFor={typ} label={typ} style={{ fontSize: '14' }} />
+                        </RadioButtonWrapper>
+                      ))}
+                  </RadioCategoryWrapper>
+                  <StyledSubGroupHeader>Time Intervals:</StyledSubGroupHeader>
+                  <RadioCategoryWrapper>
+                    {hasTimeInterval &&
+                      groupingOption.timeInterval?.map((dim) => (
+                        <RadioButtonWrapper key={dim}>
+                          <Radio
+                            key={dim}
+                            value={dim}
+                            name="timeInterval"
+                            checked={timeInterval?.trim().toLowerCase() === dim.trim().toLowerCase()}
+                            onChange={(e) => onChangeTimeInterval(e.target.value)}
+                          />
+                          <Label htmlFor={dim} label={dim} style={{ fontSize: '14' }} />
+                        </RadioButtonWrapper>
+                      ))}
+                  </RadioCategoryWrapper>
+                </RadioWrapper>
+              </Fragment>
+            )
+          );
+        })}
+      </SelectorBody>
+    </EdsProvider>
   );
 }
diff --git a/packages/garden/src/lib/components/GroupingSelector/groupingSelector.styles.ts b/packages/garden/src/lib/components/GroupingSelector/groupingSelector.styles.ts
@@ -14,7 +14,6 @@ export const StyledGroupHeader = styled.div`
 `;
 export const StyledSubGroupHeader = styled.div`
   font-weight: 500;
-  padding-left: 1rem;
   padding-top: 1rem;
 `;
 export const RadioWrapper = styled.div`
@@ -23,6 +22,7 @@ export const RadioWrapper = styled.div`
   flex-direction: column;
   gap: 1em;
   font-size: 14;
+  padding-left: 0.625rem;
 `;
 
 export const RadioCategoryWrapper = styled.div`

diff --git a/packages/workspace-fusion/package.json b/packages/workspace-fusion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-fusion",
-  "version": "5.3.5",
+  "version": "5.3.6",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",