Select docs + preview (#177)

* Select docs + preview * Disabled preview
stellar · Sep 29, 2023 · 53f8133 · 53f8133
1 parent b3bb473
commit 53f8133
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 3 deletions.
diff --git a/@stellar/design-system-website/docs/components/inputs/select.mdx b/@stellar/design-system-website/docs/components/inputs/select.mdx
@@ -0,0 +1,22 @@
+---
+slug: /select
+---
+
+# Select
+
+<ComponentDescription componentName="Select" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Select">
+  <Select fieldSize="md" id="select">
+    <option>Option 1</option>
+    <option>Option 2</option>
+  </Select>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Select" />
diff --git a/@stellar/design-system-website/src/componentPreview/selectPreview.tsx b/@stellar/design-system-website/src/componentPreview/selectPreview.tsx
@@ -0,0 +1,94 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const selectPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "label",
+      customValue: "Label",
+      options: [
+        {
+          value: "",
+          label: "No label",
+        },
+        {
+          value: "label",
+          label: "Label",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "fieldSize",
+      options: [
+        {
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "sm",
+          label: "SM",
+        },
+        {
+          value: "xs",
+          label: "XS",
+        },
+      ],
+    },
+    {
+      type: "checkbox",
+      prop: "disabled",
+      label: "Disabled",
+    },
+    {
+      type: "checkbox",
+      prop: "isLabelUppercase",
+      label: "Uppercase label",
+    },
+    {
+      type: "checkbox",
+      prop: "isPill",
+      label: "Pill",
+    },
+    {
+      type: "checkbox",
+      prop: "isError",
+      label: "Error",
+    },
+    {
+      type: "checkbox",
+      prop: "isExtraPadding",
+      label: "Extra padding",
+    },
+    {
+      type: "select",
+      prop: "note",
+      customValue: "Note message",
+      options: [
+        {
+          value: "",
+          label: "No note",
+        },
+        {
+          value: "note",
+          label: "Note",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "error",
+      customValue: "Error message",
+      options: [
+        {
+          value: "",
+          label: "No error",
+        },
+        {
+          value: "error",
+          label: "Error",
+        },
+      ],
+    },
+  ],
+};
diff --git a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
@@ -20,6 +20,7 @@ import { notificationPreview } from "@site/src/componentPreview/notificationPrev
 import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
 import { profilePreview } from "@site/src/componentPreview/profilePreview";
 import { projectLogoPreview } from "@site/src/componentPreview/projectLogoPreview";
+import { selectPreview } from "@site/src/componentPreview/selectPreview";
 import { titlePreview } from "@site/src/componentPreview/titlePreview";
 import { tooltipPreview } from "@site/src/componentPreview/tooltipPreview";
 
@@ -41,6 +42,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Paragraph: paragraphPreview,
   Profile: profilePreview,
   ProjectLogo: projectLogoPreview,
+  Select: selectPreview,
   Title: titlePreview,
   Tooltip: tooltipPreview,
 };

diff --git a/@stellar/design-system-website/src/components/PreviewBlock/styles.css b/@stellar/design-system-website/src/components/PreviewBlock/styles.css
@@ -85,6 +85,7 @@
   margin: 0 !important;
 }
 
+.PreviewBlock .Select,
 .PreviewBlock .Input {
   max-width: 24rem;
 }
diff --git a/@stellar/design-system/src/components/Select/index.tsx b/@stellar/design-system/src/components/Select/index.tsx
@@ -4,22 +4,44 @@ import { FieldNote } from "../utils/FieldNote";
 import { Icon } from "../../icons";
 import "./styles.scss";
 
-interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+/** Including all valid [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attributes) */
+export interface SelectProps {
+  /** ID of the select should be unique */
   id: string;
   // Note: cannot use "size" here because it's input's native property
+  /** Size of the select */
   fieldSize: "md" | "sm" | "xs";
+  /** Select options or optgroup with options */
   children: React.ReactNode;
+  /** Label of the select */
   label?: string | React.ReactNode;
+  /** Note message of the select */
   note?: string | React.ReactNode;
+  /** Error message of the select */
   error?: string | string;
+  /** Make label uppercase */
   isLabelUppercase?: boolean;
+  /** Pill shaped select */
   isPill?: boolean;
+  /** Select error without a message */
   isError?: boolean;
+  /** Select with extra padding */
   isExtraPadding?: boolean;
+  /** Use a specific select rather than a generic HTML select (useful for Formik or otherwise controlled selects) */
   customSelect?: React.ReactElement;
 }
 
-export const Select: React.FC<SelectProps> = ({
+interface Props
+  extends SelectProps,
+    React.SelectHTMLAttributes<HTMLSelectElement> {
+  id: string;
+  children: React.ReactNode;
+}
+
+/**
+ * `Select` component is a form `select` element, which inherits all native HTML `select` element attributes.
+ */
+export const Select: React.FC<Props> = ({
   id,
   fieldSize,
   children,
@@ -32,7 +54,7 @@ export const Select: React.FC<SelectProps> = ({
   isExtraPadding,
   customSelect,
   ...props
-}: SelectProps) => {
+}: Props) => {
   const additionalClasses = [
     `Select--${fieldSize}`,
     ...(props.disabled ? ["Select--disabled"] : []),