wip

atomiks · Nov 7, 2024 · cf51e56 · cf51e56
1 parent b79116d
commit cf51e56
Show file tree

Hide file tree

Showing 14 changed files with 289 additions and 198 deletions.
diff --git a/docs/data/components/select/SelectAlign.tsx b/docs/data/components/select/SelectAlign.tsx
@@ -170,24 +170,32 @@ const SelectPopup = styled(Select.Popup)`
     0 2px 4px rgb(0 0 0 / 0.1),
     0 0 0 1px rgb(0 0 0 / 0.1);
   max-height: var(--available-height);
-  outline: 0;
   min-width: min(
     calc(var(--available-width) - ${popupPadding * 2}px),
     calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px)
   );
 `;
 
 const SelectOption = styled(Select.Option)`
-  padding: 6px 16px 6px 4px;
+  --padding: 6px;
+  --icon-size: 16px;
+  --icon-margin: 4px;
+
   outline: 0;
   cursor: default;
   border-radius: 4px;
   user-select: none;
   display: flex;
   align-items: center;
   line-height: 1.5;
+  padding-block: var(--padding);
+  padding-inline: calc(var(--padding) + var(--icon-margin) + var(--icon-size));
+
+  &[data-selected] {
+    padding-left: var(--padding);
+  }
 
-  &[data-side='none'] {
+  &[data-trigger-aligned] {
     scroll-margin: 15px;
   }
 
@@ -203,59 +211,50 @@ const SelectOption = styled(Select.Option)`
 `;
 
 const SelectOptionIndicator = styled(Select.OptionIndicator)`
-  margin-right: 4px;
+  margin-right: var(--icon-margin);
   visibility: hidden;
-  width: 16px;
-  height: 16px;
+  width: var(--icon-size);
+  height: var(--icon-size);
 
   &[data-selected] {
     visibility: visible;
   }
 `;
 
 const scrollArrowStyles = css`
+  position: relative;
   width: 100%;
   height: 15px;
   font-size: 10px;
   cursor: default;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
 
