4.8.0 • Published 4 years ago

@microsoft/fast-jss-utilities v4.8.0

Weekly downloads
590
License
MIT
Repository
github
Last release
4 years ago

FAST JSS utilities

This package is a collection of utilities intended to be used with JSS (JavaScript Style Sheets) projects.

Installation

npm i --save @microsoft/fast-jss-utilities

Usage

Direction

The Direction is an enum which can be either ltr or rtl.

import { Direction } from "@microsoft/fast-jss-utilities";

const direction = Direction.ltr;

localizeSpacing

The localizeSpacing function should be used in conjuction with Direction to switch the spacing on a padding or margin.

import { Direction, localizeSpacing } from "@microsoft/fast-jss-utilities";

const styles = {
    button: {
        padding: localizeSpacing(Direction.ltr)("8px 8px 12px 12px")
    }
};

applyFocusVisible

applyFocusVisible accepts style(s) and an optional selector string. applyFocusVisible automatically removes user-agent focus outlines by setting outline: "none".

This function implements the utility for all focus states, if you want to enable focus-visible support you should implement the focus-visible polyfill. Styles that are given will be returned with a focus selector that is based on whether focus-visible is supported natively by the browser, if focus-visible is not supported we apply selectors that mimic polyfill's behavior. If a selector has been passed, this will be added to the focus selector string for the styles. If you are padding a selector be sure to include a space before the selector so it appends properly.

import { applyFocusVisible } from "@microsoft/fast-jss-utilities";

const styles = {
    myComponent: {
        background: "blue",
        ...applyFocusVisible({
            background: "red",
        }),
    },
    myOtherComponent: {
        ...applyFocusVisible("& $optionalSelectorClass", {
            background: "red"
        })
    }
}
    myComponent {
        background: blue;
    }

    myComponent:focus-visible {
        background: red;
    }

    myOtherComponent:focus-visible .optionalSelectorClass {
        background: red;
    }

applyLocalizedProperty

The applyLocalizedProperty function will swap the strings for the property based on the Direction.

import { Direction, applyLocalizedProperty } from "@microsoft/fast-jss-utilities";

const styles = {
    button: {
        [applyLocalizedProperty("left", "right", Direction.ltr)]: "0"
    }
};

toPx

The toPx function transforms a number to a string appended with px.

import { toPx } from "@microsoft/fast-jss-utilities";

const styles = {
    button: {
        padding: toPx(5)
    }
};

applyMaxLines

The applyMaxLines function is used whenever there is a limit on the number of lines shown. It takes two parameters, the number of lines and the line-height in px.

import { applyMaxLines } from "@microsoft/fast-jss-utilities";

const styles = {
    button: {
        ...applyMaxLines(2, 24)
    }
};

applyScreenReader

The applyScreenReader function should be used whenever there is an item that is hidden from a sighted user but visible to screen readers.

import { applyScreenReader } from "@microsoft/fast-jss-utilities";

const styles = {
    label: {
        ...applyScreenReader()
    }
};

ellipsis

The ellipsis function will create the standard CSS needed to give an element with text an ellipsis.

import { ellipsis } from "@microsoft/fast-jss-utilities";

const styles = {
    label: {
        ...ellipsis()
    }
};

applyAcrylic

The applyAcrylic function can be used to create a partially transparent texture for the background of a specific element.

import { applyAcrylic } from "@microsoft/fast-jss-utilities";

const acrylicConfig: IAcrylicConfig = {
    backgroundColor: "rgba(0, 0, 0, 0.6)",
    fallbackBackgroundColor: "#000000",
    blurRadius: "20px",
    saturation: "112%",
}

const styles = {
    backgroundElement: {
        ...applyAcrylic<IDesignSystem>(acrylicConfig)
    }
};

withDefaults

The withDefaults function can be used to ensure that all properties of a given object are assigned values.

import { withDefaults } from "@microsoft/fast-jss-utilities";

