Documentation: Sandbox breaks some component functionality

[BumbleB2na]

Some component demos/examples needed to be moved outside of Sandbox component. The problem should be fixed and Sandbox used.

Acceptance Criteria

• React code snippet for each demo/example is functional, while wrapped inside of Sandbox

Background info

Sandbox component is used in documentation website to wrap react code that demonstrates functionality using design system components.

Problem

When design system docs were upgraded to demonstrate design system version 6, some components do not function properly when wrapped inside of Sandbox. The known list so far includes, but may not be limited to: Input, Dropdown, Modal, Dropdown inside of Modal, Form Stepper.

Example of Input component wrapped in Sandbox:

As demonstrated in video above:

import { useState } from "react";
import { Sandbox } from "@components/sandbox";
import { GoabInput } from "@abgov/react-components";

export const TableWithGlobalFiltersExample = () => {
  const [inputValue, setInputValue] = useState("");

  const handleInputChange = (_name: string, value: string) => {
    const newValue = value.trim();
    setInputValue(newValue);
  };

  const handleInputKeyDown = (_name: string, _value: string, key: string) => {
    if (key === "Enter") {
      setInputValue("");
    }
  };

  return (
    <Sandbox fullWidth skipRender note="Problem: Input blurs on key press">
      <GoabInput
        name="input"
        placeholder="Type something"
        value={inputValue}
        maxLength={100}
        onChange={detail => handleInputChange(detail.name, detail.value)}
        onKeyPress={detail => handleInputKeyDown(detail.name, detail.value, detail.key)}
      />
    </Sandbox>
  );
};

To Reproduce

Arrange custom code wrapped inside of Sandbox and run docs website.

Or, find in the docs any React code demo/example not wrapped inside Sandbox. Wrap it in Sandbox to determine what is broken.

Additional info

This problem may not be limited to docs website and Sandbox. It may require changes to the design system components themselves to be fixed.

Component pages and/or examples listed in bold that cannot run within Sandbox:

• FilterChip
  • Typed Chips Example
  • Table with Global Filters
• List Note in code: "We don't use sandbox because it isn't starting with 'GoA' components"
  • Unordered list
• Modal
  • Confirm record change
    • Note in code: "Don't use a Sandbox because Datepicker inside a modal will make the modal shifts everytime we click on datepicker"
  • Add another item
    • Note in code: "Don't use a Sandbox because Datepicker inside a modal will make the modal shifts everytime we click on datepicker"
• Spacer
  • _Note: The main sandbox demo for Horizontal Spacing is broken when choosing "fill"
• Table
  • Table with Global Filters
• Tabs Note in code: "Cannot use Sandbox because if we change the language/version, the tabs inside the tabs will make the below bugs: 1. Scroll down to an example, 2. Scroll back and change the language selected, 3. It autoscrolls you back down close to the example you were looking at, 4. If you click anywhere on the screen, it then autoscrolls back up to the top"
  • Show different views of data in a table
  • Set a specific tab to be active
• TaskListPage
  • Task list page
• Tooltip
  • Click to copy something to your clipboard (example is missing)

[ArakTaiRoth]

@chrisolsen to comment and close

[chrisolsen]

This is a rabbit hole that I don't feel is worth getting into. The current Sandbox is not perfect, but the amount of updates we are making to the docs doesn't justify spending the number of hours it would take to implement something like this. I am closing this for now, but if things change drastically in the future maybe this is something that could be re-opened.

[BumbleB2na]

This is a rabbit hole that I don't feel is worth getting into. The current Sandbox is not perfect, but the amount of updates we are making to the docs doesn't justify spending the number of hours it would take to implement something like this. I am closing this for now, but if things change drastically in the future maybe this is something that could be re-opened.

@chrisolsen then I will give a very simple example. In the current state of Spacer page the hSpacing="fill" value is broken:

After stripping away Sandbox it works: