Skip to content

Commit d2324bb

Browse files
teodoranemesteodoranemes
authored
feat: Implementation of the boxShadow feature for Button Style API (#3767)
1 parent 4d187c3 commit d2324bb

File tree

7 files changed

+135
-26
lines changed

7 files changed

+135
-26
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@
167167
{
168168
"path": "lib/components/internal/widget-exports.js",
169169
"brotli": false,
170-
"limit": "835 kB",
170+
"limit": "840 kB",
171171
"ignore": "react-dom"
172172
}
173173
],

‎pages/button/style-custom-types.page.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ function CustomButton({ children, colorTheme, id, isDisabled, isLoading, onClick
7373
focusRing,
7474
paddingBlock: '12px',
7575
paddingInline: '16px',
76+
boxShadow: boxShadows[mode][colorTheme],
7677
},
7778
}}
7879
>
@@ -173,3 +174,70 @@ const focusRings = {
173174
borderWidth: '2px',
174175
},
175176
};
177+
178+
const boxShadows = {
179+
light: {
180+
default: {
181+
active: '0 4px 8px rgba(0, 128, 128, 0.3)',
182+
default: '0 2px 4px rgba(0, 128, 128, 0.2)',
183+
disabled: 'none',
184+
hover: '0 6px 12px rgba(0, 128, 128, 0.25)',
185+
},
186+
error: {
187+
active: '0 4px 8px rgba(255, 0, 0, 0.3)',
188+
default: '0 2px 4px rgba(255, 0, 0, 0.2)',
189+
disabled: 'none',
190+
hover: '0 6px 12px rgba(255, 0, 0, 0.25)',
191+
},
192+
info: {
193+
active: '0 4px 8px rgba(0, 0, 255, 0.3)',
194+
default: '0 2px 4px rgba(0, 0, 255, 0.2)',
195+
disabled: 'none',
196+
hover: '0 6px 12px rgba(0, 0, 255, 0.25)',
197+
},
198+
success: {
199+
active: '0 4px 8px rgba(0, 255, 0, 0.3)',
200+
default: '0 2px 4px rgba(0, 255, 0, 0.2)',
201+
disabled: 'none',
202+
hover: '0 6px 12px rgba(0, 255, 0, 0.25)',
203+
},
204+
warning: {
205+
active: '0 4px 8px rgba(255, 165, 0, 0.3)',
206+
default: '0 2px 4px rgba(255, 165, 0, 0.2)',
207+
disabled: 'none',
208+
hover: '0 6px 12px rgba(255, 165, 0, 0.25)',
209+
},
210+
},
211+
dark: {
212+
default: {
213+
active: '0 4px 8px rgba(0, 255, 255, 0.4)',
214+
default: '0 2px 4px rgba(0, 255, 255, 0.3)',
215+
disabled: 'none',
216+
hover: '0 6px 12px rgba(0, 255, 255, 0.35)',
217+
},
218+
error: {
219+
active: '0 4px 8px rgba(255, 100, 100, 0.4)',
220+
default: '0 2px 4px rgba(255, 100, 100, 0.3)',
221+
disabled: 'none',
222+
hover: '0 6px 12px rgba(255, 100, 100, 0.35)',
223+
},
224+
info: {
225+
active: '0 4px 8px rgba(100, 100, 255, 0.4)',
226+
default: '0 2px 4px rgba(100, 100, 255, 0.3)',
227+
disabled: 'none',
228+
hover: '0 6px 12px rgba(100, 100, 255, 0.35)',
229+
},
230+
success: {
231+
active: '0 4px 8px rgba(100, 255, 100, 0.4)',
232+
default: '0 2px 4px rgba(100, 255, 100, 0.3)',
233+
disabled: 'none',
234+
hover: '0 6px 12px rgba(100, 255, 100, 0.35)',
235+
},
236+
warning: {
237+
active: '0 4px 8px rgba(255, 200, 100, 0.4)',
238+
default: '0 2px 4px rgba(255, 200, 100, 0.3)',
239+
disabled: 'none',
240+
hover: '0 6px 12px rgba(255, 200, 100, 0.35)',
241+
},
242+
},
243+
};

