Skip to content

Commit

Permalink
Merge pull request #488 from ably/encapsulated-icons
Browse files Browse the repository at this point in the history 
[WEB-3979] Additional modification props for Encapsulated icons
  • Loading branch information
@jamiehenson
jamiehenson authored Sep 19, 2024
2 parents 18de5c0 + ce1cac8 commit e7bf170
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 26 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ably/ui",
"version": "14.6.0-dev.fd4036a",
"version": "14.6.1",
"description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
"repository": {
"type": "git",
Expand Down
11 changes: 9 additions & 2 deletions src/core/Icon/EncapsulatedIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,34 @@ import { ColorClass, Theme } from "../styles/colors/types";
type EncapsulatedIconProps = {
theme?: Theme;
className?: string;
innerClassName?: string;
iconSize?: string;
} & IconProps;

const EncapsulatedIcon = ({
theme = "dark",
size = "40px",
iconSize,
className,
innerClassName,
...iconProps
}: EncapsulatedIconProps) => {
const t = (color: ColorClass) => determineThemeColor("dark", theme, color);
const numericalSize = parseInt(size, 10);
const numericalIconSize = iconSize
? parseInt(iconSize, 10)
: numericalSize - 12;

return (
<div
className={`p-1 rounded-lg ${theme === "light" ? "bg-gradient-to-t" : "bg-gradient-to-b"} ${t("from-neutral-900")} ${className ?? ""}`}
style={{ width: numericalSize, height: numericalSize }}
>
<div
className={`flex items-center justify-center rounded-lg ${t("bg-neutral-1100")}`}
className={`flex items-center justify-center rounded-lg ${t("bg-neutral-1100")} ${innerClassName ?? ""}`}
style={{ height: numericalSize - 2 }}
>
<Icon size={`${numericalSize - 12}`} {...iconProps} />
<Icon size={`${numericalIconSize}`} {...iconProps} />
</div>
</div>
);
Expand Down
24 changes: 12 additions & 12 deletions src/core/Icon/__snapshots__/Icon.stories.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`JS Components/Icon DarkEncapsulatedIcons smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-1100"
<div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
style="height: 38px;"
>
<svg class=" "
Expand All @@ -34,7 +34,7 @@ exports[`JS Components/Icon DarkEncapsulatedIcons smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-1100"
<div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
style="height: 38px;"
>
<svg class=" "
Expand All @@ -57,7 +57,7 @@ exports[`JS Components/Icon DarkEncapsulatedIcons smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-1100"
<div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
style="height: 38px;"
>
<svg class=" "
Expand All @@ -80,7 +80,7 @@ exports[`JS Components/Icon DarkEncapsulatedIcons smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-1100"
<div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
style="height: 38px;"
>
<svg class=" "
Expand All @@ -103,7 +103,7 @@ exports[`JS Components/Icon DarkEncapsulatedIcons smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-1100"
<div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
style="height: 38px;"
>
<svg class=" "
Expand All @@ -126,7 +126,7 @@ exports[`JS Components/Icon DarkEncapsulatedIcons smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-1100"
<div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
style="height: 38px;"
>
<svg class=" "
Expand Down Expand Up @@ -1966,7 +1966,7 @@ exports[`JS Components/Icon LightEncapsulatedIcons smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-200"
<div class="flex items-center justify-center rounded-lg bg-neutral-200 "
style="height: 38px;"
>
<svg class=" "
Expand All @@ -1989,7 +1989,7 @@ exports[`JS Components/Icon LightEncapsulatedIcons smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-200"
<div class="flex items-center justify-center rounded-lg bg-neutral-200 "
style="height: 38px;"
>
<svg class=" "
Expand All @@ -2012,7 +2012,7 @@ exports[`JS Components/Icon LightEncapsulatedIcons smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-200"
<div class="flex items-center justify-center rounded-lg bg-neutral-200 "
style="height: 38px;"
>
<svg class=" "
Expand All @@ -2035,7 +2035,7 @@ exports[`JS Components/Icon LightEncapsulatedIcons smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-200"
<div class="flex items-center justify-center rounded-lg bg-neutral-200 "
style="height: 38px;"
>
<svg class=" "
Expand All @@ -2058,7 +2058,7 @@ exports[`JS Components/Icon LightEncapsulatedIcons smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-200"
<div class="flex items-center justify-center rounded-lg bg-neutral-200 "
style="height: 38px;"
>
<svg class=" "
Expand All @@ -2081,7 +2081,7 @@ exports[`JS Components/Icon LightEncapsulatedIcons smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-200"
<div class="flex items-center justify-center rounded-lg bg-neutral-200 "
style="height: 38px;"
>
<svg class=" "
Expand Down
22 changes: 11 additions & 11 deletions src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smok
<div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-1100"
<div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
style="height: 38px;"
>
<svg class=" "
Expand Down Expand Up @@ -39,7 +39,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-1100"
<div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
style="height: 38px;"
>
<svg class=" "
Expand Down Expand Up @@ -68,7 +68,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-1100"
<div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
style="height: 38px;"
>
<svg class=" "
Expand Down Expand Up @@ -97,7 +97,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-1100"
<div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
style="height: 38px;"
>
<svg class=" "
Expand Down Expand Up @@ -126,7 +126,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-1100"
<div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
style="height: 38px;"
>
<svg class=" "
Expand Down Expand Up @@ -155,7 +155,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-1100"
<div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
style="height: 38px;"
>
<svg class=" "
Expand Down Expand Up @@ -209,7 +209,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-200"
<div class="flex items-center justify-center rounded-lg bg-neutral-200 "
style="height: 38px;"
>
<svg class=" "
Expand Down Expand Up @@ -250,7 +250,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-1100"
<div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
style="height: 38px;"
>
<svg class=" "
Expand Down Expand Up @@ -279,7 +279,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-200"
<div class="flex items-center justify-center rounded-lg bg-neutral-200 "
style="height: 38px;"
>
<svg class=" "
Expand Down Expand Up @@ -320,7 +320,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-1100"
<div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
style="height: 38px;"
>
<svg class=" "
Expand Down Expand Up @@ -349,7 +349,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
<div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
style="width: 40px; height: 40px;"
>
<div class="flex items-center justify-center rounded-lg bg-neutral-200"
<div class="flex items-center justify-center rounded-lg bg-neutral-200 "
style="height: 38px;"
>
<svg class=" "
Expand Down

0 comments on commit e7bf170

Please sign in to comment.