Fix all comments

gsoft-inc · Jan 10, 2025 · feabf8f · feabf8f
1 parent 42f486a
commit feabf8f
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 37 deletions.
diff --git a/apps/docs/content/components/buttons/SegmentedControl.mdx b/apps/docs/content/components/buttons/SegmentedControl.mdx
@@ -33,6 +33,11 @@ A segmented control can contain items with icons, starting or ending.
 
 <Example src="SegmentedControl/docs/icon" />
 
+### Justified
+A segmented control can have items with similar widths.
+
+<Example src="SegmentedControl/docs/justified" />
+
 ### Controlled
 A segmented control can have a controlled selected value. In this example, it shows how it is possible to select an option.
 

diff --git a/apps/docs/examples/Preview.ts b/apps/docs/examples/Preview.ts
@@ -110,6 +110,9 @@ export const Previews: Record<string, Preview> = {
     "SegmentedControl/docs/icon": {
         component: lazy(() => import("@/../../packages/components/src/SegmentedControl/docs/icon.tsx"))
     },
+    "SegmentedControl/docs/justified": {
+        component: lazy(() => import("@/../../packages/components/src/SegmentedControl/docs/justified.tsx"))
+    },
     "SegmentedControl/docs/controlled": {
         component: lazy(() => import("@/../../packages/components/src/SegmentedControl/docs/controlled.tsx"))
     },

diff --git a/packages/components/src/SegmentedControl/docs/justified.tsx b/packages/components/src/SegmentedControl/docs/justified.tsx
@@ -0,0 +1,12 @@
+import { SegmentedControl, SegmentedControlItem } from "@hopper-ui/components";
+
+export default function Example() {
+    return (
+        <SegmentedControl width="100%" aria-label="Types of frog">
+            <SegmentedControlItem id="common" flex={1}>Common</SegmentedControlItem>
+            <SegmentedControlItem id="american" flex={1}>American Bullfrog</SegmentedControlItem>
+            <SegmentedControlItem id="month" flex={1}>Red-Eyed Tree</SegmentedControlItem>
+            <SegmentedControlItem id="year" flex={1}>Golden Mantella</SegmentedControlItem>
+        </SegmentedControl>
+    );
+}
diff --git a/packages/components/src/SegmentedControl/src/SegmentedControl.module.css b/packages/components/src/SegmentedControl/src/SegmentedControl.module.css
@@ -5,23 +5,21 @@
     --hop-SegmentedControl-background: var(--hop-neutral-surface);
     --hop-SegmentedControl-border: 0.0625rem solid var(--hop-neutral-border);
     --hop-SegmentedControl-border-radius: var(--hop-shape-rounded-md);
+    --hop-SegmentedControl-display: flex;
+    --hop-SegmentedControl-align-items: center;
+    --hop-SegmentedControl-justify-content: center;
 
-     /* Item background selected animation */
-    --hop-SegmentedControl-item-width: 0rem;
-    --hop-SegmentedControl-item-border-radius: var(--hop-shape-rounded-sm);
-    --hop-SegmentedControl-item-offset: 0rem;
-
-    display: flex;
+    display: var(--hop-SegmentedControl-display);
     gap: var(--hop-SegmentedControl-gap);
-    align-items: center;
-    justify-content: center;
+    align-items: var(--hop-SegmentedControl-align-items);
+    justify-content: var(--hop-SegmentedControl-justify-content);
 
     inline-size: var(--hop-SegmentedControl-witdh);
     padding: var(--hop-SegmentedControl-padding);
 
     background: var(--hop-SegmentedControl-background);
     border: var(--hop-SegmentedControl-border);
-    border-radius: var(--hop-SegmentedControl-border-radius)
+    border-radius: var(--hop-SegmentedControl-border-radius);
 }
 
 
diff --git a/packages/components/src/SegmentedControl/src/SegmentedControlItem.module.css b/packages/components/src/SegmentedControl/src/SegmentedControlItem.module.css
@@ -5,7 +5,11 @@
     --hop-SegmentedControlItem-background: transparent;
     --hop-SegmentedControlItem-border: none;
     --hop-SegmentedControlItem-border-radius: var(--hop-shape-rounded-sm);
-    --hop-SegmentedControlItem-cursor: auto;
+    --hop-SegmentedControlItem-cursor: pointer;
+    --hop-SegmentedControlItem-position: relative;
+    --hop-SegmentedControlItem-display: flex;
+    --hop-SegmentedControlItem-align-items: center;
+    --hop-SegmentedControlItem-justify-content: center;
 
     /* Small */
     --hop-SegmentedControlItem-sm-padding: 0.125rem var(--hop-space-inset-md);
@@ -15,21 +19,51 @@
 
     /* Slider */
     --hop-SegmentedControlItem-slider-background: var(--hop-neutral-surface-selected);
+    --hop-SegmentedControlItem-slider-position: absolute;
+    --hop-SegmentedControlItem-slider-width: 100%;
+    --hop-SegmentedControlItem-slider-height: 100%;
+
+    /* Focused */
+    --hop-SegmentedControlItem-color-focused: var(--hop-neutral-text-hover);
+    --hop-SegmentedControlItem-background-focused: var(--hop-neutral-surface-hover);
+
+    /* Hovered */
+    --hop-SegmentedControlItem-color-hovered: var(--hop-neutral-text-hover);
+    --hop-SegmentedControlItem-background-hovered: var(--hop-neutral-surface-hover);
+
+    /* Pressed */
+    --hop-SegmentedControlItem-color-pressed: var(--hop-neutral-text-press);
+    --hop-SegmentedControlItem-background-pressed: var(--hop-neutral-surface-press);
+
+    /* Selected */
+    --hop-SegmentedControlItem-color-selected: var(--hop-neutral-text-selected);
+    --hop-SegmentedControlItem-background-selected: transparent;
 
