The `line-height` and `padding` values are updated, to account for the
previous confusion of calculating these values for a 15px base value,
instead of the required 16px base font value.
The other changes in this commit include the `font-weight` and `gap`
properties, which are modified following the design discussion on CZO.
This commit replaces the use of `scale`, with `clip-path` for showing
the shrinking animation on the active state of action buttons. This
prevents the font and the icon from scaling with the element, which
removes the unwanted jitter during the animation.
The commit also makes necessary changes to the focus outline on the
buttons, to accommodate the use of clip-path and to improve the visuals.
This commit also adds the `transition` property to the action buttons
to smooth out the animations between the element states.
This commit center aligns the icon inside the icon-button across
different button sizes. This also sets the aspect-ratio of icon
buttons to 1:1, to constraint these buttons to a square shape.
This commit adds the icon-only button styles to the codebase along with
appending this new button style to the storybook-style page in
`/devtools/buttons` to view and test the icon-only button component.
The redesigned icon button component, uses the `icon-button` class to
follow Zulip's no-abbreviation policy, and to avoid conflicts with the
pre-existing `button` and bootstrap `btn` classes.
A button using this new style, should use the following classes,
- First, the base `icon-button` class which defines the structure
and behavior of the button. (Required)
- Second, a `icon-button-square` class, to be used in conjecture
with the `icon-button` class which provides the style for the squared
button style of icon button. (Optional)
- Third, a modifier class like `icon-button-neutral` which
defines the colors for the particular icon button type. (Required)
This commit adds the redesigned button styles to the codebase along with
with a storybook-style page in `/devtools/buttons` to view and test the
redesigned button component.
The redesigned button component, uses the `action-button` class to
follow Zulip's no-abbreviation policy, and to avoid conflicts with the
pre-existing `button` and bootstrap `btn` classes.
A button using the new redesigned styles, required two classes,
- First, the base `action-button` class which defines the structure
and behavior of the button.
- Second, a modifier class like `action-button-primary-neutral` which
defines the styles for the particular action button type.
