fix: remove global styles / scope CSS (#120)

* fix: Icon prop on Button component uses incorrect capitalization (#92) * Buttons * Badge * Icon * DropdownItem * SelectBoxItem * ToggleItem * Callout * Stories * Tests * Fix incorrect props in tests * Revert "Fix incorrect props in tests" This reverts commit ee20530. * test: fix icon param in stories * Add icon to Toggle stories Co-authored-by: mitrotasios <[email protected]> * fix: remove global styles / scope CSS (#119) * add tremor-base * testing * wip * wip * wip * fix: remove global css styles * update ChartTooltip * remove tremor-elem class * fix tooltip font * Update tremor.css * minor fixes * Update tremor.css * add comments to css * inherit font * fix: add global font style * remove tremor-base from layout elems * udpate Card stories * fix: dummy fix to trigger pipeline Co-authored-by: curse <[email protected]>
tremorlabs · Oct 19, 2022 · 6a67cf2 · 6a67cf2
1 parent 98ccdc8
commit 6a67cf2
Show file tree

Hide file tree

Showing 47 changed files with 419 additions and 81 deletions.
diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -46,7 +46,12 @@ const AreaChart = ({
 }: BaseChartProps) => {
     const [legendHeight, setLegendHeight] = useState(60);
     return (
-        <div className={ classNames('tr-w-full', parseHeight(height), parseMarginTop(marginTop)) }>
+        <div
+            className={ classNames(
+                'tremor-base tr-w-full',
+                parseHeight(height), parseMarginTop(marginTop)
+            ) }
+        >
             <ResponsiveContainer width="100%" height="100%">
                 <ReChartsAreaChart data={ data }>
                     { showGridLines ? (

diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx
@@ -54,7 +54,12 @@ const BarChart = ({
 }: BarChartProps) => {
     const [legendHeight, setLegendHeight] = useState(60);
     return (
-        <div className={ classNames('tr-w-full', parseHeight(height), parseMarginTop(marginTop)) }>
+        <div className={ classNames(
+            'tremor-base tr-w-full',
+            parseHeight(height),
+            parseMarginTop(marginTop)
+        ) }
+        >
             <ResponsiveContainer width="100%" height="100%">
                 <ReChartsBarChart
                     data={ data }

diff --git a/src/components/chart-elements/LineChart/LineChart.tsx b/src/components/chart-elements/LineChart/LineChart.tsx
@@ -45,7 +45,12 @@ const LineChart = ({
 }: BaseChartProps) => {
     const [legendHeight, setLegendHeight] = useState(60);
     return (
-        <div className={ classNames('tr-w-full', parseHeight(height), parseMarginTop(marginTop)) }>
+        <div className={ classNames(
+            'tremor-base tr-w-full',
+            parseHeight(height),
+            parseMarginTop(marginTop)
+        ) }
+        >
             <ResponsiveContainer width="100%" height="100%">
                 <ReChartsLineChart data={ data }>
                     { showGridLines ? (

diff --git a/src/components/chart-elements/common/ChartTooltip.tsx b/src/components/chart-elements/common/ChartTooltip.tsx
@@ -36,14 +36,14 @@ const ChartTooltipRow = ({ value, name, color }: ChartTooltipRowProps) => (
                 boxShadow.md,
             ) } />
             <p className={ classNames(
+                'text-elem tr-font-medium tr-tabular-nums tr-text-right tr-whitespace-nowrap',
                 getColorVariantsFromColorThemeValue(defaultColors.darkText).textColor,
-                'tr-font-medium tr-tabular-nums tr-text-right tr-whitespace-nowrap'
             ) }>
                 { value }
             </p>
         </div>
         <p className={ classNames(
-            'tr-text-right tr-whitespace-nowrap',
+            'text-elem tr-text-right tr-whitespace-nowrap',
             getColorVariantsFromColorThemeValue(defaultColors.text).textColor,
             fontWeight.sm,
         ) }>
@@ -79,6 +79,7 @@ const ChartTooltip = ({ active, payload, label, colors = themeColorRange, valueF
                     border.sm.bottom,
                 ) }>
                     <p className={ classNames(
+                        'text-elem',
                         getColorVariantsFromColorThemeValue(defaultColors.darkText).textColor,
                         fontWeight.md,
                     ) }>

diff --git a/src/components/icon-elements/Badge/Badge.tsx b/src/components/icon-elements/Badge/Badge.tsx
@@ -37,7 +37,7 @@ const Badge = ({
     const badgeSize = isValidSize(size) ? size : Sizes.SM;
     const Icon = icon ? icon : null;
     return (
-        <div className={classNames(parseMarginTop(marginTop))}>
+        <div className={classNames('tremor-base', parseMarginTop(marginTop))}>
             <Tooltip content={tooltip} className={tooltip ? '' : 'tr-hidden'}>
                 <span className={classNames(
                     'tr-flex-shrink-0 tr-inline-flex tr-justify-center tr-items-center',
@@ -59,7 +59,7 @@ const Badge = ({
                         )}
                         />
                     ) : null}
-                    <p className="tr-whitespace-nowrap">{text}</p>
+                    <p className="text-elem tr-whitespace-nowrap">{text}</p>
                 </span>
             </Tooltip>
         </div>

diff --git a/src/components/icon-elements/BadgeDelta/BadgeDelta.tsx b/src/components/icon-elements/BadgeDelta/BadgeDelta.tsx
@@ -46,8 +46,8 @@ const BadgeDelta = ({
     const badgeSize = isValidSize(size) ? size : Sizes.SM;
 
     return(
-        <span className={ classNames(parseMarginTop(marginTop)) }>
-            <Tooltip content={ tooltip } className={ tooltip ? '' : 'tr-hidden' }>
+        <span className={ classNames('tremor-base', parseMarginTop(marginTop)) }>
+            <Tooltip content={ tooltip } className={ classNames( tooltip ? '' : 'tr-hidden') }>
                 <span className={ classNames(
                     'tr-flex-shrink-0 tr-inline-flex tr-justify-center tr-items-center',
                     borderRadius.full.all,
@@ -66,7 +66,7 @@ const BadgeDelta = ({
                         iconSizes[badgeSize].width,
                     ) }
                     />
-                    { text ? <p className="tr-whitespace-nowrap">{ text }</p> : null}
+                    { text ? <p className="text-elem tr-whitespace-nowrap">{ text }</p> : null}
                 </span>
             </Tooltip>
         </span>

diff --git a/src/components/icon-elements/Icon/Icon.tsx b/src/components/icon-elements/Icon/Icon.tsx
@@ -41,8 +41,8 @@ const Icon = ({
     const iconColors = isBaseColor(color) ? colors[iconVariant][color] : colors[iconVariant][BaseColors.Blue];
     const Icon = icon;
     return (
-        <span className={classNames(parseMarginTop(marginTop))}>
-            <Tooltip content={tooltip} className={tooltip ? '' : 'tr-hidden'}>
+        <span className={classNames('tremor-base', parseMarginTop(marginTop))}>
+            <Tooltip content={tooltip} className={classNames(tooltip ? '' : 'tr-hidden') }>
                 <span
                     className={classNames(
                         'tr-inline-flex tr-flex-shrink-0 tr-items-center',

diff --git a/src/components/input-elements/Button/Button.tsx b/src/components/input-elements/Button/Button.tsx
@@ -49,12 +49,12 @@ const Button = ({
     const buttonImportance = isValidImportance(importance) ? importance : Importances.Primary;
     const Icon = icon ? icon : null;
     return (
-        <span className={classNames(parseMarginTop(marginTop))}>
+        <span className={classNames('tremor-base', parseMarginTop(marginTop))}>
             <button
                 type="button"
                 onClick={handleClick}
                 className={classNames(
-                    'tr-flex-shrink-0 tr-inline-flex tr-items-center tr-group',
+                    'input-elem tr-flex-shrink-0 tr-inline-flex tr-items-center tr-group',
                     'focus:tr-outline-none focus:tr-ring-2 focus:tr-ring-offset-2 focus:tr-ring-transparent',
                     borderRadius.md.all,
                     border.sm.all,
@@ -84,7 +84,7 @@ const Button = ({
                         aria-hidden="true"
                     />
                 ) : null}
-                <p className="tr-whitespace-nowrap">
+                <p className="text-elem tr-whitespace-nowrap">
                     {text}
                 </p>
                 {Icon && (iconPosition === HorizontalPositions.Right) ? (

diff --git a/src/components/input-elements/ButtonInline/ButtonInline.tsx b/src/components/input-elements/ButtonInline/ButtonInline.tsx
@@ -37,12 +37,12 @@ const ButtonInline = ({
     const buttonSize = isValidSize(size) ? size : Sizes.SM;
     const Icon = icon ? icon : null;
     return (
-        <span className={classNames(parseMarginTop(marginTop))}>
+        <span className={classNames('tremor-base', parseMarginTop(marginTop))}>
             <button
                 type="button"
                 onClick={handleClick}
                 className={classNames(
-                    'tr-flex-shrink-0 tr-inline-flex tr-items-center tr-group tr-font-medium',
+                    'input-elem tr-flex-shrink-0 tr-inline-flex tr-items-center tr-group tr-font-medium',
                     'focus:tr-outline-none focus:tr-ring-none',
                     buttonProportions[buttonSize].fontSize,
                     getColorVariantsFromColorThemeValue(getColorTheme(color).text).textColor,
@@ -62,7 +62,7 @@ const ButtonInline = ({
                         aria-hidden="true"
                     />
                 ) : null}
-                <p className="tr-whitespace-nowrap">{text}</p>
+                <p className="text-elem tr-whitespace-nowrap">{text}</p>
                 {Icon && (iconPosition === HorizontalPositions.Right) ? (
                     <Icon
                         className={classNames(

diff --git a/src/components/input-elements/Datepicker/Datepicker.tsx b/src/components/input-elements/Datepicker/Datepicker.tsx
@@ -152,7 +152,7 @@ const Datepicker = ({
 
     return (
         <div className={ classNames(
-            'tr-relative tr-w-full',
+            'tremor-base tr-relative tr-w-full',
             parseMarginTop(marginTop),
             parseMaxWidth(maxWidth),
         ) }>
@@ -168,7 +168,7 @@ const Datepicker = ({
                     ref={ datePickerRef }
                     onClick={ () => setShowDatePickerModal(!showDatePickerModal) }
                     className={ classNames(
-                        'tr-flex tr-items-center tr-w-full tr-truncate',
+                        'input-elem tr-flex tr-items-center tr-w-full tr-truncate',
                         'focus:tr-ring-2 focus:tr-outline-none focus:tr-z-10',
                         enableRelativeDates ? border.none.right : classNames(borderRadius.md.right, border.sm.right),
                         getColorVariantsFromColorThemeValue(defaultColors.border).borderColor,
@@ -194,7 +194,7 @@ const Datepicker = ({
                         aria-hidden="true"
                     />
                     <p className={ classNames(
-                        'tr-whitespace-nowrap tr-truncate',
+                        'text-elem tr-whitespace-nowrap tr-truncate',
                         fontSize.sm,
                         fontWeight.md,
                         selectedStartDay
@@ -209,7 +209,7 @@ const Datepicker = ({
                         ref={ dropdownRef }
                         onClick={ () => setShowDropdownModal(!showDropdownModal) }
                         className={ classNames(
-                            'tr-inline-flex tr-justify-between tr-w-48 tr-truncate',
+                            'input-elem tr-inline-flex tr-justify-between tr-w-48 tr-truncate',
                             'focus:tr-ring-2 focus:tr-outline-none',
                             getColorVariantsFromColorThemeValue(defaultColors.canvasBackground).hoverBgColor,
                             getColorVariantsFromColorThemeValue(defaultColors.border).borderColor,
@@ -224,7 +224,7 @@ const Datepicker = ({
                         ) }
                     >
                         <p className={ classNames(
-                            'tr-whitespace-nowrap tr-truncate',
+                            'text-elem tr-whitespace-nowrap tr-truncate',
                             fontSize.sm,
                             fontWeight.md,
                             selectedRelativeFilterOption
@@ -277,7 +277,7 @@ const Datepicker = ({
                             type="button"
                             onClick={() => previousMonth(firstDayCurrentMonth, setCurrentMonth)}
                             className={ classNames(
-                                'tr-inline-flex focus:tr-outline-none focus:tr-ring-2',
+                                'input-elem tr-inline-flex focus:tr-outline-none focus:tr-ring-2',
                                 getColorVariantsFromColorThemeValue(defaultColors.canvasBackground).hoverBgColor,
                                 getColorVariantsFromColorThemeValue(defaultColors.border).borderColor,
                                 getColorVariantsFromColorThemeValue(defaultColors.ring).focusRingColor,
@@ -302,6 +302,7 @@ const Datepicker = ({
                             />
                         </button>
                         <h2 className={ classNames(
+                            'text-elem',
                             getColorVariantsFromColorThemeValue(defaultColors.darkestText).textColor,
                             fontSize.sm,
                             fontWeight.lg,
@@ -313,7 +314,7 @@ const Datepicker = ({
                             onClick={() => nextMonth(firstDayCurrentMonth, setCurrentMonth)}
                             type="button"
                             className={ classNames(
-                                'tr-inline-flex focus:tr-outline-none focus:tr-ring-2',
+                                'input-elem tr-inline-flex focus:tr-outline-none focus:tr-ring-2',
                                 getColorVariantsFromColorThemeValue(defaultColors.canvasBackground).hoverBgColor,
                                 getColorVariantsFromColorThemeValue(defaultColors.border).borderColor,
                                 getColorVariantsFromColorThemeValue(defaultColors.ring).focusRingColor,
@@ -377,7 +378,7 @@ const Datepicker = ({
                                     onPointerEnter={ () => setHoveredDay(day) }
                                     onPointerLeave={ () => setHoveredDay(null) }
                                     className={classNames(
-                                        'tr-w-full tr-flex tr-items-center tr-justify-center',
+                                        'input-elem tr-w-full tr-flex tr-items-center tr-justify-center',
                                         getDayBgColorClassName(
                                             day,
                                             selectedStartDay,
@@ -429,7 +430,7 @@ const Datepicker = ({
                             setShowDropdownModal(false);
                         } }
                         className={ classNames(
-                            'tr-flex tr-items-center tr-justify-between tr-w-full tr-truncate',
+                            'input-elem tr-flex tr-items-center tr-justify-between tr-w-full tr-truncate',
                             spacing.twoXl.paddingLeft,
                             spacing.twoXl.paddingRight,
                             spacing.md.paddingTop,
@@ -446,7 +447,7 @@ const Datepicker = ({
                                 )
                         ) }
                     >
-                        <p className="tr-whitespace-nowrap tr-truncate">
+                        <p className="text-elem tr-whitespace-nowrap tr-truncate">
                             { filterOption.name }
                         </p>
                     </button>

diff --git a/src/components/input-elements/Dropdown/Dropdown.tsx b/src/components/input-elements/Dropdown/Dropdown.tsx
@@ -62,7 +62,7 @@ const Dropwdown = ({
         <div
             ref={ dropdownRef }
             className={ classNames(
-                'tr-relative tr-w-full tr-min-w-[10rem]',
+                'tremor-base tr-relative tr-w-full tr-min-w-[10rem]',
                 parseMaxWidth(maxWidth),
                 getColorVariantsFromColorThemeValue(defaultColors.border).borderColor,
                 parseMarginTop(marginTop),
@@ -73,7 +73,7 @@ const Dropwdown = ({
         >
             <button
                 className={ classNames(
-                    'tr-flex tr-justify-between tr-items-center tr-w-full',
+                    'input-elem tr-flex tr-justify-between tr-items-center tr-w-full',
                     'focus:tr-ring-2 focus:tr-outline-0',
                     getColorVariantsFromColorThemeValue(defaultColors.white).bgColor,
                     getColorVariantsFromColorThemeValue(defaultColors.canvasBackground).hoverBgColor,
@@ -87,7 +87,7 @@ const Dropwdown = ({
                 onClick={ () => setShowModal(!showModal) }
             >
                 <p className={ classNames(
-                    'tr-whitespace-nowrap tr-truncate',
+                    'text-elem tr-whitespace-nowrap tr-truncate',
                     fontSize.sm,
                     fontWeight.md,
                     selectedItem

diff --git a/src/components/input-elements/Dropdown/DropdownItem.tsx b/src/components/input-elements/Dropdown/DropdownItem.tsx
@@ -30,7 +30,7 @@ const DropdownItem = ({
         <button
             onClick={() => privateProps!.handleDropdownItemClick(value)}
             className={classNames(
-                'tr-flex tr-items-center tr-justify-between tr-w-full',
+                'input-elem tr-flex tr-items-center tr-justify-between tr-w-full',
                 spacing.twoXl.paddingLeft,
                 spacing.twoXl.paddingRight,
                 spacing.md.paddingTop,
@@ -65,7 +65,7 @@ const DropdownItem = ({
                         aria-hidden="true"
                     />
                 ) : null}
-                <p className="tr-whitespace-nowrap tr-truncate">{text}</p>
+                <p className="text-elem tr-whitespace-nowrap tr-truncate">{text}</p>
             </div>
         </button>
     );

diff --git a/src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx b/src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx
@@ -94,7 +94,7 @@ const MultiSelectBox = ({
         <div
             ref={ dropdownRef }
             className={ classNames(
-                'tr-relative tr-w-full tr-min-w-[10rem]',
+                'tremor-base tr-relative tr-w-full tr-min-w-[10rem]',
                 parseMaxWidth(maxWidth),
                 getColorVariantsFromColorThemeValue(defaultColors.border).borderColor,
                 parseMarginTop(marginTop),
@@ -105,7 +105,7 @@ const MultiSelectBox = ({
         >
             <button
                 className={ classNames(
-                    'tr-flex tr-justify-between tr-items-center tr-w-full',
+                    'input-elem tr-flex tr-justify-between tr-items-center tr-w-full',
                     'focus:tr-ring-2 focus:tr-outline-0',
                     getColorVariantsFromColorThemeValue(defaultColors.white).bgColor,
                     getColorVariantsFromColorThemeValue(defaultColors.canvasBackground).hoverBgColor,
@@ -119,7 +119,7 @@ const MultiSelectBox = ({
                 onClick={ () => setShowModal(!showModal) }
             >
                 <p className={ classNames(
-                    'tr-whitespace-nowrap tr-truncate',
+                    'text-elem tr-whitespace-nowrap tr-truncate',
                     fontSize.sm,
                     fontWeight.md,
                     selectedItems.length !==0
@@ -187,7 +187,7 @@ const MultiSelectBox = ({
                         type="input"
                         placeholder="Search"
                         className={ classNames(
-                            'tr-w-full focus:tr-outline-none focus:tr-ring-none',
+                            'input-elem tr-w-full focus:tr-outline-none focus:tr-ring-none',
                             getColorVariantsFromColorThemeValue(defaultColors.darkText).textColor,
                             getColorVariantsFromColorThemeValue(defaultColors.transparent).bgColor,
                             spacing.sm.paddingTop,

diff --git a/src/components/input-elements/MultiSelectBox/MultiSelectBoxItem.tsx b/src/components/input-elements/MultiSelectBox/MultiSelectBoxItem.tsx
@@ -29,7 +29,7 @@ const MultiSelectBoxItem = ({
     <button
         onClick={ () => privateProps!.handleMultiSelectBoxItemClick(value) }
         className={ classNames(
-            'tr-flex tr-items-center tr-justify-between tr-w-full',
+            'input-elem tr-flex tr-items-center tr-justify-between tr-w-full',
             spacing.twoXl.paddingLeft,
             spacing.twoXl.paddingRight,
             spacing.md.paddingTop,
@@ -43,7 +43,7 @@ const MultiSelectBoxItem = ({
             <input
                 type="checkbox"
                 className={ classNames(
-                    'tr-flex-none focus:tr-ring-none focus:tr-outline-none tr-cursor-pointer',
+                    'input-elem tr-flex-none focus:tr-ring-none focus:tr-outline-none tr-cursor-pointer',
                     getColorVariantsFromColorThemeValue(defaultColors.lightRing).focusRingColor,
                     getColorVariantsFromColorThemeValue(getColorTheme(BaseColors.Blue).text).textColor,
                     getColorVariantsFromColorThemeValue(defaultColors.border).borderColor,
@@ -54,7 +54,7 @@ const MultiSelectBoxItem = ({
                 checked={ privateProps!.isActive }
                 readOnly={ true }
             />
-            <p className="tr-whitespace-nowrap tr-truncate">{ text }</p>
+            <p className="text-elem tr-whitespace-nowrap tr-truncate">{ text }</p>
         </div>
     </button>
 );