Merge main (#270)

* docs: remove the experimental label for table (#255)

* fix: display semantic colors in table and allow to filter them (#258)

* fix: display semantic colors in table and allow to filter them

* refactor: improve performance of SemanticColorsTable

* fix: trim table filter input

Co-authored-by: Martí Malek <[email protected]>

* chore(release): 1.25.2 [skip ci]

### [1.25.2](v1.25.1...v1.25.2) (2022-07-11)

### Bug Fixes

* display semantic colors in table and allow to filter them ([#258](#258)) ([2e83e76](2e83e76))

* update codeowners

removes Rafa from the list 😢

* style(popover): expose padding prop for Popover component (#262)

Co-authored-by: Ján Hamara <[email protected]>

* fix: expose padding prop and adjust z-index for Popover component (#263)

* style(popover): expose padding prop for Popover component

* fix: update zIndex on Popover content container

Co-authored-by: Ján Hamara <[email protected]>

* chore(release): 1.25.3 [skip ci]

### [1.25.3](v1.25.2...v1.25.3) (2022-07-21)

### Bug Fixes

* expose padding prop and adjust z-index for Popover component ([#263](#263)) ([da0e80b](da0e80b))

* Expand PhoneInput API (#261)

Exposes properties to reach lower-level components of the `PhoneInput`

Co-authored-by: martimalek <[email protected]>

* 1.26.0

* 1.26.1

Co-authored-by: martimalek <[email protected]>
Co-authored-by: Martí Malek <[email protected]>
Co-authored-by: semantic-release-bot <[email protected]>
Co-authored-by: Nikolai Lopin <[email protected]>
Co-authored-by: Jan Hamara <[email protected]>
Co-authored-by: Ján Hamara <[email protected]>
Co-authored-by: Nikolai Lopin <[email protected]>

Author: 8 people

CODEOWNERS

@@ -1 +1 @@
-* @nlopin @martimalek @div-Leo @rafael-sepeda @jonotrujillo
+* @nlopin @martimalek @div-Leo @jonotrujillo

docs/changelog.mdx

@@ -5,6 +5,20 @@ cardHeadline: Changelog
 cardSubHeadline: Keep up to date with the latest releases of @freenow/wave
 ---
 
+### [1.25.3](https://github.com/freenowtech/wave/compare/v1.25.2...v1.25.3) (2022-07-21)
+
+
+### Bug Fixes
+
+* expose padding prop and adjust z-index for Popover component ([#263](https://github.com/freenowtech/wave/issues/263)) ([da0e80b](https://github.com/freenowtech/wave/commit/da0e80be5df4274220336451641b31d1fe8d524f))
+
+### [1.25.2](https://github.com/freenowtech/wave/compare/v1.25.1...v1.25.2) (2022-07-11)
+
+
+### Bug Fixes
+
+* display semantic colors in table and allow to filter them ([#258](https://github.com/freenowtech/wave/issues/258)) ([2e83e76](https://github.com/freenowtech/wave/commit/2e83e763427fb5ce67fc99719a0a3a8837be086c))
+
 ### [1.25.1](https://github.com/freenowtech/wave/compare/v1.25.0...v1.25.1) (2022-06-16)
 
 

fixtures/typescript-build/src/index.tsx

@@ -21,6 +21,7 @@ import {
     Logo,
     Modal,
     Pagination,
+    PhoneInput,
     RadioButton,
     Select,
     TabBar,
@@ -443,6 +444,26 @@ const TestTooltip: React.FC = () => (
     </>
 );
 
+const TestPhoneInput = () => (
+    <>
+        <PhoneInput />
+        <PhoneInput id="hello" />
+        <PhoneInput variant="boxed" size="medium" />
+        <PhoneInput variant="bottom-lined" size="small" />
+        <PhoneInput text="my text" />
+        <PhoneInput
+            inputProps={{
+                onFocus: () => {}
+            }}
+        />
+        <PhoneInput
+            selectListProps={{
+                onFocus: () => {}
+            }}
+        />
+    </>
+);
+
 const App: React.FC = () => (
     <>
         <TestBanner />
@@ -471,6 +492,7 @@ const App: React.FC = () => (
         <TestTextarea />
         <TestToggle />
         <TestTooltip />
+        <TestPhoneInput />
     </>
 );
 

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@freenow/wave",
-    "version": "1.25.1",
+    "version": "1.26.1",
     "description": "React components of the Wave design system for your Front-End project",
     "main": "lib/cjs/index.js",
     "typings": "lib/types/index.d.ts",

package.json

@@ -13,6 +13,7 @@ import { extractWrapperMarginProps } from '../../utils/extractProps';
 import { Input } from '../Input/Input';
 import { InputProps } from '../Input/InputProps';
 import { SelectList } from '../SelectList/SelectList';
+import { SelectListProps } from '../SelectList/types';
 import { DynamicWidthMenu } from './components/DynamicWidthMenu';
 import { Option } from './components/Option';
 import { SingleValue } from './components/SingleValue';
@@ -30,13 +31,22 @@ interface PhoneInputProps
     onTextChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     country?: PhoneAreaCodeCountry;
     onCountryChange?: (country?: PhoneAreaCodeCountry) => void;
+    listPortalTarget?: SelectListProps['menuPortalTarget'];
+    inputProps?: InputProps;
+    selectListProps?: SelectListProps;
 }
 
 const Box = styled.div<LayoutProps & WidthProps>`
     ${compose(layout, widthFn, marginFn)}
 `;
 
-const PhoneInput: React.FC<PhoneInputProps> = ({ width, variant = 'boxed', ...props }: PhoneInputProps) => {
+const PhoneInput: React.FC<PhoneInputProps> = ({
+    width,
+    variant = 'boxed',
+    inputProps = {},
+    selectListProps = {},
+    ...props
+}: PhoneInputProps) => {
     const { marginProps } = extractWrapperMarginProps(props);
 
     const nationalNumberInputRef = React.createRef<HTMLDivElement>();
@@ -54,6 +64,7 @@ const PhoneInput: React.FC<PhoneInputProps> = ({ width, variant = 'boxed', ...pr
     return (
         <Box display="inline-flex" width={width} {...marginProps} ref={containerRef}>
             <SelectList
+                {...selectListProps}
                 id={`${props.id}-area-code`}
                 name={`${props.name}-area-code`}
                 value={props.country}
@@ -75,8 +86,10 @@ const PhoneInput: React.FC<PhoneInputProps> = ({ width, variant = 'boxed', ...pr
                 variant={variant}
                 size={props.size}
                 isDisabled={props.disabled}
+                menuPortalTarget={props.listPortalTarget}
             />
             <Input
+                {...inputProps}
                 id={`${props.id}-national-number`}
                 name={`${props.name}-national-number`}
                 ml={spaceBetweenInputs}

src/components/PhoneInput/PhoneInput.tsx

@@ -15,6 +15,10 @@ import { COUNTRIES } from '../constants';
 
 # PhoneInput
 
+The `PhoneInput` is a component to input a phone number in international format.
+
+The component consists of two controls: a select to pick a prefix and an input to type in the phone number. The select shows all the country codes available world-wide.
+
 ## Properties
 
 <PhoneInputPropsTable />
@@ -40,3 +44,21 @@ return (
     />
 );
 ```
+
+## Playground
+
+<Playground>
+    <ControlledPhoneInput label="Mobile Phone Number" />
+</Playground>
+
+## Troubleshooting
+
+### The list of prefixes is not fully visible
+
+If the list of prefixes is not fully visible when opened, like in [this Sandbox example](https://codesandbox.io/s/inspiring-austin-2006xl?file=/src/index.js), use `listPortalTarget` prop to attach the popup to the document's body:
+
+```jsx
+<PhoneInput listPortalTarget={document.body} />
+```
+
+The reason of the issue is that the prefix selection popup is rendered inside the same container as the component by default. If the container does not allow content to overflow (e.g. via `overflow: hidden;`), everything that overflows the container borders will be hidden.

src/components/PhoneInput/docs/PhoneInput.mdx

@@ -56,6 +56,25 @@ export const PhoneInputPropsTable: FC = () => {
             name: 'disabled',
             type: 'boolean',
             description: 'Disables both, the area code and national number inputs'
+        },
+        {
+            name: 'listPortalTarget',
+            type: 'HTMLElement',
+            description: 'HTML element which will be used as a parent for the prefix list'
+        },
+        {
+            name: 'inputProps',
+            type: 'Object',
+            description:
+                'Pass props directly to the internal input component. ' +
+                'Any value from the `Input` component props are allowed, but props from the `PhoneInput` take precedence'
+        },
+        {
+            name: 'selectListProps',
+            type: 'Object',
+            description:
+                'Pass props directly to the internal SelectList component used to show prefixes. ' +
+                'Any value from the `SelectList` component props are allowed, but props from the `PhoneInput` take precedence'
         }
     ];
     return <PropsTable props={props} />;

src/components/PhoneInput/docs/PhoneInputPropsTable.tsx

@@ -72,6 +72,10 @@ interface PopoverProps {
      * Popover content (can be any valid React Element or component containing React Elements)
      */
     content: React.ReactNode;
+    /**
+     * Popover content padding
+     */
+    padding?: string | number;
     /**
      * Optional: Specify the Popover content placement (it changes automatically if the Popover content cannot fit inside the viewport with the selected placement)
      */
@@ -97,6 +101,7 @@ interface PopoverProps {
 const Popover: React.FC<PopoverProps> = ({
     children,
     content = '',
+    padding = undefined,
     placement = 'bottom-start',
     offset = 5,
     isOpen = false,
@@ -228,12 +233,11 @@ const Popover: React.FC<PopoverProps> = ({
                 <PopoverContentContainer
                     id="popover-content"
                     ref={setContentReference}
-                    // zIndex temporary until we have Portal component
-                    style={{ ...styles.popper, zIndex: 9999 }}
+                    style={{ ...styles.popper, zIndex: 999 }}
                     {...attributes.popper}
                 >
                     <PopoverContentWrapper ref={popoverContentRef}>
-                        <PopoverContent>{content}</PopoverContent>
+                        <PopoverContent padding={padding}>{content}</PopoverContent>
                     </PopoverContentWrapper>
                 </PopoverContentContainer>
             )}

src/components/Popover/Popover.tsx

@@ -4,20 +4,28 @@ import styled from 'styled-components';
 import { Spaces } from '../../essentials';
 import { Card } from '../Card/Card';
 
+const DEFAULT_PADDING = Spaces[2];
+
 interface PopoverContentProps {
     /**
      * Popover content (can be any valid React Element or component)
      */
     children: React.ReactNode;
+    /**
+     * Popover content padding
+     */
+    padding: string | number;
 }
 
-const PopoverContentContainer = styled(Card)`
+const PopoverContentContainer = styled(Card)<{ padding: string | number }>`
     display: block;
-    padding: ${Spaces[2]};
+    padding: ${props => props.padding};
 `;
 
-export const PopoverContent = ({ children }: PopoverContentProps): React.ReactElement => (
+export const PopoverContent = ({ padding = DEFAULT_PADDING, children }: PopoverContentProps): React.ReactElement => (
     <>
-        <PopoverContentContainer level={200}>{children}</PopoverContentContainer>
+        <PopoverContentContainer padding={padding} level={200}>
+            {children}
+        </PopoverContentContainer>
     </>
 );

src/components/Popover/PopoverContent.tsx

@@ -113,6 +113,21 @@ The Popover supports:
 ```
 <br/>
 
+### With No Padding
+
+<ItemWrapper>
+    <Popover content={'There is no padding...'} padding={0}>
+        <Button size='small' variant="secondary"><SettingsIcon size={20} style={{marginRight: 5}} /> Manage Booking</Button>
+    </Popover>
+</ItemWrapper>
+
+```jsx
+<Popover content={'There is no padding...'} padding={0}>
+    <Button size='small' variant="secondary"><SettingsIcon size={20} /> Manage Booking</Button>
+</Popover>
+```
+<br/>
+
 ## Playground
 
 <Playground>

src/components/Popover/docs/Popover.mdx

@@ -9,7 +9,7 @@ import { ActiveRowTable } from './ActiveRowTable'
 import { ComplexDataTable } from './ComplexDataTable'
 import { SkeletonTable } from './SkeletonTable'
 
-# Table (Experimental)
+# Table
 
 Tables are used to render tabular data in a basic grid, making it easier for people to scan it. Tables are comprised of cells, columns, and rows.
 

src/components/Table/docs/Table.mdx

@@ -32,12 +32,12 @@ export const PropsTable: React.FC<PropsTableProps> = ({ props: componentProps }:
                                 {prop.name}
                             </Text>
                         </TableCell>
-                        <TableCell>
+                        <TableCell style={{ whiteSpace: 'normal' }}>
                             <Text fontSize="inherit" fontFamily="monospace" as="p">
                                 {prop.type}
                             </Text>
                             {prop.description && (
-                                <Text weak fontSize="inherit">
+                                <Text secondary fontSize="inherit">
                                     {prop.description}
                                 </Text>
                             )}

src/docs/PropsTable.tsx

@@ -28,17 +28,15 @@ const ColorBlock = styled.div<{ color: string }>`
     width: 4rem;
 `;
 
+const flatSemanticColors = flattenObj(SemanticColors);
+const flatSemanticColorsKeys = [...flatSemanticColors.keys()] as string[];
+
 export const SemanticColorsTable: FC = () => {
     const [nameSearchInput, setNameSearchInput] = useState('');
-    const flatSemanticColors = flattenObj(SemanticColors);
-
-    const filteredColorKeys = Object.keys(flatSemanticColors).filter(it => {
-        if (nameSearchInput === '') {
-            return true;
-        }
 
-        return it.toLowerCase().includes(nameSearchInput.toLowerCase());
-    });
+    const filteredColorKeys = !nameSearchInput
+        ? flatSemanticColorsKeys
+        : flatSemanticColorsKeys.filter(it => it.toLowerCase().includes(nameSearchInput.toLowerCase().trim()));
 
     return (
         <>
@@ -64,13 +62,13 @@ export const SemanticColorsTable: FC = () => {
                     {filteredColorKeys.map(key => (
                         <TableRow key={key}>
                             <TableCell>
-                                <ColorBlock color={flatSemanticColors[key]} />
+                                <ColorBlock color={flatSemanticColors.get(key)} />
                             </TableCell>
                             <TableCell>
                                 <code>{key}</code>
                             </TableCell>
                             <TableCell>
-                                <code>{flatSemanticColors[key]}</code>
+                                <code>{flatSemanticColors.get(key)}</code>
                             </TableCell>
                         </TableRow>
                     ))}