fix(segmented-control): adjust design

dhis2 · cooper-joe · Jan 11, 2024 · Jan 8, 2024 · Jan 8, 2024 · Jan 8, 2024
commit 558973f51a0bf60d0d406072f60b36d7c2d1fb71
@@ -1,4 +1,4 @@
-import { colors, spacers, theme } from '@dhis2/ui-constants'
+import { colors, elevations, spacers, theme } from '@dhis2/ui-constants'
 import cx from 'classnames'
 import { PropTypes } from 'prop-types'
 import React from 'react'
@@ -46,26 +46,24 @@ export const SegmentedControl = ({ options, selected, onChange }) => {
 
             <style jsx>{`
                 .segmented-control {
-                    /* create a stacking context for the children */
-                    position: relative;
-                    z-index: 0;
+                    display: inline-flex;
+                    background: ${colors.grey300};
+                    border-radius: 5px;
+                    padding: 2px;
                 }
 
                 .segment {
                     all: unset;
                     box-sizing: border-box;
-                    display: inline-block;
-                    position: relative;
                     cursor: pointer;
                     font-size: 14px;
                     text-align: center;
-                    border: 1px solid ${colors.grey400};
-                    border-right-width: 0;
-                    background: ${colors.grey050};
-                    color: ${colors.grey600};
+                    border-radius: 5px;
+                    background: transparent;
+                    color: ${colors.grey700};
                     min-width: 72px;
                     max-width: 320px;
-                    padding: ${spacers.dp8} ${spacers.dp16};
+                    padding: 6px ${spacers.dp12};
                 }
 
                 .segment:focus {
@@ -77,36 +75,16 @@ export const SegmentedControl = ({ options, selected, onChange }) => {
                     outline: none;
                 }
 
-                .segment:not(.selected):hover,
-                .segment:not(.selected):focus {
-                    background: ${colors.grey100};
-                    color: ${colors.grey700};
-                }
-
-                .segment:first-of-type {
-                    border-radius: 3px 0 0 3px;
-                }
-
-                .segment:last-of-type {
-                    border-right-width: 1px;
-                    border-radius: 0 3px 3px 0;
+                .segment:not(.selected):not(.disabled):hover {
+                    background: ${colors.grey400};
+                    color: ${colors.grey900};
                 }
 
                 .segment.selected {
                     cursor: default;
-                    font-weight: 600;
-                    border: 1px solid ${colors.teal800};
-                    background: ${colors.teal600};
-                    color: white;
-                }
-
-                .segment.selected:not(:last-of-type) {
-                    z-index: 1;
-                    margin-right: -1px;
-                }
-
-                .segment.selected:focus {
-                    background: ${colors.teal700};
+                    box-shadow: ${elevations.e100};
+                    background: ${colors.white};
+                    color: ${colors.grey900};
                 }
 
                 .segment.disabled {

diff --git a/components/alert/src/alert-bar/alert-bar.js b/components/alert/src/alert-bar/alert-bar.js
        }

        return clearAllTimeouts
    }, [hidden])

    return !inDOM ? null : (
        <div
diff --git a/components/button/src/button/button.js b/components/button/src/button/button.js
        if (initialFocus && ref.current) {
            ref.current.focus()
        }
    }, [initialFocus, ref.current])

    const handleClick = (event) => onClick && onClick({ value, name }, event)
    const handleBlur = (event) => onBlur && onBlur({ value, name }, event)
diff --git a/components/intersection-detector/src/intersection-detector.js b/components/intersection-detector/src/intersection-detector.js
            // the disconnect function for better readability.
            return () => intersectionObserver.disconnect()
        }
    }, [rootRef.current, intersectionRef.current])

    return (
        <div ref={intersectionRef} className={className} data-test={dataTest}>
diff --git a/components/organisation-unit-tree/src/organisation-unit-node/use-open-state.js b/components/organisation-unit-tree/src/organisation-unit-node/use-open-state.js
            onExpand({ path })
            setOpenedOnce(true)
        }
    }, [autoExpand, openedOnceDueToError])

    const open =
        (autoExpand && !openedOnceDueToError) || !!expanded.includes(path)
diff --git a/components/organisation-unit-tree/src/organisation-unit-node/use-org-children.js b/components/organisation-unit-tree/src/organisation-unit-node/use-org-children.js
        return suppressAlphabeticalSorting
            ? orgUnit.children
            : sortNodeChildrenAlphabetically(orgUnit.children)
    }, [data, suppressAlphabeticalSorting])

    useEffect(() => {
        if (onComplete && orgChildren && !onCompleteCalledRef.current) {
            onComplete({ ...node, children: orgChildren })
            onCompleteCalledRef.current = true
        }
    }, [onComplete, orgChildren, onCompleteCalledRef])

    return { called, loading, error: error || null, data: orgChildren }
 }
diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/use-force-reload.js b/components/organisation-unit-tree/src/organisation-unit-tree/use-force-reload.js
    useEffect(() => {
        const nextReloadId = reloadId + 1
        forceReload === true && setReloadId(nextReloadId)
    }, [forceReload])

    return reloadId
 }
diff --git a/components/sharing-dialog/src/autocomplete/sharing-autocomplete.js b/components/sharing-dialog/src/autocomplete/sharing-autocomplete.js
     * clear the selection.
     */

    const debouncedRefetch = useCallback(debounce(refetch, 250), [refetch])

    useEffect(() => {
        if (search && search === selected) {
            onSelection(null)
            setShowResults(false)
        }
    }, [search])

    // Concatenate all the results
    let results = []
diff --git a/components/sharing-dialog/src/sharing-dialog.js b/components/sharing-dialog/src/sharing-dialog.js

    useEffect(() => {
        refetch({ type, id })
    }, [type, id])

    /**
     * Block interaction during the initial load
	}

	return clearAllTimeouts
	}, [hidden])
Check warning on line 101 in components/alert/src/alert-bar/alert-bar.js GitHub Actions / lint `React Hook useEffect has missing dependencies: 'inDOM', 'runHideAnimation', and 'runShowAnimation'. Either include them or remove the dependency array`

	return !inDOM ? null : (
	<div
	if (initialFocus && ref.current) {
	ref.current.focus()
	}
	}, [initialFocus, ref.current])
Check warning on line 37 in components/button/src/button/button.js GitHub Actions / lint `React Hook useEffect has an unnecessary dependency: 'ref.current'. Either exclude it or remove the dependency array. Mutable values like 'ref.current' aren't valid dependencies because mutating them doesn't re-render the component`

	const handleClick = (event) => onClick && onClick({ value, name }, event)
	const handleBlur = (event) => onBlur && onBlur({ value, name }, event)
	// the disconnect function for better readability.
	return () => intersectionObserver.disconnect()
	}
	}, [rootRef.current, intersectionRef.current])
Check warning on line 62 in components/intersection-detector/src/intersection-detector.js GitHub Actions / lint `React Hook useEffect has missing dependencies: 'onChange', 'rootRef', and 'threshold'. Either include them or remove the dependency array. Mutable values like 'rootRef.current' aren't valid dependencies because mutating them doesn't re-render the component`

	return (
	<div ref={intersectionRef} className={className} data-test={dataTest}>
	onExpand({ path })
	setOpenedOnce(true)
	}
	}, [autoExpand, openedOnceDueToError])
Check warning on line 29 in components/organisation-unit-tree/src/organisation-unit-node/use-open-state.js GitHub Actions / lint `React Hook useEffect has missing dependencies: 'onExpand' and 'path'. Either include them or remove the dependency array. If 'onExpand' changes too often, find the parent component that defines it and wrap that definition in useCallback`

	const open =
	(autoExpand && !openedOnceDueToError) \|\| !!expanded.includes(path)
	return suppressAlphabeticalSorting
	? orgUnit.children
	: sortNodeChildrenAlphabetically(orgUnit.children)
	}, [data, suppressAlphabeticalSorting])
Check warning on line 47 in components/organisation-unit-tree/src/organisation-unit-node/use-org-children.js GitHub Actions / lint `React Hook useMemo has a missing dependency: 'node.children'. Either include it or remove the dependency array`

	useEffect(() => {
	if (onComplete && orgChildren && !onCompleteCalledRef.current) {
	onComplete({ ...node, children: orgChildren })
	onCompleteCalledRef.current = true
	}
	}, [onComplete, orgChildren, onCompleteCalledRef])
Check warning on line 55 in components/organisation-unit-tree/src/organisation-unit-node/use-org-children.js GitHub Actions / lint `React Hook useEffect has a missing dependency: 'node'. Either include it or remove the dependency array`

	return { called, loading, error: error \|\| null, data: orgChildren }
	}
	useEffect(() => {
	const nextReloadId = reloadId + 1
	forceReload === true && setReloadId(nextReloadId)
	}, [forceReload])
Check warning on line 19 in components/organisation-unit-tree/src/organisation-unit-tree/use-force-reload.js GitHub Actions / lint `React Hook useEffect has a missing dependency: 'reloadId'. Either include it or remove the dependency array`

	return reloadId
	}
	* clear the selection.
	*/

	const debouncedRefetch = useCallback(debounce(refetch, 250), [refetch])
Check warning on line 37 in components/sharing-dialog/src/autocomplete/sharing-autocomplete.js GitHub Actions / lint `React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead`

	useEffect(() => {
	if (search && search === selected) {
	onSelection(null)
	setShowResults(false)
	}
	}, [search])
Check warning on line 50 in components/sharing-dialog/src/autocomplete/sharing-autocomplete.js GitHub Actions / lint `React Hook useEffect has missing dependencies: 'debouncedRefetch', 'onSelection', and 'selected'. Either include them or remove the dependency array. If 'onSelection' changes too often, find the parent component that defines it and wrap that definition in useCallback`

	// Concatenate all the results
	let results = []

	useEffect(() => {
	refetch({ type, id })
	}, [type, id])
Check warning on line 88 in components/sharing-dialog/src/sharing-dialog.js GitHub Actions / lint `React Hook useEffect has a missing dependency: 'refetch'. Either include it or remove the dependency array`

	/**
	* Block interaction during the initial load