diff --git a/src/components/Input2.tsx b/src/components/Input2.tsx index 8fe7e1e3..cb3ab4b1 100644 --- a/src/components/Input2.tsx +++ b/src/components/Input2.tsx @@ -128,7 +128,7 @@ const InputRootSC = styled.div<{ borderColor: $error ? theme.colors['border-danger'] : theme.colors['border-input'], - borderRadius: theme.borderRadiuses.normal, + borderRadius: theme.borderRadiuses.medium, '&:focus-within': { borderColor: theme.colors['border-outline-focused'], }, diff --git a/src/components/Select.tsx b/src/components/Select.tsx index 17e29f8a..da77288e 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -50,6 +50,7 @@ type SelectButtonProps = { showArrow?: boolean isOpen?: boolean size?: Size + transparent?: boolean } export type SelectProps = Exclude & { @@ -101,42 +102,57 @@ function Trigger({ buttonElt, isOpen, ...props }: TriggerProps) { export const TitleContent = styled.div<{ $size: Size $parentFillLevel: FillLevel -}>(({ theme, $size: size, $parentFillLevel: parentFillLevel }) => { - const hPad = theme.spacing.small - const vPad = size === 'small' ? 5 : 9 - - return { - ...theme.partials.text.caption, - alignItems: 'center', - backgroundColor: - theme.colors[parentFillLevel < 2 ? 'fill-three' : 'fill-three-selected'], - color: theme.colors.text, - display: 'flex', - flexDirection: 'row', - fontWeight: 600, - // Must specify individual padding to override Honorable styles on - paddingTop: vPad, - paddingBottom: vPad, - paddingLeft: hPad, - paddingRight: hPad, - borderRight: theme.borders.input, + $matchFill?: boolean +}>( + ({ + theme, + $size: size, + $parentFillLevel: parentFillLevel, + $matchFill: matchFill = false, + }) => { + const hPad = theme.spacing.small + const vPad = size === 'small' ? 5 : 9 + + return { + ...theme.partials.text.caption, + alignItems: 'center', + backgroundColor: matchFill + ? theme.colors[parentFillLevelToBackground[parentFillLevel]] + : theme.colors[ + parentFillLevel < 2 ? 'fill-three' : 'fill-three-selected' + ], + color: theme.colors.text, + display: 'flex', + flexDirection: 'row', + fontWeight: 600, + // Must specify individual padding to override Honorable styles on + paddingTop: vPad, + paddingBottom: vPad, + paddingLeft: hPad, + paddingRight: hPad, + borderRight: theme.borders.input, + } } -}) +) const SelectButtonInner = styled.div<{ $isOpen: boolean $size: Size $parentFillLevel: FillLevel + $transparent?: boolean }>( ({ theme, $isOpen: isOpen, $size: size, $parentFillLevel: parentFillLevel, + $transparent: transparent = false, }) => ({ ...theme.partials.reset.button, ...theme.partials.text.body2, - backgroundColor: theme.colors[parentFillLevelToBackground[parentFillLevel]], + backgroundColor: transparent + ? 'transparent' + : theme.colors[parentFillLevelToBackground[parentFillLevel]], display: 'flex', flexDirection: 'row', flexShrink: 1, @@ -176,6 +192,10 @@ const SelectButtonInner = styled.div<{ '&:focus-visible': { ...theme.partials.focus.default, }, + '&:hover': { + color: theme.colors.text, + cursor: 'pointer', + }, }) ) @@ -192,6 +212,7 @@ const SelectButton = forwardRef< showArrow = true, isOpen, size = 'medium', + transparent = false, ...props }, ref @@ -204,12 +225,14 @@ const SelectButton = forwardRef< $isOpen={isOpen} $size={size} $parentFillLevel={parentFillLevel} + $transparent={transparent} {...props} > {titleContent && ( {titleContent} @@ -271,6 +294,7 @@ function Select({ size = 'medium', width, maxHeight, + transparent = false, ...props }: SelectProps) { const stateRef = useRef | null>(null) @@ -326,6 +350,7 @@ function Select({ isOpen={state.isOpen} showArrow={!props.isDisabled} size={size} + transparent={transparent} > {(props.selectionMode === 'multiple' && state.selectedItems.length > 0 && diff --git a/src/components/icons/ProjectIcon.tsx b/src/components/icons/ProjectIcon.tsx new file mode 100644 index 00000000..9282abc0 --- /dev/null +++ b/src/components/icons/ProjectIcon.tsx @@ -0,0 +1,69 @@ +import createIcon from './createIcon' + +export default createIcon(({ size, color }) => ( + + + + + + + + + + + + + + + + + + + +)) diff --git a/src/icons.ts b/src/icons.ts index ff06d2d5..7593af32 100644 --- a/src/icons.ts +++ b/src/icons.ts @@ -143,6 +143,7 @@ export { default as PlayIcon } from './components/icons/PlayIcon' export { default as PlusIcon } from './components/icons/PlusIcon' export { default as PrClosedIcon } from './components/icons/PrClosedIcon' export { default as PrMergedIcon } from './components/icons/PrMergedIcon' +export { default as ProjectIcon } from './components/icons/ProjectIcon' export { default as PrOpenIcon } from './components/icons/PrOpenIcon' export { default as ProtectedClusterIcon } from './components/icons/ProtectedClusterIcon' export { default as PushPinIcon } from './components/icons/PushPinIcon' diff --git a/src/stories/Modal.stories.tsx b/src/stories/Modal.stories.tsx index 37fcb137..198311dd 100644 --- a/src/stories/Modal.stories.tsx +++ b/src/stories/Modal.stories.tsx @@ -154,8 +154,6 @@ const NonScrollCode = styled(Code)((_) => ({ function NonScrollTemplate(args: any) { const [open, setOpen] = useState(false) - console.log('args', args) - return ( <>

{args.header} Modal

diff --git a/src/theme/borders.ts b/src/theme/borders.ts index a76d7f73..f187542a 100644 --- a/src/theme/borders.ts +++ b/src/theme/borders.ts @@ -24,5 +24,4 @@ export const borders = { export const borderRadiuses = { medium: 3, large: 6, - normal: 3, // deprecated in favor of medium } as const satisfies Record