‎src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap‎

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5083,18 +5083,6 @@ If the \`rel\` property is provided, it overrides the default behavior.",
50835083
"type": "string",
50845084
},
50855085
{
5086-
"description": "Specifies an object of selectors and properties that are used to apply custom styles.
5087-
5088-
- \`root.background\` {active, default, disabled, hover} - (Optional) Background for component states.
5089-
- \`root.borderColor\` {active, default, disabled, hover} - (Optional) Border color for component states.
5090-
- \`root.borderRadius\` (string) - (Optional) Border radius style.
5091-
- \`root.borderWidth\` (string) - (Optional) Border width style.
5092-
- \`root.color\` {active, default, disabled, hover} - (Optional) Color for component states.
5093-
- \`root.focusRing.borderColor\` (string) - (Optional) Focus ring border color.
5094-
- \`root.focusRing.borderRadius\` (string) - (Optional) Focus ring border radius.
5095-
- \`root.focusRing.borderWidth\` (string) - (Optional) Focus ring border width.
5096-
- \`root.paddingBlock\` (string) - (Optional) Block dimension padding.
5097-
- \`root.paddingInline\` (string) - (Optional) Inline dimension padding.",
50985086
"inlineType": {
50995087
"name": "ButtonProps.Style",
51005088
"properties": [
@@ -5174,6 +5162,37 @@ If the \`rel\` property is provided, it overrides the default behavior.",
51745162
"optional": true,
51755163
"type": "string",
51765164
},
5165+
{
5166+
"inlineType": {
5167+
"name": "object",
5168+
"properties": [
5169+
{
5170+
"name": "active",
5171+
"optional": true,
5172+
"type": "string",
5173+
},
5174+
{
5175+
"name": "default",
5176+
"optional": true,
5177+
"type": "string",
5178+
},
5179+
{
5180+
"name": "disabled",
5181+
"optional": true,
5182+
"type": "string",
5183+
},
5184+
{
5185+
"name": "hover",
5186+
"optional": true,
5187+
"type": "string",
5188+
},
5189+
],
5190+
"type": "object",
5191+
},
5192+
"name": "boxShadow",
5193+
"optional": true,
5194+
"type": "{ active?: string | undefined; default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; }",
5195+
},
51775196
{
51785197
"inlineType": {
51795198
"name": "object",
@@ -5246,7 +5265,7 @@ If the \`rel\` property is provided, it overrides the default behavior.",
52465265
},
52475266
"name": "root",
52485267
"optional": true,
5249-
"type": "{ background?: { active?: string | undefined; default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; } | undefined; borderColor?: { active?: string | undefined; default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; } | undefined; ... 5 more ...; pa...",
5268+
"type": "{ background?: { active?: string | undefined; default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; } | undefined; borderColor?: { active?: string | undefined; default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; } | undefined; ... 6 more ...; pa...",
52505269
},
52515270
],
52525271
"type": "object",

‎src/button/__tests__/button.test.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -869,6 +869,12 @@ describe('Style API', () => {
869869
borderRadius: '50px',
870870
borderWidth: '25px',
871871
},
872+
boxShadow: {
873+
active: '0 0 10px red',
874+
default: '0 0 5px blue',
875+
disabled: '0 0 2px gray',
876+
hover: '0 0 8px green',
877+
},
872878
},
873879
},
874880
});
@@ -900,5 +906,17 @@ describe('Style API', () => {
900906
expect(getComputedStyle(wrapper.getElement()).getPropertyValue(customCssProps.styleFocusRingBorderWidth)).toBe(
901907
'25px'
902908
);
909+
expect(getComputedStyle(wrapper.getElement()).getPropertyValue(customCssProps.styleBoxShadowActive)).toBe(
910+
'0 0 10px red'
911+
);
912+
expect(getComputedStyle(wrapper.getElement()).getPropertyValue(customCssProps.styleBoxShadowDefault)).toBe(
913+
'0 0 5px blue'
914+
);
915+
expect(getComputedStyle(wrapper.getElement()).getPropertyValue(customCssProps.styleBoxShadowDisabled)).toBe(
916+
'0 0 2px gray'
917+
);
918+
expect(getComputedStyle(wrapper.getElement()).getPropertyValue(customCssProps.styleBoxShadowHover)).toBe(
919+
'0 0 8px green'
920+
);
903921
});
904922
});

‎src/button/interfaces.ts‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -209,18 +209,6 @@ export interface ButtonProps extends BaseComponentProps, BaseButtonProps {
209209
iconAlt?: string;
210210

211211
/**
212-
* Specifies an object of selectors and properties that are used to apply custom styles.
213-
*
214-
* - `root.background` {active, default, disabled, hover} - (Optional) Background for component states.
215-
* - `root.borderColor` {active, default, disabled, hover} - (Optional) Border color for component states.
216-
* - `root.borderRadius` (string) - (Optional) Border radius style.
217-
* - `root.borderWidth` (string) - (Optional) Border width style.
218-
* - `root.color` {active, default, disabled, hover} - (Optional) Color for component states.
219-
* - `root.focusRing.borderColor` (string) - (Optional) Focus ring border color.
220-
* - `root.focusRing.borderRadius` (string) - (Optional) Focus ring border radius.
221-
* - `root.focusRing.borderWidth` (string) - (Optional) Focus ring border width.
222-
* - `root.paddingBlock` (string) - (Optional) Block dimension padding.
223-
* - `root.paddingInline` (string) - (Optional) Inline dimension padding.
224212
* @awsuiSystem core
225213
*/
226214
style?: ButtonProps.Style;
@@ -265,6 +253,12 @@ export namespace ButtonProps {
265253
};
266254
borderRadius?: string;
267255
borderWidth?: string;
256+
boxShadow?: {
257+
active?: string;
258+
default?: string;
259+
disabled?: string;
260+
hover?: string;
261+
};
268262
color?: {
269263
active?: string;
270264
default?: string;

‎src/button/style.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,12 @@ export function getButtonStyles(style: ButtonProps['style']) {
2626
[customCssProps.styleBorderColorDisabled]: style.root.borderColor?.disabled,
2727
[customCssProps.styleBorderColorHover]: style.root.borderColor?.hover,
2828
}),
29+
...(style?.root?.boxShadow && {
30+
[customCssProps.styleBoxShadowActive]: style.root.boxShadow?.active,
31+
[customCssProps.styleBoxShadowDefault]: style.root.boxShadow?.default,
32+
[customCssProps.styleBoxShadowDisabled]: style.root.boxShadow?.disabled,
33+
[customCssProps.styleBoxShadowHover]: style.root.boxShadow?.hover,
34+
}),
2935
...(style?.root?.color && {
3036
[customCssProps.styleColorActive]: style.root.color?.active,
3137
[customCssProps.styleColorDefault]: style.root.color?.default,

‎src/button/styles.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
background: var(#{custom-props.$styleBackgroundDefault}, map.get($variant, 'default-background'));
1616
color: var(#{custom-props.$styleColorDefault}, map.get($variant, 'default-color'));
1717
border-color: var(#{custom-props.$styleBorderColorDefault}, #{map.get($variant, 'default-border-color')});
18+
box-shadow: var(#{custom-props.$styleBoxShadowDefault});
1819
border-block-width: map.get($variant, 'border-width');
1920
border-inline-width: map.get($variant, 'border-width');
2021
position: relative;
@@ -27,19 +28,22 @@
2728
background: var(#{custom-props.$styleBackgroundHover}, map.get($variant, 'hover-background'));
2829
border-color: var(#{custom-props.$styleBorderColorHover}, map.get($variant, 'hover-border-color'));
2930
color: var(#{custom-props.$styleColorHover}, map.get($variant, 'hover-color'));
31+
box-shadow: var(#{custom-props.$styleBoxShadowHover});
3032
text-decoration: none;
3133
}
3234

3335
&:active {
3436
background: var(#{custom-props.$styleBackgroundActive}, map.get($variant, 'active-background'));
3537
border-color: var(#{custom-props.$styleBorderColorActive}, map.get($variant, 'active-border-color'));
3638
color: var(#{custom-props.$styleColorActive}, map.get($variant, 'active-color'));
39+
box-shadow: var(#{custom-props.$styleBoxShadowActive});
3740
}
3841

3942
&.disabled {
4043
background: var(#{custom-props.$styleBackgroundDisabled}, map.get($variant, 'disabled-background'));
4144
border-color: var(#{custom-props.$styleBorderColorDisabled}, map.get($variant, 'disabled-border-color'));
4245
color: var(#{custom-props.$styleColorDisabled}, map.get($variant, 'disabled-color'));
46+
box-shadow: var(#{custom-props.$styleBoxShadowDisabled});
4347
text-decoration: none;
4448
cursor: auto;
4549
}

0 commit comments

Comments
 (0)