-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(slider): add section labels support
- add sections defined a range with edges - add section labels - add section labels padding-bottom - add section track colors - make slider slider label be active - add option so mark is only active when equal to slider value
- Loading branch information
1 parent
6e299c6
commit 77f3f24
Showing
22 changed files
with
914 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { getSlots } from "@fluentui/react-utilities"; | ||
|
|
||
| import React from "react"; | ||
| import { SectionSlots, SectionState } from "./section.types"; | ||
|
|
||
| export const renderSection_unstable = (state: SectionState) => { | ||
| const { slots, slotProps } = getSlots<SectionSlots>(state); | ||
|
|
||
| return <slots.root {...slotProps.root} />; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { ForwardRefComponent } from "@fluentui/react-utilities"; | ||
| import React from "react"; | ||
|
|
||
| import { SectionProps } from "./section.types"; | ||
| import { useSection_unstable } from "./use-section"; | ||
| import { useSectionStyles_unstable } from "./use-section-styles"; | ||
| import { renderSection_unstable } from "./render-section"; | ||
|
|
||
| export const Section: ForwardRefComponent<SectionProps> = React | ||
| .forwardRef((props, ref) => { | ||
| const state = useSection_unstable(props, ref); | ||
|
|
||
| useSectionStyles_unstable(state); | ||
|
|
||
| return renderSection_unstable(state); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { | ||
| ComponentProps, | ||
| ComponentState, | ||
| Slot, | ||
| } from "@fluentui/react-utilities"; | ||
| import { ReactNode } from "react"; | ||
|
|
||
| export type SectionDef = { | ||
| edges: SectionEdges; | ||
| label: ReactNode; | ||
| trackColor?: string; | ||
| }; | ||
|
|
||
| export type SectionSlots = { | ||
| root: Slot<"span">; | ||
| }; | ||
|
|
||
| interface SectionEdges { | ||
| from?: number; | ||
| to?: number; | ||
| } | ||
|
|
||
| export type SectionProps = ComponentProps<SectionSlots> & { | ||
| edges: Required<SectionEdges>; | ||
| label: ReactNode; | ||
| trackColor?: string; | ||
| }; | ||
|
|
||
| export type SectionState = | ||
| & ComponentState<SectionSlots> | ||
| & { | ||
| offset: number; | ||
| disabled: boolean; | ||
| active: boolean; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import { | ||
| makeStyles, | ||
| mergeClasses, | ||
| shorthands, | ||
| tokens, | ||
| useFluent, | ||
| } from "@fluentui/react-components"; | ||
|
|
||
| import { | ||
| sliderClassNames, | ||
| sliderDurations, | ||
| sliderEasings, | ||
| sliderVars, | ||
| } from "../use-slider-styles"; | ||
| import { SectionState } from "./section.types"; | ||
|
|
||
| const useStyles = makeStyles({ | ||
| root: { | ||
| ...shorthands.transition( | ||
| "color", | ||
| sliderDurations.short, | ||
| sliderEasings.easeOutFast | ||
| ), | ||
| position: "absolute", | ||
| color: `var(${sliderVars.section.color})`, | ||
| top: `var(${sliderVars.thumb.size})`, | ||
| transform: "translateX(-50%)", | ||
| whiteSpace: "nowrap", | ||
| }, | ||
| active: { | ||
| [sliderVars.section.color]: tokens.colorNeutralForeground1, | ||
| }, | ||
| enabled: { | ||
| [sliderVars.section.color]: tokens.colorNeutralForeground2, | ||
| }, | ||
| disabled: { | ||
| [sliderVars.section.color]: tokens.colorNeutralForegroundDisabled, | ||
| }, | ||
| }); | ||
|
|
||
| export const useSectionStyles_unstable = ( | ||
| state: SectionState | ||
| ): SectionState => { | ||
| const styles = useStyles(); | ||
|
|
||
| const { offset, disabled, active } = state; | ||
|
|
||
| const colorStyles = disabled | ||
| ? styles.disabled | ||
| : active | ||
| ? styles.active | ||
| : styles.enabled; | ||
|
|
||
| state.root.className = mergeClasses( | ||
| sliderClassNames.section.label, | ||
| styles.root, | ||
| colorStyles, | ||
| state.root.className | ||
| ); | ||
|
|
||
| const { dir } = useFluent(); | ||
| const offsetDirection = dir === "rtl" ? "right" : "left"; | ||
| state.root.title = ""; | ||
| state.root.style = { | ||
| cursor: "default", | ||
| [offsetDirection]: `${offset}%`, | ||
| ...state.root.style, | ||
| }; | ||
|
|
||
| return state; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import { getNativeElementProps } from "@fluentui/react-utilities"; | ||
| import React from "react"; | ||
|
|
||
| import { useSliderContext } from "../context/slider-context"; | ||
| import { SectionProps, SectionState } from "./section.types"; | ||
| import { toPercent } from "../utils"; | ||
|
|
||
| export const useSection_unstable = ( | ||
| props: SectionProps, | ||
| ref: React.Ref<HTMLElement> | ||
| ): SectionState => { | ||
| const { min, max, disabled, values } = useSliderContext(); | ||
|
|
||
| /** | ||
| * The left (end) section position. | ||
| */ | ||
| const left = props.edges.from ?? min; | ||
|
|
||
| /** | ||
| * The right (start) section position. | ||
| */ | ||
| const right = props.edges.to ?? max; | ||
|
|
||
| /** | ||
| * The sections center position, calculated as the midpoint between left and right. | ||
| */ | ||
| const center = left + (right - left) / 2; | ||
|
|
||
| const maxValue = Math.max(...values); | ||
|
|
||
| // Purpose is to only active labels when value is on the section label and not on the mark. | ||
| const isBeyondLeftOrLeftIsMin = maxValue > left | ||
| || (maxValue === left && left === min); | ||
| const isBeforeRightOrRightIsMax = maxValue < right | ||
| || (maxValue === right && right === max); | ||
| const active = isBeyondLeftOrLeftIsMin && isBeforeRightOrRightIsMax; | ||
|
|
||
| return { | ||
| root: getNativeElementProps("span", { | ||
| ref, | ||
| children: props.label, | ||
| ...props, | ||
| }), | ||
| components: { | ||
| root: "span", | ||
| }, | ||
| offset: toPercent(center, min, max), | ||
| disabled, | ||
| active, | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.