@bitrise/bitkit-v2 0.3.269 → 0.3.270
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.
|
@@ -38,6 +38,7 @@ var BitkitAlert = (props) => {
|
|
|
38
38
|
rel: action.target === "_blank" ? "noopener noreferrer" : void 0
|
|
39
39
|
},
|
|
40
40
|
onClick: action.onClick,
|
|
41
|
+
marginBlock: rem(-4),
|
|
41
42
|
marginInlineEnd: "12",
|
|
42
43
|
whiteSpace: "nowrap",
|
|
43
44
|
children: action.label
|
|
@@ -45,7 +46,7 @@ var BitkitAlert = (props) => {
|
|
|
45
46
|
}),
|
|
46
47
|
!!dismissible && /* @__PURE__ */ jsx(BitkitCloseButton, {
|
|
47
48
|
alignSelf: "flex-start",
|
|
48
|
-
|
|
49
|
+
marginBlock: rem(-4),
|
|
49
50
|
size: "sm",
|
|
50
51
|
onClick: onClose,
|
|
51
52
|
colorVariant: BUTTON_COLORS_MAP[variant]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitAlert.js","names":[],"sources":["../../../lib/components/BitkitAlert/BitkitAlert.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\nexport type AlertVariants = NotificationVariant;\nexport type ActionProps = NotificationAction;\n\nexport interface BitkitAlertProps extends AlertRootProps {\n action?: ActionProps;\n dismissible?: boolean;\n messageText: ReactNode;\n onClose?: () => void;\n titleText?: ReactNode;\n variant: AlertVariants;\n}\n\nconst BitkitAlert = (props: BitkitAlertProps) => {\n const { action, dismissible, messageText, onClose, titleText, variant, ...rest } = props;\n const IconComponent = ICON_COMPONENTS_MAP[variant];\n\n return (\n <Alert.Root variant={variant} {...rest}>\n <Alert.Indicator asChild={variant !== 'progress'}>\n <IconComponent />\n </Alert.Indicator>\n <Box display=\"flex\" flex=\"1\" minWidth=\"0\" flexWrap=\"wrap\" alignItems=\"center\" columnGap=\"16\" rowGap={rem(11)}>\n <Alert.Content minWidth=\"0\" flex={`1 1 ${rem(240)}`}>\n {titleText && <Alert.Title>{titleText}</Alert.Title>}\n <Alert.Description>{messageText}</Alert.Description>\n </Alert.Content>\n {!!action && (\n <BitkitColorButton\n as={action.href ? 'a' : 'button'}\n colorVariant={BUTTON_COLORS_MAP[variant]}\n {...(action.href && {\n href: action.href,\n target: action.target,\n rel: action.target === '_blank' ? 'noopener noreferrer' : undefined,\n })}\n onClick={action.onClick}\n marginInlineEnd=\"12\"\n whiteSpace=\"nowrap\"\n >\n {action.label}\n </BitkitColorButton>\n )}\n </Box>\n {!!dismissible && (\n <BitkitCloseButton\n
|
|
1
|
+
{"version":3,"file":"BitkitAlert.js","names":[],"sources":["../../../lib/components/BitkitAlert/BitkitAlert.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\nexport type AlertVariants = NotificationVariant;\nexport type ActionProps = NotificationAction;\n\nexport interface BitkitAlertProps extends AlertRootProps {\n action?: ActionProps;\n dismissible?: boolean;\n messageText: ReactNode;\n onClose?: () => void;\n titleText?: ReactNode;\n variant: AlertVariants;\n}\n\nconst BitkitAlert = (props: BitkitAlertProps) => {\n const { action, dismissible, messageText, onClose, titleText, variant, ...rest } = props;\n const IconComponent = ICON_COMPONENTS_MAP[variant];\n\n return (\n <Alert.Root variant={variant} {...rest}>\n <Alert.Indicator asChild={variant !== 'progress'}>\n <IconComponent />\n </Alert.Indicator>\n {/* content + action share a wrapping row so the action drops below the text on narrow widths */}\n <Box display=\"flex\" flex=\"1\" minWidth=\"0\" flexWrap=\"wrap\" alignItems=\"center\" columnGap=\"16\" rowGap={rem(11)}>\n <Alert.Content minWidth=\"0\" flex={`1 1 ${rem(240)}`}>\n {titleText && <Alert.Title>{titleText}</Alert.Title>}\n <Alert.Description>{messageText}</Alert.Description>\n </Alert.Content>\n {!!action && (\n <BitkitColorButton\n as={action.href ? 'a' : 'button'}\n colorVariant={BUTTON_COLORS_MAP[variant]}\n {...(action.href && {\n href: action.href,\n target: action.target,\n rel: action.target === '_blank' ? 'noopener noreferrer' : undefined,\n })}\n onClick={action.onClick}\n // 32px button rides the ~24px text line without growing the row, so `align-items:\n // center` lines it up with the icon/text on a single line and centers it on multi-line.\n marginBlock={rem(-4)}\n marginInlineEnd=\"12\"\n whiteSpace=\"nowrap\"\n >\n {action.label}\n </BitkitColorButton>\n )}\n </Box>\n {!!dismissible && (\n <BitkitCloseButton\n // same trick as the action button: negative block margin keeps the 32px button from\n // inflating a single-line row, while `flex-start` pins it to the first line.\n alignSelf=\"flex-start\"\n marginBlock={rem(-4)}\n size=\"sm\"\n onClick={onClose}\n colorVariant={BUTTON_COLORS_MAP[variant]}\n />\n )}\n </Alert.Root>\n );\n};\n\nexport default BitkitAlert;\n"],"mappings":";;;;;;;;AAsBA,IAAM,eAAe,UAA4B;CAC/C,MAAM,EAAE,QAAQ,aAAa,aAAa,SAAS,WAAW,SAAS,GAAG,SAAS;CACnF,MAAM,gBAAgB,oBAAoB;CAE1C,OACE,qBAAC,MAAM,MAAP;EAAqB;EAAS,GAAI;YAAlC;GACE,oBAAC,MAAM,WAAP;IAAiB,SAAS,YAAY;cACpC,oBAAC,eAAD,CAAgB,CAAA;GACD,CAAA;GAEjB,qBAAC,KAAD;IAAK,SAAQ;IAAO,MAAK;IAAI,UAAS;IAAI,UAAS;IAAO,YAAW;IAAS,WAAU;IAAK,QAAQ,IAAI,EAAE;cAA3G,CACE,qBAAC,MAAM,SAAP;KAAe,UAAS;KAAI,MAAM,OAAO,IAAI,GAAG;eAAhD,CACG,aAAa,oBAAC,MAAM,OAAP,EAAA,UAAc,UAAuB,CAAA,GACnD,oBAAC,MAAM,aAAP,EAAA,UAAoB,YAA+B,CAAA,CACtC;QACd,CAAC,CAAC,UACD,oBAAC,mBAAD;KACE,IAAI,OAAO,OAAO,MAAM;KACxB,cAAc,kBAAkB;KAChC,GAAK,OAAO,QAAQ;MAClB,MAAM,OAAO;MACb,QAAQ,OAAO;MACf,KAAK,OAAO,WAAW,WAAW,wBAAwB,KAAA;KAC5D;KACA,SAAS,OAAO;KAGhB,aAAa,IAAI,EAAE;KACnB,iBAAgB;KAChB,YAAW;eAEV,OAAO;IACS,CAAA,CAElB;;GACJ,CAAC,CAAC,eACD,oBAAC,mBAAD;IAGE,WAAU;IACV,aAAa,IAAI,EAAE;IACnB,MAAK;IACL,SAAS;IACT,cAAc,kBAAkB;GACjC,CAAA;EAEO;;AAEhB"}
|
|
@@ -13,8 +13,8 @@ var alertSlotRecipe = defineSlotRecipe({
|
|
|
13
13
|
border: "1px solid",
|
|
14
14
|
borderRadius: "8",
|
|
15
15
|
paddingBlock: rem(11),
|
|
16
|
-
paddingInlineStart:
|
|
17
|
-
paddingInlineEnd:
|
|
16
|
+
paddingInlineStart: "12",
|
|
17
|
+
paddingInlineEnd: "8",
|
|
18
18
|
width: "100%"
|
|
19
19
|
},
|
|
20
20
|
indicator: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Alert.recipe.ts"],"sourcesContent":["import { alertAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { ICONS_MAP, NOTIFICATION_VARIANTS, ROOT_MAP, TEXT_MAP } from '../common/AlertAndToast.common';\nimport { rem } from '../themeUtils';\n\nconst alertSlotRecipe = defineSlotRecipe({\n className: 'alert',\n slots: alertAnatomy.keys(),\n base: {\n root: {\n display: 'flex',\n alignItems: 'center',\n border: '1px solid',\n borderRadius: '8',\n paddingBlock: rem(11),\n paddingInlineStart:
|
|
1
|
+
{"version":3,"file":"Alert.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Alert.recipe.ts"],"sourcesContent":["import { alertAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { ICONS_MAP, NOTIFICATION_VARIANTS, ROOT_MAP, TEXT_MAP } from '../common/AlertAndToast.common';\nimport { rem } from '../themeUtils';\n\nconst alertSlotRecipe = defineSlotRecipe({\n className: 'alert',\n slots: alertAnatomy.keys(),\n base: {\n // Everything is vertically centered. The icon hugs the top (`flex-start` below) so it lines\n // up with the first text line on multi-line alerts; the 32px action/close buttons ride the\n // text line via a negative block margin (see BitkitAlert.tsx) so they don't grow the row.\n // `rem(11)` block padding (not 12) lands the single-line alert on exactly 48px once the 1px\n // border is added.\n root: {\n display: 'flex',\n alignItems: 'center',\n border: '1px solid',\n borderRadius: '8',\n paddingBlock: rem(11),\n paddingInlineStart: '12',\n paddingInlineEnd: '8',\n width: '100%',\n },\n indicator: {\n alignSelf: 'flex-start',\n marginInlineEnd: '8',\n width: '24',\n height: '24',\n },\n content: {\n flex: '1',\n },\n title: {\n textStyle: 'comp/notification/title',\n '& + *': {\n marginBlockStart: '4',\n },\n },\n description: {\n textStyle: 'comp/notification/message',\n '&:first-of-type': {\n marginBlockStart: '2',\n },\n },\n },\n variants: {\n variant: Object.fromEntries(\n NOTIFICATION_VARIANTS.map((v) => [\n v,\n {\n indicator: { color: ICONS_MAP[v] },\n root: { ...ROOT_MAP[v], color: TEXT_MAP[v] },\n },\n ]),\n ),\n },\n defaultVariants: {\n variant: 'info',\n },\n});\n\nexport default alertSlotRecipe;\n"],"mappings":";;;;;AAMA,IAAM,kBAAkB,iBAAiB;CACvC,WAAW;CACX,OAAO,aAAa,KAAK;CACzB,MAAM;EAMJ,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,QAAQ;GACR,cAAc;GACd,cAAc,IAAI,EAAE;GACpB,oBAAoB;GACpB,kBAAkB;GAClB,OAAO;EACT;EACA,WAAW;GACT,WAAW;GACX,iBAAiB;GACjB,OAAO;GACP,QAAQ;EACV;EACA,SAAS,EACP,MAAM,IACR;EACA,OAAO;GACL,WAAW;GACX,SAAS,EACP,kBAAkB,IACpB;EACF;EACA,aAAa;GACX,WAAW;GACX,mBAAmB,EACjB,kBAAkB,IACpB;EACF;CACF;CACA,UAAU,EACR,SAAS,OAAO,YACd,sBAAsB,KAAK,MAAM,CAC/B,GACA;EACE,WAAW,EAAE,OAAO,UAAU,GAAG;EACjC,MAAM;GAAE,GAAG,SAAS;GAAI,OAAO,SAAS;EAAG;CAC7C,CACF,CAAC,CACH,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}
|