Skip to content

Commit 3b96504

Browse files
shiftpshshiftpsh
authored
Merge pull request #49 from solved-ac/feature/length
CSSLength; Fix tables
2 parents ef724d9 + cf4eea3 commit 3b96504

File tree

14 files changed

+125
-67
lines changed

14 files changed

+125
-67
lines changed

‎example/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"dependencies": {
1515
"@emotion/react": "link:../node_modules/@emotion/react",
1616
"@emotion/styled": "link:../node_modules/@emotion/styled",
17-
"@floating-ui/react-dom-interactions": "link:../node_modules/@floating-ui/react-dom-interactions",
17+
"@floating-ui/react": "link:../node_modules/@floating-ui/react",
1818
"@solved-ac/ui-react": "link:..",
1919
"@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",
2020
"@testing-library/react": "link:../node_modules/@testing-library/react",

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@
3232
"peerDependencies": {
3333
"@emotion/react": ">=11",
3434
"@emotion/styled": ">=11",
35-
"@floating-ui/react-dom-interactions": "^0.13.3",
36-
"framer-motion": "6.x",
35+
"@floating-ui/react": "^0.24.3",
36+
"framer-motion": ">=6",
3737
"react": ">=17",
3838
"react-dom": ">=17"
3939
},
@@ -42,7 +42,7 @@
4242
"@babel/plugin-proposal-optional-chaining": "^7.16.7",
4343
"@emotion/react": "^11.1.5",
4444
"@emotion/styled": "^11.1.5",
45-
"@floating-ui/react-dom-interactions": "^0.13.3",
45+
"@floating-ui/react": "^0.24.3",
4646
"@tabler/icons-react": "^2.11.0",
4747
"@testing-library/jest-dom": "^4.2.4",
4848
"@testing-library/react": "^9.5.0",

‎src/components/$Table/Cell.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const paddingMap = {
1515

1616
interface CellContainerProps {
1717
padding: 'none' | 'dense' | 'normal' | 'wide'
18+
verticalAlign: 'top' | 'middle' | 'bottom'
1819
numeric: boolean
1920
header: boolean
2021
}
@@ -28,13 +29,15 @@ const CellContainer = styled.td<CellContainerProps>`
2829
display: table-cell;
2930
border-bottom: ${({ theme }) => theme.styles.border()};
3031
${({ padding }) => paddingMap[padding]}
32+
${({ verticalAlign }) => `vertical-align: ${verticalAlign};`}
3133
${({ numeric }) =>
3234
numeric && "text-align: right; font-feature-settings: 'tnum';"}
3335
${({ header }) => header && whenHeader}
3436
`
3537

3638
export interface CellProps {
3739
padding?: 'none' | 'dense' | 'normal' | 'wide'
40+
verticalAlign?: 'top' | 'middle' | 'bottom'
3841
header?: boolean
3942
numeric?: boolean
4043
}
@@ -45,6 +48,7 @@ export const Cell: PC<'td', CellProps> = forwardRefWithGenerics(
4548
const tableRowGroupContext = useContext(TableRowGroupContext)
4649
const {
4750
padding = tableContext.padding,
51+
verticalAlign = tableRowGroupContext.verticalAlign,
4852
header = tableRowGroupContext.header,
4953
as,
5054
numeric = false,
@@ -56,6 +60,7 @@ export const Cell: PC<'td', CellProps> = forwardRefWithGenerics(
5660
return (
5761
<CellContainer
5862
padding={padding}
63+
verticalAlign={verticalAlign}
5964
numeric={numeric}
6065
header={header}
6166
ref={ref}

‎src/components/$Table/Row.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const RowContainer = styled.tr<RowContainerProps>`
1616
export interface RowProps {
1717
header?: boolean
1818
padding?: 'none' | 'dense' | 'normal' | 'wide'
19+
verticalAlign?: 'top' | 'middle' | 'bottom'
1920
}
2021

2122
export const Row: PC<'tr', RowProps> = forwardRefWithGenerics(
@@ -24,12 +25,15 @@ export const Row: PC<'tr', RowProps> = forwardRefWithGenerics(
2425
const {
2526
header = false,
2627
padding = tableContext.padding,
28+
verticalAlign = tableContext.verticalAlign,
2729
as = 'tr',
2830
...rest
2931
} = props
3032

3133
return (
32-
<TableContext.Provider value={{ ...tableContext, padding }}>
34+
<TableContext.Provider
35+
value={{ ...tableContext, padding, verticalAlign }}
36+
>
3337
<RowContainer header={header} ref={ref} as={as} {...rest} />
3438
</TableContext.Provider>
3539
)

‎src/components/$Table/TableContext.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import React from 'react'
33
export interface TableContextProps {
44
padding: 'none' | 'dense' | 'normal' | 'wide'
55
sticky: boolean | number | string
6+
verticalAlign: 'top' | 'middle' | 'bottom'
67
}
78

89
export const TableContext = React.createContext<TableContextProps>({
910
padding: 'normal',
1011
sticky: false,
12+
verticalAlign: 'top',
1113
})

‎src/components/$Table/TableHead.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,21 @@ const TableHeadContainer = styled.thead<TableHeadContainerProps>`
2828

2929
export interface TableHeadProps {
3030
sticky?: boolean | number | string
31+
verticalAlign?: 'top' | 'middle' | 'bottom'
3132
}
3233

3334
export const TableHead: PC<'thead', TableHeadProps> = forwardRefWithGenerics(
3435
<T extends ElementType>(props: PP<T, TableHeadProps>, ref?: PR<T>) => {
3536
const tableContext = useContext(TableContext)
36-
const { sticky = tableContext.sticky, as = 'thead', ...rest } = props
37+
const {
38+
sticky = tableContext.sticky,
39+
verticalAlign = tableContext.verticalAlign,
40+
as = 'thead',
41+
...rest
42+
} = props
3743

3844
return (
39-
<TableRowGroupContext.Provider value={{ header: true }}>
45+
<TableRowGroupContext.Provider value={{ header: true, verticalAlign }}>
4046
<TableHeadContainer sticky={sticky} ref={ref} as={as} {...rest} />
4147
</TableRowGroupContext.Provider>
4248
)

‎src/components/$Table/TableRowGroupContext.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import React from 'react'
22

33
export interface TableRowGroupContextProps {
44
header: boolean
5+
verticalAlign: 'top' | 'middle' | 'bottom'
56
}
67

78
export const TableRowGroupContext =
89
React.createContext<TableRowGroupContextProps>({
910
header: false,
11+
verticalAlign: 'top',
1012
})

‎src/components/Select.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
useListNavigation,
1717
useRole,
1818
useTypeahead,
19-
} from '@floating-ui/react-dom-interactions'
19+
} from '@floating-ui/react'
2020
import { IconChevronDown } from '@tabler/icons-react'
2121
import { AnimatePresence, motion } from 'framer-motion'
2222
import { ellipsis } from 'polished'
@@ -142,7 +142,7 @@ export const Select = forwardRefWithGenerics(
142142
}
143143
}, [value])
144144

145-
const { x, y, reference, floating, strategy, context, refs } = useFloating({
145+
const { x, y, refs, strategy, context } = useFloating({
146146
placement: 'bottom',
147147
open,
148148
onOpenChange: setOpen,
@@ -168,6 +168,8 @@ export const Select = forwardRefWithGenerics(
168168
],
169169
})
170170

171+
const { reference } = refs
172+
171173
useImperativeHandle(ref, () => reference)
172174

173175
const { getReferenceProps, getFloatingProps, getItemProps } =
@@ -251,12 +253,12 @@ export const Select = forwardRefWithGenerics(
251253
return (
252254
<React.Fragment>
253255
<SelectDisplay
256+
ref={refs.setReference}
254257
fullWidth={fullWidth}
255258
ellipsis={!disableEllipsis}
256259
role="button"
257260
tabIndex={0}
258261
type="button"
259-
ref={reference}
260262
{...getReferenceProps({
261263
onTouchStart() {
262264
setTouch(true)
@@ -280,14 +282,14 @@ export const Select = forwardRefWithGenerics(
280282
<FloatingOverlay lockScroll={!touch} style={{ zIndex: 1 }}>
281283
<FloatingFocusManager context={context}>
282284
<SelectItemsWrapper
283-
ref={floating}
284285
style={{
285286
position: strategy,
286287
top: y ?? 0,
287288
left: x ?? 0,
288289
originX: 0.5,
289290
originY: 0,
290291
}}
292+
ref={refs.setFloating}
291293
{...getFloatingProps({
292294
onKeyDown() {
293295
setControlledScrolling(true)

‎src/components/Tooltip.tsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import {
99
shift,
1010
useFloating,
1111
useHover,
12-
useInteractions
13-
} from '@floating-ui/react-dom-interactions'
12+
useInteractions,
13+
} from '@floating-ui/react'
1414
import { AnimatePresence, motion } from 'framer-motion'
1515
import { transparentize } from 'polished'
1616
import React, { ReactNode, useRef, useState } from 'react'
@@ -80,8 +80,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
8080
const {
8181
x,
8282
y,
83-
reference,
84-
floating,
83+
refs,
8584
strategy,
8685
context,
8786
placement,
@@ -115,11 +114,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
115114

116115
return (
117116
<React.Fragment>
118-
<TooltipWrapper
119-
{...getReferenceProps({
120-
ref: reference,
121-
})}
122-
>
117+
<TooltipWrapper ref={refs.setReference} {...getReferenceProps()}>
123118
{children}
124119
</TooltipWrapper>
125120
<FloatingPortal>
@@ -128,8 +123,8 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
128123
{isOpen && (
129124
<React.Fragment>
130125
<RenderComponent
126+
ref={refs.setFloating}
131127
{...getFloatingProps({
132-
ref: floating,
133128
style: {
134129
position: strategy,
135130
top: y || 0,

‎src/styles/Themes.ts

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import { transparentize } from 'polished'
2+
import { CSSLength } from '../types/length'
3+
import { cssDiv } from '../utils/css'
4+
import { cssLength } from '../utils/length'
25

36
const defaultPalette = {
47
white: '#ffffff',
@@ -50,23 +53,20 @@ const defaultPalette = {
5053
},
5154
}
5255

56+
export interface SolvedTextColor {
57+
main: string
58+
inverted: string
59+
light: string
60+
dark: string
61+
}
62+
5363
export interface SolvedTheme {
5464
name: string
5565
color: {
5666
solvedAc: string
5767
text: {
58-
primary: {
59-
main: string
60-
inverted: string
61-
light: string
62-
dark: string
63-
}
64-
secondary: {
65-
main: string
66-
inverted: string
67-
light: string
68-
dark: string
69-
}
68+
primary: SolvedTextColor
69+
secondary: SolvedTextColor
7070
}
7171
background: {
7272
page: string
@@ -95,7 +95,7 @@ export interface SolvedTheme {
9595
}
9696
styles: {
9797
border: (color?: string) => string
98-
shadow: (color?: string, length?: number) => string
98+
shadow: (color?: string, length?: CSSLength) => string
9999
}
100100
}
101101

@@ -139,10 +139,11 @@ const Light: SolvedTheme = {
139139
styles: {
140140
border: (color?: string) =>
141141
`1px solid ${color || defaultPalette.gray[200]}`,
142-
shadow: (color?: string, length?: number) =>
143-
`${transparentize(0.6, color || defaultPalette.gray[200])} 0px ${
144-
(length || 8) / 2
145-
}px ${length || 8}px`,
142+
shadow: (color?: string, length?: CSSLength) =>
143+
`${transparentize(
144+
0.6,
145+
color || defaultPalette.gray[200]
146+
)} 0px ${cssLength(cssDiv(length || 8, 2))} ${cssLength(length || 8)}`,
146147
},
147148
}
148149

@@ -177,10 +178,11 @@ const Dark: SolvedTheme = {
177178
styles: {
178179
border: (color?: string) =>
179180
`1px solid ${(color || defaultPalette.gray[700]).toString()}`,
180-
shadow: (color?: string, length?: number) =>
181-
`${transparentize(0.6, color || defaultPalette.gray[200])} 0px ${
182-
(length || 8) / 2
183-
}px ${length || 8}px`,
181+
shadow: (color?: string, length?: CSSLength) =>
182+
`${transparentize(
183+
0.6,
184+
color || defaultPalette.gray[200]
185+
)} 0px ${cssLength(cssDiv(length || 8, 2))} ${cssLength(length || 8)}`,
184186
},
185187
}
186188

@@ -200,10 +202,11 @@ const Black: SolvedTheme = {
200202
styles: {
201203
border: (color?: string) =>
202204
`1px solid ${(color || defaultPalette.gray[900]).toString()}`,
203-
shadow: (color?: string, length?: number) =>
204-
`${transparentize(0.6, color || defaultPalette.gray[200])} 0px ${
205-
(length || 8) / 2
206-
}px ${length || 8}px`,
205+
shadow: (color?: string, length?: CSSLength) =>
206+
`${transparentize(
207+
0.6,
208+
color || defaultPalette.gray[200]
209+
)} 0px ${cssLength(cssDiv(length || 8, 2))} ${cssLength(length || 8)}`,
207210
},
208211
}
209212

0 commit comments

Comments
 (0)