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">
{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 && (
<div className="button__label" style={{ position: 'relative' }}>
<div dir="auto" className="button__label" style={{ position: 'relative' }}>
<div
style={{
position: 'relative',

View file

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

View file

@ -57,7 +57,7 @@ class UriIndicator extends React.PureComponent<Props> {
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;
@ -66,7 +66,7 @@ class UriIndicator extends React.PureComponent<Props> {
const { name } = channelClaim;
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) {
return inner;

View file

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