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;
}