-  &[data-side='none'] {
-    height: 25px;
-  }
-
-  > div {
+  &::before {
+    content: '';
+    display: block;
     position: absolute;
-    background: white;
     width: 100%;
-    height: 15px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 5px;
+    height: calc(100% + 10px);
   }
 `;
 
 const SelectScrollUpArrow = styled(Select.ScrollUpArrow)`
   ${scrollArrowStyles}
 
-  &[data-side='none'] {
+  &::before {
     top: -10px;
-
-    > div {
-      top: 10px;
-    }
   }
 `;
 
 const SelectScrollDownArrow = styled(Select.ScrollDownArrow)`
   ${scrollArrowStyles}
   bottom: 0;
 
-  &[data-side='none'] {
-    bottom: -10px;
-
-    > div {
-      bottom: 10px;
-    }
+  &::before {
+    top: 0;
   }
 `;
diff --git a/docs/data/components/select/SelectEmpty.tsx b/docs/data/components/select/SelectEmpty.tsx
@@ -110,24 +110,32 @@ const SelectPopup = styled(Select.Popup)`
     0 2px 4px rgb(0 0 0 / 0.1),
     0 0 0 1px rgb(0 0 0 / 0.1);
   max-height: var(--available-height);
-  outline: 0;
   min-width: min(
     calc(var(--available-width) - ${popupPadding * 2}px),
     calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px)
   );
 `;
 
 const SelectOption = styled(Select.Option)`
-  padding: 6px 16px 6px 4px;
+  --padding: 6px;
+  --icon-size: 16px;
+  --icon-margin: 4px;
+
   outline: 0;
   cursor: default;
   border-radius: 4px;
   user-select: none;
   display: flex;
   align-items: center;
   line-height: 1.5;
+  padding-block: var(--padding);
+  padding-inline: calc(var(--padding) + var(--icon-margin) + var(--icon-size));
+
+  &[data-selected] {
+    padding-left: var(--padding);
+  }
 
-  &[data-side='none'] {
+  &[data-trigger-aligned] {
     scroll-margin: 15px;
   }
 
@@ -143,59 +151,50 @@ const SelectOption = styled(Select.Option)`
 `;
 
 const SelectOptionIndicator = styled(Select.OptionIndicator)`
-  margin-right: 4px;
+  margin-right: var(--icon-margin);
   visibility: hidden;
-  width: 16px;
-  height: 16px;
+  width: var(--icon-size);
+  height: var(--icon-size);
 
   &[data-selected] {
     visibility: visible;
   }
 `;
 
 const scrollArrowStyles = css`
+  position: relative;
   width: 100%;
   height: 15px;
   font-size: 10px;
   cursor: default;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
 
-  &[data-side='none'] {
-    height: 25px;
-  }
-
-  > div {
+  &::before {
+    content: '';
+    display: block;
     position: absolute;
-    background: white;
     width: 100%;
-    height: 15px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 5px;
+    height: calc(100% + 10px);
   }
 `;
 
 const SelectScrollUpArrow = styled(Select.ScrollUpArrow)`
   ${scrollArrowStyles}
 
-  &[data-side='none'] {
+  &::before {
     top: -10px;
-
-    > div {
-      top: 10px;
-    }
   }
 `;
 
 const SelectScrollDownArrow = styled(Select.ScrollDownArrow)`
   ${scrollArrowStyles}
   bottom: 0;
 
-  &[data-side='none'] {
-    bottom: -10px;
-
-    > div {
-      bottom: 10px;
-    }
+  &::before {
+    top: 0;
   }
 `;
diff --git a/docs/data/components/select/SelectGroup.tsx b/docs/data/components/select/SelectGroup.tsx
@@ -141,24 +141,32 @@ const SelectPopup = styled(Select.Popup)`
     0 2px 4px rgb(0 0 0 / 0.1),
     0 0 0 1px rgb(0 0 0 / 0.1);
   max-height: var(--available-height);
-  outline: 0;
   min-width: min(
     calc(var(--available-width) - ${popupPadding * 2}px),
     calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px)
   );
 `;
 
 const SelectOption = styled(Select.Option)`
-  padding: 6px 16px 6px 4px;
+  --padding: 6px;
+  --icon-size: 16px;
+  --icon-margin: 4px;
+
   outline: 0;
   cursor: default;
   border-radius: 4px;
   user-select: none;
   display: flex;
   align-items: center;
   line-height: 1.5;
+  padding-block: var(--padding);
+  padding-inline: calc(var(--padding) + var(--icon-margin) + var(--icon-size));
 
-  &[data-side='none'] {
+  &[data-selected] {
+    padding-left: var(--padding);
+  }
+
+  &[data-trigger-aligned] {
     scroll-margin: 15px;
   }
 
@@ -174,71 +182,62 @@ const SelectOption = styled(Select.Option)`
 `;
 
 const SelectOptionIndicator = styled(Select.OptionIndicator)`
-  margin-right: 4px;
+  margin-right: var(--icon-margin);
   visibility: hidden;
-  width: 16px;
-  height: 16px;
+  width: var(--icon-size);
+  height: var(--icon-size);
 
   &[data-selected] {
     visibility: visible;
   }
 `;
 
-const SelectGroupLabel = styled(Select.GroupLabel)`
-  font-weight: bold;
-  padding: 4px 24px;
-  cursor: default;
-  user-select: none;
-  height: 30px;
-`;
-
 const scrollArrowStyles = css`
+  position: relative;
   width: 100%;
   height: 15px;
   font-size: 10px;
   cursor: default;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
 
-  &[data-side='none'] {
-    height: 25px;
-  }
-
-  > div {
+  &::before {
+    content: '';
+    display: block;
     position: absolute;
-    background: white;
     width: 100%;
-    height: 15px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 5px;
+    height: calc(100% + 10px);
   }
 `;
 
 const SelectScrollUpArrow = styled(Select.ScrollUpArrow)`
   ${scrollArrowStyles}
 
-  &[data-side='none'] {
+  &::before {
     top: -10px;
-
-    > div {
-      top: 10px;
-    }
   }
 `;
 
 const SelectScrollDownArrow = styled(Select.ScrollDownArrow)`
   ${scrollArrowStyles}
   bottom: 0;
 
-  &[data-side='none'] {
-    bottom: -10px;
-
-    > div {
-      bottom: 10px;
-    }
+  &::before {
+    top: 0;
   }
 `;
 
+const SelectGroupLabel = styled(Select.GroupLabel)`
+  font-weight: bold;
+  padding: 4px 24px;
+  cursor: default;
+  user-select: none;
+  height: 30px;
+`;
+
 const SelectSeparator = styled(Select.Separator)`
   height: 1px;
   background-color: ${gray[300]};