feat(segmentation mode): Add create, and export SEG with Brushes (#3632)

platform/ui/src/components/Select/Select.css

@@ -1,6 +1,6 @@
 .customSelect__wrapper .customSelect__control {
-  @apply border-primary-main w-full rounded border bg-black text-sm leading-tight text-white shadow transition duration-300;
-  min-height: 33px;
+  @apply border-secondary-light w-full rounded border bg-black text-sm leading-tight text-white shadow transition duration-300;
+  min-height: 28px;
 }
 .customSelect__wrapper .customSelect__control:hover {
   @apply border-gray-500;
@@ -15,6 +15,10 @@
   @apply pointer-events-none;
 }
 
+.css-1hwfws3 {
+  padding: 0;
+}
+
 .customSelect__wrapper .customSelect__indicator-separator {
   @apply hidden;
 }
@@ -36,7 +40,11 @@
 }
 
 .customSelect__wrapper .customSelect__single-value {
-  @apply text-white;
+  @apply text-aqua-pale pl-1;
+  max-width: calc(100% - 20px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .customSelect__wrapper.customSelect--is-disabled {
@@ -54,8 +62,7 @@
 
 .ohif-select .customSelect__menu-list {
   overflow-x: hidden !important;
-  margin-right: 4px;
-  margin-top: 4px;
+  margin: 4px;
   padding-top: 0px !important;
 }
 
@@ -63,6 +70,9 @@
   width: 6px;
   border-radius: 10px;
 }
+.ohif-select .customSelect__placeholder {
+  @apply text-aqua-pale pl-1.5;
+}
 
 .ohif-select .customSelect__menu-list::-webkit-scrollbar-thumb {
   background-color: #0944b3;
@@ -90,3 +100,7 @@
   border-radius: 6px;
   background-color: #151515 !important;
 }
+
+.css-1hwfws3 {
+  all: unset !important;
+}

platform/ui/src/components/Select/Select.tsx

@@ -54,6 +54,7 @@ const Select = ({
   placeholder,
   noIcons,
   menuPlacement,
+  components,
   value,
 }) => {
   const _noIconComponents = {
@@ -61,7 +62,10 @@ const Select = ({
     IndicatorSeparator: () => null,
   };
   let _components = isMulti ? { Option, MultiValue } : {};
-  _components = noIcons ? { ..._components, ..._noIconComponents } : _components;
+  _components = noIcons
+    ? { ..._components, ..._noIconComponents }
+    : { ..._components, ...components };
+
   const selectedOptions = [];
 
   // Map array of values to an array of selected options
@@ -104,8 +108,9 @@ const Select = ({
 Select.defaultProps = {
   className: '',
   closeMenuOnSelect: true,
-  hideSelectedOptions: true,
+  hideSelectedOptions: false,
   isClearable: true,
+  components: {},
   isDisabled: false,
   isMulti: false,
   isSearchable: true,

platform/ui/src/components/Select/__stories__/select.stories.mdx

@@ -0,0 +1,56 @@
+import { Select } from '../../../components';
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+
+export const argTypes = {
+  component: Select,
+  title: 'Components/Select',
+};
+
+<Meta
+  title="Components/Select"
+  component={Select}
+/>
+
+export const SelectTemplate = args => (
+  <div className="h-80 w-40">
+    <Select {...args} />
+  </div>
+);
+
+<Heading
+  title="Select"
+  componentRelativePath="Select/Select.tsx"
+/>
+
+- [Overview](#overview)
+- [Props](#props)
+- [Contribute](#contribute)
+
+## Overview
+
+Select is a component that allows you to select from a list
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      isClearable: false,
+      onChange: item => alert(item.label),
+      options: [
+        { label: 'item1', value: 1 },
+        { label: 'item2', value: 2 },
+      ],
+      value: 2,
+    }}
+  >
+    {SelectTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Select} />
+
+## Contribute
+
+<Footer componentRelativePath="Select/__stories__/Select.stories.mdx" />