Absolutely position checkboxes

Arize-ai · Feb 23, 2022 · aa6f347 · aa6f347
1 parent af51657
commit aa6f347
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 30 deletions.
diff --git a/src/listbox/ListBoxOption.tsx b/src/listbox/ListBoxOption.tsx
@@ -99,9 +99,15 @@ export function ListBoxOption<T>(props: OptionProps<T>) {
           css={css`
             display: flex;
             justify-content: space-between;
-            align-items: center;
+            align-items: flex-start;
             color: ${theme.textColors.white90};
             padding: ${theme.spacing.padding8}px ${theme.spacing.padding16}px;
+            position: relative;
+            & > .ac-icon-wrap {
+              position: absolute;
+              top: ${theme.spacing.padding8}px;
+              right: ${theme.spacing.padding8}px;
+            }
           `}
         >
           {contents}

diff --git a/stories/Picker.stories.tsx b/stories/Picker.stories.tsx
@@ -94,7 +94,7 @@ const Gallery: Story<void> = () => {
     <Provider>
       <div
         css={css`
-          .ac-dropdown + .ac-dropdown {
+          & > * + * {
             margin-top: 16px;
           }
         `}
@@ -116,35 +116,44 @@ const Gallery: Story<void> = () => {
           <Item key="sometimes">Sometimes</Item>
           <Item key="always">Always</Item>
         </Picker>
-        <Picker
-          selectedKey={frequency}
-          onSelectionChange={selected => setFrequency(selected as string)}
+        <div
+          css={css`
+            .ac-dropdown--picker,
+            .ac-dropdown--picker .ac-dropdown-button {
+              width: 250px;
+            }
+          `}
         >
-          <Item key="rarely" textValue="Rarely">
-            <div css={itemWithDescriptionCSS}>
-              <Text>Rarely</Text>
-              <Text color="white70" textSize="small">
-                Only run on occasion
-              </Text>
-            </div>
-          </Item>
-          <Item key="sometimes" textValue="Sometimes">
-            <div css={itemWithDescriptionCSS}>
-              <Text>Sometimes</Text>
-              <Text color="white70" textSize="small">
-                Run once a day
-              </Text>
-            </div>
-          </Item>
-          <Item key="always" textValue="Always">
-            <div css={itemWithDescriptionCSS}>
-              <Text>Always</Text>
-              <Text color="white70" textSize="small">
-                Run continuously
-              </Text>
-            </div>
-          </Item>
-        </Picker>
+          <Picker
+            selectedKey={frequency}
+            onSelectionChange={selected => setFrequency(selected as string)}
+          >
+            <Item key="rarely" textValue="Rarely">
+              <div css={itemWithDescriptionCSS}>
+                <Text>Rarely</Text>
+                <Text color="white70" textSize="small">
+                  Only run on occasion
+                </Text>
+              </div>
+            </Item>
+            <Item key="sometimes" textValue="Sometimes">
+              <div css={itemWithDescriptionCSS}>
+                <Text>Sometimes</Text>
+                <Text color="white70" textSize="small">
+                  Run once a day so that things are synchronized on the daily
+                </Text>
+              </div>
+            </Item>
+            <Item key="always" textValue="Always">
+              <div css={itemWithDescriptionCSS}>
+                <Text>Always</Text>
+                <Text color="white70" textSize="small">
+                  Run continuously so that everything stays up to date
+                </Text>
+              </div>
+            </Item>
+          </Picker>
+        </div>
       </div>
     </Provider>
   );