-    cursor: var(--hop-SegmentedControlItem-cursor);
+    /* Disabled */
+    --hop-SegmentedControlItem-color-disabled: var(--hop-neutral-text-disabled);
+    --hop-SegmentedControlItem-background-disabled: var(--hop-neutral-surface);
+    --hop-SegmentedControlItem-cursor-disabled: auto;
 
-    position: relative;
+    /* Internal variables */
+    --color: var(--hop-SegmentedControlItem-color);
+    --cursor: var(--hop-SegmentedControlItem-cursor);
+    --background: var(--hop-SegmentedControlItem-background);
+    --padding: var(--hop-SegmentedControlItem-sm-padding);
 
-    display: flex;
+    cursor: var(--cursor);
+
+    position: var(--hop-SegmentedControlItem-position);
+
+    display: var(--hop-SegmentedControlItem-display);
     gap: var(--hop-SegmentedControlItem-gap);
-    align-items: center;
-    justify-content: center;
+    align-items: var(--hop-SegmentedControlItem-align-items);
+    justify-content: var(--hop-SegmentedControlItem-justify-content);
 
-    padding: var(--hop-SegmentedControlItem-padding, var(--hop-SegmentedControlItem-sm-padding));
+    padding: var(--padding);
 
-    color: var(--hop-SegmentedControlItem-color);
+    color: var(--color);
 
-    background: var(--hop-SegmentedControlItem-background)
+    background: var(--background);
 }
 
 .hop-SegmentedControlItem, .hop-SegmentedControlItem__slider {
@@ -38,38 +72,40 @@
 }
 
 .hop-SegmentedControlItem__slider {
-    position: absolute;
-    inline-size: 100%;
-    block-size: 100%;
+    position: var(--hop-SegmentedControlItem-slider-position);
+    inline-size: var(--hop-SegmentedControlItem-slider-width);
+    block-size: var(--hop-SegmentedControlItem-slider-height);
     background: var(--hop-SegmentedControlItem-slider-background);
 }
 
-.hop-SegmentedControlItem:not([data-disabled]) {
-    --hop-SegmentedControlItem-cursor: pointer;
+.hop-SegmentedControlItem[data-hovered] {
+    --color: var(--hop-SegmentedControlItem-color-hovered);
+    --background: var(--hop-SegmentedControlItem-background-hovered);
 }
 
-.hop-SegmentedControlItem[data-hovered], .hop-SegmentedControlItem[data-focused] {
-    --hop-SegmentedControlItem-color: var(--hop-neutral-text-hover);
-    --hop-SegmentedControlItem-background: var(--hop-neutral-surface-hover);
+.hop-SegmentedControlItem[data-focused] {
+    --color: var(--hop-SegmentedControlItem-color-focused);
+    --background: var(--hop-SegmentedControlItem-background-focused);
 }
 
 .hop-SegmentedControlItem[data-pressed] {
-    --hop-SegmentedControlItem-color: var(--hop-neutral-text-press);
-    --hop-SegmentedControlItem-background: var(--hop-neutral-surface-press);
+    --color: var(--hop-SegmentedControlItem-color-pressed);
+    --background: var(--hop-SegmentedControlItem-background-pressed);
 }
 
 .hop-SegmentedControlItem[data-selected] {
-    --hop-SegmentedControlItem-color: var(--hop-neutral-text-selected);
-    --hop-SegmentedControlItem-background: transparent;
+    --color: var(--hop-SegmentedControlItem-color-selected);
+    --background: var(--hop-SegmentedControlItem-background-selected);
 }
 
 .hop-SegmentedControlItem[data-disabled] {
-    --hop-SegmentedControlItem-color: var(--hop-neutral-text-disabled);
-    --hop-SegmentedControlItem-background: var(--hop-neutral-surface);
+    --cursor: var(--hop-SegmentedControlItem-cursor-disabled);
+    --color: var(--hop-SegmentedControlItem-color-disabled);
+    --background: var(--hop-SegmentedControlItem-background-disabled);
 }
 
 .hop-SegmentedControlItem--md {
-    --hop-SegmentedControlItem-padding: var(--hop-SegmentedControlItem-md-padding);
+    --padding: var(--hop-SegmentedControlItem-md-padding);
 }
 
 .hop-SegmentedControlItem__icon {

diff --git a/packages/components/src/SegmentedControl/src/SegmentedControlItem.tsx b/packages/components/src/SegmentedControl/src/SegmentedControlItem.tsx
@@ -106,14 +106,16 @@ const SegmentedControlItem = (props: SegmentedControlItemProps, ref: ForwardedRe
                     <Provider
                         values={[
                             [IconContext, {
-                                size,
-                                zIndex: 1,
                                 slots: {
                                     [DEFAULT_SLOT]: {
-                                        className: styles["hop-SegmentedControlItem__icon"]
+                                        className: styles["hop-SegmentedControlItem__icon"],
+                                        size,
+                                        zIndex: 1
                                     },
                                     "start-icon": {
-                                        className: styles["hop-SegmentedControlItem__start-icon"]
+                                        className: styles["hop-SegmentedControlItem__start-icon"],
+                                        size,
+                                        zIndex: 1
                                     }
                                 }
                             }],