()
| 40 | } |
| 41 | |
| 42 | export const field = () => |
| 43 | ({ |
| 44 | display: 'grid', |
| 45 | gridColumnStart: { |
| 46 | isInForm: 1 |
| 47 | }, |
| 48 | gridColumnEnd: { |
| 49 | isInForm: { |
| 50 | labelPosition: { |
| 51 | side: 'span 2' |
| 52 | } |
| 53 | } |
| 54 | }, |
| 55 | gridTemplateColumns: { |
| 56 | default: { |
| 57 | labelPosition: { |
| 58 | top: ['1fr'], |
| 59 | side: ['auto', '1fr'] |
| 60 | } |
| 61 | }, |
| 62 | isInForm: 'subgrid' |
| 63 | }, |
| 64 | gridTemplateRows: { |
| 65 | labelPosition: { |
| 66 | top: ['auto', '1fr', 'auto'], |
| 67 | side: ['auto', '1fr'] |
| 68 | } |
| 69 | }, |
| 70 | gridTemplateAreas: { |
| 71 | labelPosition: { |
| 72 | top: ['label', 'input', 'helptext'], |
| 73 | side: ['label input', 'label helptext'] |
| 74 | } |
| 75 | }, |
| 76 | fontSize: controlFont(), |
| 77 | alignItems: 'baseline', |
| 78 | lineHeight: 'ui', |
| 79 | '--field-height': { |
| 80 | type: 'height', |
| 81 | value: controlSize() |
| 82 | }, |
| 83 | // Spectrum defines the field label/help text with a (minimum) height, with text centered inside. |
| 84 | // Calculate what the gap should be based on the height and line height. |
| 85 | // Use a variable here rather than rowGap since it is applied to the children as padding. |
| 86 | // This allows the gap to collapse when the label/help text is not present. |
| 87 | // Eventually this may be possible to do in pure CSS: https://github.com/w3c/csswg-drafts/issues/5813 |
| 88 | '--field-gap': { |
| 89 | type: 'rowGap', |
| 90 | value: centerPadding('var(--field-height)') |
| 91 | }, |
| 92 | columnGap: 12, |
| 93 | disableTapHighlight: true |
| 94 | }) as const; |
| 95 | |
| 96 | export const fieldLabel = () => |
| 97 | ({ |
no test coverage detected