Skip to content

Commit a8d86ef

Browse files
ryantremryantrem
authored
[Fluent] Various minor style cleanups (#16774)
- Remove default vertical margin from Switch so PropertyLines have uniform heights - Allow PropertyLine label to use extra space unused by the main content - Disallow PropertyLine label from wrapping (truncate instead) - Improve horizontal alignment of the expand button for the "expandedContent" of a PropertyLine - Use the Fluent Collapse component to animate the expand/collapse of the "expandedContent" of a PropertyLine - Use ToggleButton for the expand/collapse button for the "expandedContent" of a PropertyLine - Use fixed precision of 2 for VectorPropertyLine - Hide sliders in VectorPropertyLine when no min/max is specified - Use a more subtle appearance for the text input part of the VectorPropertyLine ![image](https://github.com/user-attachments/assets/47b6d025-4e90-49dd-9776-f308365de05f)
1 parent 7623576 commit a8d86ef

File tree

5 files changed

+40
-20
lines changed

5 files changed

+40
-20
lines changed

‎packages/dev/inspector-v2/src/components/accordionPane.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,9 @@ const useStyles = makeStyles({
6464
accordion: {
6565
overflowY: "auto",
6666
paddingBottom: tokens.spacingVerticalM,
67+
display: "flex",
68+
flexDirection: "column",
69+
rowGap: tokens.spacingVerticalM,
6770
},
6871
panelDiv: {
6972
display: "flex",

‎packages/dev/sharedUiComponents/src/fluent/hoc/propertyLine.tsx

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Body1Strong, Button, InfoLabel, makeStyles, tokens } from "@fluentui/react-components";
2-
import { Add24Filled, Copy24Regular, Subtract24Filled } from "@fluentui/react-icons";
1+
import { Body1Strong, Button, InfoLabel, ToggleButton, makeStyles, tokens } from "@fluentui/react-components";
2+
import { Collapse } from "@fluentui/react-motion-components-preview";
3+
import { AddFilled, CopyRegular, SubtractFilled } from "@fluentui/react-icons";
34
import type { FunctionComponent, PropsWithChildren } from "react";
45
import { useContext, useState } from "react";
56
import { copyCommandToClipboard } from "../../copyCommandToClipboard";
@@ -20,28 +21,40 @@ const usePropertyLineStyles = makeStyles({
2021
width: "100%",
2122
},
2223
label: {
23-
width: "33%",
24+
flex: "1 1 0",
25+
minWidth: "50px",
2426
textAlign: "left",
27+
whiteSpace: "nowrap",
28+
overflow: "hidden",
29+
textOverflow: "ellipsis",
30+
},
31+
labelText: {
32+
whiteSpace: "nowrap",
2533
},
2634
rightContent: {
27-
width: "67%",
35+
flex: "0 1 auto",
2836
display: "flex",
2937
alignItems: "center",
3038
justifyContent: "flex-end",
39+
gap: tokens.spacingHorizontalS,
3140
},
3241
button: {
3342
marginLeft: tokens.spacingHorizontalXXS,
34-
width: "100px",
43+
margin: 0,
44+
padding: 0,
45+
border: 0,
46+
minWidth: 0,
3547
},
3648
fillRestOfRightContentWidth: {
3749
flex: 1,
3850
display: "flex",
3951
justifyContent: "flex-end",
4052
alignItems: "center",
4153
},
42-
expandedContent: {
43-
backgroundColor: tokens.colorNeutralBackground1,
54+
expandButton: {
55+
margin: 0,
4456
},
57+
expandedContent: {},
4558
});
4659

4760
export type PropertyLineProps = {
@@ -87,16 +100,17 @@ export const PropertyLine: FunctionComponent<PropsWithChildren<PropertyLineProps
87100
<LineContainer>
88101
<div className={classes.line}>
89102
<InfoLabel className={classes.label} info={description}>
90-
<Body1Strong>{label}</Body1Strong>
103+
<Body1Strong className={classes.labelText}>{label}</Body1Strong>
91104
</InfoLabel>
92105
<div className={classes.rightContent}>
93106
<div className={classes.fillRestOfRightContentWidth}>{children}</div>
94107

95108
{expandedContent && (
96-
<Button
97-
appearance="subtle"
98-
icon={expanded ? <Subtract24Filled /> : <Add24Filled />}
109+
<ToggleButton
110+
appearance="transparent"
111+
icon={expanded ? <SubtractFilled /> : <AddFilled />}
99112
className={classes.button}
113+
checked={expanded}
100114
onClick={(e) => {
101115
e.stopPropagation();
102116
setExpanded((expanded) => !expanded);
@@ -105,11 +119,13 @@ export const PropertyLine: FunctionComponent<PropsWithChildren<PropertyLineProps
105119
)}
106120

107121
{onCopy && !disableCopy && (
108-
<Button className={classes.button} id="copyProperty" icon={<Copy24Regular />} onClick={() => copyCommandToClipboard(onCopy())} title="Copy to clipboard" />
122+
<Button className={classes.button} id="copyProperty" icon={<CopyRegular />} onClick={() => copyCommandToClipboard(onCopy())} title="Copy to clipboard" />
109123
)}
110124
</div>
111125
</div>
112-
{expanded && expandedContent && <div className={classes.expandedContent}>{expandedContent}</div>}
126+
<Collapse visible={expanded && !!expandedContent}>
127+
<div className={classes.expandedContent}>{expandedContent}</div>
128+
</Collapse>
113129
</LineContainer>
114130
);
115131
};

‎packages/dev/sharedUiComponents/src/fluent/hoc/vectorPropertyLine.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const VectorSliders: FunctionComponent<VectorSliderProps> = (props) => {
3737
export const VectorPropertyLine: FunctionComponent<VectorSliderProps & PropertyLineProps> = (props) => {
3838
return (
3939
<PropertyLine {...props} expandedContent={<VectorSliders {...props} />}>
40-
<Body1>{props.vector.toString()}</Body1>
40+
<Body1>{`X: ${props.vector.x.toFixed(2)} | Y: ${props.vector.y.toFixed(2)} | Z: ${props.vector.z.toFixed(2)}${props.vector instanceof Vector4 ? ` | W: ${props.vector.w.toFixed(2)}` : ""}`}</Body1>
4141
</PropertyLine>
4242
);
4343
};

‎packages/dev/sharedUiComponents/src/fluent/primitives/switch.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const useSwitchStyles = makeStyles({
1111
marginLeft: "auto",
1212
},
1313
indicator: {
14-
marginRight: 0, // Remove the default right margin so the switch aligns well on the right side inside panels like the properties pane.
14+
margin: 0, // Remove the default right margin so the switch aligns well on the right side inside panels like the properties pane.
1515
},
1616
});
1717

‎packages/dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,13 @@ export type SyncedSliderProps = Omit<InputProps & SliderProps, "onChange" | "val
3838
* @returns SyncedSlider component
3939
*/
4040
export const SyncedSliderInput: FunctionComponent<SyncedSliderProps> = (props) => {
41+
const { value: valueProp, ...otherProps } = props;
4142
const classes = useSyncedSliderStyles();
42-
const [value, setValue] = useState<number>(props.value);
43+
const [value, setValue] = useState<number>(valueProp);
4344

4445
useEffect(() => {
45-
setValue(props.value ?? ""); // Update local state when props.value changes
46-
}, [props.value]);
46+
setValue(valueProp ?? ""); // Update local state when props.value changes
47+
}, [valueProp]);
4748

4849
const handleSliderChange = (_: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {
4950
setValue(data.value);
@@ -60,8 +61,8 @@ export const SyncedSliderInput: FunctionComponent<SyncedSliderProps> = (props) =
6061

6162
return (
6263
<div className={classes.syncedSlider}>
63-
<Slider {...props} className={classes.slider} value={value} onChange={handleSliderChange} />
64-
<Input {...props} type="number" value={value.toString()} onChange={handleInputChange} />
64+
{props.min != undefined && props.max != undefined && <Slider {...props} className={classes.slider} value={value} onChange={handleSliderChange} step={undefined} />}
65+
<Input {...otherProps} className={classes.input} type="number" appearance="filled-lighter" value={value.toFixed(2)} onChange={handleInputChange} />
6566
</div>
6667
);
6768
};

0 commit comments

Comments
 (0)