fix: the incorect classes after changing them

HamzaAmar · Sep 29, 2024 · 85f11c6 · 85f11c6
1 parent d665f55
commit 85f11c6
Show file tree

Hide file tree

Showing 77 changed files with 331 additions and 335 deletions.
diff --git a/apps/docs/src/app/_components/aside/menuBarAside.tsx b/apps/docs/src/app/_components/aside/menuBarAside.tsx
@@ -38,7 +38,7 @@ const MenuBar = ({ data }: DocsProps) => {
 
   const KEYS = Object.keys(data) as MenuItemData[]
   return (
-    <Flex as="aside" data-mobile-open={open} direction="column" className="as menu-bar l_flow custom-scroll">
+    <Flex as="aside" data-mobile-open={open} direction="col" className="as menu-bar Sf-5 custom-scroll">
       <nav>
         <ul>
           {KEYS.map((key) => {

diff --git a/apps/docs/src/app/_components/aside/tableOfContent.tsx b/apps/docs/src/app/_components/aside/tableOfContent.tsx
@@ -66,7 +66,7 @@ const useScrollSpy = (selectors: string) => {
 const TableOfContent = ({ contents }: { contents: HeadingProps[] | null }) => {
   const activeId = useScrollSpy('h2,h3,h4,h5')
   return (
-    <nav className="toc-wrapper as l_flow lg-hide">
+    <nav className="toc-wrapper as Sf-5 lg-hide">
       <Paper p="3" as={Flex} gap="4" items="center">
         <ListNumber width="20" />
         <Text weight="5" size="4">

diff --git a/apps/docs/src/app/_components/header/header.tsx b/apps/docs/src/app/_components/header/header.tsx
@@ -15,19 +15,12 @@ const Header = () => {
 
   return (
     <Flex className="header" as="header" justify="between" items="center" gap="4">
-      <Link className="l_fl-1" href="/" aria-label="Go To Home Page">
+      <Link className="fl-1" href="/" aria-label="Go To Home Page">
         <Logo width="80px" className="header--logo" />
       </Link>
 
-      <Flex
-        as={Paper}
-        corner="4"
-        data-show={value}
-        justify="between"
-        gap="4"
-        className="header--input-search Fc l_fl-2"
-      >
-        <div className="l_fl-1">
+      <Flex as={Paper} corner="4" data-show={value} justify="between" gap="4" className="header--input-search Fc fl-2">
+        <div className="fl-1">
           <InputSearch fluid name="search" placeholder="Search" aria-label="search" />
         </div>
         <IconButton
@@ -40,7 +33,7 @@ const Header = () => {
         />
       </Flex>
 
-      <Flex className="l_fl-1" items="center" justify="end" gap="3">
+      <Flex className="fl-1" items="center" justify="end" gap="3">
         <SwitchMode />
         <IconButton
           variant="soft"

diff --git a/apps/docs/src/app/_components/home/accessible.tsx b/apps/docs/src/app/_components/home/accessible.tsx
@@ -4,7 +4,7 @@ import { SectionHeading } from '~/component/core/sectionHeading'
 
 export function Accessible() {
   return (
-    <Flex direction="column" justify="center" className="section" gap="8">
+    <Flex direction="col" justify="center" className="section" gap="8">
       <SectionHeading
         subheading="Pillar UI The Intuitive React UI Library"
         heading="For Building Accessible Applications Effortlessly"

diff --git a/apps/docs/src/app/_components/home/hero.tsx b/apps/docs/src/app/_components/home/hero.tsx
@@ -4,7 +4,7 @@ import { Button, Flex, IconButton, Text } from '@pillar-ui/core'
 
 export function Hero() {
   return (
-    <Flex as="section" direction="column" gap="7" justify="center" className="section hero">
+    <Flex as="section" direction="col" gap="7" justify="center" className="section hero">
       <h1 className="hero-hdg">
         <Text as="span" className="hero-ttl">
           <svg

diff --git a/apps/docs/src/app/_components/playground/flex/flexDirection.tsx b/apps/docs/src/app/_components/playground/flex/flexDirection.tsx
@@ -10,7 +10,7 @@ export const FlexDirection = () => {
   return (
     <>
       <Flex gap="4">{boxes}</Flex>
-      <Flex gap="4" direction="column">
+      <Flex gap="4" direction="col">
         {boxes}
       </Flex>
     </>

diff --git a/apps/docs/src/app/_components/playground/flex/flexNested.tsx b/apps/docs/src/app/_components/playground/flex/flexNested.tsx
@@ -7,14 +7,14 @@ const Box = (props: any) => {
 export const FlexNested = () => {
   return (
     <>
-      <Flex gap="4" direction="column">
-        <Box className="l_fl-1">header</Box>
+      <Flex gap="4" direction="col">
+        <Box className="fl-1">header</Box>
         <Flex gap="4">
-          <Box className="l_fl-1">sidebar</Box>
-          <Box className="l_fl-2">main</Box>
-          <Box className="l_fl-1">sidebar</Box>
+          <Box className="fl-1">sidebar</Box>
+          <Box className="fl-2">main</Box>
+          <Box className="fl-1">sidebar</Box>
         </Flex>
-        <Box className="l_fl-1">footer</Box>
+        <Box className="fl-1">footer</Box>
       </Flex>
     </>
   )

diff --git a/apps/docs/src/app/_components/playground/grid/grid.tsx b/apps/docs/src/app/_components/playground/grid/grid.tsx
@@ -93,11 +93,11 @@ export const GridPlacement = () => {
           header
         </GridItem>
         <GridItem placement="1 / 2 x 2 / 4" as={Grid} grid="4rem 1fr 4rem" gap="4">
-          <Box className="l_fl-1">sidebar</Box>
-          <Box className="l_fl-2">main</Box>
-          <Box className="l_fl-1">sidebar</Box>
+          <Box className="fl-1">sidebar</Box>
+          <Box className="fl-2">main</Box>
+          <Box className="fl-1">sidebar</Box>
         </GridItem>
-        <GridItem placement="2 / 3" as={Box} className="l_fl-1">
+        <GridItem placement="2 / 3" as={Box} className="fl-1">
           footer
         </GridItem>
       </Grid>

diff --git a/apps/docs/src/app/_components/playground/heading/headingLeading.tsx b/apps/docs/src/app/_components/playground/heading/headingLeading.tsx
@@ -3,10 +3,10 @@ import { Heading } from '@pillar-ui/core'
 export const HeadingLeading = () => {
   return (
     <>
-      <Heading leading="normal">This heading has a normal line height.</Heading>
-      <Heading leading="sm">This heading has a small line height.</Heading>
-      <Heading leading="md">This heading has a medium line height.</Heading>
-      <Heading leading="lg">This heading has a large line height.</Heading>
+      <Heading leading="1">This heading has a normal line height.</Heading>
+      <Heading leading="2">This heading has a small line height.</Heading>
+      <Heading leading="3">This heading has a medium line height.</Heading>
+      <Heading leading="4">This heading has a large line height.</Heading>
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/link/linkLeading.tsx b/apps/docs/src/app/_components/playground/link/linkLeading.tsx
@@ -3,10 +3,10 @@ import { Link } from '@pillar-ui/core'
 export const LinkLeading = () => {
   return (
     <>
-      <Link leading="normal">This heading has a normal line height.</Link>
-      <Link leading="sm">This heading has a small line height.</Link>
-      <Link leading="md">This heading has a medium line height.</Link>
-      <Link leading="lg">This heading has a large line height.</Link>
+      <Link leading="1">This heading has a normal line height.</Link>
+      <Link leading="2">This heading has a small line height.</Link>
+      <Link leading="3">This heading has a medium line height.</Link>
+      <Link leading="4">This heading has a large line height.</Link>
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/stepper/stepperColor.tsx b/apps/docs/src/app/_components/playground/stepper/stepperColor.tsx
@@ -11,7 +11,7 @@ export const StepperBase = (props: Omit<StepperProps, 'children' | 'setActive'>)
   const { step, setStep, isFirst, isLast, goToNext, goToPrevious } = useStepper(3)
 
   return (
-    <Flex gap="6" direction="column">
+    <Flex gap="6" direction="col">
       <Stepper active={step} setActive={setStep} {...props}>
         <StepperStep title="About" icon={<Home />} description="Hello world my name is hamza miloud amar">
           <Heading size="3">Hello World</Heading>

diff --git a/apps/docs/src/app/_components/playground/stepper/stepperCorner.tsx b/apps/docs/src/app/_components/playground/stepper/stepperCorner.tsx
@@ -11,7 +11,7 @@ export const StepperBase = (props: Omit<StepperProps, 'children' | 'setActive'>)
   const { step, setStep, isFirst, isLast, goToNext, goToPrevious } = useStepper(3)
 
   return (
-    <Flex gap="6" direction="column">
+    <Flex gap="6" direction="col">
       <Stepper active={step} setActive={setStep} {...props}>
         <StepperStep title="About" icon={<Home />} description="Hello world my name is hamza miloud amar">
           <Heading size="3">Hello World</Heading>

diff --git a/apps/docs/src/app/_components/playground/stepper/stepperSize.tsx b/apps/docs/src/app/_components/playground/stepper/stepperSize.tsx
@@ -11,7 +11,7 @@ export const StepperBase = (props: Omit<StepperProps, 'children' | 'setActive'>)
   const { step, setStep, isFirst, isLast, goToNext, goToPrevious } = useStepper(3)
 
   return (
-    <Flex gap="6" direction="column">
+    <Flex gap="6" direction="col">
       <Stepper active={step} setActive={setStep} {...props}>
         <StepperStep title="About" icon={<Home />} description="Hello world my name is hamza miloud amar">
           <Heading size="3">Hello World</Heading>

diff --git a/apps/docs/src/app/_components/playground/text/textLeading.tsx b/apps/docs/src/app/_components/playground/text/textLeading.tsx
@@ -3,10 +3,10 @@ import { Text } from '@pillar-ui/core'
 export const TextLeading = () => {
   return (
     <>
-      <Text leading="normal">This heading has a normal line height.</Text>
-      <Text leading="sm">This heading has a small line height.</Text>
-      <Text leading="md">This heading has a medium line height.</Text>
-      <Text leading="lg">This heading has a large line height.</Text>
+      <Text leading="1">This heading has a normal line height.</Text>
+      <Text leading="2">This heading has a small line height.</Text>
+      <Text leading="3">This heading has a medium line height.</Text>
+      <Text leading="4">This heading has a large line height.</Text>
     </>
   )
 }
diff --git a/apps/docs/src/app/docs/icons/page.tsx b/apps/docs/src/app/docs/icons/page.tsx
@@ -13,8 +13,8 @@ const IconsItem = ({ item }: { item: ItemProps }) => {
   const [name, Icon] = item
 
   return (
-    <Flex as={Paper} background="b-5" className="R3 Sfsm Sp4" direction="column" items="center" key={name!}>
-      <div className="icon--info l_fl-column Fc">
+    <Flex as={Paper} background="b-5" className="R3 Sfsm Sp4" direction="col" items="center" key={name!}>
+      <div className="icon--info fl-col Fc">
         <Icon width="30" />
         <Text weight="5" size="3">
           {name}

diff --git a/apps/docs/src/app/layout.tsx b/apps/docs/src/app/layout.tsx
@@ -16,7 +16,7 @@ const Layout = ({ children }: LayoutProps) => {
         <DrawerProvider>
           <NextThemeProvider>
             <Header />
-            <main className="l_fl-1">{children}</main>
+            <main className="fl-1">{children}</main>
             <Footer />
           </NextThemeProvider>
         </DrawerProvider>

diff --git a/apps/docs/src/app/not-found.tsx b/apps/docs/src/app/not-found.tsx
@@ -4,7 +4,7 @@ import { Button, Flex, Heading, Text } from '@pillar-ui/core'
 
 export default function Custom404() {
   return (
-    <Flex style={{ maxWidth: '680px' }} justify="center" direction="column" items="center" gap="5" className="hero">
+    <Flex style={{ maxWidth: '680px' }} justify="center" direction="col" items="center" gap="5" className="hero">
       <Heading size="9" weight="7">
         404 - Page Not Found
       </Heading>

diff --git a/apps/docs/tsconfig.tsbuildinfo b/apps/docs/tsconfig.tsbuildinfo
diff --git a/apps/stories/stories/InputPassword.stories.tsx b/apps/stories/stories/InputPassword.stories.tsx
@@ -15,7 +15,7 @@ const meta: Meta<typeof InputPassword> = {
 export default meta
 export const FilledInput = () => {
   return (
-    <Flex gap="4" direction="column">
+    <Flex gap="4" direction="col">
       <InputPassword aria-label="hello" autoFocus placeholder="Focus" variant="filled" />
       <InputPassword aria-label="hello" placeholder="Normal" variant="filled" />
       <InputPassword aria-label="hello" disabled placeholder="Disabled" variant="filled" />
@@ -31,7 +31,7 @@ export const FilledInput = () => {
 
 export const OutlineInput = () => {
   return (
-    <Flex gap="4" direction="column">
+    <Flex gap="4" direction="col">
       <InputPassword autoFocus placeholder="Focus" />
       <InputPassword placeholder="Normal" />
       <InputPassword disabled placeholder="Disabled" />
@@ -47,7 +47,7 @@ export const OutlineInput = () => {
 
 export const BorderedInput = () => {
   return (
-    <Flex gap="4" direction="column">
+    <Flex gap="4" direction="col">
       <InputPassword variant="bordered" autoFocus placeholder="Focus" />
       <InputPassword variant="bordered" placeholder="Normal" />
       <InputPassword variant="bordered" disabled placeholder="Disabled" />
@@ -62,7 +62,7 @@ export const BorderedInput = () => {
 
 export const CornerInput = () => {
   return (
-    <Flex gap="4" direction="column">
+    <Flex gap="4" direction="col">
       <InputPassword corner="0" placeholder="sharp" />
       <InputPassword corner="3" placeholder="3" />
       <InputPassword corner="2" placeholder="sm" />
@@ -76,7 +76,7 @@ export const CornerInput = () => {
 
 export const SizeInput = () => {
   return (
-    <Flex gap="4" direction="column">
+    <Flex gap="4" direction="col">
       <InputPassword size="4" placeholder="Small(sm)" />
       <InputPassword placeholder="Medium (md default You don't need it)" />
       <InputPassword size="6" placeholder="Large(lg)" />
@@ -86,7 +86,7 @@ export const SizeInput = () => {
 
 export const ColorInput = () => {
   return (
-    <Flex gap="4" direction="column">
+    <Flex gap="4" direction="col">
       <InputPassword color="p" variant="bordered" autoFocus placeholder="Focus" />
       <InputPassword color="w" variant="bordered" autoFocus placeholder="Normal" />
       <InputPassword color="se" variant="outline" autoFocus placeholder="Disabled" />
@@ -99,7 +99,7 @@ export const ColorInput = () => {
 
 export const InputPasswordCustomIcon = () => {
   return (
-    <Flex gap="4" direction="column">
+    <Flex gap="4" direction="col">
       <InputPassword placeholder="enter your password" color="p" visibleIcon={<Lock />} hiddenIcon={<LockOff />} />
       <InputPassword placeholder="enter your password" color="w" visibleIcon={<OpenSource />} hiddenIcon={<Close />} />
 

diff --git a/apps/stories/stories/accordion.stories.tsx b/apps/stories/stories/accordion.stories.tsx
@@ -66,7 +66,7 @@ export const AlertMultiple = () => {
 
 export const AlertCollapse = () => {
   return (
-    <Flex direction="column" gap="8">
+    <Flex direction="col" gap="8">
       <AccordionBase collapsible />
       <AccordionBase type="multiple" collapsible />
     </Flex>
@@ -175,11 +175,11 @@ export const AlertCorners = () => {
 
 export const AccordionStyle = () => {
   return (
-    <div className="l_flow-md">
+    <div className="Sf-5">
       <Accordion>
         <AccordionItem value={1}>
-          <AccordionButton className="u_red" title="Hello World" />
-          <AccordionPanel className="u_brown">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</AccordionPanel>
+          <AccordionButton className="Cd" title="Hello World" />
+          <AccordionPanel className="Ci">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</AccordionPanel>
         </AccordionItem>
         <AccordionItem value={1}>
           <AccordionButton title="Hello" />
@@ -218,7 +218,7 @@ export const AccordionStyle = () => {
 export function AlertSizeDefaults() {
   return (
     <div className="Sf3">
-      <Flex direction="column" gap="4">
+      <Flex direction="col" gap="4">
         <AccordionBase />
         <Paper style={{ '--accordion-size': '2rem' } as CSSProperties}>
           <AccordionBase />