Style Helper
This is a helper for authoring conditional values for property styles.
Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way.
Anchor to stylehelperStyleHelper
- Anchor to defaultdefault<T>(defaultValue: T) => <T, >required
Sets an optional default value to use when no other condition is met.
- Anchor to whenwhen<T>(conditions: , value: T) => <T, >required
Adjusts the style based on different conditions. All conditions, expressed as a literal object, must be met for the associated value to be applied.
The
when
method can be chained together to build more complex styles.
DocsStyle
- default
Sets an optional default value to use when no other condition is met.
<T>(defaultValue: T) => StylesConditionalStyle<T, StylesBaseConditions>
- when
Adjusts the style based on different conditions. All conditions, expressed as a literal object, must be met for the associated value to be applied. The `when` method can be chained together to build more complex styles.
<T>(conditions: StylesConditions, value: T) => StylesConditionalStyle<T, StylesBaseConditions>
export interface DocsStyle {
/**
* Sets an optional default value to use when no other condition is met.
*
* @param defaultValue The default value
* @returns The chainable condition style
*/
default: <T>(defaultValue: T) => StylesConditionalStyle<T>;
/**
* Adjusts the style based on different conditions. All conditions, expressed
* as a literal object, must be met for the associated value to be applied.
*
* The `when` method can be chained together to build more complex styles.
*
* @param conditions The condition(s)
* @param value The conditional value that can be applied if the conditions are met
* @returns The chainable condition style
*/
when: <T>(
conditions: StylesConditions,
value: T,
) => StylesConditionalStyle<T>;
}
StylesConditionalStyle
- conditionals
An array of conditional values.
StylesConditionalValue<T, AcceptedConditions>[]
- default
The default value applied when none of the conditional values specified in `conditionals` are met.
T
export interface StylesConditionalStyle<
T,
AcceptedConditions extends StylesBaseConditions = StylesBaseConditions,
> {
/**
* The default value applied when none of the conditional values
* specified in `conditionals` are met.
*/
default?: T;
/**
* An array of conditional values.
*/
conditionals: StylesConditionalValue<T, AcceptedConditions>[];
}
StylesConditionalValue
- conditions
The conditions that must be met for the value to be applied. At least one condition must be specified.
AcceptedConditions
- value
The value that will be applied if the conditions are met.
T
export interface StylesConditionalValue<
T,
AcceptedConditions extends StylesBaseConditions = StylesBaseConditions,
> {
/**
* The conditions that must be met for the value to be applied. At least one
* condition must be specified.
*/
conditions: AcceptedConditions;
/**
* The value that will be applied if the conditions are met.
*/
value: T;
}
StylesBaseConditions
- focus
true
- hover
true
- resolution
1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4
- viewportInlineSize
{ min: ViewportInlineSize; }
export interface StylesBaseConditions {
viewportInlineSize?: {min: ViewportInlineSize};
hover?: true;
focus?: true;
resolution?: 1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4;
}
ViewportInlineSize
'extraSmall' | 'small' | 'medium' | 'large'
StylesConditions
- focus
true
- hover
true
- viewportInlineSize
{ min: ViewportInlineSize; }
export interface StylesConditions {
viewportInlineSize?: {min: ViewportInlineSize};
hover?: true;
focus?: true;
}
Import the Style helper
examples
Import the Style helper
React
import { reactExtension, Style, View, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension('purchase.checkout.block.render', () => ( <Extension /> )); function Extension() { return ( <View maxInlineSize={Style.default(200) .when({viewportInlineSize: {min: 'small'}}, 300) .when({viewportInlineSize: {min: 'medium'}}, 400) .when({viewportInlineSize: {min: 'large'}}, 800)} > Responsive Content </View> ); }
JS
import {Style, View, extension} from '@shopify/ui-extensions/checkout'; export default extension('purchase.checkout.block.render', (root) => { const view = root.createComponent( View, { border: 'base', padding: 'base', maxInlineSize: Style.default(200) .when({viewportInlineSize: {min: 'small'}}, 300) .when({viewportInlineSize: {min: 'medium'}}, 400) .when({viewportInlineSize: {min: 'large'}}, 800), }, 'Responsive Content', ); root.appendChild(view); });
Anchor to conditionsConditions
The following conditions are supported for conditional styles.
Multiple conditions can be set on the same when
method.
Name | Type | Description |
---|---|---|
"hover" | true | This condition is met when an element is hovered on with the cursor (mouse pointer). |
"focus" | true | This condition is met when an element is clicked, tapped on or selected using the Tab key. |
viewportInlineSize | {min: "small" | "medium" | "large"} | This condition is met when the device matches the minimum width. |
Anchor to examplesExamples
This section provides examples of conditions.
Anchor to example-default-style-with-conditionsDefault Style With Conditions
Default styling can be combined with specific conditions. In this example, the Grid’s children will be stacked by default and side by side on viewports above the small
breakpoint.
Anchor to example-simple-conditionSimple Condition
Using simple conditional styling enables you to specify a styling change when a condition is met. In this example, the View’s padding will be loose
on hover.
Anchor to example-conditionally-hiding-contentConditionally hiding content
Using the display
property with conditional styles enables you to hide content for certain viewport sizes. In this example, the View will be hidden on small and above screen sizes.
Default Style With Conditions
React
examples
Default Style With Conditions
description
Default styling can be combined with specific conditions. In this example, the Grid’s children will be stacked by default and side by side on viewports above the <code>small</code> breakpoint.
React
<Grid columns={Style.default('fill').when({viewportInlineSize: {min: 'small'}}, [ '30%', '70%', ])} > <View>Content</View> <View>Content</View> </Grid>;
Simple Condition
description
Using simple conditional styling enables you to specify a styling change when a condition is met. In this example, the View’s padding will be <code>loose</code> on hover.
React
<Pressable onPress={() => alert('press')} border={Style.default(['base', 'dotted']).when( {viewportInlineSize: {min: 'small'}}, ['base', 'dotted', 'none', 'base'], )} > Content </Pressable>;
Conditionally hiding content
description
Using the `display` property with conditional styles enables you to hide content for certain viewport sizes. In this example, the View will be hidden on small and above screen sizes.
React
<View display={Style.default('auto').when( {viewportInlineSize: {min: 'small'}}, 'none', )} > Content </View>;