diff --git a/extensions/ql-vscode/src/stories/model-editor/InProgressDropdown.stories.tsx b/extensions/ql-vscode/src/stories/model-editor/InProgressDropdown.stories.tsx new file mode 100644 index 00000000000..4f4cd2fe8c2 --- /dev/null +++ b/extensions/ql-vscode/src/stories/model-editor/InProgressDropdown.stories.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; + +import { Meta, StoryFn } from "@storybook/react"; + +import { InProgressDropdown as InProgressDropdownComponent } from "../../view/model-editor/InProgressDropdown"; + +export default { + title: "CodeQL Model Editor/In Progress Dropdown", + component: InProgressDropdownComponent, +} as Meta; + +const Template: StoryFn = (args) => ( + +); + +export const InProgressDropdown = Template.bind({}); diff --git a/extensions/ql-vscode/src/view/common/Dropdown.tsx b/extensions/ql-vscode/src/view/common/Dropdown.tsx index 0df996e6bcb..d08731d325c 100644 --- a/extensions/ql-vscode/src/view/common/Dropdown.tsx +++ b/extensions/ql-vscode/src/view/common/Dropdown.tsx @@ -19,6 +19,7 @@ type Props = { value: string | undefined; options: Array<{ value: string; label: string }>; disabled?: boolean; + className?: string; disabledPlaceholder?: string; onChange?: (event: ChangeEvent) => void; @@ -40,6 +41,7 @@ export function Dropdown({ options, disabled, disabledPlaceholder, + className, onChange, ...props }: Props) { @@ -49,6 +51,7 @@ export function Dropdown({ value={disabled ? disabledValue : value} disabled={disabled} onChange={onChange} + className={className} {...props} > {disabled ? ( diff --git a/extensions/ql-vscode/src/view/model-editor/InProgressDropdown.tsx b/extensions/ql-vscode/src/view/model-editor/InProgressDropdown.tsx index 03fb14edf63..2ade2ec87db 100644 --- a/extensions/ql-vscode/src/view/model-editor/InProgressDropdown.tsx +++ b/extensions/ql-vscode/src/view/model-editor/InProgressDropdown.tsx @@ -1,9 +1,14 @@ import * as React from "react"; +import { styled } from "styled-components"; import { Dropdown } from "../common/Dropdown"; +const StyledDropdown = styled(Dropdown)` + font-style: italic; +`; + export const InProgressDropdown = () => { return ( -