Style update to in-progress drop-down (#2986)

Author: charisk

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<typeof InProgressDropdownComponent>;
+
+const Template: StoryFn<typeof InProgressDropdownComponent> = (args) => (
+  <InProgressDropdownComponent />
+);
+
+export const InProgressDropdown = Template.bind({});

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<HTMLSelectElement>) => 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 ? (

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 (
-    <Dropdown
+    <StyledDropdown
       value="Thinking..."
       options={[]}
       disabled={true}