Merge pull request #20594 from github/repo-sync

repo sync

components/article/ArticlePage.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 
-import { ZapIcon, InfoIcon, ShieldLockIcon } from '@primer/octicons-react'
+import { ZapIcon, InfoIcon } from '@primer/octicons-react'
 import { Callout } from 'components/ui/Callout'
 
 import { Link } from 'components/Link'
@@ -82,11 +82,9 @@ export const ArticlePage = () => {
               )}
 
               {permissions && (
-                <div className="permissions-statement d-table">
-                  <div className="d-table-cell pr-2">
-                    <ShieldLockIcon size={16} />
-                  </div>
-                  <div className="d-table-cell" dangerouslySetInnerHTML={{ __html: permissions }} />
+                <div className="permissions-statement pl-3 my-4">
+                  <div className="text-bold pr-2">{t('permissions_statement')}</div>
+                  <div dangerouslySetInnerHTML={{ __html: permissions }} />
                 </div>
               )}
 

data/ui.yml

@@ -56,6 +56,7 @@ pages:
   contributor_callout: This article is contributed and maintained by
   all_enterprise_releases: All Enterprise Server releases
   about_versions: About versions
+  permissions_statement: Who can use this feature
 errors:
   oops: Ooops!
   something_went_wrong: It looks like something went wrong.

stylesheets/extended-markdown.scss

@@ -37,3 +37,7 @@
 .warning {
   font-weight: normal;
 }
+
+.permissions-statement {
+  border-left: 5px solid var(--color-border-muted);
+}