fix css rule override

fold-dev · Jul 22, 2024 · ab13dcf · ab13dcf
1 parent a5f8fa8
commit ab13dcf
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 32 deletions.
diff --git a/dummy-data/data-grid.tsx b/dummy-data/data-grid.tsx
@@ -1,6 +1,5 @@
-import { Badge, IconLib, Select, Text, View, getKey, useEvent, waitForRender, addElementToArray } from '@fold-dev/core'
+import { Badge, DataGridContext, DataGridTypes, IconLib, Select, Text, View, getKey, useEvent, waitForRender } from '@fold-dev/core'
 import React, { FunctionComponent, useContext, useEffect, useRef, useState } from 'react'
-import { DataGridContext, DataGridTypes } from '../src'
 
 const countries = [
     'United States',

diff --git a/packages/core/src/data-grid/data-grid.stories.tsx b/packages/core/src/data-grid/data-grid.stories.tsx
@@ -1,21 +1,19 @@
 import {
     Button,
+    DataGrid, DataGridHeader, DataGridProvider, DataGridTypes,
     FIBin,
-    FIX,
     Icon,
     Menu,
     MenuProvider,
     MenuSection,
     Portal,
     Text,
     View,
-    arrayMove,
-    useDialog,
+    dataGridState, dispatchDataGridEvent,
+    useDialog
 } from '@fold-dev/core'
-import React, { useLayoutEffect, useState } from 'react'
-import { DataGrid, DataGridHeader, DataGridProvider, DataGridTypes, dataGridState, dispatchDataGridEvent } from '../'
+import React, { useState } from 'react'
 import * as data from '../../../../dummy-data'
-import './data-grid.css'
 
 export default {
     title: 'Components/DataGrid',

diff --git a/packages/core/src/data-grid/data-grid.tsx b/packages/core/src/data-grid/data-grid.tsx
@@ -6,8 +6,8 @@ import {
     positionDOMElement,
     useDrag,
     useEvent,
-    windowObject,
 } from '../'
+import { globalCursor, windowObject } from '../helpers'
 import React, { ReactNode, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { DataGridRow } from './data-grid-row'
 import { DataGridContext } from './data-grid.provider'

diff --git a/packages/core/src/data-grid/index.ts b/packages/core/src/data-grid/index.ts
@@ -1,9 +1,9 @@
-export * from './data-grid-cell'
 export * from './data-grid-cell-component'
+export * from './data-grid-cell'
 export * from './data-grid-default-cell-component'
-export * from './data-grid-header'
-export * from './data-grid-header-cell'
 export * from './data-grid-header-cell-component'
+export * from './data-grid-header-cell'
+export * from './data-grid-header'
 export * from './data-grid-row'
 export * from './data-grid.provider'
 export * from './data-grid'

diff --git a/packages/core/src/date-picker/date-picker.css b/packages/core/src/date-picker/date-picker.css
@@ -108,7 +108,7 @@
 
 .f-date-cell.is-selected.is-start,
 .f-date-cell.is-selected.is-end {
-    color: var(--f-date-cell-edge-selected);
+    color: var(--f-date-cell-edge-selected) !important;
 }
 
 .f-date-cell.is-selected::before {

diff --git a/packages/core/src/date-picker/date-picker.stories.tsx b/packages/core/src/date-picker/date-picker.stories.tsx
@@ -2,33 +2,29 @@ import {
     Badge,
     Button,
     Card,
+    DateCell,
+    DatePicker,
+    DatePickerMonth,
+    DatePickerProvider,
+    DatePickerWeekdays,
     Heading,
     IconLib,
     Input,
     InputControl,
     InputPopover,
     InputSuffix,
+    MonthPicker,
     pad,
-    Popover,
+    ScrollingDatePicker,
     Stack,
     Text,
+    TimePicker,
+    useScrollingDatePicker,
     useVisibility,
     View,
+    YearPicker
 } from '@fold-dev/core'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import {
-    DateCell,
-    DatePicker,
-    DatePickerMonth,
-    DatePickerProvider,
-    MonthPicker,
-    ScrollingDatePicker,
-    TimePicker,
-    useScrollingDatePicker,
-    YearPicker,
-    DatePickerWeekdays,
-} from '../'
-import './date-picker.css'
+import React, { useMemo, useRef, useState } from 'react'
 
 export default {
     title: 'Components/DatePicker',

diff --git a/packages/core/src/date-picker/index.ts b/packages/core/src/date-picker/index.ts
@@ -1,8 +1,8 @@
 export * from './date-cell'
 export * from './date-picker-month'
 export * from './date-picker-weekdays'
-export * from './date-picker'
 export * from './date-picker.context'
+export * from './date-picker'
 export * from './month-picker'
 export * from './scrolling-date-picker'
 export * from './time-picker-column'

diff --git a/packages/core/src/styles/styles.css b/packages/core/src/styles/styles.css
@@ -42,11 +42,8 @@ we don't want to use !important
 @import '../cookie/cookie.css';
 @import '../copy/copy.css';
 @import '../cropper/cropper.css';
-@import '../data-grid/data-grid.css';
-@import '../date-picker/date-picker.css';
 @import '../dialog/dialog.css';
 @import '../divider/divider.css';
-@import '../drag/drag.css';
 @import '../drawer/drawer.css';
 @import '../editable/editable.css';
 @import '../form/form.css';
@@ -92,4 +89,10 @@ we don't want to use !important
 @import '../view/view.css';
 @import '../virtual/virtual.css';
 
+/* more complex components load last */
+
+@import '../drag/drag.css';
+@import '../data-grid/data-grid.css';
+@import '../date-picker/date-picker.css';
+