-
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
daf3641
commit 2271f65
Showing
20 changed files
with
642 additions
and
53 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
13 changes: 13 additions & 0 deletions
13
components/slider/src/section/label/render-section-label.tsx
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,13 @@ | ||
| import { getSlots } from "@fluentui/react-utilities"; | ||
|
|
||
| import React from "react"; | ||
| import { | ||
| SectionLabelSlots, | ||
| SectionLabelState, | ||
| } from "./section-label.types"; | ||
|
|
||
| export const renderSectionLabel_unstable = (state: SectionLabelState) => { | ||
| const { slots, slotProps } = getSlots<SectionLabelSlots>(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 { SectionLabelProps } from "./section-label.types"; | ||
| import { useSectionLabel_unstable } from "./use-section-label"; | ||
| import { useSectionLabelStyles_unstable } from "./use-section-label-styles"; | ||
| import { renderSectionLabel_unstable } from "./render-section-label"; | ||
|
|
||
| export const SectionLabel: ForwardRefComponent<SectionLabelProps> = React | ||
| .forwardRef((props, ref) => { | ||
| const state = useSectionLabel_unstable(props, ref); | ||
|
|
||
| useSectionLabelStyles_unstable(state); | ||
|
|
||
| return renderSectionLabel_unstable(state); | ||
| }); |
35 changes: 35 additions & 0 deletions
35
components/slider/src/section/label/section-label.types.ts
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 SectionLabelDef = { | ||
| edges: SectionEdges; | ||
| label: ReactNode; | ||
| trackColor?: string; | ||
| }; | ||
|
|
||
| export type SectionLabelSlots = { | ||
| root: Slot<"span">; | ||
| }; | ||
|
|
||
| interface SectionEdges { | ||
| left?: number; | ||
| right?: number; | ||
| } | ||
|
|
||
| export type SectionLabelProps = ComponentProps<SectionLabelSlots> & { | ||
| edges: Required<SectionEdges>; | ||
| label: ReactNode; | ||
| trackColor?: string; | ||
| }; | ||
|
|
||
| export type SectionLabelState = | ||
| & ComponentState<SectionLabelSlots> | ||
| & { | ||
| offset: number; | ||
| disabled: boolean; | ||
| active: boolean; | ||
| }; |
71 changes: 71 additions & 0 deletions
71
components/slider/src/section/label/use-section-label-styles.ts
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 { SectionLabelState } from "./section-label.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 useSectionLabelStyles_unstable = ( | ||
| state: SectionLabelState | ||
| ): SectionLabelState => { | ||
| 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,55 @@ | ||
| import { getNativeElementProps } from "@fluentui/react-utilities"; | ||
| import React from "react"; | ||
|
|
||
| import { useSliderContext } from "../../context/slider-context"; | ||
| import { | ||
| SectionLabelProps, | ||
| SectionLabelState, | ||
| } from "./section-label.types"; | ||
| import { toPercent } from "../../utils"; | ||
|
|
||
| export const useSectionLabel_unstable = ( | ||
| props: SectionLabelProps, | ||
| ref: React.Ref<HTMLElement> | ||
| ): SectionLabelState => { | ||
| const { min, max, disabled, values } = useSliderContext(); | ||
|
|
||
| /** | ||
| * The left (end) section position. | ||
| */ | ||
| const left = props.edges.left ?? min; | ||
|
|
||
| /** | ||
| * The right (start) section position. | ||
| */ | ||
| const right = props.edges.right ?? 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, | ||
| }; | ||
| }; |
Oops, something went wrong.