Merge branch 'master' of github.com:wix/react-native-ui-lib into release

demo/src/screens/MenuStructure.js

@@ -51,7 +51,7 @@ export const navigationData = {
     title: 'Form',
     screens: [
       {title: 'Checkbox', tags: 'checkbox toggle controls', screen: 'unicorn.components.CheckboxScreen'},
-      {title: 'Color Picker', tags: 'color picker control', screen: 'unicorn.components.ColorPickerScreen'},
+      {title: 'ColorPicker', tags: 'color picker control', screen: 'unicorn.components.ColorPickerScreen'},
       {title: 'Color Swatch', tags: 'color swatch and palette', screen: 'unicorn.components.ColorSwatchScreen'},
       {title: 'TextField', tags: 'text input field form', screen: 'unicorn.components.TextFieldScreen'},
       {title: 'NumberInput', tags: 'number input', screen: 'unicorn.components.NumberInputScreen'},

demo/src/screens/componentScreens/DateTimePickerScreen.tsx

@@ -62,12 +62,14 @@ export default class DateTimePickerScreen extends Component<{}, State> {
         <View padding-page>
           <Text text40>Date Time Picker</Text>
           <DateTimePicker
+            migrateDialog
             containerStyle={{marginVertical: 20}}
             label={'Date'}
             placeholder={'Select a date'}
             // value={new Date('October 13, 2014')}
           />
           <DateTimePicker
+            migrateDialog
             mode={'time'}
             label={'Time'}
             placeholder={'Select time'}
@@ -78,12 +80,14 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             Disabled
           </Text>
           <DateTimePicker
+            migrateDialog
             containerStyle={{marginBottom: 20}}
             editable={false}
             label={'Date'}
             placeholder={'Select a date'}
           />
           <DateTimePicker
+            migrateDialog
             editable={false}
             mode={'time'}
             label={'Time'}
@@ -104,6 +108,7 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             </View>
           </View>
           <DateTimePicker
+            migrateDialog
             containerStyle={{marginVertical: 20}}
             renderInput={this.renderCustomInput}
             mode={mode}

demo/src/screens/componentScreens/IconScreen.tsx

@@ -1,41 +1,73 @@
 import React, {useState} from 'react';
-import {Assets, View, Icon, Text, Slider, Switch, GradientSlider} from 'react-native-ui-lib';
+import {Assets, View, Icon, Text, Slider, GradientSlider, Colors} from 'react-native-ui-lib';
+import {renderBooleanOption} from '../ExampleScreenPresenter';
+
+const DEFAULT_BADGE_SIZE = 20;
+const DEFAULT_PIMPLE_SIZE = 10;
 
 const IconScreen = () => {
   const [size, setSize] = useState(24);
+  const [badgeSize, setBadgeSize] = useState(20);
   const [customSize, setCustomSize] = useState(false);
+  const [customBadgeSize, setCustomBadgeSize] = useState(false);
   const [color, setColor] = useState<string | number>();
   const [customColor, setCustomColor] = useState(false);
+  const [useBadge, setUseBadge] = useState(false);
+  const [usePimple, setUsePimple] = useState(false);
 
   return (
     <View padding-page>
       <Text h1 marginB-s4>
         Icon Screen
       </Text>
-      <View center>
+      <View center margin-page>
         <Icon
-          margin-30
           size={customSize ? size : undefined}
-          tintColor={customColor ? color as string : undefined}
+          tintColor={customColor ? (color as string) : undefined}
           source={Assets.icons.search}
+          badgeProps={
+            useBadge
+              ? {
+                size: customBadgeSize ? badgeSize : usePimple ? DEFAULT_PIMPLE_SIZE : DEFAULT_BADGE_SIZE,
+                backgroundColor: Colors.red30,
+                label: !usePimple ? '5' : undefined
+              }
+              : undefined
+          }
         />
       </View>
 
-      <View marginB-s3 row>
-        <Text marginR-s2>Custom Size</Text>
-        <Switch value={customSize} onValueChange={setCustomSize}/>
-      </View>
+      {renderBooleanOption('Custom Size', 'customSize', {spread: false, state: customSize, setState: setCustomSize})}
       <Slider maximumValue={100} value={24} step={1} onValueChange={setSize}/>
       <Text marginB-50 marginT-s2>
         Custom size: {size}
       </Text>
 
-      <View marginB-s3 row>
-        <Text marginR-s2>Custom Color</Text>
-        <Switch value={customColor} onValueChange={setCustomColor}/>
-      </View>
+      {renderBooleanOption('Custom Badge Size', 'customBadgeSize', {
+        spread: false,
+        state: customBadgeSize,
+        setState: setCustomBadgeSize
+      })}
+      <Slider maximumValue={100} value={20} step={1} onValueChange={setBadgeSize}/>
+      <Text marginB-50 marginT-s2>
+        Custom badge size: {badgeSize}
+      </Text>
+
+      {renderBooleanOption('Custom Color', 'customColor', {
+        spread: false,
+        state: customColor,
+        setState: setCustomColor
+      })}
       <GradientSlider type={GradientSlider.types.HUE} color={color as string} onValueChange={setColor}/>
       <Text marginT-s2>Custom color: {color || '#000000'}</Text>
+
+      <View marginV-s5>
+        <Text marginR-s2 marginB-s2 text80BO>
+          Badge Settings:
+        </Text>
+        {renderBooleanOption('Use Badge:', 'useBadge', {spread: false, state: useBadge, setState: setUseBadge})}
+        {renderBooleanOption('Pimple Badge', 'showLabel', {spread: false, state: usePimple, setState: setUsePimple})}
+      </View>
     </View>
   );
 };

demo/src/screens/componentScreens/PickerScreen.tsx

@@ -13,6 +13,7 @@ import {
   PanningProvider,
   Typography,
   PickerProps,
+  RenderCustomModalProps,
   PickerMethods,
   Button
 } from 'react-native-ui-lib'; //eslint-disable-line
@@ -73,15 +74,15 @@ export default class PickerScreen extends Component {
     contact: 0
   };
 
-  renderDialog: PickerProps['renderCustomModal'] = modalProps => {
+  renderDialog: PickerProps['renderCustomModal'] = (modalProps: RenderCustomModalProps) => {
     const {visible, children, toggleModal, onDone} = modalProps;
 
     return (
       <Incubator.Dialog
         visible={visible}
         onDismiss={() => {
           onDone();
-          toggleModal(false);
+          toggleModal();
         }}
         width="100%"
         height="45%"

demo/src/screens/componentScreens/SegmentedControlScreen.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback} from 'react';
 import {StyleSheet} from 'react-native';
-import {Text, View, Colors, SegmentedControl, Assets, Spacings, BorderRadiuses} from 'react-native-ui-lib';
+import {Text, View, Colors, SegmentedControl, Assets, Spacings, BorderRadiuses, Typography} from 'react-native-ui-lib';
 
 const segments = {
   first: [{label: 'Left'}, {label: 'Right'}],
@@ -16,18 +16,21 @@ const segments = {
   ],
   forth: [{label: 'With'}, {label: 'Custom'}, {label: 'Style'}],
   fifth: [{label: 'Full'}, {label: 'Width'}],
-  sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}]
+  sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}],
+  seventh: [{label: '$'}, {label: '%'}]
 };
 
 const SegmentedControlScreen = () => {
-
   const onChangeIndex = useCallback((index: number) => {
     console.warn('Index ' + index + ' of the second segmentedControl was pressed');
   }, []);
 
   return (
     <View flex bottom padding-page>
-      <View flex centerV>
+      <Text center text40 $textDefault>
+        Segmented Control
+      </Text>
+      <View flex marginT-s8>
         <View center>
           <SegmentedControl segments={segments.first}/>
           <SegmentedControl
@@ -53,18 +56,17 @@ const SegmentedControlScreen = () => {
             segmentsStyle={styles.customSegmentsStyle}
           />
         </View>
+        <SegmentedControl containerStyle={styles.container} segments={segments.fifth}/>
+        <SegmentedControl containerStyle={styles.container} segments={segments.sixth}/>
+        <Text marginT-s4 center>
+          Custom Typography
+        </Text>
         <SegmentedControl
           containerStyle={styles.container}
-          segments={segments.fifth}
-        />
-        <SegmentedControl
-          containerStyle={styles.container}
-          segments={segments.sixth}
+          segments={segments.seventh}
+          segmentLabelStyle={styles.customTypography}
         />
       </View>
-      <Text text40 $textDefault>
-        Segmented Control
-      </Text>
     </View>
   );
 };
@@ -79,6 +81,9 @@ const styles = StyleSheet.create({
   },
   customSegmentsStyle: {
     height: 50
+  },
+  customTypography: {
+    ...Typography.text80BO
   }
 });
 

demo/src/screens/componentScreens/SliderScreen.tsx

@@ -112,7 +112,6 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
             step={1}
             containerStyle={styles.sliderContainer}
             disableRTL={forceLTR}
-            // @ts-expect-error
             ref={this.slider}
             onReset={this.onSliderReset}
           />
@@ -208,7 +207,6 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
           maximumValue={100}
           step={1}
           disableRTL={forceLTR}
-          // @ts-expect-error
           ref={this.rangeSlider}
           onReset={this.onRangeSliderReset}
         />

demo/src/screens/componentScreens/TimelineScreen.tsx

@@ -7,6 +7,7 @@ const contents = [
   'SUCCESS state with label.',
   'ERROR state with icon.',
   'Custom color with icon and outline.\nAligned to title',
+  'Icon without background.',
   'NEXT state with outline.',
   'NEXT state with circle point and entry point.'
 ];
@@ -27,8 +28,10 @@ const TimelineScreen = () => {
   const renderExtraContent = () => {
     return (
       <View style={{flex: 1, marginTop: 10, backgroundColor: Colors.grey70}}>
-        <Text>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry</Text>
+        <Text>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of
+          the printing and typesetting industry
+        </Text>
       </View>
     );
   };
@@ -62,7 +65,7 @@ const TimelineScreen = () => {
         <Timeline
           // key={String(expand)}
           // topLine={{
-          //   type: Timeline.lineTypes.DASHED, 
+          //   type: Timeline.lineTypes.DASHED,
           //   entry: true
           // }}
           bottomLine={{type: Timeline.lineTypes.DASHED}}
@@ -107,10 +110,23 @@ const TimelineScreen = () => {
         >
           {renderContent(3)}
         </Timeline>
+        <Timeline
+          topLine={{type: Timeline.lineTypes.DASHED, color: Colors.purple30}}
+          bottomLine={{
+            type: Timeline.lineTypes.DASHED,
+            color: Colors.blue30
+          }}
+          point={{
+            icon: Assets.icons.demo.camera,
+            removeIconBackground: true
+          }}
+        >
+          {renderContent(4)}
+        </Timeline>
         <Timeline
           topLine={{
             type: Timeline.lineTypes.DASHED,
-            color: Colors.purple30
+            color: Colors.blue30
           }}
           bottomLine={{
             state: Timeline.states.NEXT,
@@ -121,7 +137,7 @@ const TimelineScreen = () => {
             type: Timeline.pointTypes.OUTLINE
           }}
         >
-          {renderContent(4)}
+          {renderContent(5)}
         </Timeline>
 
         <Timeline
@@ -138,7 +154,7 @@ const TimelineScreen = () => {
             type: Timeline.pointTypes.CIRCLE
           }}
         >
-          {renderContent(5)}
+          {renderContent(6)}
         </Timeline>
       </ScrollView>
     </>

demo/src/screens/incubatorScreens/IncubatorExpandableOverlayScreen.tsx

@@ -112,6 +112,7 @@ export default class TextFieldScreen extends Component {
           useDialog
           expandableContent={this.renderPickerContent()}
           dialogProps={{bottom: true, onDismiss: () => console.warn('Dialog is dismissed')}}
+          migrateDialog
         >
           {this.renderColorRow(selectedColor)}
         </Incubator.ExpandableOverlay>

demo/src/screens/incubatorScreens/IncubatorSliderScreen.tsx

@@ -21,6 +21,7 @@ const IncubatorSliderScreen = () => {
   const [sliderMaxValue, setSliderMaxValue] = useState(INITIAL_MAX);
 
   const [color, setColor] = useState(COLOR);
+  const [groupColor, setGroupColor] = useState(Colors.yellow30);
   const [alpha, setAlpha] = useState(1);
 
   const slider = useRef<Incubator.SliderRef>(null);
@@ -58,7 +59,7 @@ const IncubatorSliderScreen = () => {
   }, []);
 
   const onGroupValueChange = (value: string) => {
-    console.log('onGroupValueChange: ', value);
+    setGroupColor(value);
   };
 
   const renderValuesBox = (min: number, max?: number) => {
@@ -235,9 +236,9 @@ const IncubatorSliderScreen = () => {
           Color Slider Group
         </Text>
         <ColorSliderGroup
-          initialColor={color}
+          initialColor={groupColor}
           sliderContainerStyle={styles.slider}
-          containerStyle={styles.group}
+          containerStyle={[styles.group, {borderWidth: 12, borderColor: groupColor}]}
           showLabels
           onValueChange={onGroupValueChange}
           migrate

package.json

@@ -102,7 +102,8 @@
     "object-hash": "^3.0.0",
     "postcss": "^8.4.21",
     "postcss-js": "^4.0.0",
-    "prettier-eslint": "12.0.0",
+    "prettier": "^3.2.5",
+    "prettier-eslint": "16.3.0",
     "react": "18.2.0",
     "react-autobind": "^1.0.6",
     "react-dom": "^18.2.0",

src/commons/modifiers.ts

@@ -104,7 +104,7 @@ export type CustomModifier = {[key: string]: boolean};
 // TODO: migrate other modifiers to the same new structure as Margin modifier, using template literals
 export type TypographyModifiers = Modifier<TypographyLiterals> | CustomModifier;
 export type ColorsModifiers = Modifier<ColorLiterals> | CustomModifier;
-export type BackgroundColorModifier = Modifier<'bg'>;
+export type BackgroundColorModifier = Modifier<`bg-${ColorLiterals}`>;
 export type AlignmentModifiers = Modifier<AlignmentLiterals>;
 export type PositionModifiers = Modifier<PositionLiterals>;
 export type PaddingModifiers = Modifier<PaddingLiterals>;

src/components/badge/index.tsx

@@ -285,7 +285,7 @@ function createStyles(props: BadgeProps) {
     badge: {
       alignSelf: 'flex-start',
       borderRadius: BorderRadiuses.br100,
-      backgroundColor: (!props.icon || props.customElement) ? Colors.$backgroundGeneralHeavy : undefined,
+      backgroundColor: !props.icon || props.customElement ? Colors.$backgroundGeneralHeavy : undefined,
       alignItems: 'center',
       justifyContent: 'center',
       overflow: 'hidden'