fix: the pillar ui core mistakes and add utility classes

- make a button a inline-flex - fix the paper border typo - add border and flex utilities classes
HamzaAmar · May 20, 2024 · 7682312 · 7682312
1 parent 9968163
commit 7682312
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 9 deletions.
diff --git a/apps/docs/tsconfig.tsbuildinfo b/apps/docs/tsconfig.tsbuildinfo
diff --git a/packages/pillar-core/src/core/button/_button.css b/packages/pillar-core/src/core/button/_button.css
@@ -1,4 +1,6 @@
 .btn {
+  --flex: inline-flex;
+
   height: fit-content;
   border: 1px solid transparent;
   font-weight: 500;

diff --git a/packages/pillar-core/src/core/kbd/_kbd.css b/packages/pillar-core/src/core/kbd/_kbd.css
@@ -2,8 +2,6 @@
 
 .kdb {
   padding: 0.125em 0.25em;
-  /* background: var(--color-shared-8, var(--surface-1)); */
-  /* color: var(--color-shared-12, var(--surface-12)); */
   border: 0.075em solid transparent;
   border-bottom-width: 0.175em;
   width: fit-content;

diff --git a/packages/pillar-core/src/core/paper/paper.tsx b/packages/pillar-core/src/core/paper/paper.tsx
@@ -27,6 +27,7 @@ const paper = forwardRef((props, ref) => {
     children,
     style = {},
     className,
+    border,
     ...rest
   } = props
 
@@ -38,6 +39,7 @@ const paper = forwardRef((props, ref) => {
     [`u_margin-${m}`]: !!m,
     [`u_width-${width}`]: !!width,
     [`u_${ratio}`]: !!ratio,
+    [`u_border`]: !!border,
     [className!]: !!className,
   })
 

diff --git a/packages/pillar-core/src/core/paper/paper.type.ts b/packages/pillar-core/src/core/paper/paper.type.ts
@@ -20,9 +20,6 @@ export interface PaperProps {
   shadow?: Shadow
   width?: Width
   height?: CSSProperties['height']
-  borderPosition?: 'left' | 'right' | 'top' | 'bottom' | 'block' | 'inline' | 'all'
-  borderStyle?: CSSProperties['borderStyle']
-  borderColor?: ColorShade
-  borderWidth?: CSSProperties['borderStyle']
+  border?: boolean
   ratio?: Ratio
 }
diff --git a/packages/pillar-core/src/css/utilities/_border.css b/packages/pillar-core/src/css/utilities/_border.css
@@ -0,0 +1,3 @@
+.u_border {
+  border: 1px solid var(--surface-6);
+}
diff --git a/...pillar-core/src/css/utilities/_center.css → ...s/pillar-core/src/css/utilities/_flex.css b/...pillar-core/src/css/utilities/_center.css → ...s/pillar-core/src/css/utilities/_flex.css
@@ -1,5 +1,5 @@
 .u_center {
-  display: flex;
+  display: var(--flex, flex);
   justify-content: center;
   align-items: center;
 }

diff --git a/packages/pillar-core/src/css/utilities/_index.css b/packages/pillar-core/src/css/utilities/_index.css
@@ -6,9 +6,10 @@
 @import './_fonts.css';
 @import './_text.css';
 @import './_animation.css';
-@import './_center.css';
+@import './_flex.css';
 @import './_shadow.css';
 @import './_fontSize.css';
 @import './_corner.css';
 @import './_sizing.css';
 @import './_variants.css';
+@import './_border.css';