Merge branch 'master' into release

Author: Inbal-Tish

demo/src/screens/foundationScreens/ColorsScreen.js

@@ -11,8 +11,11 @@ import {
   Icon,
   Button,
   TextField,
-  Incubator
+  Incubator,
+  ColorPalette,
+  ColorPickerDialog
 } from 'react-native-ui-lib';
+import {renderBooleanOption} from '../ExampleScreenPresenter';
 
 const {Toast} = Incubator;
 
@@ -42,7 +45,14 @@ class ColorsScreen extends Component {
     searchValue: '',
     filteredTokens: [],
     showToast: false,
-    message: undefined
+    message: undefined,
+    currentColor: Colors.$textPrimary,
+    showPicker: false,
+    isDefaultOptions: false,
+    adjustLightness: false,
+    adjustSaturation: false,
+    addDarkestTints: true,
+    avoidReverseOnDark: true
   };
 
   scrollViewRef = React.createRef();
@@ -281,13 +291,102 @@ class ColorsScreen extends Component {
     );
   }
 
+  /** Color Palette */
+
+  showColorPicker = () => {
+    this.setState({showPicker: true});
+  };
+
+  onValueChange = (color) => {
+    this.setState({currentColor: color});
+  };
+
+  onSubmit = (color) => {
+    this.setState({currentColor: color});
+  };
+
+  onDismiss = () => {
+    this.setState({showPicker: false});
+  };
+
+  setDefaultOptions = () => {
+    const designKitsOptions = {adjustLightness: false, adjustSaturation: false, addDarkestTints: true, avoidReverseOnDark: true};
+    const defaultOptions = {adjustLightness: true, adjustSaturation: true, addDarkestTints: false, avoidReverseOnDark: false};
+    if (this.state.isDefaultOptions) {
+      this.setState({...designKitsOptions, isDefaultOptions: false});
+    } else {
+      this.setState({...defaultOptions, isDefaultOptions: true});
+    }
+  };
+
+  renderColorPicker = () => {
+    const {showPicker, currentColor} = this.state;
+    return (
+      <ColorPickerDialog
+        visible={showPicker}
+        initialColor={currentColor}
+        key={currentColor}
+        onDismiss={this.onDismiss}
+        onSubmit={this.onSubmit}
+      />
+    );
+  };
+
+  renderOptions = () => {
+    return (
+      <View padding-20>
+        {renderBooleanOption.call(this, 'adjustLightness', 'adjustLightness')}
+        {renderBooleanOption.call(this, 'adjustSaturation', 'adjustSaturation')}
+        {renderBooleanOption.call(this, 'addDarkestTints', 'addDarkestTints')}
+        {renderBooleanOption.call(this, 'avoidReverseOnDark', 'avoidReverseOnDark')}
+        <Button label={this.state.isDefaultOptions ? 'Reset example' : 'Set defaults'} onPress={this.setDefaultOptions}/>
+      </View>
+    );
+  };
+
+  renderColorPalette = () => {
+    const {currentColor, adjustLightness, adjustSaturation, addDarkestTints, avoidReverseOnDark} = this.state;
+    const paletteOptions = {adjustLightness, adjustSaturation, addDarkestTints, avoidReverseOnDark};
+    const palette = Colors.generateColorPalette(currentColor, paletteOptions);
+    return (
+      <View margin-12 br40 style={{borderWidth: 1}}>
+        {this.renderOptions()}
+        <View center row>
+          <TouchableOpacity
+            marginH-10 
+            style={[styles.colorBox, {backgroundColor: currentColor}]} 
+            onPress={this.showColorPicker}
+          />
+          <ColorPalette
+            colors={palette}
+            value={currentColor}
+            swatchStyle={styles.swatchStyle}
+            containerStyle={{marginLeft: -10}}
+            onValueChange={this.onValueChange}
+          />
+        </View>
+      </View>
+    );
+  };
+
+  renderColorPaletteExample = () => {
+    return (
+      <>
+        <Text text50 marginL-20>Generate Color Palette</Text>
+        {this.renderColorPalette()}
+        {this.renderColorPicker()}
+      </>
+    );
+  };
+
   render() {
     return (
       <>
         {this.renderSearch()}
         <ScrollView ref={this.scrollViewRef}>
           {this.renderDesignTokens()}
           {this.renderColors(SYSTEM_COLORS, 'SYSTEM COLORS')}
+          {this.renderColorPaletteExample()}
         </ScrollView>
         {this.renderToast()}
       </>
@@ -303,6 +402,19 @@ const styles = StyleSheet.create({
   searchField: {
     padding: Spacings.s3,
     borderRadius: 8
+  },
+  colorBox: {
+    width: 60,
+    height: 60,
+    borderWidth: 1,
+    borderRadius: 30
+  },
+  swatchStyle: {
+    width: 18,
+    height: 40,
+    borderRadius: 10,
+    marginLeft: 4, 
+    marginRight: 4
   }
 });
 

scripts/prReleaseNotesCommon.js

@@ -48,15 +48,21 @@ async function fetchMergedPRs(postMergedDate, repo, githubToken) {
   const relevantPRs = _.flow(prs => _.filter(prs, pr => !!pr.merged_at && new Date(pr.merged_at) > postMergedDate),
     prs => _.sortBy(prs, 'merged_at'),
     prs =>
-      _.map(prs, pr => ({
-        state: pr.state,
-        merged_at: pr.merged_at,
-        html_url: pr.html_url,
-        branch: pr.head.ref,
-        number: pr.number,
-        title: pr.title,
-        info: parsePR(pr.body)
-      })))(PRs);
+      _.map(prs, pr => {
+        try {
+          return {
+            state: pr.state,
+            merged_at: pr.merged_at,
+            html_url: pr.html_url,
+            branch: pr.head.ref,
+            number: pr.number,
+            title: pr.title,
+            info: parsePR(pr.body)
+          };
+        } catch {
+          console.error('Failed parsing PR: ', pr.html_url);
+        }
+      }))(PRs);
 
   return relevantPRs;
 }
@@ -182,7 +188,13 @@ async function _generateReleaseNotes(latestVersion, newVersion, githubToken, fil
   console.log(`\x1b[1m\x1b[32m✔\x1b[0m \x1b[32m${fileNamePrefix}-release-notes.txt was successfully written to ${process.env.HOME}/Downloads\x1b[0m \x1b[1m\x1b[32m✔\x1b[0m`);
 }
 
-async function generateReleaseNotes(latestVersion, newVersion, githubToken, fileNamePrefix, repo, header = '', tagPrefix = '') {
+async function generateReleaseNotes(latestVersion,
+  newVersion,
+  githubToken,
+  fileNamePrefix,
+  repo,
+  header = '',
+  tagPrefix = '') {
   let latestVer, newVer;
   const rl = readline.createInterface({
     input: process.stdin,

src/components/dash/index.tsx

@@ -1,7 +1,6 @@
 import React, {useState, useCallback, useMemo} from 'react';
 import {StyleSheet, StyleProp, ViewProps, ViewStyle, LayoutChangeEvent} from 'react-native';
 import View from '../view';
-import {Colors} from '../../style';
 
 //TODO: move to some global types (shared with Timeline component)
 export type Layout = {
@@ -35,11 +34,10 @@ const Dash = (props: DashProps) => {
       width: vertical ? thickness : length,
       height: vertical ? length : thickness,
       marginRight: vertical ? 0 : gap,
-      marginBottom: vertical ? gap : 0,
-      backgroundColor: color
+      marginBottom: vertical ? gap : 0
     };
     return [style, _style];
-  }, [vertical, length, thickness, gap, color, style]);
+  }, [vertical, length, thickness, gap, style]);
 
   const lineStyle = useMemo(() => {
     const directionStyle = vertical ? styles.column : styles.row;
@@ -56,7 +54,7 @@ const Dash = (props: DashProps) => {
     const dash = [];
 
     for (let i = 0; i < n; i++) {
-      dash.push(<View key={i} style={dashStyle}/>);
+      dash.push(<View key={i} bg-$outlineDefault backgroundColor={color} style={dashStyle}/>);
     }
 
     return dash;
@@ -73,8 +71,7 @@ export default Dash;
 Dash.defaultProps = {
   gap: 6,
   length: 6,
-  thickness: 2,
-  color: Colors.black
+  thickness: 2
 };
 
 const styles = StyleSheet.create({

src/components/dateTimePicker/dateTimePicker.api.json

@@ -61,7 +61,12 @@
       "name": "themeVariant",
       "type": "LIGHT | DARK",
       "description": "Override system theme variant (dark or light mode) used by the date picker"
+    },
+    {
+      "name": "display",
+      "type": "string",
+      "description": "Defines the visual display of the picker. The default value is 'spinner' on iOS and 'default' on Android. The list of all possible values are default, spinner, calendar or clock on Android and default, spinner, compact or inline for iOS. Full list can be found here: https://github.com/react-native-datetimepicker/datetimepicker#display-optional"
     }
   ],
   "snippet": ["<DateTimePicker title={'Select time'$1} placeholder={'Placeholder'$2} mode={'time'$3}/>"]
-}
+}

src/components/dateTimePicker/index.tsx

@@ -90,6 +90,10 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
    * The component testID
    */
   testID?: string;
+  /**
+   * Allows changing the visual display of the picker
+   */
+  display?: string;
 };
 
 type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedProps;
@@ -126,6 +130,7 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
     dialogProps,
     headerStyle,
     testID,
+    display = Constants.isIOS ? 'spinner' : undefined,
     ...others
   } = props;
 
@@ -255,7 +260,7 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
         is24Hour={is24Hour}
         minuteInterval={minuteInterval}
         timeZoneOffsetInMinutes={timeZoneOffsetInMinutes}
-        display={Constants.isIOS ? 'spinner' : undefined}
+        display={display}
         themeVariant={themeVariant}
         testID={`${testID}.picker`}
       />

src/components/slider/ColorSlider.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import Text from '../text';
+import GradientSlider, {GradientSliderTypes} from './GradientSlider';
+import {ColorSliderGroupProps} from './ColorSliderGroup';
+
+type ColorSliderProps = Pick<
+  ColorSliderGroupProps,
+  'sliderContainerStyle' | 'showLabels' | 'labelsStyle' | 'accessible' | 'labels' | 'migrate' | 'initialColor'
+> & {
+  type: GradientSliderTypes;
+};
+
+const ColorSlider = (props: ColorSliderProps) => {
+  const {
+    labels = {hue: 'Hue', lightness: 'Lightness', saturation: 'Saturation', default: ''},
+    type,
+    sliderContainerStyle,
+    showLabels,
+    labelsStyle,
+    accessible,
+    migrate,
+    initialColor
+  } = props;
+  return (
+    <>
+      {showLabels && labels && (
+        <Text recorderTag={'unmask'} $textNeutral text80 style={labelsStyle} accessible={accessible}>
+          {labels[type]}
+        </Text>
+      )}
+      <GradientSlider
+        color={initialColor}
+        type={type}
+        containerStyle={sliderContainerStyle}
+        accessible={accessible}
+        migrate={migrate}
+      />
+    </>
+  );
+};
+
+export default ColorSlider;