const globalVariableDefaults: GlobalConfig = {
    backgroundColor: "#000",
    foregroundColor: "#FFF",
    accentColor: "#FB356D"
};

const withGlobalDefaults: (config: Partial<GlobalDefaults>) => GlobalDefaults = (
    config: Partial<GlobalDefaults>
): GlobalDefaults => withDefaults(globalVariableDefaults)(config);

format

The format function is used to format strings with the result of functions. It returns a single function which accepts the design-system the stylesheet is compiled with. The first argument is the string to be formatted - all other arguments should be functions that accept your design-system and return a string. The first formatter function passed replaces the literal string "{0}", while the second replaces "{1}", etc. There is no limit to the number of formatters that can be used with the function:

function getMyColor(designSystem) {
    return designSystem.myColor
}

{
    border: format("1px solid {0}", getMyColor)
}

toString

The toString function is used to convert the return value of a function that accepts the design system to a string.

{
    opacity: toString((designSystem) => designSystem.disabledOpacity)
}

add / subtract / multiply / divide

The add, subtract, multiply, and divide functions are used to operate on numbers or functions that accept design-systems and return numbers. They accept any number of arguments and perform their operations from left to right, starting with the first argument. eg, subtract(10, 2) => 10 - 2 => 8

function fontSize(designSystem): number {
    return designSystem.fontSize;
} 

{
   // ...other styles
   fontSize: multiply(fontSize, 2)
}

important

The important function appends the string " !important" to a string when provided a string argument, or to the result of a function that resolves a string when provided a function argument.

{
    color: important("#fff"), // "#fff !important",
    background: important((designSystem) => "#aaa")(designSystem), // #aaa !important
}
4.8.0

4 years ago

4.7.18

4 years ago

4.7.17

4 years ago

4.7.16

4 years ago

4.7.15

4 years ago

4.7.14

4 years ago

4.7.13

4 years ago

4.7.10-cssmod.0

4 years ago

4.7.12

4 years ago

4.7.11

4 years ago

4.7.10

4 years ago

4.7.9

4 years ago

4.7.8

4 years ago

4.7.7

4 years ago

4.7.6

4 years ago

4.7.5

4 years ago

4.7.4

4 years ago

4.7.3

4 years ago

4.7.2

4 years ago

4.7.1

4 years ago

4.7.0

4 years ago

4.6.9

4 years ago

4.6.8

4 years ago

4.6.7

4 years ago

4.6.6

5 years ago

4.6.5

5 years ago

4.6.4

5 years ago

4.6.3

5 years ago

4.6.2

5 years ago

4.6.1

5 years ago

4.6.0

5 years ago

4.5.5

5 years ago

4.5.4

5 years ago

4.5.3

5 years ago

4.5.2

5 years ago

4.5.1

5 years ago

4.5.0

5 years ago

4.4.1

5 years ago

4.4.0

5 years ago

4.3.0

5 years ago

4.2.1

5 years ago

4.2.0

5 years ago

4.1.0

5 years ago

4.0.0

5 years ago

3.2.5

5 years ago

3.2.4

5 years ago

3.2.3

5 years ago

3.2.2

5 years ago

3.2.1

5 years ago

3.2.0

5 years ago

3.1.0

5 years ago

3.0.8

5 years ago

3.0.7

5 years ago

3.0.6

5 years ago

3.0.5

5 years ago

3.0.4

5 years ago

3.0.3

5 years ago

3.0.2

5 years ago

3.0.1

5 years ago

3.0.0

5 years ago

2.2.2

6 years ago

2.2.1

6 years ago

2.2.0

6 years ago

2.1.0

6 years ago

2.0.0

6 years ago

1.9.2

6 years ago

1.9.1

6 years ago

1.9.0

6 years ago

1.8.0

6 years ago

1.7.0

6 years ago

1.6.0

6 years ago

1.5.0

6 years ago

1.4.0

6 years ago

1.2.0

6 years ago

1.1.0

6 years ago

1.0.4

6 years ago