Skip to content

fix(Select): Add support for required attribute #1110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions src/components/Select/Select.stories.tsx
Original file line number Diff line number Diff line change
@@ -49,6 +49,12 @@ const meta: Meta<typeof Select> = {
disable: true,
},
},

required: {
control: {
type: "boolean",
},
},
},
};

@@ -119,3 +125,43 @@ export const SelectMultiple: Story = {

name: "Select multiple",
};

export const RequiredSelect: Story = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this prop requires an isolated example.

args: {
required: true,
},

render: (args) => (
<form>
<Select
name="exampleSelectRequired"
id="exampleSelectRequired"
options={[
{
value: "",
disabled: true,
label: "Select an option",
},
{
value: "1",
label: "Cosmic Cuttlefish",
},
{
value: "2",
label: "Bionic Beaver",
},
{
value: "3",
label: "Xenial Xerus",
},
]}
label="Ubuntu releases (required)"
required={args.required}
defaultValue=""
/>
<button type="submit">Submit</button>
</form>
),

name: "Select with required",
};
37 changes: 35 additions & 2 deletions src/components/Select/Select.test.tsx
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@
{ value: "3", label: "Xenial Xerus" },
]}
wrapperClassName="select"
/>
/>,

Check failure on line 18 in src/components/Select/Select.test.tsx

GitHub Actions / Lint, build and test

Delete `,`
);
expect(screen.getByRole("combobox")).toMatchSnapshot();
});
@@ -30,7 +30,7 @@
render(<Select options={[]} onChange={onChangeMock} />);
fireEvent.change(screen.getByRole("combobox"), event);
expect(onChangeMock.mock.calls[0][0].target).toBe(
screen.getByRole("combobox")
screen.getByRole("combobox"),

Check failure on line 33 in src/components/Select/Select.test.tsx

GitHub Actions / Lint, build and test

Delete `,`
);
});

@@ -63,4 +63,37 @@
render(<Select help={help} />);
expect(screen.getByRole("combobox")).toHaveAccessibleDescription(help);
});

it("renders with required attribute", () => {
render(
<Select
id="test-required"
options={[
{ value: "", disabled: true, label: "Select an option" },
{ value: "1", label: "Cosmic Cuttlefish" },
{ value: "2", label: "Bionic Beaver" },
{ value: "3", label: "Xenial Xerus" },
]}
required
/>,

Check failure on line 78 in src/components/Select/Select.test.tsx

GitHub Actions / Lint, build and test

Delete `,`
);
const select = screen.getByRole("combobox");
expect(select).toBeRequired();
});

it("renders without required attribute when not set", () => {
render(
<Select
id="test-not-required"
options={[
{ value: "", disabled: true, label: "Select an option" },
{ value: "1", label: "Cosmic Cuttlefish" },
{ value: "2", label: "Bionic Beaver" },
{ value: "3", label: "Xenial Xerus" },
]}
/>,

Check failure on line 94 in src/components/Select/Select.test.tsx

GitHub Actions / Lint, build and test

Delete `,`
);
const select = screen.getByRole("combobox");
expect(select).not.toBeRequired();
});
});
1 change: 1 addition & 0 deletions src/components/Select/Select.tsx
Original file line number Diff line number Diff line change
@@ -146,6 +146,7 @@ const Select = ({
id={selectId}
onChange={(evt) => onChange && onChange(evt)}
ref={selectRef}
required={required}
{...selectProps}
>
{generateOptions(options)}

Unchanged files with check annotations Beta

/>
);
const title = screen.getByRole("tab");
expect(title.children).toHaveLength(2);

Check warning on line 106 in src/components/Accordion/AccordionSection/AccordionSection.test.tsx

GitHub Actions / Lint, build and test

Avoid direct Node access. Prefer using the methods from Testing Library
expect(title).toHaveTextContent("Test section optional");
});
});
it("displays as collapsed", () => {
const { container } = render(<AppNavigation collapsed />);
expect(container.firstChild).toHaveClass("is-collapsed");

Check warning on line 14 in src/components/ApplicationLayout/AppNavigation/AppNavigation.test.tsx

GitHub Actions / Lint, build and test

Avoid direct Node access. Prefer using the methods from Testing Library
});
it("displays as pinned", () => {
const { container } = render(<AppNavigation pinned />);
expect(container.firstChild).toHaveClass("is-pinned");

Check warning on line 19 in src/components/ApplicationLayout/AppNavigation/AppNavigation.test.tsx

GitHub Actions / Lint, build and test

Avoid direct Node access. Prefer using the methods from Testing Library
});
it("displays as light", () => {
render(<ApplicationLayout dark={false} logo={logo} navItems={[]} />);
expect(document.querySelectorAll(".is-dark")).toHaveLength(0);

Check warning on line 26 in src/components/ApplicationLayout/ApplicationLayout.test.tsx

GitHub Actions / Lint, build and test

Avoid direct Node access. Prefer using the methods from Testing Library
expect(document.querySelectorAll(".is-light")).toHaveLength(0);

Check warning on line 27 in src/components/ApplicationLayout/ApplicationLayout.test.tsx

GitHub Actions / Lint, build and test

Avoid direct Node access. Prefer using the methods from Testing Library
});
it("displays as dark", () => {
render(<ApplicationLayout dark logo={logo} navItems={[]} />);
expect(document.querySelectorAll(".is-dark")).toHaveLength(5);

Check warning on line 32 in src/components/ApplicationLayout/ApplicationLayout.test.tsx

GitHub Actions / Lint, build and test

Avoid direct Node access. Prefer using the methods from Testing Library
// Two icons are light so that they appear over the dark background.
expect(document.querySelectorAll(".is-light")).toHaveLength(2);

Check warning on line 34 in src/components/ApplicationLayout/ApplicationLayout.test.tsx

GitHub Actions / Lint, build and test

Avoid direct Node access. Prefer using the methods from Testing Library
});
it("displays main content", () => {
/>
);
expect(screen.getByText(content)).toBeInTheDocument();
expect(document.querySelector(".l-aside")).toBeInTheDocument();

Check warning on line 64 in src/components/ApplicationLayout/ApplicationLayout.test.tsx

GitHub Actions / Lint, build and test

Avoid direct Node access. Prefer using the methods from Testing Library
});
it("pins the menu", async () => {
render(<ApplicationLayout logo={logo} navItems={[]} />);
expect(document.querySelector(".l-navigation")).not.toHaveClass("is-pinned");

Check warning on line 69 in src/components/ApplicationLayout/ApplicationLayout.test.tsx

GitHub Actions / Lint, build and test

Avoid direct Node access. Prefer using the methods from Testing Library
await userEvent.click(screen.getByRole("button", { name: "Pin menu" }));
expect(document.querySelector(".l-navigation")).toHaveClass("is-pinned");

Check warning on line 71 in src/components/ApplicationLayout/ApplicationLayout.test.tsx

GitHub Actions / Lint, build and test

Avoid direct Node access. Prefer using the methods from Testing Library
});
it("pins the menu using external state", async () => {