diff --git a/src/routes/components/Dropdown.tsx b/src/routes/components/Dropdown.tsx index af111a26a..da729e00e 100644 --- a/src/routes/components/Dropdown.tsx +++ b/src/routes/components/Dropdown.tsx @@ -1,4 +1,4 @@ -import { useContext, useState } from "react"; +import { useContext, useEffect, useState } from "react"; import { GoabBadge, GoabDropdown, @@ -81,16 +81,43 @@ export default function DropdownPage() { name: "width", value: "", }, + { + label: "Max width", + type: "string", + name: "maxWidth", + value: "", + hidden: version === "old", // Hide in LTS (old) version + }, { label: "Disabled", type: "boolean", name: "disabled", value: false }, { label: "Error", type: "boolean", name: "error", value: false }, { label: "Native", type: "boolean", name: "native", value: false }, { label: "Filterable", type: "boolean", name: "filterable", value: false }, { label: "ARIA label", type: "string", name: "ariaLabel", value: "" }, ]); + const { formItemBindings, formItemProps, onFormItemChange } = useSandboxFormItem({ label: "Basic dropdown", }); + // Hide the maxWidth control and remove the prop when LTS version is selected + useEffect(() => { + setDropdownBindings(prev => + prev.map(b => { + if (b.name === "maxWidth" && b.type === "string") { + return { ...b, hidden: version === "old", value: version === "old" ? "" : b.value }; + } + return b; + }) + ); + + if (version === "old") { + setDropdownProps(prev => { + const { maxWidth, ...rest } = prev as unknown as Record; + return rest as ComponentPropsType; + }); + } + }, [version]); + const oldDropdownProperties: ComponentProperty[] = [ { name: "name", @@ -252,6 +279,11 @@ export default function DropdownPage() { type: "string", description: "Overrides the autosized menu width. Non-native only.", }, + { + name: "maxWidth", + type: "string", + description: "Maximum width of the dropdown. Non-native only.", + }, { name: "disabled", type: "boolean", diff --git a/src/routes/components/TextArea.tsx b/src/routes/components/TextArea.tsx index 6fbf034d5..3d18a5eb2 100644 --- a/src/routes/components/TextArea.tsx +++ b/src/routes/components/TextArea.tsx @@ -1,4 +1,4 @@ -import { useContext, useState } from "react"; +import { useContext, useEffect, useState } from "react"; import { ComponentBinding, Sandbox } from "@components/sandbox"; import { ComponentProperties, @@ -88,6 +88,13 @@ export default function TextAreaPage() { name: "maxCount", type: "number", }, + { + label: "Max width", + name: "maxWidth", + type: "string", + value: "", + hidden: version === "old", // Hide in LTS (old) version + }, { name: "value", type: "string", @@ -97,10 +104,30 @@ export default function TextAreaPage() { label: "Value", }, ]); + const { formItemBindings, formItemProps, onFormItemChange } = useSandboxFormItem({ label: "Basic", }); + // Hide the maxWidth control and remove the prop when LTS version is selected + useEffect(() => { + setTextAreaBindings(prev => + prev.map(b => { + if (b.name === "maxWidth" && b.type === "string") { + return { ...b, hidden: version === "old", value: version === "old" ? "" : b.value }; + } + return b; + }) + ); + + if (version === "old") { + setComponentProps(prev => { + const { maxWidth, ...rest } = prev as unknown as Record; + return rest as CastingType; + }); + } + }, [version]); + const oldComponentProperties: ComponentProperty[] = [ { name: "name", diff --git a/src/routes/components/Tooltip.tsx b/src/routes/components/Tooltip.tsx index 8a1997568..1b1f35838 100644 --- a/src/routes/components/Tooltip.tsx +++ b/src/routes/components/Tooltip.tsx @@ -1,6 +1,6 @@ import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { ComponentBinding, Sandbox } from "@components/sandbox"; -import { useState } from "react"; +import { useContext, useEffect, useState } from "react"; import { ComponentProperties, ComponentProperty, @@ -23,6 +23,7 @@ import { import { TooltipExamples } from "@examples/tooltip/TooltipExamples.tsx"; import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; // == Page props == @@ -42,6 +43,7 @@ type CastingType = { }; export default function TooltipPage() { + const { version } = useContext(LanguageVersionContext); const [componentProps, setComponentProps] = useState({ content: "Tooltip", @@ -68,8 +70,36 @@ export default function TooltipPage() { options: ["left", "center", "right"], value: "", }, + { + label: "Max width", + type: "string", + name: "maxWidth", + value: "", + hidden: version === "old", // ensure hidden on initial render when LTS selected + }, ]); + // Hide the maxWidth control and remove the prop when LTS version is selected + useEffect(() => { + // Toggle the visibility of the Max width binding + setComponentBindings(prev => + prev.map(b => { + if (b.name === "maxWidth" && b.type === "string") { + return { ...b, hidden: version === "old", value: version === "old" ? "" : b.value }; + } + return b; + }) + ); + + // Ensure the component props do not include maxWidth when LTS is selected + if (version === "old") { + setComponentProps(prev => { + const { maxWidth, ...rest } = prev as Record; + return rest as ComponentPropsType; + }); + } + }, [version]); + const oldComponentProperties: ComponentProperty[] = [ { name: "content", @@ -122,6 +152,11 @@ export default function TooltipPage() { description: "Horizontal alignment to the child element", defaultValue: "center", }, + { + name: "maxWidth", + type: "string", + description: "Maximum width of the tooltip", + }, TestIdProperty, MarginProperty ]; @@ -143,7 +178,6 @@ export default function TooltipPage() { /> -

Playground