Merge pull request #344 from icflorescu/next

Docs website: improve basic properties search
icflorescu · Jun 23, 2023 · bc2972d · bc2972d
2 parents 7864054 + ee8b283
commit bc2972d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/docs/components/CheckableSegmentedControl.tsx b/docs/components/CheckableSegmentedControl.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, createStyles, SegmentedControl, Text } from '@mantine/core';
+import { Checkbox, Code, createStyles, SegmentedControl, Text } from '@mantine/core';
 import { useId } from '@mantine/hooks';
 
 const useStyles = createStyles((theme) => ({
@@ -37,6 +37,7 @@ const useStyles = createStyles((theme) => ({
 export type CheckableSegmentedControlProps = {
   className?: string;
   label: string;
+  documentAs?: string;
   data: string[];
   checked: boolean;
   onCheckedChange: (checked: boolean) => void;
@@ -47,6 +48,7 @@ export type CheckableSegmentedControlProps = {
 export default function CheckableSegmentedControl({
   className,
   label,
+  documentAs,
   data,
   checked,
   onCheckedChange,
@@ -58,9 +60,16 @@ export default function CheckableSegmentedControl({
 
   return (
     <div className={cx(classes.root, className)}>
-      <Text className={classes.label} size="sm" component="label" htmlFor={id}>
+      <Text
+        className={classes.label}
+        size="sm"
+        component="label"
+        htmlFor={id}
+        data-search={documentAs ? true : undefined}
+      >
         {label}
       </Text>
+      {documentAs && <Code hidden>{documentAs}</Code>}
       <div className={classes.inputs}>
         <Checkbox
           id={id}

diff --git a/docs/pages/examples/basic-table-properties.tsx b/docs/pages/examples/basic-table-properties.tsx
@@ -156,33 +156,39 @@ export default function Page({ code: initialCode }: InferGetStaticPropsType<type
               checked={withColumnBorders}
               onChange={() => setWithColumnBorders((v) => !v)}
             />
+            <Code hidden>Column borders, withColumnBorders</Code>
             <Switch
               className={classes.control}
               label="Striped"
               checked={striped}
               onChange={() => setStriped((v) => !v)}
             />
+            <Code hidden>Striped</Code>
             <Switch
               className={classes.control}
               label="Hightlight on hover"
               checked={highlightOnHover}
               onChange={() => setHighlightOnHover((v) => !v)}
             />
+            <Code hidden>Hightlight on hover, highlightOnHover</Code>
             <Switch
               className={classes.control}
               label="Table border"
               checked={withBorder}
               onChange={() => setWithBorder((v) => !v)}
             />
+            <Code hidden>Table border, withBorder</Code>
             <Switch
               className={classes.control}
               label="No header"
               checked={noHeader}
               onChange={() => setNoHeader((v) => !v)}
             />
+            <Code hidden>No header, noHeader</Code>
             <CheckableSegmentedControl
               className={classes.control}
               label="Border radius"
+              documentAs="borderRadius"
               data={MANTINE_SIZES as unknown as string[]}
               checked={customizeBorderRadius}
               onCheckedChange={setCustomizeBorderRadius}
@@ -194,6 +200,7 @@ export default function Page({ code: initialCode }: InferGetStaticPropsType<type
             <CheckableSegmentedControl
               className={classes.control}
               label="Shadow"
+              documentAs="shadow"
               data={MANTINE_SIZES as unknown as string[]}
               checked={customizeShadow}
               onCheckedChange={setCustomizeShadow}
@@ -203,6 +210,7 @@ export default function Page({ code: initialCode }: InferGetStaticPropsType<type
             <CheckableSegmentedControl
               className={classes.control}
               label="Horizontal spacing"
+              documentAs="horizontalSpacing"
               data={MANTINE_SIZES as unknown as string[]}
               checked={customizeHorizontalSpacing}
               onCheckedChange={setCustomizeHorizontalSpacing}
@@ -212,6 +220,7 @@ export default function Page({ code: initialCode }: InferGetStaticPropsType<type
             <CheckableSegmentedControl
               className={classes.control}
               label="Vertical spacing"
+              documentAs="verticalSpacing"
               data={MANTINE_SIZES as unknown as string[]}
               checked={customizeVerticalSpacing}
               onCheckedChange={setCustomizeVerticalSpacing}
@@ -221,6 +230,7 @@ export default function Page({ code: initialCode }: InferGetStaticPropsType<type
             <CheckableSegmentedControl
               className={classes.control}
               label="Font size"
+              documentAs="fontSize"
               data={MANTINE_SIZES as unknown as string[]}
               checked={customizeFontSize}
               onCheckedChange={setCustomizeFontSize}
@@ -230,6 +240,7 @@ export default function Page({ code: initialCode }: InferGetStaticPropsType<type
             <CheckableSegmentedControl
               className={classes.control}
               label="Vertical alignment"
+              documentAs="verticalAlignment"
               data={VERTICAL_ALIGNMENTS}
               checked={customizeVerticalAlignment}
               onCheckedChange={setCustomizeVerticalAlignment}