@heliux-org/design-system-core 0.0.185 → 0.0.188

package/src/components/GridSystem/GridSystem.tsx

@@ -1,13 +1,7 @@
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/react';
+import styled from '@emotion/styled';
 
 import { PropsWithChildren } from 'react';
-import { Interpolation, Theme } from '@emotion/react';
-
-type EmotionProps = {
-  css?: Interpolation<Theme>;
-};
-
 
 type ContainerProps = PropsWithChildren<{
   fluid?: boolean;
@@ -18,7 +12,8 @@ type ContainerProps = PropsWithChildren<{
   marginBottom?: string | number;
   marginLeft?: string | number;
   className?: string;
-}> & EmotionProps;
+  debug?: boolean;
+}>;
 
 interface RowProps {
   children: ReactNode;
@@ -31,6 +26,7 @@ interface RowProps {
   marginLeft?: string | number;
   fullHeight?: boolean;
   childrenMargin?: number;
+  debug?: boolean;
   [key: string]: any;
 }
 
@@ -43,6 +39,7 @@ interface ColProps {
   xl?: number;
   offset?: number;
   className?: string;
+  debug?: boolean;
   [key: string]: any;
 }
 
@@ -65,69 +62,58 @@ const getColumnWidth = (span: number): string => {
   return `${width}%`;
 };
 
-const GridContainer: React.FC<ContainerProps> = ({
-  children,
-  fluid = false,
-  fullWidth = false,
-  margin,
-  marginTop,
-  marginRight,
-  marginBottom,
-  marginLeft,
-  className = '',
-  ...props
-}) => {
-  const marginTopValue = parseMarginValue(marginTop || margin);
-  const marginRightValue = parseMarginValue(marginRight || margin);
-  const marginBottomValue = parseMarginValue(marginBottom || margin);
-  const marginLeftValue = parseMarginValue(marginLeft || margin);
-
-  const containerStyles = css`
-    box-sizing: border-box;
-    width: ${fullWidth ? `calc(100% - ${marginLeftValue} - ${marginRightValue})` : '100%'};
-    max-width: ${fluid ? 'none' : '1860px'};
-    margin-top: ${marginTopValue};
-    margin-right: ${marginRightValue};
-    margin-bottom: ${marginBottomValue};
-    margin-left: ${marginLeftValue};
-    padding-left: 15px;
-    padding-right: 15px;
-  `;
-
+const StyledContainer = styled.div<ContainerProps>`
+  box-sizing: border-box;
+  width: ${props => props.fullWidth ? `calc(100% - ${parseMarginValue(props.marginLeft || props.margin)} - ${parseMarginValue(props.marginRight || props.margin)})` : '100%'};
+  max-width: ${props => props.fluid ? 'none' : '1860px'};
+  margin-top: ${props => parseMarginValue(props.marginTop || props.margin)};
+  margin-right: ${props => parseMarginValue(props.marginRight || props.margin)};
+  margin-bottom: ${props => parseMarginValue(props.marginBottom || props.margin)};
+  margin-left: ${props => parseMarginValue(props.marginLeft || props.margin)};
+  padding-left: 15px;
+  padding-right: 15px;
+  ${props => props.debug && 'background-color: rgba(0,0,0,0.1);'}
+
+  @media (min-width: 1860px) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+`;
+
+const GridContainer: React.FC<ContainerProps> = (props) => {
   return (
-    <div css={containerStyles} className={`container ${className}`} {...props}>
-      {children}
-    </div>
+    <StyledContainer className={`container ${props.className || ''}`} {...props}>
+      {props.children}
+    </StyledContainer>
   );
 };
 
-const GridRow: React.FC<RowProps> = ({
-  children,
-  className = '',
-  nogutter = false,
-  margin,
-  marginTop,
-  marginRight,
-  marginBottom,
-  marginLeft,
-  fullHeight = false,
-  childrenMargin = 0,
-  ...props
-}) => {
+const StyledRow = styled.div<RowProps>`
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: ${props => parseMarginValue(props.marginTop || props.margin)};
+  margin-right: ${props => props.nogutter ? parseMarginValue(props.marginRight || props.margin) : `calc(${parseMarginValue(props.marginRight || props.margin)} - 15px)`};
+  margin-bottom: ${props => parseMarginValue(props.marginBottom || props.margin)};
+  margin-left: ${props => props.nogutter ? parseMarginValue(props.marginLeft || props.margin) : `calc(${parseMarginValue(props.marginLeft || props.margin)} - 15px)`};
+  ${props => props.fullHeight && `
+    height: ${props.remainingHeight};
+    > * {
+      margin: ${parseMarginValue(props.marginBottom || props.margin)}px;
+    }
+  `}
+  ${props => props.debug && 'background-color: rgba(0,0,0,0.2);'}
+`;
+
+const GridRow: React.FC<RowProps> = (props) => {
   const rowRef = useRef<HTMLDivElement>(null);
   const [remainingHeight, setRemainingHeight] = useState('100vh');
 
-  const marginTopValue = parseMarginValue(marginTop || margin);
-  const marginRightValue = parseMarginValue(marginRight || margin);
-  const marginBottomValue = parseMarginValue(marginBottom || margin);
-  const marginLeftValue = parseMarginValue(marginLeft || margin);
-
   useEffect(() => {
-    if (fullHeight && rowRef.current) {
+    if (props.fullHeight && rowRef.current) {
       const updateHeight = () => {
         const rowTop = rowRef.current?.getBoundingClientRect().top || 0;
         const windowHeight = window.innerHeight;
-        const newRemainingHeight = windowHeight - rowTop - parseFloat(marginBottomValue);
+        const newRemainingHeight = windowHeight - rowTop - parseFloat(parseMarginValue(props.marginBottom || props.margin));
         setRemainingHeight(`${newRemainingHeight}px`);
       };
 
@@ -135,83 +121,69 @@ const GridRow: React.FC<RowProps> = ({
       window.addEventListener('resize', updateHeight);
       return () => window.removeEventListener('resize', updateHeight);
     }
-  }, [fullHeight, marginBottomValue]);
-
-  const rowStyles = css`
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: ${marginTopValue};
-    margin-right: ${nogutter ? marginRightValue : `calc(${marginRightValue} - 15px)`};
-    margin-bottom: ${marginBottomValue};
-    margin-left: ${nogutter ? marginLeftValue : `calc(${marginLeftValue} - 15px)`};
-    ${fullHeight && `
-      height: ${remainingHeight};
-      > * {
-        margin: ${marginBottomValue}px;
-      }
-    `}
-  `;
+  }, [props.fullHeight, props.margin, props.marginBottom]);
 
   return (
-    <div ref={rowRef} css={rowStyles} className={`row ${className}`} {...props}>
-      {children}
-    </div>
+    <StyledRow ref={rowRef} className={`row ${props.className || ''}`} {...props} remainingHeight={remainingHeight}>
+      {props.children}
+    </StyledRow>
   );
 };
 
-const GridCol: React.FC<ColProps> = ({ xs, sm, md, lg, xl, children, className = '', ...props }) => {
-  const columnStyles = css`
-    flex: 0 0 auto;
-    padding-right: 15px;
-    padding-left: 15px;
-
-    ${xs !== undefined && `
-      flex-basis: ${getColumnWidth(xs)};
-      max-width: ${getColumnWidth(xs)};
+const StyledCol = styled.div<ColProps>`
+  flex: 0 0 auto;
+  padding-right: 15px;
+  padding-left: 15px;
+  ${props => props.debug && 'background-color: rgba(0,0,0,0.4);'}
+
+  ${props => props.xs !== undefined && `
+    flex-basis: ${getColumnWidth(props.xs)};
+    max-width: ${getColumnWidth(props.xs)};
+  `}
+
+  @media (min-width: ${breakpoints.sm}px) {
+    ${props => props.sm !== undefined && `
+      flex-basis: ${getColumnWidth(props.sm)};
+      max-width: ${getColumnWidth(props.sm)};
     `}
+  }
 
-    @media (min-width: ${breakpoints.sm}px) {
-      ${sm !== undefined && `
-        flex-basis: ${getColumnWidth(sm)};
-        max-width: ${getColumnWidth(sm)};
-      `}
-    }
-
-    @media (min-width: ${breakpoints.md}px) {
-      ${md !== undefined && `
-        flex-basis: ${getColumnWidth(md)};
-        max-width: ${getColumnWidth(md)};
-      `}
-    }
+  @media (min-width: ${breakpoints.md}px) {
+    ${props => props.md !== undefined && `
+      flex-basis: ${getColumnWidth(props.md)};
+      max-width: ${getColumnWidth(props.md)};
+    `}
+  }
 
-    @media (min-width: ${breakpoints.lg}px) {
-      ${lg !== undefined && `
-        flex-basis: ${getColumnWidth(lg)};
-        max-width: ${getColumnWidth(lg)};
-      `}
-    }
+  @media (min-width: ${breakpoints.lg}px) {
+    ${props => props.lg !== undefined && `
+      flex-basis: ${getColumnWidth(props.lg)};
+      max-width: ${getColumnWidth(props.lg)};
+    `}
+  }
 
-    @media (min-width: ${breakpoints.xl}px) {
-      ${xl !== undefined && `
-        flex-basis: ${getColumnWidth(xl)};
-        max-width: ${getColumnWidth(xl)};
-      `}
-    }
-  `;
+  @media (min-width: ${breakpoints.xl}px) {
+    ${props => props.xl !== undefined && `
+      flex-basis: ${getColumnWidth(props.xl)};
+      max-width: ${getColumnWidth(props.xl)};
+    `}
+  }
+`;
 
+const GridCol: React.FC<ColProps> = (props) => {
   return (
-    <div css={columnStyles} className={className} {...props}>
-      {children}
-    </div>
+    <StyledCol className={props.className} {...props}>
+      {props.children}
+    </StyledCol>
   );
 };
 
 const GridExample: React.FC = () => (
-  <GridContainer fullWidth margin={8}>
-    <GridRow margin={16}>
-      <GridCol xs={12} md={6} lg={4}>Column 1</GridCol>
-      <GridCol xs={12} md={6} lg={4}>Column 2</GridCol>
-      <GridCol xs={12} md={12} lg={4}>Column 3</GridCol>
+  <GridContainer fullWidth margin={8} debug>
+    <GridRow margin={16} debug>
+      <GridCol xs={12} md={6} lg={4} debug>Column 1</GridCol>
+      <GridCol xs={12} md={6} lg={4} debug>Column 2</GridCol>
+      <GridCol xs={12} md={12} lg={4} debug>Column 3</GridCol>
     </GridRow>
   </GridContainer>
 );

package/src/components/GridSystem/__stories__/GridSystem.mdx

@@ -16,18 +16,18 @@ We are using a custom grid component
 </Canvas>
 
 ```js
-import { GridCol, GridContainer, GridRow } from "../Grid";
+import { GridCol, GridContainer, GridRow } from "../GridSystem";
 
 const GridLayout = {
   render: () => {
     return (
-  <GridContainer fullWidth margin={8}>
-    <GridRow margin={16}>
-      <GridCol xs={12} md={6} lg={4}>Column 1</GridCol>
-      <GridCol xs={12} md={6} lg={4}>Column 2</GridCol>
-      <GridCol xs={12} md={12} lg={4}>Column 3</GridCol>
-    </GridRow>
-  </GridContainer>
+      <GridContainer fullWidth margin={8} debug>
+        <GridRow margin={16} debug>
+          <GridCol xs={12} md={6} lg={4} debug>Column 1</GridCol>
+          <GridCol xs={12} md={6} lg={4} debug>Column 2</GridCol>
+          <GridCol xs={12} md={12} lg={4} debug>Column 3</GridCol>
+        </GridRow>
+      </GridContainer>    
     );
   },
 

package/src/components/GridSystem/__stories__/GridSystem.stories.jsx

@@ -10,13 +10,13 @@ export default meta;
 export const GridLayout = {
   render: () => {
     return (
-      <GridContainer fullWidth margin={8}>
-      <GridRow margin={16}>
-        <GridCol xs={12} md={6} lg={4}>Column 1</GridCol>
-        <GridCol xs={12} md={6} lg={4}>Column 2</GridCol>
-        <GridCol xs={12} md={12} lg={4}>Column 3</GridCol>
-      </GridRow>
-    </GridContainer>
+      <GridContainer fullWidth margin={8} debug>
+        <GridRow margin={16} debug>
+          <GridCol xs={12} md={6} lg={4} debug>Column 1</GridCol>
+          <GridCol xs={12} md={6} lg={4} debug>Column 2</GridCol>
+          <GridCol xs={12} md={12} lg={4} debug>Column 3</GridCol>
+        </GridRow>
+      </GridContainer>    
     );
   },
 

package/src/components/PageHeader/PageHeader.tsx

@@ -2,21 +2,15 @@ import cx from "classnames";
 import React, { useState } from "react";
 import { camelCase } from "lodash-es";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
-
 import { PageHeaderType } from "./PageHeaderConstants";
-
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
-
 import Divider from "../Divider/Divider";
 import Flex from "../Flex/Flex";
 import TabList from "../Tabs/TabList/TabList";
 import Heading from "../Heading/Heading";
-
-import { Container, Row, Col } from "react-grid-system";
-
+import { GridContainer } from "../GridSystem/GridSystem";
 import { VibeComponentProps, withStaticProps } from "../../types";
-
 import styles from "./PageHeader.module.scss";
 import Text from "../Text/Text";
 import InlineEdit from "../InlineEdit/InlineEdit";
@@ -84,19 +78,22 @@ const PageHeader: React.FC<PageHeaderProps> & {
 	]);
 
 	return (
-		<aside
-			className={cx(
-				styles.PageHeader,
-				getStyle(styles, camelCase(`type-${type}`)),
-				overrideClassName
-			)}
-			role="alert"
-			data-testid={
-				dataTestId ||
-				getTestId(ComponentDefaultTestId.ATTENTION_BOX, id)
-			}
-		>
-			<Container className-={styles.PageHeader}>
+		<aside 				className={cx(
+			styles.PageHeader,
+			getStyle(styles, camelCase(`type-${type}`)),
+			overrideClassName
+		)}
+		role="alert"
+		data-testid={
+			dataTestId ||
+			getTestId(ComponentDefaultTestId.ATTENTION_BOX, id)
+		}
+>
+			<GridContainer
+				fullWidth
+				margin={8}
+				className-={styles.PageHeader}
+			>
 				<Flex>{breadcrumb}</Flex>
 				<Flex gap={5}>
 					{secondaryTitle && (
@@ -173,7 +170,7 @@ const PageHeader: React.FC<PageHeaderProps> & {
 						</Flex>
 					</div>
 				)}
-			</Container>
+			</GridContainer>
 			{divider ? (
 				<Divider className={styles.PageHeaderDivider} />
 			) : (

package/src/components/ScrollableContainer/__stories__/ScrollableContainer.mdx

@@ -18,4 +18,10 @@ import * as ScrollableContainerStories from "./ScrollableContainer.stories";
 
 ## Props
 
-<PropsTable />
+<PropsTable />
+
+## Example in a container
+
+<Canvas>
+  <Story of={ScrollableContainerStories.ContainerDemo} />
+</Canvas>

package/src/components/ScrollableContainer/__stories__/ScrollableContainer.stories.js

@@ -1,6 +1,11 @@
 import ScrollableContainer from "../ScrollableContainer";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
-
+import Box from '../../Box/Box';
+import { GridContainer } from "../../GridSystem/GridSystem";
+import Accordion from "../../Accordion/Accordion/Accordion";
+import AccordionItem from "../../Accordion/AccordionItem/AccordionItem";
+import Button from "../../Button/Button";
+import { head } from "lodash";
 const metaSettings = createStoryMetaSettingsDecorator({
   component: ScrollableContainer,
 });
@@ -38,3 +43,148 @@ export const Overview = {
     }
   }
 };
+
+
+export const ContainerDemo = {
+  render: () => {
+    return (
+		<GridContainer fullWidth marginBottom={20} marginTop={0} margin={0}>
+      <Box
+				shadow={Box.shadows.XS}
+				rounded={Box.roundeds.MEDIUM}
+				padding={Box.paddings.SMALL}
+				border={Box.borders.DEFAULT}
+        style={{ maxHeight: "500px"}}
+				className={"box-pageheader"}
+				backgroundColor={Box.backgroundColors.PRIMARY_BACKGROUND_COLOR}
+			>
+				<ScrollableContainer allowVerticalScrolling>
+					<div style={{ maxHeight: "500px"}}>
+          <Button size={Button.sizes.MEDIUM}>Medium</Button>
+						<Accordion
+							className="monday-storybook-accordion_small-wrapepr"
+							defaultIndex={[1]}
+						>
+							<AccordionItem title="Notifications">
+								<div className="monday-storybook-accordion_small-box" />
+							</AccordionItem>
+							<AccordionItem title="Setting">
+								<div className="monday-storybook-accordion_small-box" />
+							</AccordionItem>
+							<AccordionItem title="Info">
+								<div className="monday-storybook-accordion_small-box" />
+							</AccordionItem>
+							<AccordionItem title="Profile">
+								<div className="monday-storybook-accordion_small-box" />
+							</AccordionItem>
+							<AccordionItem title="Permissions">
+								<div className="monday-storybook-accordion_small-box" />
+							</AccordionItem>
+							<AccordionItem title="Security">
+								<div className="monday-storybook-accordion_small-box" />
+							</AccordionItem>
+							<AccordionItem title="Connectivity">
+								<div className="monday-storybook-accordion_small-box" />
+							</AccordionItem>
+							<AccordionItem title="Integration">
+								<div className="monday-storybook-accordion_small-box" />
+							</AccordionItem>
+							<AccordionItem title="Assets">
+								<div className="monday-storybook-accordion_small-box" />
+							</AccordionItem>
+						</Accordion>
+
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing
+							elit. Donec vel turpis vitae nulla mollis cursus.
+							Integer nec dapibus risus. Curabitur vel dolor eu
+							ligula feugiat malesuada. Phasellus bibendum dui in
+							velit vehicula, a tempor massa vestibulum. Duis ut
+							eros nec libero dignissim convallis. Fusce gravida
+							nunc ut erat scelerisque, a pharetra nisi tempus.
+							Sed ac bibendum libero. Nulla facilisi.
+						</p>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing
+							elit. Donec vel turpis vitae nulla mollis cursus.
+							Integer nec dapibus risus. Curabitur vel dolor eu
+							ligula feugiat malesuada. Phasellus bibendum dui in
+							velit vehicula, a tempor massa vestibulum. Duis ut
+							eros nec libero dignissim convallis. Fusce gravida
+							nunc ut erat scelerisque, a pharetra nisi tempus.
+							Sed ac bibendum libero. Nulla facilisi.
+						</p>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing
+							elit. Donec vel turpis vitae nulla mollis cursus.
+							Integer nec dapibus risus. Curabitur vel dolor eu
+							ligula feugiat malesuada. Phasellus bibendum dui in
+							velit vehicula, a tempor massa vestibulum. Duis ut
+							eros nec libero dignissim convallis. Fusce gravida
+							nunc ut erat scelerisque, a pharetra nisi tempus.
+							Sed ac bibendum libero. Nulla facilisi.
+						</p>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing
+							elit. Donec vel turpis vitae nulla mollis cursus.
+							Integer nec dapibus risus. Curabitur vel dolor eu
+							ligula feugiat malesuada. Phasellus bibendum dui in
+							velit vehicula, a tempor massa vestibulum. Duis ut
+							eros nec libero dignissim convallis. Fusce gravida
+							nunc ut erat scelerisque, a pharetra nisi tempus.
+							Sed ac bibendum libero. Nulla facilisi.
+						</p>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing
+							elit. Donec vel turpis vitae nulla mollis cursus.
+							Integer nec dapibus risus. Curabitur vel dolor eu
+							ligula feugiat malesuada. Phasellus bibendum dui in
+							velit vehicula, a tempor massa vestibulum. Duis ut
+							eros nec libero dignissim convallis. Fusce gravida
+							nunc ut erat scelerisque, a pharetra nisi tempus.
+							Sed ac bibendum libero. Nulla facilisi.
+						</p>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing
+							elit. Donec vel turpis vitae nulla mollis cursus.
+							Integer nec dapibus risus. Curabitur vel dolor eu
+							ligula feugiat malesuada. Phasellus bibendum dui in
+							velit vehicula, a tempor massa vestibulum. Duis ut
+							eros nec libero dignissim convallis. Fusce gravida
+							nunc ut erat scelerisque, a pharetra nisi tempus.
+							Sed ac bibendum libero. Nulla facilisi.
+						</p>
+						<p>
+							Vivamus et orci et purus elementum posuere.
+							Suspendisse ac justo ac sapien suscipit auctor.
+							Integer commodo convallis orci, a elementum libero.
+							Vivamus nec tristique nisi. Vestibulum ut sem a mi
+							sagittis gravida. Donec id orci sed justo tincidunt
+							suscipit sit amet in dui. Praesent vitae dictum leo,
+							sed facilisis augue.
+						</p>
+						<p>
+							Vivamus et orci et purus elementum posuere.
+							Suspendisse ac justo ac sapien suscipit auctor.
+							Integer commodo convallis orci, a elementum libero.
+							Vivamus nec tristique nisi. Vestibulum ut sem a mi
+							sagittis gravida. Donec id orci sed justo tincidunt
+							suscipit sit amet in dui. Praesent vitae dictum leo,
+							sed facilisis augue.
+						</p>
+					</div>
+				</ScrollableContainer>
+			</Box>
+
+		</GridContainer>
+	);
+  },
+  name: "ContainerDemo",
+  parameters: {
+    docs: {
+      story: {
+        height: "200px"
+      }
+    }
+  }
+};

package/src/components/SegmentControl/SegmentControlCell/SegmentControlCell.module.scss

@@ -1,9 +1,9 @@
 @import "~@heliux-org/ui-style/dist/mixins";
 @import "../../../styles/typography";
 @import "../../../styles/states";
+
 .segmentControlCell {
   cursor: pointer;
-  padding: var(--spacing-xs) var(--spacing-medium);
   text-align: center;
   transition: background-color 0.3s;
   color: var(--text-secondary);
@@ -20,16 +20,35 @@
     box-shadow: 0px 1px 1px 0px #00000014;
   }
 
-  &.stretched {
-    flex: 1;
-  }
-
   &:not(.active):hover {
-    background-color: var(--surface-level-200);
+    background-color: var(--surface-level-300);
+    color: var(--text-primary);
   }
 
   &.disabled {
     cursor: not-allowed;
     opacity: 0.5;
   }
+
+  &.stretched {
+    flex: 1;
+  }
+}
+
+.small {
+  padding: 0 var(--spacing-xs);
+  height: 20px;
+  font-size: 12px;
 }
+
+.medium {
+  padding: 0 var(--spacing-small);
+  height: 28px;
+  font-size: 14px;
+}
+
+.large {
+  padding: 0 var(--spacing-medium);
+  height: 36px;
+  font-size: 16px;
+}

package/src/components/SegmentControl/SegmentControlCell/SegmentControlCell.tsx

@@ -3,14 +3,16 @@ import cx from "classnames";
 import styles from "./SegmentControlCell.module.scss";
 import { SubIcon } from "../../../types";
 import Icon from "../../Icon/Icon";
+import { SegmentControlSize } from "../SegmentControlList/SegmentControlList";
 
 export interface SegmentControlCellProps {
   value: number;
   active?: boolean;
   onClick?: (value: number) => void;
-  stretched?: boolean;
   disabled?: boolean;
   icon?: SubIcon;
+  size?: SegmentControlSize;
+  stretched?: boolean;
   children?: React.ReactNode;
 }
 
@@ -18,9 +20,10 @@ const SegmentControlCell: FC<SegmentControlCellProps> = ({
   value,
   active = false,
   onClick,
-  stretched = false,
   disabled = false,
   icon,
+  size = 'medium',
+  stretched = false,
   children,
 }) => {
   const handleClick = () => {
@@ -29,10 +32,10 @@ const SegmentControlCell: FC<SegmentControlCellProps> = ({
 
   return (
     <li
-      className={cx(styles.segmentControlCell, {
+      className={cx(styles.segmentControlCell, styles[size], {
         [styles.active]: active,
-        [styles.stretched]: stretched,
         [styles.disabled]: disabled,
+        [styles.stretched]: stretched,
       })}
       role="tab"
       aria-selected={active}
@@ -45,4 +48,4 @@ const SegmentControlCell: FC<SegmentControlCellProps> = ({
   );
 };
 
-export default SegmentControlCell;
+export default SegmentControlCell;