Merge pull request #14 from inkonchain/feat/remove-preflight

feat: remove preflight, introduce our own reset
inkonchain · Nov 18, 2024 · 055511f · 055511f
2 parents 22e4611 + 1662849
commit 055511f
Show file tree

Hide file tree

Showing 7 changed files with 415 additions and 6 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,5 +1,9 @@
 import React, { type ElementType } from "react";
-import { classNames, variantClassNames } from "../../util/classes";
+import {
+  classNames,
+  resetClasses,
+  variantClassNames,
+} from "../../util/classes";
 import { PolymorphicProps } from "../polymorphic";
 
 const DEFAULT_BUTTON_TAG = "button" as const;
@@ -29,7 +33,8 @@ export const Button = <T extends ElementType = typeof DEFAULT_BUTTON_TAG>({
   return (
     <Component
       className={classNames(
-        "ink-rounded-full ink-font-bold ink-transition-colors disabled:ink-cursor-not-allowed ink-duration-100 ink-font-default",
+        resetClasses,
+        "ink-rounded-full ink-font-bold ink-transition-colors disabled:ink-cursor-not-allowed ink-duration-100",
         "ink-flex ink-items-center ink-justify-center ink-gap-1 ink-select-none",
         variantClassNames(variant, {
           primary:

diff --git a/src/components/SegmentedControl/SegmentedControl.tsx b/src/components/SegmentedControl/SegmentedControl.tsx
@@ -1,5 +1,9 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { classNames, variantClassNames } from "../../util/classes";
+import {
+  classNames,
+  resetClasses,
+  variantClassNames,
+} from "../../util/classes";
 import { DisplayOnProps } from "../../util/theme";
 
 export interface SegmentedControlProps<T extends string>
@@ -50,7 +54,7 @@ export const SegmentedControl = <T extends string>({
     <div className="ink-relative">
       {isMounted && selectedOption && (
         <div
-          className="ink-absolute ink-transition-all ink-duration-200 ink-p-0.5"
+          className="ink-absolute ink-transition-all ink-duration-200 ink-p-0.5 ink-preflight"
           style={{
             top: 0,
             bottom: 0,
@@ -83,7 +87,8 @@ export const SegmentedControl = <T extends string>({
         {options.map((option, index) => (
           <button
             className={classNames(
-              "ink-px-4 ink-py-2 ink-rounded-full ink-relative ink-z-10 ink-transition-colors ink-duration-200",
+              resetClasses,
+              "ink-px-4 ink-py-2 ink-rounded-full ink-relative ink-z-10 ink-transition-colors ink-duration-200 ink-select-none",
               selectedOption === option.value
                 ? "ink-text-text-default"
                 : "ink-text-text-on-secondary"

diff --git a/src/styles/Colors.stories.tsx b/src/styles/Colors.stories.tsx
@@ -16,7 +16,7 @@ function Colors() {
     "ink-bg-status-alert-bg ink-text-status-alert",
   ];
   return (
-    <div className="ink-flex ink-gap-2 ink-flex-wrap">
+    <div className="ink-flex ink-gap-2 ink-flex-wrap ink-font-default">
       {colors.map((color) => (
         <div
           key={color}