Lago/power-apps-codeapps-blog-part2
Private
Public Access
1
0
Fork 0
Code Activity

feat: Fluent UI Outlook Lite + connections mockup

Browse Source
This commit is contained in:
Lago
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
node_modules/@fluentui/react-divider/lib/components/Divider/useDividerStyles.styles.raw.js generated vendored Normal file
View File

@@ -0,0 +1,229 @@
'use client';
import { mergeClasses, shorthands, makeStyles } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
export const dividerClassNames = {
root: 'fui-Divider',
wrapper: 'fui-Divider__wrapper'
};
const contentSpacing = '12px';
const insetSpacing = '12px';
const maxStartEndLength = '8px';
const minStartEndLength = '8px;';
const useBaseStyles = makeStyles({
// Base styles
base: {
alignItems: 'center',
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'row',
flexGrow: 1,
position: 'relative',
fontFamily: tokens.fontFamilyBase,
fontSize: tokens.fontSizeBase200,
fontWeight: tokens.fontWeightRegular,
lineHeight: tokens.lineHeightBase200,
textAlign: 'center',
'::before': {
boxSizing: 'border-box',
display: 'flex',
flexGrow: 1
},
'::after': {
boxSizing: 'border-box',
display: 'flex',
flexGrow: 1
}
},
// Childless styles
childless: {
'::before': {
marginBottom: 0,
marginRight: 0
},
'::after': {
marginLeft: 0,
marginTop: 0
}
},
// Alignment variations
start: {
'::after': {
content: '""'
}
},
center: {
'::before': {
content: '""'
},
'::after': {
content: '""'
}
},
end: {
'::before': {
content: '""'
}
},
// Appearance variations
brand: {
color: tokens.colorBrandForeground1,
'::before': {
...shorthands.borderColor(tokens.colorBrandStroke1)
},
'::after': {
...shorthands.borderColor(tokens.colorBrandStroke1)
}
},
default: {
color: tokens.colorNeutralForeground2,
'::before': {
...shorthands.borderColor(tokens.colorNeutralStroke2)
},
'::after': {
...shorthands.borderColor(tokens.colorNeutralStroke2)
}
},
subtle: {
color: tokens.colorNeutralForeground3,
'::before': {
...shorthands.borderColor(tokens.colorNeutralStroke3)
},
'::after': {
...shorthands.borderColor(tokens.colorNeutralStroke3)
}
},
strong: {
color: tokens.colorNeutralForeground1,
'::before': {
...shorthands.borderColor(tokens.colorNeutralStroke1)
},
'::after': {
...shorthands.borderColor(tokens.colorNeutralStroke1)
}
}
});
const useHorizontalStyles = makeStyles({
// Base styles
base: {
width: '100%',
'::before': {
borderTopStyle: 'solid',
borderTopWidth: tokens.strokeWidthThin,
minWidth: minStartEndLength
},
'::after': {
borderTopStyle: 'solid',
borderTopWidth: tokens.strokeWidthThin,
minWidth: minStartEndLength
}
},
// Inset styles
inset: {
paddingLeft: insetSpacing,
paddingRight: insetSpacing
},
// Alignment variations
start: {
textAlign: 'left',
'::before': {
content: '""',
marginRight: contentSpacing,
maxWidth: maxStartEndLength
},
'::after': {
marginLeft: contentSpacing
}
},
center: {
textAlign: 'center',
'::before': {
marginRight: contentSpacing
},
'::after': {
marginLeft: contentSpacing
}
},
end: {
textAlign: 'right',
'::before': {
marginRight: contentSpacing
},
'::after': {
content: '""',
marginLeft: contentSpacing,
maxWidth: maxStartEndLength
}
}
});
const useVerticalStyles = makeStyles({
// Base styles
base: {
flexDirection: 'column',
minHeight: '20px',
'::before': {
borderRightStyle: 'solid',
borderRightWidth: tokens.strokeWidthThin,
minHeight: minStartEndLength
},
'::after': {
borderRightStyle: 'solid',
borderRightWidth: tokens.strokeWidthThin,
minHeight: minStartEndLength
}
},
// Inset styles
inset: {
marginTop: insetSpacing,
marginBottom: insetSpacing
},
// With children styles
withChildren: {
minHeight: '84px'
},
// Alignment variations
start: {
'::before': {
content: '""',
marginBottom: contentSpacing,
maxHeight: maxStartEndLength
},
'::after': {
marginTop: contentSpacing
}
},
center: {
'::before': {
marginBottom: contentSpacing
},
'::after': {
marginTop: contentSpacing
}
},
end: {
'::before': {
marginBottom: contentSpacing
},
'::after': {
content: '""',
marginTop: contentSpacing,
maxHeight: maxStartEndLength
}
}
});
export const useDividerStyles_unstable = (state)=>{
'use no memo';
const baseStyles = useBaseStyles();
const horizontalStyles = useHorizontalStyles();
const verticalStyles = useVerticalStyles();
const { alignContent, appearance, inset, vertical } = state;
state.root.className = mergeClasses(dividerClassNames.root, // Base styles
baseStyles.base, baseStyles[alignContent], appearance && baseStyles[appearance], // Horizontal styles
!vertical && horizontalStyles.base, !vertical && inset && horizontalStyles.inset, !vertical && horizontalStyles[alignContent], // Vertical styles
vertical && verticalStyles.base, vertical && inset && verticalStyles.inset, vertical && verticalStyles[alignContent], vertical && state.root.children !== undefined && verticalStyles.withChildren, // Childless styles
state.root.children === undefined && baseStyles.childless, // User provided class name
state.root.className);
if (state.wrapper) {
state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);
}
return state;
};