Merge branch 'master' of https://github.com/reaviz/reablocks

# Conflicts: # package.json
reaviz · Jan 18, 2024 · 432dad9 · 432dad9
2 parents 2d41a75 + 4fc2e40
commit 432dad9
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 14 deletions.
diff --git a/docs/components/form/Radio.mdx b/docs/components/form/Radio.mdx
@@ -26,8 +26,11 @@ This component uses the following design tokens:
 
 - `radio-label-color`
 - `radio-stroke`
-- `radio-indicator-active`
 - `radio-stroke-active`
+- `radio-stroke-size`
+- `radio-background`
+- `radio-indicator-size`
+- `radio-indicator-active`
 
 Learn more about design tokens in the [design tokens documentation](?path=/story/docs-design-tokens-getting-started--page).
 

diff --git a/docs/theme/ThemeExample.mdx b/docs/theme/ThemeExample.mdx
@@ -350,8 +350,10 @@ export const darkTheme: Theme = {
     radio: {
       'radio-label-color': darkColors.white,
       'radio-stroke': darkColors.slate['100'],
-      'radio-indicator-active': darkColors.blue['100'],
-      'radio-stroke-active': darkColors.blue['100']
+      'radio-stroke-active': darkColors.blue['100'],
+      'radio-stroke-size': '1px',
+      'radio-background': 'transparent',
+      'radio-indicator-active': darkColors.blue['100']
     },
     stack: {
       'stack-gap': spacings.md,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reablocks",
-  "version": "5.8.3",
+  "version": "5.8.4",
   "description": "Component library for React",
   "scripts": {
     "build": "vite build --mode library",

diff --git a/src/form/Radio/Radio.module.css b/src/form/Radio/Radio.module.css
@@ -16,7 +16,8 @@
 }
 
 .radio {
-  border: 1px solid var(--radio-stroke);
+  border: var(--radio-stroke-size) solid var(--radio-stroke);
+  background-color: var(--radio-background);
   border-radius: 100%;
   will-change: border-color;
   display: inline-flex;
@@ -43,8 +44,8 @@
     height: 14px;
 
     .indicator {
-      width: 6px;
-      height: 6px;
+      width: var(--radio-indicator-size, 6px);
+      height: var(--radio-indicator-size, 6px);
     }
   }
 
@@ -53,8 +54,8 @@
     height: 16px;
 
     .indicator {
-      width: 8px;
-      height: 8px;
+      width: var(--radio-indicator-size, 8px);
+      height: var(--radio-indicator-size, 8px);
     }
   }
 
@@ -63,8 +64,8 @@
     height: 20px;
 
     .indicator {
-      width: 10px;
-      height: 10px;
+      width: var(--radio-indicator-size, 10px);
+      height: var(--radio-indicator-size, 10px);
     }
   }
 

diff --git a/src/form/Range/RangeSingle.tsx b/src/form/Range/RangeSingle.tsx
@@ -46,7 +46,7 @@ export const RangeSingle: FC<RangeProps<number>> = ({
 
   useEffect(() => {
     setRangeWidth(range.current.offsetWidth);
-    setRangeLeft(range.current.offsetLeft);
+    setRangeLeft(range.current?.getBoundingClientRect()?.left || 0);
     valueX.set(getPosition(currentValue));
   }, [range, currentValue, valueX, getPosition]);
 

diff --git a/src/form/Select/Select.tsx b/src/form/Select/Select.tsx
@@ -70,6 +70,11 @@ export interface SelectProps {
    */
   value?: string | string[];
 
+  /**
+   * The deafult value of the input filter.
+   */
+  defaultFilterValue?: string;
+
   /**
    * Whether the select is required or not.
    */
@@ -209,6 +214,7 @@ export const Select: FC<Partial<SelectProps>> = ({
   activeClassName,
   children,
   value,
+  defaultFilterValue,
   required,
   input,
   menu,
@@ -261,6 +267,14 @@ export const Select: FC<Partial<SelectProps>> = ({
     }
   }, [keyword, index, setIndex, result]);
 
+  useEffect(() => {
+    // Run only on initial render
+    if (!value && defaultFilterValue) {
+      search(defaultFilterValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const groups = useMemo(() => getGroups(result), [result]);
 
   const selectedOption: SelectValue = useMemo(() => {

diff --git a/src/form/Select/SingleSelect.story.tsx b/src/form/Select/SingleSelect.story.tsx
@@ -557,3 +557,24 @@ export const TabToSelect = () => {
     </div>
   );
 };
+
+export const DefaultFilter = () => {
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <div style={{ width: 300 }}>
+      <Select
+        placeholder="Select a category..."
+        value={value}
+        onChange={v => {
+          setValue(v);
+          console.log('onChange', v);
+        }}
+        defaultFilterValue="twi"
+      >
+        <SelectOption value="facebook">facebook</SelectOption>
+        <SelectOption value="twitter">twitter</SelectOption>
+        <SelectOption value="twitch">twitch</SelectOption>
+      </Select>
+    </div>
+  );
+};
diff --git a/src/utils/Theme/themes/dark.ts b/src/utils/Theme/themes/dark.ts
@@ -318,8 +318,10 @@ export const darkTheme: Theme = {
     radio: {
       'radio-label-color': darkColors.white,
       'radio-stroke': darkColors.slate['100'],
-      'radio-indicator-active': darkColors.blue['100'],
-      'radio-stroke-active': darkColors.blue['100']
+      'radio-stroke-active': darkColors.blue['100'],
+      'radio-stroke-size': '1px',
+      'radio-background': 'transparent',
+      'radio-indicator-active': darkColors.blue['100']
     },
     select: {
       'select-input-border-radius': spacings.sm,