chore: update locked element to v4 design (#16607)

Updates `locked` element to v4 design.

Co-authored-by: Patrik Kozak <35232443+PatrikKozak@users.noreply.github.com>

Author: JessRynkar

packages/ui/src/elements/Locked/index.css

@@ -0,0 +1,28 @@
+@layer payload-default {
+  .locked {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: all;
+    color: var(--color-icon);
+    border: 0;
+    background: transparent;
+    border-radius: var(--radius-medium);
+    cursor: default;
+    outline: var(--stroke-width-medium) solid transparent;
+    outline-offset: calc(var(--stroke-width-medium) * -1);
+
+    &:hover {
+      background: var(--color-bg-secondary);
+    }
+
+    &:active {
+      background: var(--color-bg-secondary-pressed);
+    }
+
+    &:focus-visible {
+      outline-color: var(--color-border-selected);
+    }
+  }
+}

packages/ui/src/elements/Locked/index.scss

@@ -7,7 +7,7 @@ import { LockIcon } from '../../icons/Lock/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { isClientUserObject } from '../../utilities/isClientUserObject.js'
 import { Tooltip } from '../Tooltip/index.js'
-import './index.scss'
+import './index.css'
 
 const baseClass = 'locked'
 
@@ -29,7 +29,7 @@ export const Locked: React.FC<{
       tabIndex={0}
     >
       <Tooltip
-        alignCaret="left"
+        alignCaret="center"
         className={`${baseClass}__tooltip`}
         position="top"
         show={hovered}

packages/ui/src/elements/Locked/index.tsx

@@ -4,7 +4,7 @@ import './index.css'
 
 const paths = {
   16: 'M10.776 8H5.224l-.025.005A.25.25 0 0 0 5 8.25v3.5c0 .138.112.25.25.25h5.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.199-.245zM7 7H6V6a2 2 0 1 1 4 0v1zM5 6a3 3 0 0 1 6 0v1.025c.57.116 1 .62 1 1.225v3.5c0 .69-.56 1.25-1.25 1.25h-5.5C4.56 13 4 12.44 4 11.75v-3.5c0-.605.43-1.11 1-1.225z',
-  24: 'M9 8a3 3 0 1 1 6 0v2H9zm-1 2V8a4 4 0 1 1 8 0v2h.125C17.16 10 18 10.84 18 11.875v5.25C18 18.16 17.16 19 16.125 19h-8.25A1.875 1.875 0 0 1 6 17.125v-5.25C6 10.839 6.84 10 7.875 10zm-1 1.875c0-.483.392-.875.875-.875h8.25c.483 0 .875.392.875.875v5.25a.875.875 0 0 1-.875.875h-8.25A.875.875 0 0 1 7 17.125z',
+  24: 'M12 6C13.6569 6 15 7.34315 15 9V11H15.5C16.3284 11 17 11.6716 17 12.5V16.5C17 17.3284 16.3284 18 15.5 18H8.5C7.67157 18 7 17.3284 7 16.5V12.5C7 11.6716 7.67157 11 8.5 11H9V9C9 7.34315 10.3431 6 12 6ZM8.5 12C8.22386 12 8 12.2239 8 12.5V16.5C8 16.7761 8.22386 17 8.5 17H15.5C15.7761 17 16 16.7761 16 16.5V12.5C16 12.2239 15.7761 12 15.5 12H8.5ZM12 7C10.8954 7 10 7.89543 10 9V11H14V9C14 7.89543 13.1046 7 12 7Z',
 }
 
 export const LockIcon: React.FC<{

packages/ui/src/icons/Lock/index.tsx

@@ -17,6 +17,7 @@ import { IDLabelSection } from './sections/IDLabel.js'
 import { InputStepperSection } from './sections/InputStepper.js'
 import { LexicalIconsSection } from './sections/LexicalIcons.js'
 import { LoadingSection } from './sections/LoadingSection.js'
+import { LockedSection } from './sections/Locked.js'
 import { ModalSection } from './sections/ModalSection.js'
 import { NoListResultsSection } from './sections/NoListResults.js'
 import { PillSection } from './sections/Pill.js'
@@ -60,6 +61,7 @@ type ComponentId =
   | 'json-field'
   | 'lexical-icons'
   | 'loading-overlay'
+  | 'locked'
   // Patterns
   | 'modal'
   | 'no-list-results'
@@ -99,6 +101,7 @@ const componentOptions: ComponentOption[] = [
   { category: 'primitives', label: 'Input', value: 'input' },
   { category: 'primitives', label: 'Input Stepper', value: 'input-stepper' },
   { category: 'primitives', label: 'Lexical Icons', value: 'lexical-icons' },
+  { category: 'primitives', label: 'Locked', value: 'locked' },
   { category: 'primitives', label: 'Pill', value: 'pill' },
   { category: 'primitives', label: 'Popup', value: 'popup' },
   { category: 'primitives', label: 'Radio', value: 'radio' },
@@ -239,6 +242,7 @@ export const ComponentsView: React.FC = () => {
           <CopyToClipboardSection selectedComponent="copy-to-clipboard" />
         )}
         {shouldShow('banner', 'primitives') && <BannerSection selectedComponent="banner" />}
+        {shouldShow('locked', 'primitives') && <LockedSection selectedComponent="locked" />}
         {shouldShow('input-stepper', 'primitives') && (
           <InputStepperSection selectedComponent="input-stepper" />
         )}

test/v4/views/Components/index.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { Locked } from '@payloadcms/ui'
+import React from 'react'
+
+import { Section, Variant } from '../shared.js'
+
+export const LockedSection: React.FC<{ selectedComponent: string }> = ({ selectedComponent }) => {
+  return (
+    <Section id="locked" selectedComponent={selectedComponent} title="Locked">
+      <Variant label="Default">
+        <Locked user={{ id: '1', email: 'Another user' } as any} />
+      </Variant>
+    </Section>
+  )
+}