Support for auto-detection of direction for component with varying content
This commit is contained in:
parent
cf98e65a3f
commit
2ae3484363
4 changed files with 7 additions and 7 deletions
|
@ -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',
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Reference in a new issue