Update SegmentedControl

* Forward refs to SegmentedControl
* Allow passing of className via props
* Specific styles for RaidCombobox and something else
* Use small-tablet breakpoint

components/common/SegmentedControl/index.module.scss

@@ -2,20 +2,24 @@
   display: flex;
   justify-content: center;
 
-  @include breakpoint(phone) {
+  &.raid {
+    width: 100%;
+  }
+
+  @include breakpoint(small-tablet) {
     width: 100%;
   }
 
   .segmentedControl {
-    // border-radius: $unit * 3;
     display: inline-flex;
     padding: 3px;
     position: relative;
+    gap: $unit-half;
     user-select: none;
     overflow: hidden;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-    @include breakpoint(phone) {
+    @include breakpoint(small-tablet) {
       background: var(--card-bg);
       border-radius: 100px;
     }
@@ -25,6 +29,11 @@
       border-radius: $full-corner;
     }
 
+    &.background {
+      background: var(--input-bg);
+      border-radius: $full-corner;
+    }
+
     &.grow {
       flex-grow: 1;
     }
@@ -33,6 +42,10 @@
       gap: $unit;
     }
 
+    &.raid {
+      width: 100%;
+    }
+
     &.fire {
       .Segment input:checked + label {
         background: var(--fire-bg);

components/common/SegmentedControl/index.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import classNames from 'classnames'
 import styles from './index.module.scss'
 
 interface Props {
   className?: string
+  wrapperClassName?: string
   elementClass?: string
   blended?: boolean
   grow?: boolean
@@ -11,15 +12,29 @@ interface Props {
   tabIndex?: number
 }
 
-const SegmentedControl: React.FC<Props> = ({
+const SegmentedControl = React.forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<Props>
+>(function SegmentedControl(
+  {
     className,
+    wrapperClassName,
     elementClass,
     blended,
     grow,
     gap,
     tabIndex,
     children,
-}) => {
+  },
+  forwardedRef
+) {
+  const wrapperClasses = classNames(
+    {
+      [styles.wrapper]: true,
+    },
+    wrapperClassName?.split(' ').map((className) => styles[className])
+  )
+
   const classes = classNames(
     {
       [styles.segmentedControl]: true,
@@ -28,15 +43,15 @@ const SegmentedControl: React.FC<Props> = ({
       [styles.gap]: gap,
       blended: blended,
     },
-    className,
+    className?.split(' ').map((className) => styles[className]),
     elementClass
   )
   return (
-    <div className={styles.wrapper} tabIndex={tabIndex}>
+    <div className={wrapperClasses} tabIndex={tabIndex} ref={forwardedRef}>
       <div className={classes}>{children}</div>
     </div>
   )
-}
+})
 
 SegmentedControl.defaultProps = {
   blended: false,