@razorpay/blade 3.6.0 → 3.6.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @razorpay/blade
 
+## 3.6.2
+
+### Patch Changes
+
+- 63c950a: feat(IconButton): export IconButton
+  - Adds a new `IconButton` component useful for making transparent icon only buttons
+
+## 3.6.1
+
+### Patch Changes
+
+- add9b3e: fix(Typography): inherit `text-align` property from parent in Typography components
+
 ## 3.6.0
 
 ### Minor Changes

package/build/components/index.d.ts

@@ -1069,6 +1069,35 @@ declare type ButtonWithIconProps = ButtonCommonProps & {
 declare type ButtonProps = ButtonWithoutIconProps | ButtonWithIconProps;
 declare const Button: ({ children, icon, iconPosition, isDisabled, isFullWidth, isLoading, onClick, size, type, variant, accessibilityLabel, }: ButtonProps) => React.ReactElement;
 
+declare type IconButtonProps = {
+    /**
+     * Icon component to be rendered, eg. `CloseIcon`
+     */
+    icon: IconComponent$1;
+    onClick: () => void;
+    /**
+     * Icon size
+     *
+     * @default 'medium'
+     */
+    size?: 'medium' | 'large';
+    /**
+     * Icon contrast
+     *
+     * @default 'low'
+     */
+    contrast?: 'low' | 'high';
+    /**
+     * Sets aria-label to help users know what the action does, eg 'Dismiss alert'
+     */
+    accessibilityLabel: string;
+};
+/**
+ * Component for making clickable icons with transparent background.
+ * For other cases please use `Button` component with `icon` prop.
+ */
+declare const IconButton: ({ icon, onClick, size, contrast, accessibilityLabel, }: IconButtonProps) => ReactElement;
+
 declare type CounterProps = {
     /**
      * Sets the value for the counter.
@@ -2015,4 +2044,4 @@ declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => JSX.Element
 
 declare const screenReaderStyles: CSSObject;
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, Counter, CounterProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconComponent, IconProps, IconSize, InfoIcon, Link, LinkIcon, LinkProps, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, Counter, CounterProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, InfoIcon, Link, LinkIcon, LinkProps, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };

package/build/components/index.native.d.ts

@@ -1069,6 +1069,35 @@ declare type ButtonWithIconProps = ButtonCommonProps & {
 declare type ButtonProps = ButtonWithoutIconProps | ButtonWithIconProps;
 declare const Button: ({ children, icon, iconPosition, isDisabled, isFullWidth, isLoading, onClick, size, type, variant, accessibilityLabel, }: ButtonProps) => React.ReactElement;
 
+declare type IconButtonProps = {
+    /**
+     * Icon component to be rendered, eg. `CloseIcon`
+     */
+    icon: IconComponent$1;
+    onClick: () => void;
+    /**
+     * Icon size
+     *
+     * @default 'medium'
+     */
+    size?: 'medium' | 'large';
+    /**
+     * Icon contrast
+     *
+     * @default 'low'
+     */
+    contrast?: 'low' | 'high';
+    /**
+     * Sets aria-label to help users know what the action does, eg 'Dismiss alert'
+     */
+    accessibilityLabel: string;
+};
+/**
+ * Component for making clickable icons with transparent background.
+ * For other cases please use `Button` component with `icon` prop.
+ */
+declare const IconButton: ({ icon, onClick, size, contrast, accessibilityLabel, }: IconButtonProps) => ReactElement;
+
 declare type CounterProps = {
     /**
      * Sets the value for the counter.
@@ -2003,4 +2032,4 @@ declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => JSX.Element
 
 declare const screenReaderStyles: CSSObject;
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, Counter, CounterProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconComponent, IconProps, IconSize, InfoIcon, Link, LinkIcon, LinkProps, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, Counter, CounterProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, InfoIcon, Link, LinkIcon, LinkProps, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };

package/build/components/index.native.js

@@ -3315,7 +3315,7 @@ var getSpacingValue=function getSpacingValue(_ref){var value=_ref.value,theme=_r
 
 var Box=styled.View(getBoxStyles);
 
-var getBaseTextStyles=function getBaseTextStyles(_ref){var _ref$color=_ref.color,color=_ref$color===void 0?'surface.text.normal.lowContrast':_ref$color,_ref$fontFamily=_ref.fontFamily,fontFamily=_ref$fontFamily===void 0?'text':_ref$fontFamily,_ref$fontSize=_ref.fontSize,fontSize=_ref$fontSize===void 0?200:_ref$fontSize,_ref$fontWeight=_ref.fontWeight,fontWeight=_ref$fontWeight===void 0?'regular':_ref$fontWeight,_ref$fontStyle=_ref.fontStyle,fontStyle=_ref$fontStyle===void 0?'normal':_ref$fontStyle,_ref$textDecorationLi=_ref.textDecorationLine,textDecorationLine=_ref$textDecorationLi===void 0?'none':_ref$textDecorationLi,_ref$lineHeight=_ref.lineHeight,lineHeight=_ref$lineHeight===void 0?'l':_ref$lineHeight,_ref$textAlign=_ref.textAlign,textAlign=_ref$textAlign===void 0?'left':_ref$textAlign,theme=_ref.theme;var textColor=get_1(theme.colors,color);var themeFontFamily=theme.typography.fonts.family[fontFamily];var themeFontSize=makeTypographySize(theme.typography.fonts.size[fontSize]);var themeFontWeight=theme.typography.fonts.weight[fontWeight];var themeLineHeight=makeTypographySize(theme.typography.lineHeights[lineHeight]);return {color:textColor,fontFamily:themeFontFamily,fontSize:themeFontSize,fontWeight:themeFontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:themeLineHeight,textAlign:textAlign,margin:0,padding:0};};
+var getBaseTextStyles=function getBaseTextStyles(_ref){var _ref$color=_ref.color,color=_ref$color===void 0?'surface.text.normal.lowContrast':_ref$color,_ref$fontFamily=_ref.fontFamily,fontFamily=_ref$fontFamily===void 0?'text':_ref$fontFamily,_ref$fontSize=_ref.fontSize,fontSize=_ref$fontSize===void 0?200:_ref$fontSize,_ref$fontWeight=_ref.fontWeight,fontWeight=_ref$fontWeight===void 0?'regular':_ref$fontWeight,_ref$fontStyle=_ref.fontStyle,fontStyle=_ref$fontStyle===void 0?'normal':_ref$fontStyle,_ref$textDecorationLi=_ref.textDecorationLine,textDecorationLine=_ref$textDecorationLi===void 0?'none':_ref$textDecorationLi,_ref$lineHeight=_ref.lineHeight,lineHeight=_ref$lineHeight===void 0?'l':_ref$lineHeight,textAlign=_ref.textAlign,theme=_ref.theme;var textColor=get_1(theme.colors,color);var themeFontFamily=theme.typography.fonts.family[fontFamily];var themeFontSize=makeTypographySize(theme.typography.fonts.size[fontSize]);var themeFontWeight=theme.typography.fonts.weight[fontWeight];var themeLineHeight=makeTypographySize(theme.typography.lineHeights[lineHeight]);return {color:textColor,fontFamily:themeFontFamily,fontSize:themeFontSize,fontWeight:themeFontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:themeLineHeight,textAlign:textAlign,margin:0,padding:0};};
 
 var _excluded$3=["color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","lineHeight","textAlign","as"];var StyledBaseText$1=styled.Text(function(_ref){var color=_ref.color,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize,fontWeight=_ref.fontWeight,fontStyle=_ref.fontStyle,textDecorationLine=_ref.textDecorationLine,lineHeight=_ref.lineHeight,textAlign=_ref.textAlign,as=_ref.as,props=_objectWithoutProperties(_ref,_excluded$3);if(as){throw new Error("[Blade: BaseText]: \"as\" prop is not supported for BaseText on React Native");}else {return getBaseTextStyles({color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,textAlign:textAlign,theme:props.theme});}});var BaseText=function BaseText(_ref2){var id=_ref2.id,color=_ref2.color,fontFamily=_ref2.fontFamily,fontSize=_ref2.fontSize,fontWeight=_ref2.fontWeight,fontStyle=_ref2.fontStyle,textDecorationLine=_ref2.textDecorationLine,lineHeight=_ref2.lineHeight,as=_ref2.as,textAlign=_ref2.textAlign,children=_ref2.children,truncateAfterLines=_ref2.truncateAfterLines,className=_ref2.className,style=_ref2.style,_ref2$accessibilityPr=_ref2.accessibilityProps,accessibilityProps=_ref2$accessibilityPr===void 0?{}:_ref2$accessibilityPr;return jsx(StyledBaseText$1,_extends({color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,as:as,textAlign:textAlign,numberOfLines:truncateAfterLines,className:className,style:style,id:id},makeAccessible(accessibilityProps),{children:children}));};
 
@@ -3491,5 +3491,5 @@ var Spinner=function Spinner(_ref){var _ref2;var label=_ref.label,labelPosition=
 
 var SkipNavLink=function SkipNavLink(_props){throw new Error('[Blade: SkipNav]: SkipNavLink is not available on React Native');};var SkipNavContent=function SkipNavContent(_props){throw new Error('[Blade: SkipNav]: SkipNavContent is not available on React Native');};
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BladeProvider, Button, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, Counter, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, InfoIcon, Link, LinkIcon, MinusIcon, OTPInput, PasswordInput, PauseIcon, PlusIcon, Radio, RadioGroup, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, Text, TextArea, TextInput, Title, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BladeProvider, Button, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, Counter, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, InfoIcon, Link, LinkIcon, MinusIcon, OTPInput, PasswordInput, PauseIcon, PlusIcon, Radio, RadioGroup, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, Text, TextArea, TextInput, Title, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
 //# sourceMappingURL=index.native.js.map