moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'improve-divider' into 'develop' 

Extend Divider with 'textSize' prop

See merge request soapbox-pub/soapbox!1776
This commit is contained in:
Justin 2022-09-08 12:23:47 +00:00
parent f39e811db5 81ea892ff7
commit 1760501b37
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/soapbox/components/ui/divider/divider.tsx
View File

@ -1,11 +1,16 @@
import React from 'react'; import React from 'react';
import Text from '../text/text';
import type { Sizes as TextSizes } from '../text/text';
interface IDivider { interface IDivider {
text?: string text?: string
textSize?: TextSizes
} }
/** Divider */ /** Divider */
const Divider = ({ text }: IDivider) => ( const Divider = ({ text, textSize = 'md' }: IDivider) => (
<div className='relative' data-testid='divider'> <div className='relative' data-testid='divider'>
<div className='absolute inset-0 flex items-center' aria-hidden='true'> <div className='absolute inset-0 flex items-center' aria-hidden='true'>
<div className='w-full border-t-2 border-gray-100 dark:border-gray-800 border-solid' /> <div className='w-full border-t-2 border-gray-100 dark:border-gray-800 border-solid' />
@ -13,7 +18,9 @@ const Divider = ({ text }: IDivider) => (
{text && ( {text && (
<div className='relative flex justify-center'> <div className='relative flex justify-center'>
<span className='px-2 bg-white text-gray-400' data-testid='divider-text'>{text}</span> <span className='px-2 bg-white dark:bg-gray-900 text-gray-400' data-testid='divider-text'>
<Text size={textSize} tag='span' theme='inherit'>{text}</Text>
</span>
</div> </div>
)} )}
</div> </div>

2
app/soapbox/components/ui/text/text.tsx
View File

@ -3,7 +3,7 @@ import React from 'react';
type Themes = 'default' | 'danger' | 'primary' | 'muted' | 'subtle' | 'success' | 'inherit' | 'white' type Themes = 'default' | 'danger' | 'primary' | 'muted' | 'subtle' | 'success' | 'inherit' | 'white'
type Weights = 'normal' | 'medium' | 'semibold' | 'bold' type Weights = 'normal' | 'medium' | 'semibold' | 'bold'
type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' export type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
type Alignments = 'left' | 'center' | 'right' type Alignments = 'left' | 'center' | 'right'
type TrackingSizes = 'normal' | 'wide' type TrackingSizes = 'normal' | 'wide'
type TransformProperties = 'uppercase' | 'normal' type TransformProperties = 'uppercase' | 'normal'