@oxyhq/bloom 0.12.1 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/fab/Fab.js +25 -6
- package/lib/commonjs/fab/Fab.js.map +1 -1
- package/lib/commonjs/fab/Fab.web.js +26 -7
- package/lib/commonjs/fab/Fab.web.js.map +1 -1
- package/lib/module/fab/Fab.js +25 -6
- package/lib/module/fab/Fab.js.map +1 -1
- package/lib/module/fab/Fab.web.js +26 -7
- package/lib/module/fab/Fab.web.js.map +1 -1
- package/lib/typescript/commonjs/fab/Fab.d.ts.map +1 -1
- package/lib/typescript/commonjs/fab/Fab.web.d.ts.map +1 -1
- package/lib/typescript/commonjs/fab/types.d.ts +12 -2
- package/lib/typescript/commonjs/fab/types.d.ts.map +1 -1
- package/lib/typescript/module/fab/Fab.d.ts.map +1 -1
- package/lib/typescript/module/fab/Fab.web.d.ts.map +1 -1
- package/lib/typescript/module/fab/types.d.ts +12 -2
- package/lib/typescript/module/fab/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/__tests__/Fab.test.tsx +17 -0
- package/src/__tests__/Fab.web.test.tsx +14 -0
- package/src/fab/Fab.stories.tsx +9 -0
- package/src/fab/Fab.tsx +33 -7
- package/src/fab/Fab.web.tsx +33 -8
- package/src/fab/types.ts +12 -2
package/lib/commonjs/fab/Fab.js
CHANGED
|
@@ -11,9 +11,9 @@ var _usePressAnimation = require("../hooks/usePressAnimation.js");
|
|
|
11
11
|
var _useInteractionState = require("../hooks/useInteractionState.js");
|
|
12
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
13
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
|
-
// Material-style FAB scale. `small` (40px
|
|
15
|
-
//
|
|
16
|
-
//
|
|
14
|
+
// Material-style FAB scale. `small` (40px) keeps a full 24px icon box so the
|
|
15
|
+
// glyph reads clearly; `medium` (56px) is the canonical FAB; `large` (64px) is
|
|
16
|
+
// the high-prominence action.
|
|
17
17
|
const SIZE_CONFIG = {
|
|
18
18
|
small: {
|
|
19
19
|
diameter: 40,
|
|
@@ -31,6 +31,25 @@ const SIZE_CONFIG = {
|
|
|
31
31
|
fontSize: 16
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
|
+
const MIN_NUMERIC_ICON_BOX = 22;
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Resolve a `size` prop (preset name or raw pixel diameter) to concrete pixel
|
|
38
|
+
* geometry. A numeric size sets the diameter directly, derives the icon box as
|
|
39
|
+
* `round(size * 0.5)` (clamped to a sensible minimum) and lets the circle radius
|
|
40
|
+
* stay `size / 2` (the container uses a full pill radius, so any square stays a
|
|
41
|
+
* perfect circle).
|
|
42
|
+
*/
|
|
43
|
+
function resolveSize(size) {
|
|
44
|
+
if (typeof size === 'number') {
|
|
45
|
+
return {
|
|
46
|
+
diameter: size,
|
|
47
|
+
iconBox: Math.max(MIN_NUMERIC_ICON_BOX, Math.round(size * 0.5)),
|
|
48
|
+
fontSize: Math.max(13, Math.round(size * 0.27))
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
return SIZE_CONFIG[size];
|
|
52
|
+
}
|
|
34
53
|
const PILL_RADIUS = 999;
|
|
35
54
|
const PRESS_SCALE = 0.94;
|
|
36
55
|
const DEFAULT_OFFSET = 16;
|
|
@@ -84,7 +103,7 @@ const FabComponent = ({
|
|
|
84
103
|
zIndex = DEFAULT_Z_INDEX
|
|
85
104
|
}) => {
|
|
86
105
|
const theme = (0, _useTheme.useTheme)();
|
|
87
|
-
const sizeConfig =
|
|
106
|
+
const sizeConfig = (0, _react.useMemo)(() => resolveSize(size), [size]);
|
|
88
107
|
const isExtended = label != null && label.length > 0;
|
|
89
108
|
const content = icon ?? children;
|
|
90
109
|
const {
|
|
@@ -117,13 +136,13 @@ const FabComponent = ({
|
|
|
117
136
|
elevation: 6
|
|
118
137
|
};
|
|
119
138
|
if (isExtended) {
|
|
120
|
-
base.paddingHorizontal =
|
|
139
|
+
base.paddingHorizontal = sizeConfig.diameter <= 44 ? 14 : 20;
|
|
121
140
|
base.gap = 8;
|
|
122
141
|
} else {
|
|
123
142
|
base.width = sizeConfig.diameter;
|
|
124
143
|
}
|
|
125
144
|
return base;
|
|
126
|
-
}, [resolvedColors.background, sizeConfig.diameter, theme.colors.shadow, isExtended
|
|
145
|
+
}, [resolvedColors.background, sizeConfig.diameter, theme.colors.shadow, isExtended]);
|
|
127
146
|
const labelTextStyle = (0, _react.useMemo)(() => ({
|
|
128
147
|
fontSize: sizeConfig.fontSize,
|
|
129
148
|
fontWeight: '600',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_useTheme","_usePressAnimation","_useInteractionState","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","PILL_RADIUS","PRESS_SCALE","DEFAULT_OFFSET","DEFAULT_Z_INDEX","HIT_SLOP","top","bottom","left","right","placementStyle","placement","offset","style","position","FabComponent","onPress","icon","children","label","variant","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_useTheme","_usePressAnimation","_useInteractionState","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","MIN_NUMERIC_ICON_BOX","resolveSize","size","Math","max","round","PILL_RADIUS","PRESS_SCALE","DEFAULT_OFFSET","DEFAULT_Z_INDEX","HIT_SLOP","top","bottom","left","right","placementStyle","placement","offset","style","position","FabComponent","onPress","icon","children","label","variant","disabled","accessibilityLabel","accessibilityHint","labelStyle","className","testID","zIndex","theme","useTheme","sizeConfig","useMemo","isExtended","length","content","scaleAnim","onPressIn","onPressOut","usePressAnimation","undefined","state","pressed","onIn","onPressedIn","onOut","onPressedOut","useInteractionState","resolvedColors","resolveVariant","colors","containerStyle","base","alignItems","justifyContent","flexDirection","backgroundColor","background","borderRadius","height","shadowColor","shadow","shadowOffset","width","shadowOpacity","shadowRadius","elevation","paddingHorizontal","gap","labelTextStyle","fontWeight","color","foreground","handlePressIn","handlePressOut","jsx","Animated","View","transform","scale","jsxs","Pressable","opacity","hitSlop","accessibilityRole","accessibilityState","Text","numberOfLines","card","text","primary","primaryForeground","Fab","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["fab/Fab.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AASA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AAAmE,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,wBAAAO,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAO,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAWnE;AACA;AACA;AACA,MAAMkB,WAA0C,GAAG;EACjDC,KAAK,EAAE;IAAEC,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EAClDC,MAAM,EAAE;IAAEH,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EACnDE,KAAK,EAAE;IAAEJ,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG;AACnD,CAAC;AAED,MAAMG,oBAAoB,GAAG,EAAE;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,WAAWA,CAACC,IAAsB,EAAgB;EACzD,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;IAC5B,OAAO;MACLP,QAAQ,EAAEO,IAAI;MACdN,OAAO,EAAEO,IAAI,CAACC,GAAG,CAACJ,oBAAoB,EAAEG,IAAI,CAACE,KAAK,CAACH,IAAI,GAAG,GAAG,CAAC,CAAC;MAC/DL,QAAQ,EAAEM,IAAI,CAACC,GAAG,CAAC,EAAE,EAAED,IAAI,CAACE,KAAK,CAACH,IAAI,GAAG,IAAI,CAAC;IAChD,CAAC;EACH;EACA,OAAOT,WAAW,CAACS,IAAI,CAAC;AAC1B;AAEA,MAAMI,WAAW,GAAG,GAAG;AACvB,MAAMC,WAAW,GAAG,IAAI;AACxB,MAAMC,cAAc,GAAG,EAAE;AACzB,MAAMC,eAAe,GAAG,EAAE;AAC1B,MAAMC,QAAQ,GAAG;EAAEC,GAAG,EAAE,CAAC;EAAEC,MAAM,EAAE,CAAC;EAAEC,IAAI,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAE,CAAU;;AAElE;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,cAAcA,CAACC,SAAuB,EAAEC,MAAc,EAAa;EAC1E,IAAID,SAAS,KAAK,QAAQ,EAAE,OAAO,CAAC,CAAC;EACrC,MAAME,KAAgB,GAAG;IAAEC,QAAQ,EAAE;EAAW,CAAC;EACjD,IAAIH,SAAS,KAAK,cAAc,IAAIA,SAAS,KAAK,aAAa,EAAE;IAC/DE,KAAK,CAACN,MAAM,GAAGK,MAAM;EACvB,CAAC,MAAM;IACLC,KAAK,CAACP,GAAG,GAAGM,MAAM;EACpB;EACA,IAAID,SAAS,KAAK,cAAc,IAAIA,SAAS,KAAK,WAAW,EAAE;IAC7DE,KAAK,CAACJ,KAAK,GAAGG,MAAM;EACtB,CAAC,MAAM;IACLC,KAAK,CAACL,IAAI,GAAGI,MAAM;EACrB;EACA,OAAOC,KAAK;AACd;AAEA,MAAME,YAAgC,GAAGA,CAAC;EACxCC,OAAO;EACPC,IAAI;EACJC,QAAQ;EACRC,KAAK;EACLC,OAAO,GAAG,SAAS;EACnBvB,IAAI,GAAG,QAAQ;EACfc,SAAS,GAAG,cAAc;EAC1BC,MAAM,GAAGT,cAAc;EACvBkB,QAAQ,GAAG,KAAK;EAChBC,kBAAkB;EAClBC,iBAAiB;EACjBV,KAAK;EACLW,UAAU;EACVC,SAAS;EACTC,MAAM;EACNC,MAAM,GAAGvB;AACX,CAAC,KAAK;EACJ,MAAMwB,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EACxB,MAAMC,UAAU,GAAG,IAAAC,cAAO,EAAC,MAAMnC,WAAW,CAACC,IAAI,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAC3D,MAAMmC,UAAU,GAAGb,KAAK,IAAI,IAAI,IAAIA,KAAK,CAACc,MAAM,GAAG,CAAC;EACpD,MAAMC,OAAO,GAAGjB,IAAI,IAAIC,QAAQ;EAEhC,MAAM;IAAEiB,SAAS;IAAEC,SAAS;IAAEC;EAAW,CAAC,GAAG,IAAAC,oCAAiB,EAC5DjB,QAAQ,GAAGkB,SAAS,GAAGrC,WACzB,CAAC;EACD,MAAM;IAAEsC,KAAK,EAAEC,OAAO;IAAEC,IAAI,EAAEC,WAAW;IAAEC,KAAK,EAAEC;EAAa,CAAC,GAC9D,IAAAC,wCAAmB,EAAC,CAAC;EAEvB,MAAMC,cAAc,GAAG,IAAAhB,cAAO,EAAC,MAAMiB,cAAc,CAAC5B,OAAO,EAAEQ,KAAK,CAACqB,MAAM,CAAC,EAAE,CAAC7B,OAAO,EAAEQ,KAAK,CAACqB,MAAM,CAAC,CAAC;EAEpG,MAAMC,cAAc,GAAG,IAAAnB,cAAO,EAAC,MAAiB;IAC9C,MAAMoB,IAAe,GAAG;MACtBC,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBC,aAAa,EAAE,KAAK;MACpBC,eAAe,EAAER,cAAc,CAACS,UAAU;MAC1CC,YAAY,EAAExD,WAAW;MACzByD,MAAM,EAAE5B,UAAU,CAACxC,QAAQ;MAC3B;MACAqE,WAAW,EAAE/B,KAAK,CAACqB,MAAM,CAACW,MAAM;MAChCC,YAAY,EAAE;QAAEC,KAAK,EAAE,CAAC;QAAEJ,MAAM,EAAE;MAAE,CAAC;MACrCK,aAAa,EAAE,GAAG;MAClBC,YAAY,EAAE,CAAC;MACfC,SAAS,EAAE;IACb,CAAC;IACD,IAAIjC,UAAU,EAAE;MACdmB,IAAI,CAACe,iBAAiB,GAAGpC,UAAU,CAACxC,QAAQ,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE;MAC5D6D,IAAI,CAACgB,GAAG,GAAG,CAAC;IACd,CAAC,MAAM;MACLhB,IAAI,CAACW,KAAK,GAAGhC,UAAU,CAACxC,QAAQ;IAClC;IACA,OAAO6D,IAAI;EACb,CAAC,EAAE,CAACJ,cAAc,CAACS,UAAU,EAAE1B,UAAU,CAACxC,QAAQ,EAAEsC,KAAK,CAACqB,MAAM,CAACW,MAAM,EAAE5B,UAAU,CAAC,CAAC;EAErF,MAAMoC,cAAc,GAAG,IAAArC,cAAO,EAAC,OAAkB;IAC/CvC,QAAQ,EAAEsC,UAAU,CAACtC,QAAQ;IAC7B6E,UAAU,EAAE,KAAK;IACjBC,KAAK,EAAEvB,cAAc,CAACwB;EACxB,CAAC,CAAC,EAAE,CAACzC,UAAU,CAACtC,QAAQ,EAAEuD,cAAc,CAACwB,UAAU,CAAC,CAAC;EAErD,MAAMC,aAAa,GAAGnD,QAAQ,GAC1BkB,SAAS,GACT,MAAM;IACJH,SAAS,CAAC,CAAC;IACXO,WAAW,CAAC,CAAC;EACf,CAAC;EACL,MAAM8B,cAAc,GAAGpD,QAAQ,GAC3BkB,SAAS,GACT,MAAM;IACJF,UAAU,CAAC,CAAC;IACZQ,YAAY,CAAC,CAAC;EAChB,CAAC;EAEL,oBACE,IAAA7E,WAAA,CAAA0G,GAAA,EAAC9G,YAAA,CAAA+G,QAAQ,CAACC,IAAI;IACZ/D,KAAK,EAAE,CACLH,cAAc,CAACC,SAAS,EAAEC,MAAM,CAAC,EACjC;MAAEe,MAAM;MAAEkD,SAAS,EAAE,CAAC;QAAEC,KAAK,EAAE3C;MAAU,CAAC;IAAE,CAAC,EAC7CtB,KAAK,CACL;IAAAK,QAAA,eAEF,IAAAlD,WAAA,CAAA+G,IAAA,EAACnH,YAAA,CAAAoH,SAAS;MAAA,IACHvD,SAAS,GAAI;QAAEA;MAAU,CAAC,GAA8B,CAAC,CAAC;MAC/DZ,KAAK,EAAE,CACLqC,cAAc,EACd7B,QAAQ,IAAI;QAAE4D,OAAO,EAAE;MAAI,CAAC,EAC5BxC,OAAO,IAAI,CAACpB,QAAQ,IAAI;QAAE4D,OAAO,EAAE;MAAI,CAAC,CACxC;MACFjE,OAAO,EAAEK,QAAQ,GAAGkB,SAAS,GAAGvB,OAAQ;MACxCoB,SAAS,EAAEoC,aAAc;MACzBnC,UAAU,EAAEoC,cAAe;MAC3BpD,QAAQ,EAAEA,QAAS;MACnB6D,OAAO,EAAE7E,QAAS;MAClB8E,iBAAiB,EAAC,QAAQ;MAC1B7D,kBAAkB,EAAEA,kBAAkB,IAAIH,KAAM;MAChDI,iBAAiB,EAAEA,iBAAkB;MACrC6D,kBAAkB,EAAE;QAAE/D;MAAS,CAAE;MACjCK,MAAM,EAAEA,MAAO;MAAAR,QAAA,GAEdgB,OAAO,IAAI,IAAI,iBACd,IAAAlE,WAAA,CAAA0G,GAAA,EAAC9G,YAAA,CAAAgH,IAAI;QACH/D,KAAK,EAAE;UACLiD,KAAK,EAAEhC,UAAU,CAACvC,OAAO;UACzBmE,MAAM,EAAE5B,UAAU,CAACvC,OAAO;UAC1B6D,UAAU,EAAE,QAAQ;UACpBC,cAAc,EAAE;QAClB,CAAE;QAAAnC,QAAA,EAEDgB;MAAO,CACJ,CACP,EACAF,UAAU,iBACT,IAAAhE,WAAA,CAAA0G,GAAA,EAAC9G,YAAA,CAAAyH,IAAI;QAACxE,KAAK,EAAE,CAACuD,cAAc,EAAE5C,UAAU,CAAE;QAAC8D,aAAa,EAAE,CAAE;QAAApE,QAAA,EACzDC;MAAK,CACF,CACP;IAAA,CACQ;EAAC,CACC,CAAC;AAEpB,CAAC;AAED,SAAS6B,cAAcA,CACrB5B,OAAmB,EACnB6B,MAA6C,EACD;EAC5C,QAAQ7B,OAAO;IACb,KAAK,WAAW;IAChB,KAAK,SAAS;MACZ,OAAO;QAAEoC,UAAU,EAAEP,MAAM,CAACsC,IAAI;QAAEhB,UAAU,EAAEtB,MAAM,CAACuC;MAAK,CAAC;IAC7D,KAAK,SAAS;IACd;MACE,OAAO;QAAEhC,UAAU,EAAEP,MAAM,CAACwC,OAAO;QAAElB,UAAU,EAAEtB,MAAM,CAACyC;MAAkB,CAAC;EAC/E;AACF;AAEO,MAAMC,GAAG,GAAAC,OAAA,CAAAD,GAAA,gBAAG,IAAAE,WAAI,EAAC9E,YAAY,CAAC;AACrC4E,GAAG,CAACG,WAAW,GAAG,KAAK","ignoreList":[]}
|
|
@@ -8,9 +8,9 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
8
8
|
var _useTheme = require("../theme/use-theme.js");
|
|
9
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
10
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
11
|
-
// Material-style FAB scale. `small` (40px
|
|
12
|
-
//
|
|
13
|
-
//
|
|
11
|
+
// Material-style FAB scale. `small` (40px) keeps a full 24px icon box so the
|
|
12
|
+
// glyph reads clearly; `medium` (56px) is the canonical FAB; `large` (64px) is
|
|
13
|
+
// the high-prominence action.
|
|
14
14
|
const SIZE_CONFIG = {
|
|
15
15
|
small: {
|
|
16
16
|
diameter: 40,
|
|
@@ -28,6 +28,24 @@ const SIZE_CONFIG = {
|
|
|
28
28
|
fontSize: 16
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
|
+
const MIN_NUMERIC_ICON_BOX = 22;
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Resolve a `size` prop (preset name or raw pixel diameter) to concrete pixel
|
|
35
|
+
* geometry. Mirrors the native `resolveSize` exactly so a numeric size renders
|
|
36
|
+
* identically on both platforms. A numeric size sets the diameter directly and
|
|
37
|
+
* derives the icon box as `round(size * 0.5)` (clamped to a sensible minimum).
|
|
38
|
+
*/
|
|
39
|
+
function resolveSize(size) {
|
|
40
|
+
if (typeof size === 'number') {
|
|
41
|
+
return {
|
|
42
|
+
diameter: size,
|
|
43
|
+
iconBox: Math.max(MIN_NUMERIC_ICON_BOX, Math.round(size * 0.5)),
|
|
44
|
+
fontSize: Math.max(13, Math.round(size * 0.27))
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
return SIZE_CONFIG[size];
|
|
48
|
+
}
|
|
31
49
|
const PILL_RADIUS = 999;
|
|
32
50
|
const PRESS_SCALE = 0.94;
|
|
33
51
|
const DEFAULT_OFFSET = 16;
|
|
@@ -183,7 +201,7 @@ const FabWebComponent = ({
|
|
|
183
201
|
const theme = (0, _useTheme.useTheme)();
|
|
184
202
|
const reactId = (0, _react.useId)();
|
|
185
203
|
const resolvedId = id ?? `bloom-fab-${reactId}`;
|
|
186
|
-
const sizeConfig =
|
|
204
|
+
const sizeConfig = (0, _react.useMemo)(() => resolveSize(size), [size]);
|
|
187
205
|
const isExtended = label != null && label.length > 0;
|
|
188
206
|
const content = icon ?? children;
|
|
189
207
|
const variantColors = (0, _react.useMemo)(() => resolveVariant(variant, theme.colors), [variant, theme.colors]);
|
|
@@ -208,13 +226,14 @@ const FabWebComponent = ({
|
|
|
208
226
|
...placementStyle(placement, offset)
|
|
209
227
|
};
|
|
210
228
|
if (isExtended) {
|
|
211
|
-
|
|
212
|
-
base.
|
|
229
|
+
const pad = sizeConfig.diameter <= 44 ? 14 : 20;
|
|
230
|
+
base.paddingLeft = pad;
|
|
231
|
+
base.paddingRight = pad;
|
|
213
232
|
} else {
|
|
214
233
|
base.width = sizeConfig.diameter;
|
|
215
234
|
}
|
|
216
235
|
return base;
|
|
217
|
-
}, [variantColors, sizeConfig.diameter, sizeConfig.fontSize, zIndex, restShadow, hoverShadow, placement, offset, isExtended
|
|
236
|
+
}, [variantColors, sizeConfig.diameter, sizeConfig.fontSize, zIndex, restShadow, hoverShadow, placement, offset, isExtended]);
|
|
218
237
|
const handleClick = (0, _react.useCallback)(event => {
|
|
219
238
|
if (disabled) {
|
|
220
239
|
event.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_useTheme","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","PILL_RADIUS","PRESS_SCALE","DEFAULT_OFFSET","DEFAULT_Z_INDEX","STYLE_ID","BLOOM_FAB_CSS","useFabCss","useEffect","document","getElementById","style","createElement","id","textContent","head","appendChild","placementStyle","placement","offset","position","isBottom","bottom","marginTop","top","alignSelf","marginRight","marginLeft","resolveVariant","variant","c","background","card","foreground","text","ring","primary","primaryForeground","FabWebComponent","onPress","onClick","icon","children","label","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_useTheme","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","MIN_NUMERIC_ICON_BOX","resolveSize","size","Math","max","round","PILL_RADIUS","PRESS_SCALE","DEFAULT_OFFSET","DEFAULT_Z_INDEX","STYLE_ID","BLOOM_FAB_CSS","useFabCss","useEffect","document","getElementById","style","createElement","id","textContent","head","appendChild","placementStyle","placement","offset","position","isBottom","bottom","marginTop","top","alignSelf","marginRight","marginLeft","resolveVariant","variant","c","background","card","foreground","text","ring","primary","primaryForeground","FabWebComponent","onPress","onClick","icon","children","label","disabled","accessibilityLabel","ariaLabelProp","accessibilityHint","labelStyle","className","testID","zIndex","title","type","theme","useTheme","reactId","useId","resolvedId","sizeConfig","useMemo","isExtended","length","content","variantColors","colors","restShadow","shadow","hoverShadow","containerStyle","base","backgroundColor","color","borderRadius","height","boxShadow","fontWeight","pad","paddingLeft","paddingRight","width","handleClick","useCallback","event","preventDefault","ariaLabel","composedClassName","concat","join","jsxs","undefined","jsx","display","alignItems","justifyContent","Fab","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["fab/Fab.web.tsx"],"mappings":"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","ignoreList":[]}
|
package/lib/module/fab/Fab.js
CHANGED
|
@@ -6,9 +6,9 @@ import { useTheme } from "../theme/use-theme.js";
|
|
|
6
6
|
import { usePressAnimation } from "../hooks/usePressAnimation.js";
|
|
7
7
|
import { useInteractionState } from "../hooks/useInteractionState.js";
|
|
8
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
-
// Material-style FAB scale. `small` (40px
|
|
10
|
-
//
|
|
11
|
-
//
|
|
9
|
+
// Material-style FAB scale. `small` (40px) keeps a full 24px icon box so the
|
|
10
|
+
// glyph reads clearly; `medium` (56px) is the canonical FAB; `large` (64px) is
|
|
11
|
+
// the high-prominence action.
|
|
12
12
|
const SIZE_CONFIG = {
|
|
13
13
|
small: {
|
|
14
14
|
diameter: 40,
|
|
@@ -26,6 +26,25 @@ const SIZE_CONFIG = {
|
|
|
26
26
|
fontSize: 16
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
|
+
const MIN_NUMERIC_ICON_BOX = 22;
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Resolve a `size` prop (preset name or raw pixel diameter) to concrete pixel
|
|
33
|
+
* geometry. A numeric size sets the diameter directly, derives the icon box as
|
|
34
|
+
* `round(size * 0.5)` (clamped to a sensible minimum) and lets the circle radius
|
|
35
|
+
* stay `size / 2` (the container uses a full pill radius, so any square stays a
|
|
36
|
+
* perfect circle).
|
|
37
|
+
*/
|
|
38
|
+
function resolveSize(size) {
|
|
39
|
+
if (typeof size === 'number') {
|
|
40
|
+
return {
|
|
41
|
+
diameter: size,
|
|
42
|
+
iconBox: Math.max(MIN_NUMERIC_ICON_BOX, Math.round(size * 0.5)),
|
|
43
|
+
fontSize: Math.max(13, Math.round(size * 0.27))
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
return SIZE_CONFIG[size];
|
|
47
|
+
}
|
|
29
48
|
const PILL_RADIUS = 999;
|
|
30
49
|
const PRESS_SCALE = 0.94;
|
|
31
50
|
const DEFAULT_OFFSET = 16;
|
|
@@ -79,7 +98,7 @@ const FabComponent = ({
|
|
|
79
98
|
zIndex = DEFAULT_Z_INDEX
|
|
80
99
|
}) => {
|
|
81
100
|
const theme = useTheme();
|
|
82
|
-
const sizeConfig =
|
|
101
|
+
const sizeConfig = useMemo(() => resolveSize(size), [size]);
|
|
83
102
|
const isExtended = label != null && label.length > 0;
|
|
84
103
|
const content = icon ?? children;
|
|
85
104
|
const {
|
|
@@ -112,13 +131,13 @@ const FabComponent = ({
|
|
|
112
131
|
elevation: 6
|
|
113
132
|
};
|
|
114
133
|
if (isExtended) {
|
|
115
|
-
base.paddingHorizontal =
|
|
134
|
+
base.paddingHorizontal = sizeConfig.diameter <= 44 ? 14 : 20;
|
|
116
135
|
base.gap = 8;
|
|
117
136
|
} else {
|
|
118
137
|
base.width = sizeConfig.diameter;
|
|
119
138
|
}
|
|
120
139
|
return base;
|
|
121
|
-
}, [resolvedColors.background, sizeConfig.diameter, theme.colors.shadow, isExtended
|
|
140
|
+
}, [resolvedColors.background, sizeConfig.diameter, theme.colors.shadow, isExtended]);
|
|
122
141
|
const labelTextStyle = useMemo(() => ({
|
|
123
142
|
fontSize: sizeConfig.fontSize,
|
|
124
143
|
fontWeight: '600',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","memo","useMemo","Animated","Pressable","Text","View","useTheme","usePressAnimation","useInteractionState","jsx","_jsx","jsxs","_jsxs","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","PILL_RADIUS","PRESS_SCALE","DEFAULT_OFFSET","DEFAULT_Z_INDEX","HIT_SLOP","top","bottom","left","right","placementStyle","placement","offset","style","position","FabComponent","onPress","icon","children","label","variant","
|
|
1
|
+
{"version":3,"names":["React","memo","useMemo","Animated","Pressable","Text","View","useTheme","usePressAnimation","useInteractionState","jsx","_jsx","jsxs","_jsxs","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","MIN_NUMERIC_ICON_BOX","resolveSize","size","Math","max","round","PILL_RADIUS","PRESS_SCALE","DEFAULT_OFFSET","DEFAULT_Z_INDEX","HIT_SLOP","top","bottom","left","right","placementStyle","placement","offset","style","position","FabComponent","onPress","icon","children","label","variant","disabled","accessibilityLabel","accessibilityHint","labelStyle","className","testID","zIndex","theme","sizeConfig","isExtended","length","content","scaleAnim","onPressIn","onPressOut","undefined","state","pressed","onIn","onPressedIn","onOut","onPressedOut","resolvedColors","resolveVariant","colors","containerStyle","base","alignItems","justifyContent","flexDirection","backgroundColor","background","borderRadius","height","shadowColor","shadow","shadowOffset","width","shadowOpacity","shadowRadius","elevation","paddingHorizontal","gap","labelTextStyle","fontWeight","color","foreground","handlePressIn","handlePressOut","transform","scale","opacity","hitSlop","accessibilityRole","accessibilityState","numberOfLines","card","text","primary","primaryForeground","Fab","displayName"],"sourceRoot":"../../../src","sources":["fab/Fab.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
import React, { memo, useCallback, useEffect, useId, useMemo } from 'react';
|
|
4
4
|
import { useTheme } from "../theme/use-theme.js";
|
|
5
5
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
|
-
// Material-style FAB scale. `small` (40px
|
|
7
|
-
//
|
|
8
|
-
//
|
|
6
|
+
// Material-style FAB scale. `small` (40px) keeps a full 24px icon box so the
|
|
7
|
+
// glyph reads clearly; `medium` (56px) is the canonical FAB; `large` (64px) is
|
|
8
|
+
// the high-prominence action.
|
|
9
9
|
const SIZE_CONFIG = {
|
|
10
10
|
small: {
|
|
11
11
|
diameter: 40,
|
|
@@ -23,6 +23,24 @@ const SIZE_CONFIG = {
|
|
|
23
23
|
fontSize: 16
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
|
+
const MIN_NUMERIC_ICON_BOX = 22;
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Resolve a `size` prop (preset name or raw pixel diameter) to concrete pixel
|
|
30
|
+
* geometry. Mirrors the native `resolveSize` exactly so a numeric size renders
|
|
31
|
+
* identically on both platforms. A numeric size sets the diameter directly and
|
|
32
|
+
* derives the icon box as `round(size * 0.5)` (clamped to a sensible minimum).
|
|
33
|
+
*/
|
|
34
|
+
function resolveSize(size) {
|
|
35
|
+
if (typeof size === 'number') {
|
|
36
|
+
return {
|
|
37
|
+
diameter: size,
|
|
38
|
+
iconBox: Math.max(MIN_NUMERIC_ICON_BOX, Math.round(size * 0.5)),
|
|
39
|
+
fontSize: Math.max(13, Math.round(size * 0.27))
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
return SIZE_CONFIG[size];
|
|
43
|
+
}
|
|
26
44
|
const PILL_RADIUS = 999;
|
|
27
45
|
const PRESS_SCALE = 0.94;
|
|
28
46
|
const DEFAULT_OFFSET = 16;
|
|
@@ -178,7 +196,7 @@ const FabWebComponent = ({
|
|
|
178
196
|
const theme = useTheme();
|
|
179
197
|
const reactId = useId();
|
|
180
198
|
const resolvedId = id ?? `bloom-fab-${reactId}`;
|
|
181
|
-
const sizeConfig =
|
|
199
|
+
const sizeConfig = useMemo(() => resolveSize(size), [size]);
|
|
182
200
|
const isExtended = label != null && label.length > 0;
|
|
183
201
|
const content = icon ?? children;
|
|
184
202
|
const variantColors = useMemo(() => resolveVariant(variant, theme.colors), [variant, theme.colors]);
|
|
@@ -203,13 +221,14 @@ const FabWebComponent = ({
|
|
|
203
221
|
...placementStyle(placement, offset)
|
|
204
222
|
};
|
|
205
223
|
if (isExtended) {
|
|
206
|
-
|
|
207
|
-
base.
|
|
224
|
+
const pad = sizeConfig.diameter <= 44 ? 14 : 20;
|
|
225
|
+
base.paddingLeft = pad;
|
|
226
|
+
base.paddingRight = pad;
|
|
208
227
|
} else {
|
|
209
228
|
base.width = sizeConfig.diameter;
|
|
210
229
|
}
|
|
211
230
|
return base;
|
|
212
|
-
}, [variantColors, sizeConfig.diameter, sizeConfig.fontSize, zIndex, restShadow, hoverShadow, placement, offset, isExtended
|
|
231
|
+
}, [variantColors, sizeConfig.diameter, sizeConfig.fontSize, zIndex, restShadow, hoverShadow, placement, offset, isExtended]);
|
|
213
232
|
const handleClick = useCallback(event => {
|
|
214
233
|
if (disabled) {
|
|
215
234
|
event.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","memo","useCallback","useEffect","useId","useMemo","useTheme","jsx","_jsx","jsxs","_jsxs","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","PILL_RADIUS","PRESS_SCALE","DEFAULT_OFFSET","DEFAULT_Z_INDEX","STYLE_ID","BLOOM_FAB_CSS","useFabCss","document","getElementById","style","createElement","id","textContent","head","appendChild","placementStyle","placement","offset","position","isBottom","bottom","marginTop","top","alignSelf","marginRight","marginLeft","resolveVariant","variant","c","background","card","foreground","text","ring","primary","primaryForeground","FabWebComponent","onPress","onClick","icon","children","label","
|
|
1
|
+
{"version":3,"names":["React","memo","useCallback","useEffect","useId","useMemo","useTheme","jsx","_jsx","jsxs","_jsxs","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","MIN_NUMERIC_ICON_BOX","resolveSize","size","Math","max","round","PILL_RADIUS","PRESS_SCALE","DEFAULT_OFFSET","DEFAULT_Z_INDEX","STYLE_ID","BLOOM_FAB_CSS","useFabCss","document","getElementById","style","createElement","id","textContent","head","appendChild","placementStyle","placement","offset","position","isBottom","bottom","marginTop","top","alignSelf","marginRight","marginLeft","resolveVariant","variant","c","background","card","foreground","text","ring","primary","primaryForeground","FabWebComponent","onPress","onClick","icon","children","label","disabled","accessibilityLabel","ariaLabelProp","accessibilityHint","labelStyle","className","testID","zIndex","title","type","theme","reactId","resolvedId","sizeConfig","isExtended","length","content","variantColors","colors","restShadow","shadow","hoverShadow","containerStyle","base","backgroundColor","color","borderRadius","height","boxShadow","fontWeight","pad","paddingLeft","paddingRight","width","handleClick","event","preventDefault","ariaLabel","composedClassName","concat","join","undefined","display","alignItems","justifyContent","Fab","displayName"],"sourceRoot":"../../../src","sources":["fab/Fab.web.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Fab.d.ts","sourceRoot":"","sources":["../../../../src/fab/Fab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAa7C,OAAO,KAAK,EAAgB,QAAQ,EAAuB,MAAM,SAAS,CAAC;AAE3E,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Fab.d.ts","sourceRoot":"","sources":["../../../../src/fab/Fab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAa7C,OAAO,KAAK,EAAgB,QAAQ,EAAuB,MAAM,SAAS,CAAC;AAE3E,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAyM3E,eAAO,MAAM,GAAG,sCAAqB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Fab.web.d.ts","sourceRoot":"","sources":["../../../../src/fab/Fab.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,QAAQ,EAAuB,MAAM,SAAS,CAAC;AAE3E,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Fab.web.d.ts","sourceRoot":"","sources":["../../../../src/fab/Fab.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,QAAQ,EAAuB,MAAM,SAAS,CAAC;AAE3E,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAyR3E,eAAO,MAAM,GAAG,sCAAwB,CAAC"}
|
|
@@ -10,13 +10,19 @@ import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
|
|
|
10
10
|
*/
|
|
11
11
|
export type FabVariant = 'primary' | 'secondary' | 'surface';
|
|
12
12
|
/**
|
|
13
|
-
* FAB
|
|
13
|
+
* FAB size presets, matching Material-ish conventions but in Bloom's scale:
|
|
14
14
|
* - `small` — 40px (compact / dense layouts)
|
|
15
15
|
* - `medium` — 56px (the canonical FAB; the default)
|
|
16
16
|
* - `large` — 64px (high-prominence primary action)
|
|
17
17
|
*
|
|
18
18
|
* In the `extended` variant the height tracks the size but the FAB grows
|
|
19
19
|
* horizontally to fit its icon + label as a pill.
|
|
20
|
+
*
|
|
21
|
+
* The `size` prop ALSO accepts a raw pixel `number` for an exact diameter
|
|
22
|
+
* between (or outside) the presets — e.g. `size={48}` for a FAB halfway between
|
|
23
|
+
* `small` and `medium`. A numeric size sets the diameter directly, derives the
|
|
24
|
+
* icon box as `round(size * 0.5)` (min 22px) and keeps the circle radius at
|
|
25
|
+
* `size / 2`.
|
|
20
26
|
*/
|
|
21
27
|
export type FabSize = 'small' | 'medium' | 'large';
|
|
22
28
|
/**
|
|
@@ -61,7 +67,11 @@ export interface FabProps {
|
|
|
61
67
|
*/
|
|
62
68
|
label?: string;
|
|
63
69
|
variant?: FabVariant;
|
|
64
|
-
|
|
70
|
+
/**
|
|
71
|
+
* A preset (`'small' | 'medium' | 'large'`) or a raw pixel diameter
|
|
72
|
+
* (`number`). Defaults to `'medium'`. See {@link FabSize}.
|
|
73
|
+
*/
|
|
74
|
+
size?: FabSize | number;
|
|
65
75
|
/**
|
|
66
76
|
* Corner of the containing block to anchor to. Defaults to `'bottom-right'`.
|
|
67
77
|
* See {@link FabPlacement}. The DEFAULT never escapes the containing column
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/fab/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE;;;;;;;;GAQG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAE7D
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/fab/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE;;;;;;;;GAQG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAE7D;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,YAAY,GACpB,cAAc,GACd,aAAa,GACb,WAAW,GACX,UAAU,GACV,QAAQ,CAAC;AAEb,MAAM,WAAW,QAAQ;IACvB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAExB;;;;OAIG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC;IAEzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,8CAA8C;IAC9C,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAUhB,wDAAwD;IACxD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6DAA6D;IAC7D,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Fab.d.ts","sourceRoot":"","sources":["../../../../src/fab/Fab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAa7C,OAAO,KAAK,EAAgB,QAAQ,EAAuB,MAAM,SAAS,CAAC;AAE3E,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Fab.d.ts","sourceRoot":"","sources":["../../../../src/fab/Fab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAa7C,OAAO,KAAK,EAAgB,QAAQ,EAAuB,MAAM,SAAS,CAAC;AAE3E,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAyM3E,eAAO,MAAM,GAAG,sCAAqB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Fab.web.d.ts","sourceRoot":"","sources":["../../../../src/fab/Fab.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,QAAQ,EAAuB,MAAM,SAAS,CAAC;AAE3E,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Fab.web.d.ts","sourceRoot":"","sources":["../../../../src/fab/Fab.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,QAAQ,EAAuB,MAAM,SAAS,CAAC;AAE3E,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAyR3E,eAAO,MAAM,GAAG,sCAAwB,CAAC"}
|
|
@@ -10,13 +10,19 @@ import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
|
|
|
10
10
|
*/
|
|
11
11
|
export type FabVariant = 'primary' | 'secondary' | 'surface';
|
|
12
12
|
/**
|
|
13
|
-
* FAB
|
|
13
|
+
* FAB size presets, matching Material-ish conventions but in Bloom's scale:
|
|
14
14
|
* - `small` — 40px (compact / dense layouts)
|
|
15
15
|
* - `medium` — 56px (the canonical FAB; the default)
|
|
16
16
|
* - `large` — 64px (high-prominence primary action)
|
|
17
17
|
*
|
|
18
18
|
* In the `extended` variant the height tracks the size but the FAB grows
|
|
19
19
|
* horizontally to fit its icon + label as a pill.
|
|
20
|
+
*
|
|
21
|
+
* The `size` prop ALSO accepts a raw pixel `number` for an exact diameter
|
|
22
|
+
* between (or outside) the presets — e.g. `size={48}` for a FAB halfway between
|
|
23
|
+
* `small` and `medium`. A numeric size sets the diameter directly, derives the
|
|
24
|
+
* icon box as `round(size * 0.5)` (min 22px) and keeps the circle radius at
|
|
25
|
+
* `size / 2`.
|
|
20
26
|
*/
|
|
21
27
|
export type FabSize = 'small' | 'medium' | 'large';
|
|
22
28
|
/**
|
|
@@ -61,7 +67,11 @@ export interface FabProps {
|
|
|
61
67
|
*/
|
|
62
68
|
label?: string;
|
|
63
69
|
variant?: FabVariant;
|
|
64
|
-
|
|
70
|
+
/**
|
|
71
|
+
* A preset (`'small' | 'medium' | 'large'`) or a raw pixel diameter
|
|
72
|
+
* (`number`). Defaults to `'medium'`. See {@link FabSize}.
|
|
73
|
+
*/
|
|
74
|
+
size?: FabSize | number;
|
|
65
75
|
/**
|
|
66
76
|
* Corner of the containing block to anchor to. Defaults to `'bottom-right'`.
|
|
67
77
|
* See {@link FabPlacement}. The DEFAULT never escapes the containing column
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/fab/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE;;;;;;;;GAQG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAE7D
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/fab/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE;;;;;;;;GAQG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAE7D;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,YAAY,GACpB,cAAc,GACd,aAAa,GACb,WAAW,GACX,UAAU,GACV,QAAQ,CAAC;AAEb,MAAM,WAAW,QAAQ;IACvB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAExB;;;;OAIG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC;IAEzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,8CAA8C;IAC9C,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAUhB,wDAAwD;IACxD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6DAA6D;IAC7D,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC"}
|
package/package.json
CHANGED
|
@@ -73,4 +73,21 @@ describe('Fab (native)', () => {
|
|
|
73
73
|
);
|
|
74
74
|
expect(getByText('★')).toBeTruthy();
|
|
75
75
|
});
|
|
76
|
+
|
|
77
|
+
it('accepts a numeric size as a raw pixel diameter', () => {
|
|
78
|
+
const { getByTestId } = renderWithTheme(
|
|
79
|
+
<Fab testID="fab" size={48} accessibilityLabel="Add" icon={<Text>+</Text>} />,
|
|
80
|
+
);
|
|
81
|
+
// The Pressable's style is a flat-able array; the container object (first
|
|
82
|
+
// entry) carries the resolved geometry.
|
|
83
|
+
const style = getByTestId('fab').props.style as Array<
|
|
84
|
+
{ width?: number; height?: number } | false
|
|
85
|
+
>;
|
|
86
|
+
const container = style.find(
|
|
87
|
+
(s): s is { width?: number; height?: number } =>
|
|
88
|
+
typeof s === 'object' && s !== null && 'width' in s,
|
|
89
|
+
);
|
|
90
|
+
expect(container?.width).toBe(48);
|
|
91
|
+
expect(container?.height).toBe(48);
|
|
92
|
+
});
|
|
76
93
|
});
|
|
@@ -124,4 +124,18 @@ describe('Fab.web', () => {
|
|
|
124
124
|
const c = mount(<Fab accessibilityLabel="Add" testID="my-fab" icon={<span>+</span>} />);
|
|
125
125
|
expect(c.querySelector('[data-testid="my-fab"]')?.tagName).toBe('BUTTON');
|
|
126
126
|
});
|
|
127
|
+
|
|
128
|
+
it('accepts a numeric size as a raw pixel diameter', () => {
|
|
129
|
+
const c = mount(<Fab accessibilityLabel="Add" size={48} icon={<span>+</span>} />);
|
|
130
|
+
const fab = getByRole(c, 'button');
|
|
131
|
+
expect(fab.style.width).toBe('48px');
|
|
132
|
+
expect(fab.style.height).toBe('48px');
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
it('keeps preset sizes working (medium = 56px diameter)', () => {
|
|
136
|
+
const c = mount(<Fab accessibilityLabel="Add" size="medium" icon={<span>+</span>} />);
|
|
137
|
+
const fab = getByRole(c, 'button');
|
|
138
|
+
expect(fab.style.width).toBe('56px');
|
|
139
|
+
expect(fab.style.height).toBe('56px');
|
|
140
|
+
});
|
|
127
141
|
});
|
package/src/fab/Fab.stories.tsx
CHANGED
|
@@ -47,6 +47,15 @@ export const Extended: Story = {
|
|
|
47
47
|
args: { label: 'Compose' },
|
|
48
48
|
};
|
|
49
49
|
|
|
50
|
+
/**
|
|
51
|
+
* A raw pixel diameter via `size={number}` — here 48px, halfway between the
|
|
52
|
+
* `small` (40) and `medium` (56) presets. The icon box and font scale with the
|
|
53
|
+
* diameter automatically.
|
|
54
|
+
*/
|
|
55
|
+
export const NumericSize: Story = {
|
|
56
|
+
args: { size: 48 },
|
|
57
|
+
};
|
|
58
|
+
|
|
50
59
|
/**
|
|
51
60
|
* The FAB anchored to the bottom-right of a CONSTRAINED column. On web the FAB
|
|
52
61
|
* uses `position: sticky`, so it tracks the bottom of THIS column (not the
|
package/src/fab/Fab.tsx
CHANGED
|
@@ -15,15 +15,41 @@ import type { FabPlacement, FabProps, FabSize, FabVariant } from './types';
|
|
|
15
15
|
|
|
16
16
|
export type { FabProps, FabVariant, FabSize, FabPlacement } from './types';
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
interface ResolvedSize {
|
|
19
|
+
diameter: number;
|
|
20
|
+
iconBox: number;
|
|
21
|
+
fontSize: number;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// Material-style FAB scale. `small` (40px) keeps a full 24px icon box so the
|
|
25
|
+
// glyph reads clearly; `medium` (56px) is the canonical FAB; `large` (64px) is
|
|
26
|
+
// the high-prominence action.
|
|
27
|
+
const SIZE_CONFIG: Record<FabSize, ResolvedSize> = {
|
|
22
28
|
small: { diameter: 40, iconBox: 24, fontSize: 14 },
|
|
23
29
|
medium: { diameter: 56, iconBox: 24, fontSize: 15 },
|
|
24
30
|
large: { diameter: 64, iconBox: 28, fontSize: 16 },
|
|
25
31
|
};
|
|
26
32
|
|
|
33
|
+
const MIN_NUMERIC_ICON_BOX = 22;
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Resolve a `size` prop (preset name or raw pixel diameter) to concrete pixel
|
|
37
|
+
* geometry. A numeric size sets the diameter directly, derives the icon box as
|
|
38
|
+
* `round(size * 0.5)` (clamped to a sensible minimum) and lets the circle radius
|
|
39
|
+
* stay `size / 2` (the container uses a full pill radius, so any square stays a
|
|
40
|
+
* perfect circle).
|
|
41
|
+
*/
|
|
42
|
+
function resolveSize(size: FabSize | number): ResolvedSize {
|
|
43
|
+
if (typeof size === 'number') {
|
|
44
|
+
return {
|
|
45
|
+
diameter: size,
|
|
46
|
+
iconBox: Math.max(MIN_NUMERIC_ICON_BOX, Math.round(size * 0.5)),
|
|
47
|
+
fontSize: Math.max(13, Math.round(size * 0.27)),
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
return SIZE_CONFIG[size];
|
|
51
|
+
}
|
|
52
|
+
|
|
27
53
|
const PILL_RADIUS = 999;
|
|
28
54
|
const PRESS_SCALE = 0.94;
|
|
29
55
|
const DEFAULT_OFFSET = 16;
|
|
@@ -71,7 +97,7 @@ const FabComponent: React.FC<FabProps> = ({
|
|
|
71
97
|
zIndex = DEFAULT_Z_INDEX,
|
|
72
98
|
}) => {
|
|
73
99
|
const theme = useTheme();
|
|
74
|
-
const sizeConfig =
|
|
100
|
+
const sizeConfig = useMemo(() => resolveSize(size), [size]);
|
|
75
101
|
const isExtended = label != null && label.length > 0;
|
|
76
102
|
const content = icon ?? children;
|
|
77
103
|
|
|
@@ -99,13 +125,13 @@ const FabComponent: React.FC<FabProps> = ({
|
|
|
99
125
|
elevation: 6,
|
|
100
126
|
};
|
|
101
127
|
if (isExtended) {
|
|
102
|
-
base.paddingHorizontal =
|
|
128
|
+
base.paddingHorizontal = sizeConfig.diameter <= 44 ? 14 : 20;
|
|
103
129
|
base.gap = 8;
|
|
104
130
|
} else {
|
|
105
131
|
base.width = sizeConfig.diameter;
|
|
106
132
|
}
|
|
107
133
|
return base;
|
|
108
|
-
}, [resolvedColors.background, sizeConfig.diameter, theme.colors.shadow, isExtended
|
|
134
|
+
}, [resolvedColors.background, sizeConfig.diameter, theme.colors.shadow, isExtended]);
|
|
109
135
|
|
|
110
136
|
const labelTextStyle = useMemo((): TextStyle => ({
|
|
111
137
|
fontSize: sizeConfig.fontSize,
|
package/src/fab/Fab.web.tsx
CHANGED
|
@@ -14,15 +14,40 @@ import type { FabPlacement, FabProps, FabSize, FabVariant } from './types';
|
|
|
14
14
|
|
|
15
15
|
export type { FabProps, FabVariant, FabSize, FabPlacement } from './types';
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
interface ResolvedSize {
|
|
18
|
+
diameter: number;
|
|
19
|
+
iconBox: number;
|
|
20
|
+
fontSize: number;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// Material-style FAB scale. `small` (40px) keeps a full 24px icon box so the
|
|
24
|
+
// glyph reads clearly; `medium` (56px) is the canonical FAB; `large` (64px) is
|
|
25
|
+
// the high-prominence action.
|
|
26
|
+
const SIZE_CONFIG: Record<FabSize, ResolvedSize> = {
|
|
21
27
|
small: { diameter: 40, iconBox: 24, fontSize: 14 },
|
|
22
28
|
medium: { diameter: 56, iconBox: 24, fontSize: 15 },
|
|
23
29
|
large: { diameter: 64, iconBox: 28, fontSize: 16 },
|
|
24
30
|
};
|
|
25
31
|
|
|
32
|
+
const MIN_NUMERIC_ICON_BOX = 22;
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Resolve a `size` prop (preset name or raw pixel diameter) to concrete pixel
|
|
36
|
+
* geometry. Mirrors the native `resolveSize` exactly so a numeric size renders
|
|
37
|
+
* identically on both platforms. A numeric size sets the diameter directly and
|
|
38
|
+
* derives the icon box as `round(size * 0.5)` (clamped to a sensible minimum).
|
|
39
|
+
*/
|
|
40
|
+
function resolveSize(size: FabSize | number): ResolvedSize {
|
|
41
|
+
if (typeof size === 'number') {
|
|
42
|
+
return {
|
|
43
|
+
diameter: size,
|
|
44
|
+
iconBox: Math.max(MIN_NUMERIC_ICON_BOX, Math.round(size * 0.5)),
|
|
45
|
+
fontSize: Math.max(13, Math.round(size * 0.27)),
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
return SIZE_CONFIG[size];
|
|
49
|
+
}
|
|
50
|
+
|
|
26
51
|
const PILL_RADIUS = 999;
|
|
27
52
|
const PRESS_SCALE = 0.94;
|
|
28
53
|
const DEFAULT_OFFSET = 16;
|
|
@@ -176,7 +201,7 @@ const FabWebComponent: React.FC<FabProps> = ({
|
|
|
176
201
|
const reactId = useId();
|
|
177
202
|
const resolvedId = id ?? `bloom-fab-${reactId}`;
|
|
178
203
|
|
|
179
|
-
const sizeConfig =
|
|
204
|
+
const sizeConfig = useMemo(() => resolveSize(size), [size]);
|
|
180
205
|
const isExtended = label != null && label.length > 0;
|
|
181
206
|
const content = icon ?? children;
|
|
182
207
|
const variantColors = useMemo(() => resolveVariant(variant, theme.colors), [variant, theme.colors]);
|
|
@@ -202,8 +227,9 @@ const FabWebComponent: React.FC<FabProps> = ({
|
|
|
202
227
|
...placementStyle(placement, offset),
|
|
203
228
|
};
|
|
204
229
|
if (isExtended) {
|
|
205
|
-
|
|
206
|
-
base.
|
|
230
|
+
const pad = sizeConfig.diameter <= 44 ? 14 : 20;
|
|
231
|
+
base.paddingLeft = pad;
|
|
232
|
+
base.paddingRight = pad;
|
|
207
233
|
} else {
|
|
208
234
|
base.width = sizeConfig.diameter;
|
|
209
235
|
}
|
|
@@ -218,7 +244,6 @@ const FabWebComponent: React.FC<FabProps> = ({
|
|
|
218
244
|
placement,
|
|
219
245
|
offset,
|
|
220
246
|
isExtended,
|
|
221
|
-
size,
|
|
222
247
|
]);
|
|
223
248
|
|
|
224
249
|
const handleClick = useCallback(
|
package/src/fab/types.ts
CHANGED
|
@@ -12,13 +12,19 @@ import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
|
|
|
12
12
|
export type FabVariant = 'primary' | 'secondary' | 'surface';
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
|
-
* FAB
|
|
15
|
+
* FAB size presets, matching Material-ish conventions but in Bloom's scale:
|
|
16
16
|
* - `small` — 40px (compact / dense layouts)
|
|
17
17
|
* - `medium` — 56px (the canonical FAB; the default)
|
|
18
18
|
* - `large` — 64px (high-prominence primary action)
|
|
19
19
|
*
|
|
20
20
|
* In the `extended` variant the height tracks the size but the FAB grows
|
|
21
21
|
* horizontally to fit its icon + label as a pill.
|
|
22
|
+
*
|
|
23
|
+
* The `size` prop ALSO accepts a raw pixel `number` for an exact diameter
|
|
24
|
+
* between (or outside) the presets — e.g. `size={48}` for a FAB halfway between
|
|
25
|
+
* `small` and `medium`. A numeric size sets the diameter directly, derives the
|
|
26
|
+
* icon box as `round(size * 0.5)` (min 22px) and keeps the circle radius at
|
|
27
|
+
* `size / 2`.
|
|
22
28
|
*/
|
|
23
29
|
export type FabSize = 'small' | 'medium' | 'large';
|
|
24
30
|
|
|
@@ -73,7 +79,11 @@ export interface FabProps {
|
|
|
73
79
|
label?: string;
|
|
74
80
|
|
|
75
81
|
variant?: FabVariant;
|
|
76
|
-
|
|
82
|
+
/**
|
|
83
|
+
* A preset (`'small' | 'medium' | 'large'`) or a raw pixel diameter
|
|
84
|
+
* (`number`). Defaults to `'medium'`. See {@link FabSize}.
|
|
85
|
+
*/
|
|
86
|
+
size?: FabSize | number;
|
|
77
87
|
|
|
78
88
|
/**
|
|
79
89
|
* Corner of the containing block to anchor to. Defaults to `'bottom-right'`.
|