diff --git a/src/components/field/field-list.tsx b/src/components/field/field-list.tsx index 2120800..b931cdd 100644 --- a/src/components/field/field-list.tsx +++ b/src/components/field/field-list.tsx @@ -22,19 +22,16 @@ export const FieldList = ({ fields, nodeType, isHovering }: Props) => { const previewGroupLength = getPreviewGroupLengths(fields); return ( - {fields.map(({ name, type: fieldType, hoverVariant, depth, glyphs, variant }, i) => ( + {fields.map(({ name, type: fieldType, ...rest }, i) => ( ))} diff --git a/src/components/field/field.tsx b/src/components/field/field.tsx index f8c1b06..bc39f61 100644 --- a/src/components/field/field.tsx +++ b/src/components/field/field.tsx @@ -28,7 +28,7 @@ const FieldWrapper = styled.div<{ color: string }>` const InnerFieldWrapper = styled.div<{ width: number }>` display: flex; - justify-content: flex-end; + justify-content: flex-start; flex: 0 0 auto; width: ${props => `${props.width * FIELD_GLYPH_SPACING}px`}; `; @@ -85,6 +85,7 @@ const FieldType = styled.div` const IconWrapper = styled(Icon)` padding-right: ${spacing[100]}px; + flex-shrink: 0; `; interface Props extends NodeField { @@ -102,6 +103,7 @@ export const Field = ({ type, nodeType, glyphs = [], + glyphSize = LGSpacing[300], spacing = 0, variant, previewGroupLength = 0, @@ -183,7 +185,7 @@ export const Field = ({ {glyphs.map(glyph => ( - + ))} {previewGroupLength ? ( diff --git a/src/components/node/node.stories.tsx b/src/components/node/node.stories.tsx index 53358a8..e0947f8 100644 --- a/src/components/node/node.stories.tsx +++ b/src/components/node/node.stories.tsx @@ -93,6 +93,7 @@ export const FieldsWithGlyphs: Story = { { name: 'addressId', type: 'string', + glyphs: ['link'], }, ], }, diff --git a/src/types/node.ts b/src/types/node.ts index 7b6515c..1358572 100644 --- a/src/types/node.ts +++ b/src/types/node.ts @@ -27,6 +27,7 @@ export interface NodeField { type?: string; depth?: number; glyphs?: Array; + glyphSize?: number; variant?: NodeFieldVariant; hoverVariant?: NodeFieldHoverVariant; }