ability to have sleeker inline form choice on VPDisplay, good for grammar app examples

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "3.6.2",
+  "version": "3.6.3",
   "author": "lingdocs.com",
   "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
   "homepage": "https://verbs.lingdocs.com",

src/components/ButtonSelect.tsx

@@ -14,6 +14,7 @@ type PickerProps<T extends string> = {
     handleChange: (payload: T) => void,
     small?: boolean,
     xSmall?: boolean,
+    faded?: boolean,
 }
 
 function ButtonSelect<L extends string>(props: PickerProps<L>) {
@@ -24,7 +25,7 @@ function ButtonSelect<L extends string>(props: PickerProps<L>) {
                 type="button"
                 className={classNames(
                     "btn",
-                    "btn-outline-secondary",
+                    props.faded ? "btn-light" : "btn-outline-secondary",
                     { active: props.value === option.value },
                     { "btn-sm": props.small || props.xSmall },
                 )}

src/components/vp-explorer/AbbreviationFormSelector.tsx

@@ -68,10 +68,11 @@ function limitValue(value: string, adjustable: "both" | "king" | "servant") {
     throw new Error("unrecognized adjustable value");
 }
 
-function AbbreviationFormSelector({ form, onChange, adjustable }: {
+function AbbreviationFormSelector({ form, onChange, adjustable, inline }: {
     form: T.FormVersion,
     onChange: (f: T.FormVersion) => void,
     adjustable: "both" | "king" | "servant",
+    inline?: boolean,
 }) {
     function handleChange(f: "full" | "noKing" | "shrinkServant" | "shortest") {
         if (f === "full") {
@@ -85,9 +86,10 @@ function AbbreviationFormSelector({ form, onChange, adjustable }: {
         }
     }
     // TODO: limit display of shrinking options based on the verb type
-    return <div className="mb-3">
+    return <div className="mb-3 mx-3">
         {/* <div className="text-center text-small mb-2">Abbreviation Options</div> */}
         <ButtonSelect
+            faded
             small
             // @ts-ignore
             value={limitValue(formToValue(form), adjustable)}

src/components/vp-explorer/VPDisplay.tsx

@@ -10,7 +10,7 @@ import CompiledPTextDisplay from "../CompiledPTextDisplay";
 import RenderedBlocksDisplay from "../RenderedBlocksDisplay";
 import useStickyState from "../../lib/useStickyState";
 
-function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferredMode, script: preferredScript, onLengthChange }: {
+function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferredMode, script: preferredScript, onLengthChange, inlineFormChoice }: {
     VPS: T.VPSelectionState,
     opts: T.TextOptions,
     setForm: "disable" | ((form: T.FormVersion) => void),
@@ -20,6 +20,7 @@ function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferr
     mode?: Mode,
     script?: "p" | "f",
     onLengthChange?: (length: "long" | "short") => void,
+    inlineFormChoice?: boolean,
 }) {
     const [mode, setMode] = useState<Mode>(preferredMode || "text");
     const [script, setScript] = useStickyState<"p" | "f">(preferredScript || "f", "blockScriptChoice");
@@ -39,7 +40,7 @@ function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferr
     const rendered = renderVP(VP);
     const result = compileVP(rendered, rendered.form);
     return <div className={`text-${justify ? justify : "center"} mt-1`}>
-        {typeof setForm === "function" && <AbbreviationFormSelector
+        {typeof setForm === "function" && !inlineFormChoice && <AbbreviationFormSelector
             adjustable={rendered.whatsAdjustable}
             form={rendered.form}
             onChange={setForm}
@@ -48,6 +49,12 @@ function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferr
             <ModeSelect value={mode} onChange={setMode} />
             {mode === "blocks" && <ScriptSelect value={script} onChange={setScript} />}
             {mode === "text" && length && "long" in result.ps && onLengthChange && <LengthSelect value={length} onChange={onLengthChange} />}
+            {typeof setForm === "function" && inlineFormChoice && <AbbreviationFormSelector
+                adjustable={rendered.whatsAdjustable}
+                form={rendered.form}
+                onChange={setForm}
+                inline
+            />}
         </div>
         {mode === "text"
             ? <CompiledPTextDisplay opts={opts} compiled={result} justify={justify} onlyOne={!!onlyOne} length={length} />