urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-19 16:51:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4808 from urbit/lf/flex-shrink-typings

Browse Source 
interface: fix flex-shrink typings
This commit is contained in:
matildepark 2021-04-22 17:09:39 -04:00 committed by GitHub
commit 906f513959
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 38 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
View File

@ -67,7 +67,7 @@ export const DayBreak = ({ when, shimTop = false }: DayBreakProps) => (
<Rule borderColor='lightGray' />
<Text
gray
flexShrink='0'
flexShrink={0}
whiteSpace='nowrap'
textAlign='center'
fontSize={0}
@ -109,7 +109,7 @@ export const UnreadMarker = React.forwardRef(
<Text
color='blue'
fontSize={0}
flexShrink='0'
flexShrink={0}
whiteSpace='nowrap'
textAlign='center'
px={2}
@ -170,7 +170,7 @@ const MessageActions = ({ api, onReply, association, history, msg, group }) => {
width='auto'
alignY='top'
alignX='right'
flexShrink={'0'}
flexShrink={0}
offsetY={8}
offsetX={-24}
options={

2
pkg/interface/src/views/apps/publish/components/NoteForm.tsx
View File

@ -44,7 +44,7 @@ export function PostForm(props: PostFormProps) {
validateOnBlur
>
<Form style={{ display: 'contents' }}>
<Row flexShrink='0' flexDirection={['column-reverse', 'row']} mb={4} gapX={4} justifyContent='space-between'>
<Row flexShrink={0} flexDirection={['column-reverse', 'row']} mb={4} gapX={4} justifyContent='space-between'>
<Input maxWidth='40rem' width='100%' flexShrink={[0, 1]} placeholder="Post Title" id="title" />
<Row flexDirection={['column', 'row']} mb={[4,0]}>
<AsyncButton

4
pkg/interface/src/views/components/ChipInput.tsx
View File

@ -115,8 +115,8 @@ export function ChipInput(props: ChipInputProps): ReactElement {
<Input
width="auto"
height="24px"
flexShrink="1"
flexGrow="1"
flexShrink={1}
flexGrow={1}
pl="0"
ref={inputRef}
onChange={onChange}

5
pkg/interface/src/views/components/Dropdown.tsx
View File

@ -25,6 +25,7 @@ interface DropdownProps {
offsetY?: number;
width?: string;
dropWidth?: string;
flexShrink?: number;
}
const ClickBox = styled(Box)`
@ -39,7 +40,7 @@ const DropdownOptions = styled(Box)`
`;
export function Dropdown(props: DropdownProps): ReactElement {
const { children, options, offsetX = 0, offsetY = 0 } = props;
const { children, options, offsetX = 0, offsetY = 0, flexShrink = 1 } = props;
const dropdownRef = useRef<HTMLElement>(null);
const anchorRef = useRef<HTMLElement>(null);
const { pathname } = useLocation();
@ -86,7 +87,7 @@ export function Dropdown(props: DropdownProps): ReactElement {
}, []);
return (
<Box flexShrink={props?.flexShrink ? props.flexShrink : 1} position={open ? 'relative' : 'static'} minWidth='0' width={props?.width ? props.width : 'auto'}>
<Box flexShrink={flexShrink} position={open ? 'relative' : 'static'} minWidth='0' width={props?.width ? props.width : 'auto'}>
<ClickBox width='100%' ref={anchorRef} onClick={onOpen}>
{children}
</ClickBox>

4
pkg/interface/src/views/landscape/components/GroupSummary.tsx
View File

@ -29,9 +29,9 @@ export function GroupSummary(props: GroupSummaryProps & PropFunc<typeof Col>): R
width="40px"
height="40px"
metadata={metadata}
flexShrink="0"
flexShrink={0}
/>
<Col justifyContent="space-between" flexGrow="1" overflow="hidden">
<Col justifyContent="space-between" flexGrow={1} overflow="hidden">
<Text
fontSize="1"
textOverflow="ellipsis"

2
pkg/interface/src/views/landscape/components/GroupSwitcher.tsx
View File

@ -180,7 +180,7 @@ export function GroupSwitcher(props: {
>
<Row flexGrow={1} alignItems="center" width='100%' minWidth='0' flexShrink={0}>
{ metadata && <MetadataIcon flexShrink={0} mr="2" metadata={metadata} height="24px" width="24px" /> }
<Text flexShrink={1} lineHeight="1.1" fontSize='2' fontWeight="600" overflow='hidden' display='inline-block' flexShrink='1' style={{ textOverflow: 'ellipsis', whiteSpace: 'pre' }}>{title}</Text>
<Text flexShrink={1} lineHeight="1.1" fontSize='2' fontWeight="600" overflow='hidden' display='inline-block' style={{ textOverflow: 'ellipsis', whiteSpace: 'pre' }}>{title}</Text>
</Row>
</Dropdown>
<Row pr='3' verticalAlign="middle">

2
pkg/interface/src/views/landscape/components/GroupifyForm.tsx
View File

@ -69,7 +69,7 @@ export function GroupifyForm(props: GroupifyFormProps) {
onSubmit={onGroupify}
>
<Form>
<Col flexShrink="0" gapY="4" maxWidth="512px">
<Col flexShrink={0} gapY="4" maxWidth="512px">
<Box>
<Text fontWeight="500">Groupify this channel</Text>
</Box>

2
pkg/interface/src/views/landscape/components/JoinGroup.tsx
View File

@ -177,7 +177,7 @@ export function JoinGroup(props: JoinGroupProps): ReactElement {
<Text gray fontSize="1">
Channels
</Text>
<Box width="100%" flexShrink="0">
<Box width="100%" flexShrink={0}>
{Object.values(preview.channels).map(({ metadata }: any) => (
<Row width="100%">
<Icon

7
pkg/interface/src/views/landscape/components/NewChannel.tsx
View File

@ -11,7 +11,7 @@ import * as Yup from 'yup';
import GlobalApi from '~/logic/api/global';
import { AsyncButton } from '~/views/components/AsyncButton';
import { FormError } from '~/views/components/FormError';
import { RouteComponentProps } from 'react-router-dom';
import { RouteComponentProps, useHistory } from 'react-router-dom';
import { stringToSymbol, parentPath, deSig } from '~/logic/lib/util';
import { resourceFromPath } from '~/logic/lib/group';
import { Associations } from '@urbit/api/metadata';
@ -46,8 +46,9 @@ interface NewChannelProps {
workspace: Workspace;
}
export function NewChannel(props: NewChannelProps & RouteComponentProps): ReactElement {
const { history, api, group, workspace } = props;
export function NewChannel(props: NewChannelProps): ReactElement {
const history = useHistory();
const { api, group, workspace } = props;
const groups = useGroupState(state => state.groups);
const waiter = useWaitForProps({ groups }, 5000);

6
pkg/interface/src/views/landscape/components/Participants.tsx
View File

@ -181,9 +181,9 @@ export function Participants(props: {
mb={2}
px={2}
zIndex={1}
flexShrink="0"
flexShrink={0}
>
<Row mr="4" flexShrink="0">
<Row mr="4" flexShrink={0}>
<Tab
selected={filter}
setSelected={setFilter}
@ -206,7 +206,7 @@ export function Participants(props: {
/>
</Row>
</Row>
<Col flexShrink="0" width="100%" height="fit-content">
<Col flexShrink={0} width="100%" height="fit-content">
<Row alignItems="center" bg="washedGray" borderRadius="1" px="2" my="2">
<Icon color="gray" icon="MagnifyingGlass" />
<Input

12
pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx
View File

@ -77,7 +77,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
fontSize='1'
mr='12px'
my='1'
flexShrink='0'
flexShrink={0}
display={['block','none']}
>
<Link to={`/~landscape${workspace}`}>
@ -98,7 +98,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
maxWidth={association?.metadata?.description ? ['100%', '50%'] : 'none'}
mr='2'
ml='1'
flexShrink={['1', '0']}
flexShrink={[1, 0]}
>
{title}
</Text>
@ -112,7 +112,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
mb='0'
minWidth='0'
maxWidth='50%'
flexShrink='1'
flexShrink={1}
disableRemoteContent
>
{workspace === '/messages'
@ -145,7 +145,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
return (
<Col width='100%' height='100%' overflow='hidden'>
<Box
flexShrink='0'
flexShrink={0}
height='48px'
py='2'
px='2'
@ -159,7 +159,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
display='flex'
alignItems='baseline'
width={`calc(100% - ${actionsWidth}px - 16px)`}
flexShrink='0'
flexShrink={0}
>
<BackLink />
<Title />
@ -169,7 +169,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
ml={3}
display='flex'
alignItems='center'
flexShrink='0'
flexShrink={0}
ref={actionsRef}
>
{canWrite && <WriterControls />}

22
pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx
View File

@ -1,6 +1,6 @@
import React, { ReactElement, useCallback } from 'react';
import { FormikHelpers } from 'formik';
import { Link } from 'react-router-dom';
import { Link, useHistory } from 'react-router-dom';
import {
Row,
@ -34,6 +34,7 @@ export function SidebarListHeader(props: {
workspace: Workspace;
handleSubmit: (c: SidebarListConfig) => void;
}): ReactElement {
const history = useHistory();
const onSubmit = useCallback(
(values: SidebarListConfig, actions: FormikHelpers<SidebarListConfig>) => {
props.handleSubmit(values);
@ -65,7 +66,7 @@ export function SidebarListHeader(props: {
<Box>
{( !!feedPath) ? (
<Row
flexShrink="0"
flexShrink={0}
alignItems="center"
justifyContent="space-between"
py={2}
@ -74,18 +75,18 @@ export function SidebarListHeader(props: {
borderBottom={1}
borderColor="lightGray"
backgroundColor={['transparent',
props.history.location.pathname.includes(`/~landscape${groupPath}/feed`)
history.location.pathname.includes(`/~landscape${groupPath}/feed`)
? (
'washedGray'
) : (
'transparent'
)]}
cursor={['pointer', (
props.history.location.pathname === `/~landscape${groupPath}/feed`
cursor={(
history.location.pathname === `/~landscape${groupPath}/feed`
? 'default' : 'pointer'
)]}
)}
onClick={() => {
props.history.push(`/~landscape${groupPath}/feed`);
history.push(`/~landscape${groupPath}/feed`);
}}
>
<Text>
@ -98,14 +99,14 @@ export function SidebarListHeader(props: {
) : null
}
<Row
flexShrink="0"
flexShrink={0}
alignItems="center"
justifyContent="space-between"
py={2}
px={3}
height='48px'
>
<Box flexShrink='0'>
<Box flexShrink={0}>
<Text>
{props.initialValues.hideUnjoined ? `Joined ${noun}` : `All ${noun}`}
</Text>
@ -131,7 +132,6 @@ export function SidebarListHeader(props: {
>
<NewChannel
api={props.api}
history={props.history}
workspace={props.workspace}
/>
</Col>
@ -152,7 +152,7 @@ export function SidebarListHeader(props: {
)
}
<Dropdown
flexShrink='0'
flexShrink={0}
width="auto"
alignY="top"
alignX={['right', 'left']}