Support for auto-detection of direction for component with varying content

This commit is contained in:
sanabhass 2020-08-20 13:27:28 +02:00 committed by Sean Yesmunt
parent cf98e65a3f
commit 2ae3484363
4 changed files with 7 additions and 7 deletions

View file

@ -94,11 +94,11 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
<span className="button__content"> <span className="button__content">
{icon && <Icon icon={icon} iconColor={iconColor} size={iconSize} />} {icon && <Icon icon={icon} iconColor={iconColor} size={iconSize} />}
{!largestLabel && label && <span className="button__label">{label}</span>} {!largestLabel && label && <span dir="auto" className="button__label">{label}</span>}
{/* largestLabel is used when a single button has two different labels based on hover state */} {/* largestLabel is used when a single button has two different labels based on hover state */}
{largestLabel && ( {largestLabel && (
<div className="button__label" style={{ position: 'relative' }}> <div dir="auto" className="button__label" style={{ position: 'relative' }}>
<div <div
style={{ style={{
position: 'relative', position: 'relative',

View file

@ -128,7 +128,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
// Remove new lines and extra space // Remove new lines and extra space
remarkOptions.remarkReactComponents.p = SimpleText; remarkOptions.remarkReactComponents.p = SimpleText;
return ( return (
<span className="markdown-preview"> <span dir="auto" className="markdown-preview">
{ {
remark() remark()
.use(remarkStrip) .use(remarkStrip)
@ -140,7 +140,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
} }
return ( return (
<div className="markdown-preview"> <div dir="auto" className="markdown-preview">
{ {
remark() remark()
.use(remarkAttr, remarkAttrOpts) .use(remarkAttr, remarkAttrOpts)

View file

@ -57,7 +57,7 @@ class UriIndicator extends React.PureComponent<Props> {
return null; return null;
} }
return <span className={classnames('channel-name', { 'channel-name--inline': inline })}>Anonymous</span>; return <span dir="auto" className={classnames('channel-name', { 'channel-name--inline': inline })}>Anonymous</span>;
} }
const channelClaim = isChannelClaim ? claim : claim.signing_channel; const channelClaim = isChannelClaim ? claim : claim.signing_channel;
@ -66,7 +66,7 @@ class UriIndicator extends React.PureComponent<Props> {
const { name } = channelClaim; const { name } = channelClaim;
const channelLink = link ? channelClaim.canonical_url || channelClaim.permanent_url : false; const channelLink = link ? channelClaim.canonical_url || channelClaim.permanent_url : false;
const inner = <span className={classnames('channel-name', { 'channel-name--inline': inline })}>{name}</span>; const inner = <span dir="auto" className={classnames('channel-name', { 'channel-name--inline': inline })}>{name}</span>;
if (!channelLink) { if (!channelLink) {
return inner; return inner;

View file

@ -87,7 +87,7 @@ class ReportPage extends React.Component {
title={__('Developer?')} title={__('Developer?')}
actions={ actions={
<Fragment> <Fragment>
<div className="markdown-preview"> <div dir="auto" className="markdown-preview">
<p>{__('You can also:')}</p> <p>{__('You can also:')}</p>
<ul> <ul>
<li> <li>